前言
上一篇文章介绍了简单的小程序使用echarts画图,这一篇介绍一下,如何在一个小程序页面完成多个图表
一、项目需求
一个页面需要展示2个图表,图表数据是请求后台得到的
二、改造步骤
1.index.wxml用循环
代码如下,添加了tuData和titleData两个属性:
<block wx:for="{{chartsArr}}">
<view class="chart-view" >
<ec-canvas id="mychart-dom-bar" class="mychart" canvas-id="mychart-bar" tuData="{{item.data}}" titleData="{{item.name}}"ec="{{ ec }}"></ec-canvas>
</view>
</block>
2.index.js中改造initChart函数,将data和title传入函数中
代码如下:
function initChart(canvas, width, height,data, title, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
title: {
text: title,
left: 'center'
},
...//这里省略其他配置的内容
data:data
};
chart.setOption(option);
return chart;
}
3.改造ec-canvas.js文件(不知道这个文件在哪的小伙伴看一下上一篇文章),将tuData和titleData写入
代码如何一共需要修改3个地方
- 第一处大约在40行
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},
ec: {
type: Object
},
tuData: {//这是新增的参数
type: Object
},
titleData: {//这是新增的参数
type: String
},
forceUseOldCanvas: {
type: Boolean,
value: false
}
}
- 第二处大约在130行
var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height, canvasDpr);
}
else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, res.width, res.height, this.data.tuData, this.data.titleData,canvasDpr);
}
else {
this.triggerEvent('init', {
canvas: canvas,
width: res.width,
height: res.height,
canvasDpr: canvasDpr // 增加了dpr,可方便外面echarts.init
});
}
}).exec();
- 第三处大约168行
if (typeof callback === 'function') {
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, this.data.tuData,this.data.titleData,canvasDpr)
} else {
this.triggerEvent('init', {
canvas: canvas,
width: canvasWidth,
height: canvasHeight,
dpr: canvasDpr
})
}
4.如此如此,这般这般,就可以了
基于互联网思维,先实现需求,后期慢慢优化,代码的性能我还没测试,欢迎同志们帮忙指正
本人先去写点bug 不然周报没法搞定