何爲動態添加 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>