echarts vue3 气泡图

以下是使用 Vue3 和 ECharts 实现气泡图的示例代码：

首先，在你的项目中安装 echarts 和 vue-echarts：

npm install echarts vue-echarts@5

然后，创建一个 Vue 组件来渲染气泡图：

<template>
  <div class="bubble-chart" ref="chart"></div>
</template>

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

// 使用必要的组件和渲染器
use([CanvasRenderer, ScatterChart, GridComponent, TooltipComponent])

export default defineComponent({
  components: {
    ECharts
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const chart = this.$refs.chart.echartsInstance
      chart.setOption({
        title: {
          text: '气泡图'
        },
        tooltip: {
          trigger: 'axis',
          showDelay: 0,
          axisPointer: {
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            scale: true
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true
          }
        ],
        series: [
          {
            name: '气泡图',
            type: 'scatter',
            data: [
              [10.0, 8.04, 10],
              [8.0, 6.95, 8],
              [13.0, 7.58, 13],
              [9.0, 8.81, 9],
              [11.0, 8.33, 11],
              [14.0, 9.96, 14],
              [6.0, 7.24, 6],
              [4.0, 4.26, 4],
              [12.0, 10.84, 12],
              [7.0, 4.82, 7],
              [5.0, 5.68, 5]
            ],
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5
            },
            label: {
              show: true,
              formatter: function (param) {
                return param.data[2]
              },
              position: 'top'
            },
            itemStyle: {
              color: '#4372e6'
            }
          }
        ]
      })
    }
  }
})
</script>

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

在上面的示例代码中，我们使用了 ECharts 的 ScatterChart 组件来实现气泡图。在 series.data 中设置了气泡图的数据，其中每个点的数据由三个数值组成，分别表示 x 轴、y 轴坐标和气泡大小。通过 symbolSize 属性可以设置气泡的大小，通过 label 属性可以在气泡上显示对应的数值。

最后，在你的页面中使用这个组件即可渲染气泡图：

<template>
  <div>
    <bubble-chart />
  </div>
</template>

<script>
import BubbleChart from './BubbleChart.vue'

export default {
  components: {
    BubbleChart
  }
}
</script>