微信小程序+ECharts实现引用函数数组动态刷新

小程序中实时（间隔1秒等）获取的数据，可能是网络数据，也可能是小程序中某函数产生的数据，需要同步数据更新频率显示出来。点击按钮才显示折线图，不点击不显示。

显示效果：X轴为一个数据dataT，即计数。Y轴有两个数据（dataPV, dataSP），同X轴同步变化（我这里的多个数据其实可以用一个大数组包下，但没学会）。

1，从ECharts官网下载echarts，可以全部下载，也可以定制下载，我需要折线图，选择定制下载。

下载网站：ECharts 在线构建 (apache.org)，下载时选择需要的图表，不选择工具集(工具集有保存图表为图片等功能)。

2，将ec-canvas拷贝到小程序目录中，并代替定值下载的js文件。

3，在.json中定义：

{
 "usingComponents": {
 "ec-canvas": "../../ec-canvas/ec-canvas"
 }
}

4，在.wxml中插入图表：

<view class="my-chart">
 <ec-canvas id="lazy-mychart-dom" canvas-id="lazy-mychart" ec="{{lazyEc}}"></ec-canvas>
</view>

5，在.wxss中定义样式：

.my-chart {
 width: 750rpx;
 height: 500rpx;
}
ec-canvas {
 width: 100%;
 height: 100%;
}

5，在.js中引入图表：

import * as echarts from '../../ec-canvas/echarts'

以上在其它很多地方都有详细介绍，不明白的地方可以参考。

3，在.wxml中添加按钮，点击按钮显示图表：

 <button bindtap="changeType">折线图</button>

4，以下为.js的全部代码（尽量标注清楚了）

import * as echarts from '../../ec-canvas/echarts'
Page({
  data: {
    times: 0,
    lazyEc: {
      lazyLoad: true
 },
    dataT: [],
    dataPV: [],
    dataSP: []
 },
 onLoad(options) {
 //获取到组件
 let that = this;
 this.lazyComponent = this.selectComponent('#lazy-mychart-dom')
 setTimeout(() => {
 this.init([])
 }, 1000)
 },
 init(optionData) { //手动初始化
 this.lazyComponent.init((canvas, width, height, dpr) => {
 let chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRation: dpr
 })
 let option = getOption(optionData)  // echarts的配置信息
 chart.setOption(option)
 this.chart = chart //将图表实例绑定到this上，方便其他函数访问
 return chart
 })
 },
 //mark:点击支出收入
 changeType(e) { //确定按钮，只按一次，可以根据需要做逻辑disable掉
 var temprrT = new Array(50).fill(0);//50个数组，根据需要修改
 var temprrPV = new Array(50).fill(0);
 var temprrSP = new Array(50).fill(0);
 var times = 0;
 this.data.dataT = this.data.dataPV = this.data.dataSP = [0];//这句好像没什么用
 var i = setInterval(() => {
 times++;
 if (times >= 50) { //同上，数据个数根据需要修改
 clearInterval(i)
 } else {
 temprrT.shift()
 temprrT.push(times)
 temprrPV.shift()
 temprrPV.push(Math.random().toFixed(2))
 temprrSP.shift()
 temprrSP.push(Math.random().toFixed(2))
 console.log('数组', temprrT, temprrPV, temprrSP)
 this.setData({
          dataT: temprrT,
          dataPV: temprrPV,
          dataSP: temprrSP
 })
 }
 let option = getOption(this.data.dataT, this.data.dataPV, this.data.dataSP)
 this.chart.setOption(option)
 }, 1000);
 },
})
//mark:getOption
function getOption(dataT, dataPV, dataSP) {
 return {
    title: {
      text: '趋势图',
      left: 'center'
 },
    color: ["#37A2DA"],
    grid: {
      containLabel: true
 },
    tooltip: {
      trigger: 'axis',
 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dataT
 },
    yAxis: {
      type: 'value',
      scale: true,//自动Y轴坐标居中
      boundaryGap: ["0.1", "0.1"],//上下留白10%
      splitLine: {
        lineStyle: {
          type: 'dashed'
 }
 }
 },
    series: [
 {
        name: 'PV',
        type: 'line',
        showSymbol: false,
        smooth: true,
        color: ["#00cc00"],
        data: dataPV
 },
 {
        name: 'SP',
        type: 'line',
        showSymbol: false,
        smooth: true,
        color: ["#f08080"],
        data: dataSP
 }
    ]
 }
}