微信小程序+canvas+echarts循环数据生成折线图

1、下载GitHub上的 ecomfe/echarts-for-weixin 项目

2、拷贝 ec-canvas 目录到自己的项目中

3、循环生成折线图效果预览

4、代码演示 - 在需要的页面创建折线图

test.json

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

test.wxml

<view class="box" wx:for="{{ecLine}}" wx:key="index">
    <ec-canvas ec="{{ ecLine[index] }}"></ec-canvas>
</view>

test.wxss

.box {
	width:100%;
	height:600rpx;
	background-color: pink;
}

test.js

import * as echarts from '../../lib/ec-canvas/echarts.min.js';
function getOption(xAxis, yAxis) {
  var option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis,
      axisLabel: {
        interval: 2, //x轴间隔多少显示刻度
        fontSize: 8,
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: yAxis,
      type: 'line',
      areaStyle: {}
    }]
  };
  return option;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ecLine: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    _this.getDetail();
  },

  getDetail:function() {
    var _this = this;
    // 模拟请求后台接口之后返回的数据
    let dataArr = [
      {
        xAxis: ['02-11', '02-13', '02-15', '02-17', '02-23', '02-25', '02-28'],
        yAxis: [1.4, 1.3, 1.6, 1.9, 1.8, 1.6, 2.0]
      },
      {
        xAxis: ['03-11', '03-13', '03-15', '03-17', '03-23', '03-25', '03-28'],
        yAxis: [2.4, 2.3, 2.6, 1.9, 1.8, 2.6, 2.0]
      }
    ]
    let ecLineArr = [];
    for(let i = 0; i < dataArr.length; i++) {
      let obj = {
        onInit: function (canvas, width, height) {
          //初始化echarts元素
          const chartLine = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(chartLine);
          
          var option = getOption(dataArr[i].xAxis, dataArr[i].yAxis);
          chartLine.setOption(option);
          return chartLine;
        }
      }
      ecLineArr.push(obj);
    }
    _this.setData({
      ecLine: ecLineArr
    })
  },
})

5、遇到的问题-系列一

(1) （有误）onInit 后面的函数只接受3个参数，如果在这里传入xAxis和yAxis，在函数里面是接收不到的，打印输出结果均为undefined

2、（有误）onInit 后面的函数保持传入3个参数不变，直接在函数内部使用xAxis和yAxis，从打印输出结果可以看到，两次循环输出的数据完全一样

3、（正确）onInit 后面的函数保持传入3个参数不变，直接在函数内部使用xAxis和yAxis，但是在函数外部将var声明改为let声明，从打印输出结果可以看到，两次循环输出的数据不一样了，这样得到的图是正确的图

6、遇到的问题-系列二

(1) （有误）for循环声明计数器变量使用var i= 0；观察打印输出结果可以看到，在函数外面打印 i 得到 0 1；在函数里面打印 i 得到 2 2；

(2) （正确）for循环声明计数器变量使用let i= 0；观察打印输出结果可以看到，在函数外面打印 i 得到 0 1；在函数里面打印 i 得到 0 1；这时可以正常使用getOption(dataArr[i].xAxis, dataArr[i].yAxis)，并得到正确的图

7、总结：上面遇到的两个问题，其实都是关于let与var声明变量的区别，这个问题将在下一篇文章中讨论