vue echarts 动态添加 series 数据
何为动态添加 series 数据?由于 series 中的个数是动态的,通过接口返回的,我们需要对series 做动态处理。处理动态 series 的数据:let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0]}, {"name": "外修","...
·
何为动态添加 series 数据?由于 series 中的个数是动态的,通过接口返回的,我们需要对 series 做动态处理。
处理动态 series 的数据:
let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0]
}, {"name": "外修","data": [0]}, {"name": "小修","data": [446]}, {"name": "一保","data": [161]
}, {"name": "一保(外)","data": [0]}, {"name": "中修","data": [0]
}]
let newResult = []
if(result.length) {
result.forEach(item => {
newResult.push({
type: "bar",
z: 10,
label: {
normal: {
show: true,
position: 'top',
fontSize: 10,
color:'#000'
}
},
...item
})
})
}
初始化chart:
chartInt(legend, xAxis, newResult) {
let option = {
...
legend: {
data: legend,
},
...
series: newResult
}
this.$nextTick(() => {
this.$refs.barChart.clear();
this.$refs.barChart.mergeOptions(option);
});
// 或者
this.$nextTick(() =>{
//基于准备好的dom,初始化echarts实例
echarts.dispose(document.getElementById("zhutu"));
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("zhutu"));
window.onresize = function () {
myChart.resize();
}
myChart.setOption(option);
})
}
调用接口:
getDate() {
this.showloading = true;
this.nodata = false;
let data = { ... };
this.$axios({
method: "post",
url: "xxx",
data: JSON.stringify(data)
}).then(res => {
this.showloading = false;
// 省略处理数据
this.chartInt(legend, data.dateArr, newResult)
});
},
渲染页面:
<v-chart ref="barChart" style="width:100%;height:8rem;"></v-chart>
// 或者
<div id="zhutu"></div>
更多推荐
已为社区贡献60条内容
所有评论(0)