Skip to content

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>