關于echarts?清空上一次加載的數(shù)據(jù)問題
echarts 清空上一次加載的數(shù)據(jù)
目標效果及數(shù)據(jù)格式
后臺數(shù)據(jù)格式
Json中List類型，并遍歷List中的對象
for(var i in sigleRow)
{
chargingPowerList.push(sigleRow[i].chargingPower);
drivingMileageList.push(sigleRow[i].drivingMileage);
numList.push(sigleRow[i].num);
}
轉化后格式：
myChart.setOption(option,true)
series雖然是[] 數(shù)組，但是任然會保留上次查詢所得結果，使用myChart.setOption(option,true)語句可以更新頁面效果
如果這種方式?jīng)]有解決，可以參考下文，使用setOption
最終效果
完整代碼如下：
countCollum(flag){
var ydata = {};
var linename = {
xname:'',
yname:''
};
let lengendName = [];// echart legend
let chargingPowerObj = [],drivingMileageObj = [],numObj = [];
this.listData.forEach((element,index) => {
lengendName.push(element.carName);
var sigleRow = eval(element.workVehicleStatisticsList);
let chargingPowerList = [];
let drivingMileageList = [];
let numList = [];
for(var i in sigleRow)
{
chargingPowerList.push(sigleRow[i].chargingPower);
drivingMileageList.push(sigleRow[i].drivingMileage);
numList.push(sigleRow[i].num);
}
chargingPowerObj.push(chargingPowerList);
drivingMileageObj.push(drivingMileageList);
numObj.push(numList);
});
console.log('element-11-',chargingPowerObj,drivingMileageObj)
if(flag == 'countnum'){
ydata = numObj;
linename.xname = '統(tǒng)計時間';
linename.yname = '次數(shù)/次';
this.moveCarCountLine(numObj,linename,lengendName);
}else if(flag == 'countkwh'){
this.fiveOpera = '';
linename.xname = '統(tǒng)計時間';
linename.yname = '電量/度';
ydata = chargingPowerObj;
this.moveCarCountLine(chargingPowerObj,linename,lengendName);
}else if(flag == 'countkm'){
this.fiveOpera = '';
linename.xname = '統(tǒng)計時間';
linename.yname = '里程/公里';
this.moveCarCountLine(drivingMileageObj,linename,lengendName);
}else{
ydata = [];
}
chargingPowerObj = [];
drivingMileageObj = [];
numObj = [];
},
moveCarCountLine( ydata, linename,lengendName) {
let _this = this;
var moveCarCount = _this.$echarts.init(document.getElementById("moveCarCountInfoId"));
var areaChargeOpt = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器，坐標軸觸發(fā)有效
type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
legend: {
data: lengendName
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: _this.xzhouname
},
series: _this.seriesData(ydata,lengendName)
};
moveCarCount.setOption(areaChargeOpt,true);
},
seriesData( ydata, lengendName){
console.log('seriesData', ydata,lengendName)
var series = [];
ydata.forEach((element,index) => {
console.log('seriesDataelement',element)
let item = {
name: lengendName[index],
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: ydata[index]
}
series.push(item);
})
console.log('seriesDataseriesData',series)
return series;
},
Echarts清空圖表：There is a chart instance already initialized on the dom.
有一個關于dom的圖表實例已初始化
我們在使用圖表的時候，常用的使用場景就是數(shù)據(jù)展示。
我們自然希望，數(shù)據(jù)的改變會帶來圖表的重繪。
也就是說，指定的區(qū)域作為canvas容器，根據(jù)觸發(fā)條件改動數(shù)據(jù)之后，依舊沿用之前的的圖表配置，把圖表重新生成。
重繪圖表時，我們要把之前已經(jīng)渲染好的圖表清空。
Echarts提供的有clear()和dispose()方法。
另外還有js方法。
先說我用著無效的兩個
①js：
let ele=element.getElementById('元素id');
ele.innerHTML=''這是把canvas元素的內容清空，視覺效果上，確實實現(xiàn)了清空。
但是canvas實例依舊存在，控制臺就會出現(xiàn)上面的問題：There is a chart instance already initialized on the dom.
②clear()方法
let ele=element.getElementById('元素id')
ele.clear()官方解釋是：
清空當前實例，會移除實例中所有的組件和圖表。
看定義我是覺得能實現(xiàn)需求的，但實際用的時候效果不盡人意。
注：這里我也查找了很多資料，來佐證方法的適用性。有的朋友記錄該方法確實可用，但是有的就和我一樣，沒有作用。
不過，可能是使用方法的位置不正確，導致方法沒有合適的被使用也說不一定。
以上是問題記錄，接下來說一下解決方案吧。
dispose()方法:
銷毀實例，實例銷毀后無法再被使用。
實話講，看見官方的這個解釋，我在最初的時候根本沒考慮用它。
原因就是銷毀二字，我想當然，圖表我還需要用，你銷毀再用的時候怎么獲取呢？
后來其他方案確實沒辦法解決已初始化的問題，我又看了一下自己使用圖表的方法：
let chart = echarts.init(this.$refs.chart);
init()?。?！
創(chuàng)建一個 ECharts 實例，返回 echartsInstance，不能在單個容器上初始化多個 ECharts 實例。
所以切換數(shù)據(jù)，顯示不同圖表的過程其實也就是 ECharts 實例的銷毀—創(chuàng)建過程。
自然而然，想到dispose()銷毀方法，可問題是我們什么時候使用呢？
能銷毀肯定需要先存在，所以定義一個全局變量來存儲創(chuàng)建后的ECharts 實例，在改變數(shù)據(jù)需要重新繪制圖表的時候加上條件判斷：圖例是否存在來決定是否銷毀。
所以呢：
我在data里定義：
chart: null,//接收實例對象
觸發(fā)切換數(shù)據(jù)的方法里面：
if (this.chart != null && this.chart != '' && this.chart != undefined) {
? ?this.chart.dispose(); //銷毀
}嘎嘎好用！
不過我在想，上面clear()方法沒用，或許是實例沒保存，觸發(fā)時機不對。
按照正確的處理思路，dispose()換成clear()可能也好用。（有時間我試一下，再來更新）
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue獲取或者改變vuex中的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于Vue3中vuex的基本使用方法,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue3項目啟動自動打開瀏覽器以及server配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Vue組件文檔生成工具庫的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
淺析vue-router中params和query的區(qū)別
這篇文章主要介紹了vue-router中params和query的區(qū)別，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
v-bind和v-model是Vue.js中的兩個常用指令,它們在功能和用途上有一些區(qū)別,接下來小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學跟著小編一起來看看吧2023-08-08
Vue3中的?computed,watch,watchEffect的使用方法
這篇文章主要介紹了Vue3中的?computed,watch,watchEffect的使用方法，文章圍繞主題展開詳細的內容介紹，具有一定的參考價價值，需要得小伙伴可以參考一下2022-06-06
vue+element 實現(xiàn)商城主題開發(fā)的示例代碼
這篇文章主要介紹了vue+element 實現(xiàn)商城主題開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
Element UI是一個基于Vue 2.0的桌面端組件庫,旨在構建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下2024-06-06