ec-canvas的下载其他博主分享了很多,本文就暂不介绍,直接上正文
1、首先在index.wxml文件中添加一个盒子用于放置图表(本文展示折线图,其他图表类似操作)
//canvas-box需要设置宽高
<view class="canvas-box">
<ec-canvas id="mychart" canvas-id="mychart" ec="{
{ ec }}"></ec-canvas>
</view>
2、设置ehcarts的实例、ec的配置和需要展示的数据
let chart = null; //echarts实例
Page({
ec: {
lazyLoad: true //开启懒加载
},
xData:[], //用于存放x轴的数据
seriesData:[] //用于存放折线图的数据
}
3、在onLoad的时候去获取ec-canvas,并模拟获取后台接口返回数据
onLoad(options) {
this.echartsComponnet = this.selectComponent('#mychart');
this.getList()
},
getList(){
//模拟从后端获取数据,并赋值给xData 、seriesData
setTimeout(() => {
const xData = ['00:00', '04:00'