微信小程序使用echarts，拖动图时请求后台接口加载更多数据

微信小程序使用echarts 官方使用示例，在拖动图时请求后台接口加载更多数据

第一步

项目down下来后将ec-canvas文件夹复制到自己的components下，echarts.js文件可以替换为自己自定义构建的js文件（根据自己需要的图和版本build build成功后会下载一个echarts.min.js文件,改成echarts.js然后替换即可）
有看到说5.4.x，5.3.x在小程序上双指缩放都有问题，根据指引选择了用5.1.2版本。

第二步

贴代码！！！本代码的一些引入路径需要根据自己项目路径做修改！！！

//.wxml文件
<view class="main-box">
	<ec-canvas  id="chart" canvas-id="chart" class="chart" ec="{{ ec }}"></ec-canvas>
<view>

//.json
{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  },
  "enablePullDownRefresh": false,
  "pageOrientation": "auto"
}

// wxss
.main-box {
  width: 99%;
  height: 80vh;
  margin: auto;
}
.main-box .chart {
  width: 100%;
  height: 100%;
}

重点js部分

import * as echarts from '../../components/ec-canvas/echarts';
import moment from 'moment'
import {apiData} from "../../api/xx";
const app = getApp()
let chart = null
let data = { datas: [] }
let totalData = []
let page = 1
let start = 0
let end = 0
let option = {
	// option可以根据echarts官方配置手册配置
	...
	dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 0],
          filterMode: 'none',
          startValue: 5,
          endValue: 50,
        }
   ]
}
Page({
  data: {
    ec: {}
  },
  onLoad: function() {
    // 初始化 ECharts
    const initChart = (canvas, width, height, dpr) => {
    // 将 chart 实例保存在页面对象中
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(chart);
      chart.on('datazoom', this.debounce(this.refreshEchart, 3000)); // 绑定缩放拖动事件，防抖
      chart.setOption(option);
      return chart;
    };
  },
  onUnload: function () {
    // 解绑 datazoom 事件
    this.chart.off('datazoom', this.refreshEchart);
  },
  debounce(fn, delay) {
    let timer;
    return function() {
      let context = this;
      let args = arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, delay);
    }
  },
  // 拖动的时候加载数据
  refreshEchart () {
    let that = this
    var startValue = chart.getOption().dataZoom[0].startValue; 
    var endValue = chart.getOption().dataZoom[0].endValue; 
    if (startValue ===0 && endValue - startValue < 50) {  // 我一开始是加载的50条数据，并设置option里的datazoom startValue为5，endvalue为50，这样才能一开始就能拖动，并且通过设置0，50意味着只能向左边拖，去加载左边的数据。如果是startvalue=0,endvalue=50，那就要手动缩放后才能左右拖动。startValue要为0的时候表示已经到了图的最左边，可以去加载更多数据。
    // stratValue和endValue都减小，表示在向左拖动，两个都增大，在右拖动，一个增大一个减小在缩放
      page = page + 1，
      start= startValue + 50, // 加载数据后图表展示的位置还是当前数据，只是左边还多了更多数据，拖动就能查看
      end= endValue + 50， // 加载数据后图表展示的位置还是当前数据，只是左边还多了更多数据，拖动就能查看
      that.getData()
    }
  },
  async getData () {
	 // 获取数据，并且设置option去重新绘制
	 let res = await apiData({page, size: 50 })
	 ...
	 option.dataZoom[0].startValue =  start || 5
	 option.dataZoom[0].endValue = end || 50
	 chart.setOption(option)
  },
});

大概是这样,主要想写的就是绑定datazoom和什么时候去加载更多数据，可以根据自己业务需求实现