<template>
	<div id="SanDianTu02"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { Scatter } from '@antv/g2plot'

	onMounted(() => {
		fetch('https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json')
			.then((res) => res.json())
			.then((data) => {
				const scatterPlot = new Scatter('SanDianTu02', {
					appendPadding: 30,
					data,
					xField: 'x',
					yField: 'y',
					colorField: 'genre',
					color: [
						'r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9',
						'r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA'
					],
					sizeField: 'size',
					size: [5, 20],
					shape: 'circle',
					yAxis: {
						nice: true,
						line: {
							style: {
								stroke: '#eee'
							}
						}
					},
					xAxis: {
						grid: {
							line: {
								style: {
									stroke: '#eee'
								}
							}
						},
						line: {
							style: {
								stroke: '#eee'
							}
						}
					}
				})
				scatterPlot.render()
			})
	})
</script>

<style scoped></style>
