echarts動態賦值結合dataZoom滑動資料

wxml

<view class="container">
   <ec-canvas id="myechart" canvas-id="graph" ec="{{ ec }}"></ec-canvas>
</view>

wxss

.container{width:702rpx;height: 360rpx;position: relative;left:24rpx}
ec-canvas{width: 100%;height: 100%;position: relative;z-index: 1;}

js

import * as echarts from '../../ec-canvas/echarts';
Page({
     onLoad: function (options) {
    let _this = this
    this.echartsComponnet = this.selectComponent('#myechart');
    this.getChartData()
  },
     // 獲取資料
  getOption1: function () {
    var _this = this
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff"
          }
  
        },
      },
      calculable: true,
      xAxis: [{
        type: "category",
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 14,
          textStyle: {
            color: '#333333'
          }
        },
        axisLine: {
          show: false,
          onZero: false
        },
        axisTick: {
          show: false,
        },
        data: _this.data.xData,
      }],
  
      yAxis: [{
        splitNumber: 3,//控制x，y軸對應的展示幾個欄位
        type: "value",
        splitLine: {
          show: false
        },
        axisLabel: {
          show: true,
          fontSize: 14,
          textStyle: {
            color: '#333333'
          }
        },
        axisLine: {
          show: false,
          onZero: false
        },
        axisTick: {
          show: false,
        },
  
      }],
      dataZoom: [{
        show: true,
        backgroundColor:"#D8D8D8", //元件的背景顏色 
        height: 6,
        xAxisIndex: [0],
        bottom: 30,
        "start": 10,
        "end": 40,
        // 拖拽手柄樣式 svg 路徑
        handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
        handleColor: '#fff',
        handleSize: 16,
        handleStyle: {
          borderColor: '#D8D8D8',
          // shadowBlur: 4,
          // shadowOffsetX: 1,
          // shadowOffsetY: 1,
          // shadowColor: '#e5e5e5'
        },
        textStyle: {
          color: "#333333",
        },
        fillerColor: "#5260FF",
        borderColor: "#D8D8D8",
  
      }, {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35
      }],
      series: [{
        type: "line",
        symbolSize: 4,
        symbol: 'circle',
        symbol: 'none',
        smooth: true, //曲線平滑
        itemStyle: {
          normal: {
            color: "#6236FF",
            borderColor: "#6236FF",
            borderWidth:6,
            lineStyle: { //線的顏色
              color: '#6236FF',
              width:4
            },
          },
        },
        data: _this.data.dataCur,
      }]
    }
    return option
  },
  // 頁面一載入獲取圖表資料
  getChartData: function () {
    var that = this
    console.log(that.data.date01, that.data.date02)
    let xDataList = function () {
      var data = [];
      for (var i = 1; i < 31; i++) {
        data.push(i + "日");
      }
      return data;
    }();
    let dataCurList = [1,2,3,4,5,6,7,8,9,10,1,12,1,3,14,5,6,7,8,16,15,8,9,10,1,12,1,3,14,5]
    this.setData({
      dataCur:dataCurList,
      xData:xDataList,
    })
   setTimeout(()=>{
    that.init_echarts()
   },1000)


  },
   //初始化圖表
   init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化圖表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption1());
      Chart.on('datazoom',function(params){
        console.log(params);//裡面存有代表滑動條的起始的數字
        let xAxis=Chart.getModel().option.xAxis[0];//獲取axis
        console.log(xAxis.data);//axis的標號資料
        console.log(xAxis.rangeStart);//滑動條左端對應在xAxis.data的索引
        console.log(xAxis.rangeEnd);//滑動條右端對應在xAxis.data的索引
      })
      // 注意這裡一定要返回 chart 例項，否則會影響事件處理等
      return Chart;
    });
  },
    data: {
    xData:[],//圖表x軸資料的預設值
    dataCur:[],//圖表資料的預設值
    ec: { 
      lazyLoad: true //初始化載入
    },
   }
})