關(guān)于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);
}
轉(zhuǎn)化后格式：
myChart.setOption(option,true)
series雖然是[] 數(shù)組，但是任然會保留上次查詢所得結(jié)果，使用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.
有一個關(guān)于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元素的內(nèi)容清空，視覺效果上，確實實現(xiàn)了清空。
但是canvas實例依舊存在，控制臺就會出現(xiàn)上面的問題：There is a chart instance already initialized on the dom.
②clear()方法
let ele=element.getElementById('元素id')
ele.clear()官方解釋是：
清空當(dāng)前實例，會移除實例中所有的組件和圖表。
看定義我是覺得能實現(xiàn)需求的，但實際用的時候效果不盡人意。
注：這里我也查找了很多資料，來佐證方法的適用性。有的朋友記錄該方法確實可用，但是有的就和我一樣，沒有作用。
不過，可能是使用方法的位置不正確，導(dǎo)致方法沒有合適的被使用也說不一定。
以上是問題記錄，接下來說一下解決方案吧。
dispose()方法:
銷毀實例，實例銷毀后無法再被使用。
實話講，看見官方的這個解釋，我在最初的時候根本沒考慮用它。
原因就是銷毀二字，我想當(dāng)然，圖表我還需要用，你銷毀再用的時候怎么獲取呢？
后來其他方案確實沒辦法解決已初始化的問題，我又看了一下自己使用圖表的方法：
let chart = echarts.init(this.$refs.chart);
init()！?。?/p>
創(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue中el-date-picker選擇日期的限制的項目實踐
ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下2023-10-10![解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx](http://img.jbzj.com/images/xgimg/bcimg2.png)
解決Vue3.0刷新頁面警告[Vue Router warn]:No match
這篇文章主要介紹了解決Vue3.0刷新頁面警告[Vue Router warn]:No match found for location with path /xxx問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
最近遇到了個問題,用v-bind動態(tài)綁定img的src,圖片加載不出來,所以下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)加載本地圖片的相關(guān)資料,需要的朋友可以參考下2021-07-07
本文主要介紹了解決vuex?數(shù)據(jù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解決echarts圖表y軸數(shù)據(jù)間隔過大的問題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了通過命令行生成vue項目框架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07