代码如下:
- WXML代码:
<view class="echart_panel"> <ec-canvas ec="{{ ecLine }}"></ec-canvas> </view>
-
Css代码: .echart_panel { margin: 0 auto; width: 90%; height: 300px; }
-
JS代码: 在Page外面声明一个全局变量
let chartLine;
在Page.data中声明变量
ecLine: {
lazyLoad: true // 懒加载
}
在onLoad中创建实例: 代码:
onLoad() {
this.setData({
ecLine: {
onInit: (canvas, width, height) => {
chartLine = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chartLine);
var option = this.getOption(['总数','在线','未激活'], [27,5,15]);
chartLine.setOption(option);
}
}
})
},
getOption(xData, data_cur) {
var option = {
// backgroundColor: "#f5f4f3",
color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"],
title: {
text: '历史在线数量',
textStyle: {
fontWeight: '500',
fontSize: 15,
color: '#000'
},
x: 'center',
y: '0'
},
grid: {
top: '15%',
left: '0%',
right: '0%',
bottom: '60rpx',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
data: xData || [],
},
yAxis: {
x: 'center',
name: '台',
type: 'value'
},
series: [{
zIndex: 2,
type: 'bar',
smooth: true,
symbolSize: 0,
data: data_cur || []
}]
};
return option;
},
- 如果动态更改数据:
var option = this.getOption(['总数','在线','未激活'], [27,5,15]);
setTimeout(()=>{
chartLine.setOption(option);
},500)
记得使用定时器 不然会报错 setOption is undefind。
- 然后你会发现真机调试不显示,解决方案发布体验版本即可,因为小程序真机测试不可以使用canvas。 记得在开发管理开发设置里添加合法域名,如果还是报错要清楚缓存,以及HTTPS的校验。