原生小程序接入echarts动态改变数据
2019-11-05 本文已影响0人
小北呀_
原生小程序接入echarts插件。
点击进入echarts官网介绍接入小程序详细介绍。
动态塞数据如下:
wxml:
<view class="chart-before">
<ec-canvas class="chart-before-1"
id="mychart-test1"
canvas-id="mychart-test1-0"
ec="{{ecTest}}" >
</ec-canvas>
</view>
wxss:
.chart-before{
width: 600rpx;
height: 400rpx;
}
.chart-before-1{
width: 100%;
height: 100%;
}
js
我在页面全局定义了Chart 来保存折线图echarts实例
let Chart = null
import * as echarts from '../../utils/ec-canvas/echarts';
Page({
data:{
ecTest:{
lazyLoad:true
}
},
onLoad() {
//获取到折线图 <ec-canvas> 的id,然后再获取数据塞就可以了。
this.echartsComponnet = this.selectComponent('#mychart-test1')
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
Chart = echarts.init(canvas, null, {
width: width,
height: height
});
let option = {....}
Chart.setOption(option);
});
},
........
如果有tab按钮切换需要改变折线图数据,直接改变 option,重新setOption即可
let option = {....}
Chart.setOption(option);