前言
最近在學(xué)習(xí)eCharts，學(xué)習(xí)到了異步更新和數(shù)據(jù)加載這一塊，覺著有必要總結(jié)一下，方法以后的時候參考學(xué)習(xí)，在開始本文之前，對eCharts不熟悉的朋友們可以參考下這篇文章：//m.survivalescaperooms.com/article/128790.htm 下面話不多說了，來一起看看詳細(xì)的介紹吧。
使用方法
使用Echarts首先得先把Echarts.js引進(jìn)來（放在文件的入口html文件里面）
<script src="public/js/echarts.common.min.js"></script>
在繪圖前我們需要為 ECharts 準(zhǔn)備一個具備高寬的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
初始化一個 echarts 實例并通過 setOption 方法生成一個你想要的圖表類型,
首先先把，echarts里setOption的option,單獨(dú)領(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/> {b} : {c} (iwvjtn8m0%)" }, 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ù)名字對應(yīng)到相應(yīng)的系列就可以了。
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的，所以當(dāng)出現(xiàn)多條折線時，如果當(dāng)天的數(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ù)名字對應(yīng)到相應(yīng)的系列 name: '銷量', data: data.data }]});只需要將數(shù)據(jù)填充進(jìn)入就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
