Scatter 散点(气泡)图
基本用法
vue
<script setup>
import { ref } from 'vue'
const data = ref([
[174, 65.6],
[175.3, 71.8],
[193.5, 80.7],
[186.5, 72.6],
[187.2, 78.8],
[181.5, 74.8],
[184, 86.4],
[184.5, 78.4],
[175, 62],
[184, 81.6],
[180, 76.6],
[177.8, 83.6],
[192, 90],
[176, 74.6],
[174, 71],
[184, 79.6],
[192.7, 93.8],
[171.5, 70],
[173, 72.4],
[176, 85.9],
[176, 78.8],
[180.5, 77.8],
[172.7, 66.2],
[176, 86.4],
[173.5, 81.8],
[178, 89.6],
[180.3, 82.8],
[180.3, 76.4],
[164.5, 63.2],
[173, 60.9],
[183.5, 74.8],
[175.5, 70],
[188, 72.4],
[189.2, 84.1],
[172.8, 69.1],
[170, 59.5],
[182, 67.2],
[170, 61.3],
[177.8, 68.6],
[184.2, 80.1],
[186.7, 87.8],
[171.4, 84.7],
[172.7, 73.4],
[175.3, 72.1],
[180.3, 82.6],
[182.9, 88.7],
[188, 84.1],
[177.2, 94.1],
[172.1, 74.9],
[167, 59.1],
[169.5, 75.6],
[174, 86.2],
[172.7, 75.3],
[182.2, 87.1],
[164.1, 55.2],
[163, 57],
[171.5, 61.4],
[184.2, 76.8],
[174, 86.8],
[174, 72.2],
[177, 71.6],
[186, 84.8],
[167, 68.2],
[171.8, 66.1],
[182, 72],
[167, 64.6],
[177.8, 74.8],
[164.5, 70],
[192, 101.6],
[175.5, 63.2],
[171.2, 79.1],
[181.6, 78.9],
[167.4, 67.7],
[181.1, 66],
[177, 68.2],
[174.5, 63.9],
[177.5, 72],
[170.5, 56.8],
[182.4, 74.5],
[197.1, 90.9],
[180.1, 93],
[175.5, 80.9],
[180.6, 72.7],
[184.4, 68],
[175.5, 70.9],
[180.6, 72.5],
[177, 72.5],
[177.1, 83.4],
[181.6, 75.5],
[176.5, 73],
[175, 70.2],
[174, 73.4],
[165.1, 70.5],
[177, 68.9],
[192, 102.3],
[176.5, 68.4],
[169.4, 65.9],
[182.1, 75.7],
[179.8, 84.5],
[175.3, 87.7],
[184.9, 86.4],
[177.3, 73.2],
[167.4, 53.9],
[178.1, 72],
[168.9, 55.5],
[157.2, 58.4],
[180.3, 83.2],
[170.2, 72.7],
[177.8, 64.1],
[172.7, 72.3],
[165.1, 65],
[186.7, 86.4],
[165.1, 65],
[174, 88.6],
[175.3, 84.1],
[185.4, 66.8],
[177.8, 75.5],
[180.3, 93.2],
[180.3, 82.7],
[177.8, 58],
[177.8, 79.5],
[177.8, 78.6],
[177.8, 71.8],
[177.8, 116.4],
[163.8, 72.2],
[188, 83.6],
[198.1, 85.5],
[175.3, 90.9],
[166.4, 85.9],
[190.5, 89.1],
[166.4, 75],
[177.8, 77.7],
[179.7, 86.4],
[172.7, 90.9],
[190.5, 73.6],
[185.4, 76.4],
[168.9, 69.1],
[167.6, 84.5],
[175.3, 64.5],
[170.2, 69.1],
[190.5, 108.6],
[177.8, 86.4],
[190.5, 80.9],
[177.8, 87.7],
[184.2, 94.5],
[176.5, 80.2],
[177.8, 72],
[180.3, 71.4],
[171.4, 72.7],
[172.7, 84.1],
[172.7, 76.8],
[177.8, 63.6],
[177.8, 80.9],
[182.9, 80.9],
[170.2, 85.5],
[167.6, 68.6],
[175.3, 67.7],
[165.1, 66.4],
[185.4, 102.3],
[181.6, 70.5],
[172.7, 95.9],
[190.5, 84.1],
[179.1, 87.3],
[175.3, 71.8],
[170.2, 65.9],
[193, 95.9],
[171.4, 91.4],
[177.8, 81.8],
[177.8, 96.8],
[167.6, 69.1],
[167.6, 82.7],
[180.3, 75.5],
[182.9, 79.5],
[176.5, 73.6],
[186.7, 91.8],
[188, 84.1],
[188, 85.9],
[177.8, 81.8],
[174, 82.5],
[177.8, 80.5],
[171.4, 70],
[185.4, 81.8],
[185.4, 84.1],
[188, 90.5],
[188, 91.4],
[182.9, 89.1],
[176.5, 85],
[175.3, 69.1],
[175.3, 73.6],
[188, 80.5],
[188, 82.7],
[175.3, 86.4],
[170.5, 67.7],
[179.1, 92.7],
[177.8, 93.6],
[175.3, 70.9],
[182.9, 75],
[170.8, 93.2],
[188, 93.2],
[180.3, 77.7],
[177.8, 61.4],
[185.4, 94.1],
[168.9, 75],
[185.4, 83.6],
[180.3, 85.5],
[174, 73.9],
[167.6, 66.8],
[182.9, 87.3],
[160, 72.3],
[180.3, 88.6],
[167.6, 75.5],
[186.7, 101.4],
[175.3, 91.1],
[175.3, 67.3],
[175.9, 77.7],
[175.3, 81.8],
[179.1, 75.5],
[181.6, 84.5],
[177.8, 76.6],
[182.9, 85],
[177.8, 102.5],
[184.2, 77.3],
[179.1, 71.8],
[176.5, 87.9],
[188, 94.3],
[174, 70.9],
[167.6, 64.5],
[170.2, 77.3],
[167.6, 72.3],
[188, 87.3],
[174, 80],
[176.5, 82.3],
[180.3, 73.6],
[167.6, 74.1],
[188, 85.9],
[180.3, 73.2],
[167.6, 76.3],
[183, 65.9],
[183, 90.9],
[179.1, 89.1],
[170.2, 62.3],
[177.8, 82.7],
[179.1, 79.1],
[190.5, 98.2],
[177.8, 84.1],
[180.3, 83.2],
[180.3, 83.2]
])
</script>
<template>
<VueEcharts style="width:100%;height:300px;">
<Scatter :data="data" name="Male" />
<Legend />
<Grid left="3%" right="7%" bottom="3%" containLabel />
<XAxis type="value" scale>
<SplitLine show="false" />
<AxisLabel formatter="{value} cm" />
</XAxis>
<YAxis type="value" scale>
<SplitLine show="false" />
<AxisLabel formatter="{value} kg" />
</YAxis>
<Title text="散点(气泡)图" />
</VueEcharts>
</template>