美文网首页
原生小程序接入echarts动态改变数据

原生小程序接入echarts动态改变数据

作者: 小北呀_ | 来源:发表于2019-11-05 12:34 被阅读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);
    

    相关文章

      网友评论

          本文标题:原生小程序接入echarts动态改变数据

          本文链接:https://www.haomeiwen.com/subject/olpsbctx.html