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声明变量的区别,这个问题将在下一篇文章中讨论