vue echarts v-charts动态添加数据 动态设置options - aftersetoption
需求是:一开始只有三组数据,然后随着下拉框动态选择指标,最多选择两个。然后动态加载到图表中;用的是基于echarts的v-charts;此时的需求就是要动态设置比如 legend,title或者是tooltips等等;难道加一个ref 去操作dom吗? 仔细查看 v-charts 文档发现一个方法:既然每次生成图例都可以用这个方法,并且参数还是echarts实例,那么可以大胆的...
·
需求是:一开始只有三组数据,然后随着下拉框动态选择指标,最多选择两个。然后动态加载到图表中;
用的是基于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就每次设置一下。
更多推荐
已为社区贡献15条内容
所有评论(0)