vue中echarts折现图上绘制气泡点，并加入点击事件

1、创建图表元素

 <div ref="chart1" style="width: 100%;height:550px;"></div>

2、引入ECharts主模块 

import * as echarts from 'echarts';

3、data中定义曲线配置项

chartOptions:{
        title:{
          text:"",
          textStyle:{
            color:'black'
          },
          padding:[5,5,20,5]
        },
        dataZoom: [{
          start: 0,
          end: 100
        }, {
          type: 'inside'
        }],
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            saveAsImage: {}
          }
        },
        xAxis: {
          data: [],
          name:'时间',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'black'
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [10, 10]
        },
        yAxis: {
          type: 'value',
          name: "",
          axisTick: {
            show: true
          },
          nameTextStyle:{
            color:'black'
          },
          axisLabel:{
            color:'black'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'black',
              width: '2'
            }
          }
        },
        legend: {
          data: ['aa', 'bb'],
          selected:{'aa':true, 'bb':true},
          type:'scroll',
          top:0
        },
        series: [ {
          name: 'aa',
          type: 'line',
          smooth: true,		//开启折线平滑
          data: [],
          markPoint: {
            data: [],
            symbol: "pin"
          }
        },
        {
          name: 'bb',
          type: 'line',
          smooth: true,
          data: []
        },]
      }

 4、methods中定义绘制方法

drawLineChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart1 = echarts.init(this.$refs.chart1);
      this.myChart1.setOption(this.chartOptions);
      this.myChart1.off('click') //处理点击重复问题
      this.myChart1.on('click', (params) => {
        if (params.componentType == 'markPoint') {
            if(params.name == 'aa'){
				let indexNum = params.data.coord[0];//可以获取到目前点击的点的index值
              //aa气泡点点击的处理方法
            }else if(params.name == 'bb'){
              //bb气泡点点击的处理方法
            }
        }
      })
    },
//填充曲线数据
 refreshChartData(){
      this.chartOptions.xAxis.data = [];
      this.chartOptions.series[0].markPoint.data=[];
      for(var i=0;i<this.chartOptions.series.length;i++){
        this.chartOptions.series[i].data=[]
      }
	  //this.chartList查询出的数据数组
      for (let i = 0; i < this.chartList.length; i++) {
        this.chartOptions.xAxis.data.push(this.chartList[i].monitorTime);
        this.chartOptions.series[0].data.push(this.chartList[i].aa);
        this.chartOptions.series[1].data.push(this.chartList[i].bb);

        //气泡点内容关联
        if (this.chartList[i].aa > 10) {//判断气泡点显示条件
          this.chartOptions.series[0].markPoint.data.push(
            {
              name: 'aa',
              coord: [i, this.chartList[i].aa],
              label: {
                show: true,
                formatter: '{b}',
                textStyle: {
                  color: 'white'
                }
              },
            }
          );
        }
        if (this.chartList[i].bb > 20) {
          this.chartOptions.series[0].markPoint.data.push(
            {
              name: 'bb',
              coord: [i, this.chartList[i].bb],
              label: {
                show: true,
                formatter: '{b}',
                textStyle: {
                  color: 'white'
                },
                offset: [0, 10]//气泡点位置偏移
              },
              itemStyle: {
                color: 'orange'
              },
              symbolRotate: 180
            }
          );
        }
      }
      this.myChart1.setOption(this.chartOptions);
    },