vue echarts v-charts动态添加数据 动态设置options - aftersetoption

需求是:一开始只有三组数据,然后随着下拉框动态选择指标,最多选择两个。然后动态加载到图表中;

用的是基于echarts的v-charts;此时的需求就是要动态设置比如 legend,title或者是tooltips等等;

难道加一个ref 去操作dom吗? 仔细查看 v-charts 文档发现一个方法:

既然每次生成图例都可以用这个方法,并且参数还是echarts实例,那么可以大胆的用setoptions的方法了;

具体怎么用,直接上码:

// v-charts

 <ve-line :after-set-option="afterSetOption"
   
    ></ve-line>

// 这里是方法

methods: {
    
    afterSetOption (chartObj) {
        
        var self = this;
           chartObj.setOption({ 

                // set echarts options
            
               legend: {
                   data: self.chartData.columns,
                   formatter (params) {
                       // some code here
                   }
               },
               tooltip: {
                   formatter (params,ticket, callback) { 
                       
                        let result = '';
                        params.forEach(function (item) {
                            // some code here
                        });
                        return result;
                   }
               },
               grid: {

               },
               color: ['#1677d9','#2fc25b','#929694','#40bfdd','#c2b12f'] // set colors
           })
    
    }
   
}

这样每次请求数据,改变charts就每次设置一下。

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值