vue使用ECharts時的異步更新與數據加載html
使用Echarts首先得先把Echarts.js引進來(放在文件的入口html文件裏面)vue
<script src="public/js/echarts.common.min.js"></script>web
在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器json
<div id="main" style="width: 600px;height:400px;"></div>api
初始化一個 echarts 實例並經過 setOption 方法生成一個你想要的圖表類型,echarts
首先先把,echarts裏setOption的option,單獨領出來,初始化放在data裏異步
data() { return { this
getSetOption: {//折線圖spa
title: {orm
text: null
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []
},
series: [
{
name: null,
type: 'line',
stack: '總人數',
data: []
}
]
},
getPieOption: {//餅圖
title: {
text: null
},
tooltip: {
tooltip: 'item',
formatter: "{a} <br/> {b} : {c} ({d}%)"
},
series : [
{
type: 'pie',
radius: '55%',
data:[
].sort(function(a,b){return a.value - b.value;}),
roseType: 'angle',
}
]
},
}
}
下面是在methods裏初始化的一個方法,
drawLineChart() {
this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder'));
this.lineChartOrder.setOption(this.getSetOption);
},
而後在mounted裏調用這個方法
this.drawLineChart(),
接下來就就是數據異步加載與更新了。
如下的代碼是本地的json類型,異步加載數據時只要填入數據,而後在series里根據名字對應到相應的系列就能夠了。
getOrderTotal(){//獲取一段時間內的訂單統計
api.getOrderStatistical(this.begin, this.end,this.kId)
.then(res => {
if (res.data.ok && res.data.r.length) {
const
results = res.data.r,
legends = results.map(item => ({
name: item.channelName,
data: item.dateStatisticals
}))
this.lineChartOrder.setOption({
title: {
text: '訂單統計'
},
legend: {
data: legends.map(item => item.name)
},
xAxis: {
data: legends[0].data.map(item => item.date)
},
series: legends.map(item => {
return {
type: 'line',
name: item.name,
data: item.data.map(item => item.count)
}
})
})
}
}).catch(err => {
// console.log(err)
})
可是,echarts的數據是直接merge的,因此當出現多條折線時,若是當天的數據爲0,或者後臺傳過來的數據爲空的時候,setOption的值根本就沒有更新,而是直接merge了,因此這個問題就頭大了。
對於這個問題的解決方法是
用getOption取到已經存在的option, 而後用this.lineChartOrder.setOption.clear(),清空option,最後this.lineChartOrder.setOption(option, false, false)。
這樣就能夠清掉了。
如下是官網異步數據加載與更新的方法,會相對簡單些。
// 異步加載數據
$.get('data.json').done(function (data) {
// 填入數據
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
只須要將數據填充進入就能夠了。