在vue2中使用echarts实现x轴y轴气泡图

要在 Vue2 中使用 ECharts 实现 x 轴 y 轴气泡图，你需要先安装 ECharts。

可以通过 npm 或 yarn 安装 ECharts：

npm install echarts --save

# 或者

yarn add echarts

安装完成后，在 Vue 组件中引入 ECharts：

import echarts from 'echarts'

然后在组件的 mounted 钩子函数中初始化 ECharts 实例：

mounted () {
  // 初始化 ECharts 实例
  const chart = echarts.init(this.$refs.chart)

  // 具体的 ECharts 配置
  const option = {
    // 配置项
  }

  // 使用刚指定的配置项和数据显示图表
  chart.setOption(option)
}

对于气泡图，可以使用 scatter 和 visualMap 组件实现。以下是一个简单的示例：

mounted () {
  // 初始化 ECharts 实例
  const chart = echarts.init(this.$refs.chart)

  // ECharts 配置
  const option = {
    xAxis: {
      type: 'value',
      scale: true
    },
    yAxis: {
      type: 'value',
      scale: true
    },
    visualMap: {
      min: 0,
      max: 100,
      dimension: 2,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%'
    },
    series: [{
      type: 'scatter',
      data: [
        [10.0, 8.04, 10],
        [8.0, 6.95, 30],
        [13.0, 7.58, 20],
        [9.0, 8.81, 50],
        [11.0, 8.33, 80],
        [14.0, 9.96, 40],
        [6.0, 7.24, 70],
        [4.0, 4.26, 90],
        [12.0, 10.84, 60],
        [7.0, 4.82, 100],
        [5.0, 5.68, 10]
      ],
      symbolSize: function (data) {
        return Math.sqrt(data[2])
      },
      label: {
        emphasis: {
          show: true,
          formatter: function (param) {
            return param.data[2]
          },
          position: 'top'
        }
      },
      itemStyle: {
        normal: {
          shadowBlur: 10,
          shadowColor: 'rgba(120, 36, 50, 0.5)',
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
            offset: 0,
            color: 'rgb(251, 118, 123)'
          }, {
            offset: 1,
            color: 'rgb(204, 46, 72)'
          }])
        }
      }
    }]
  }

  // 使用刚指定的配置项和数据显示图表
  chart.setOption(option)
}

在模板中添加一个 div 占位符，并设置 ref 属性为 chart：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

这样就可以在 Vue2 中使用 ECharts 实现 x 轴 y 轴气泡图了。