vue_echarts_dataZoom__0">vue echarts dataZoom 选中区域数据获取

echarts 中选中区域数据获取

<div id="detectLineBox" style="width: 98%;height: 300px;margin-top: 8px"></div>

// 这个数据太麻烦了,我就不写json了,基本写到dataZoon 肯定数据这边没问题了
this.chartLine = echarts.init(document.getElementById('detectLineBox'));
  let _this = this;
  let option = {
      legend: {               //设置区分（哪条线属于什么）
          data: ['持续检数值', '合格数量']
      },
      color: ['#e21335', '#0078c4'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
      tooltip: {
          trigger: "axis"
      },
      grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      dataZoom: [
          {
              type:'slider',//slider表示有滑动块的，inside表示内置的
              show:true,
              xAxisIndex:[0],
              start: 0,
              end: 100
          },
      ],
      xAxis: {
          name: '时间',
          nameTextStyle: {
              fontSize: 16,
              padding: [0, 0, 10, 0]
          },
          type: "category",
          boundaryGap: false,
          data: dateData
      },
      yAxis: {
          minInterval: 1,
          name: '数值',
          nameTextStyle: {
              // color: '#FA6F53',
              fontSize: 16,
              padding: [0, 0, 10, 0]
          },
          axisLine: {
              lineStyle: {
                  color: '#000000',
              }
          },
          type: "value"
      },
      series: [
          {
              name: '持续检数值',
              type: "line",
              stack: "总量",
              data: numberData
          },
      ]
  };
  this.chartLine.setOption(option);
  let that = this;
  // 当滑动条变化时触发
  this.chartLine.on('datazoom',function(params){
      that.$nextTick(() => {
          let xAxis = that.chartLine.getModel().option.xAxis[0]; // 获取x轴数据 我这个是时间
          let series = that.chartLine.getModel().option.series[0]; // 获取数据
          console.log(series); // 这个是获取的数据
          console.log(series.data); 
          console.log(xAxis.rangeStart);//滑动条左端对应在xAxis.data的索引
          console.log(xAxis.rangeEnd);//滑动条右端对应在xAxis.data的索引
      })
  });
  // 下面我就不写了 拿到了变化时的索引,再用索引去取数据,还是比较简单的,主要是这个方法太难找,我找了两天
  才找到, 记录下。