原生小程序接入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);
上一篇下一篇

猜你喜欢

热点阅读