vue在使用ECharts時的異步更新和數(shù)據(jù)加載詳解
前言
最近在學習eCharts，學習到了異步更新和數(shù)據(jù)加載這一塊，覺著有必要總結(jié)一下，方法以后的時候參考學習，在開始本文之前，對eCharts不熟悉的朋友們可以參考下這篇文章：http://m.fzitv.net/article/128790.htm 下面話不多說了，來一起看看詳細的介紹吧。
使用方法
使用Echarts首先得先把Echarts.js引進來（放在文件的入口html文件里面）
<script src="public/js/echarts.common.min.js"></script>
在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化一個 echarts 實例并通過 setOption 方法生成一個你想要的圖表類型,
首先先把，echarts里setOption的option,單獨領(lǐng)出來，初始化放在data里
data() { return {
getSetOption: {//折線圖
title: {
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: '總?cè)藬?shù)',
data: []
}
]
},
getPieOption: {//餅圖
title: {
text: null
},
tooltip: {
tooltip: 'item',
formatter: "{a} <br/> : {c} (wppm3vysvbp%)"
},
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里調(diào)用這個方法
this.drawLineChart(),
接下來就就是數(shù)據(jù)異步加載與更新了。
以下的代碼是本地的json類型，異步加載數(shù)據(jù)時只要填入數(shù)據(jù)，然后在series里根據(jù)名字對應到相應的系列就可以了。
getOrderTotal(){//獲取一段時間內(nèi)的訂單統(tǒng)計
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: '訂單統(tǒng)計'
},
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的數(shù)據(jù)是直接merge的，所以當出現(xiàn)多條折線時，如果當天的數(shù)據(jù)為0，或者后臺傳過來的數(shù)據(jù)為空的時候，setOption的值根本就沒有更新，而是直接merge了，所以這個問題就頭大了。
對于這個問題的解決方法是
用getOption取到已經(jīng)存在的option, 然后用this.lineChartOrder.setOption.clear() ，清空option，最后this.lineChartOrder.setOption(option, false, false) 。
這樣就可以清掉了。
以下是官網(wǎng)異步數(shù)據(jù)加載與更新的方法，會相對簡單些。
// 異步加載數(shù)據(jù)
$.get('data.json').done(function (data) {
// 填入數(shù)據(jù)
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據(jù)名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
只需要將數(shù)據(jù)填充進入就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Vuejs對象常用操作之取對應的值、取key和value值、轉(zhuǎn)數(shù)組及合并等
最近在學Vue和javascript感覺js的好多方法都不太清楚,這里徹底總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vuejs對象常用操作之取對應的值、取key和value值、轉(zhuǎn)數(shù)組及合并等的相關(guān)資料,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了Vue 2.0學習筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了詳解Vuex下Store的模塊化拆分實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要為大家詳細介紹了Vue事件的基本操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
下面小編就為大家分享一篇Vue2.0子同級組件之間數(shù)據(jù)交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了如何手動銷毀Vue中掛載的組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue導入excel文件,vue導入多個sheets的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Vue使用element-ui實現(xiàn)菜單導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09