echarts vue 气泡图

以下是一个简单的 echarts vue 气泡图示例代码：

<template>
  <div class="chart-container">
    <v-chart :options="chartData"></v-chart>
  </div>
</template>

<script>
import { Chart } from 'echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'

use([CanvasRenderer, ScatterChart, GridComponent, TooltipComponent])

export default {
  data() {
    return {
      chartData: {
        title: {
          text: '气泡图示例'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04, 10],
              [8.0, 6.95, 12],
              [13.0, 7.58, 8],
              [9.0, 8.81, 10],
              [11.0, 8.33, 10],
              [14.0, 9.96, 8],
              [6.0, 7.24, 12],
              [4.0, 4.26, 16],
              [12.0, 10.84, 8],
              [7.0, 4.82, 14],
              [5.0, 5.68, 14],
              [3.0, 4.58, 16],
              [1.0, 3.82, 20],
              [2.0, 4.26, 18],
              [0.0, 3.61, 22],
              [1.0, 4.10, 20]
            ],
            type: 'scatter'
          }
        ]
      }
    }
  },
  components: {
    VChart: Chart
  }
}
</script>

<style>
.chart-container {
  height: 500px;
}
</style>

这个示例展示了一个简单的气泡图，x 轴和 y 轴分别表示数据的两个维度，气泡的大小表示第三个维度的大小。你可以根据自己的需求进行修改。