關(guān)于echarts?清空上一次加載的數(shù)據(jù)問(wèn)題
echarts 清空上一次加載的數(shù)據(jù)
目標(biāo)效果及數(shù)據(jù)格式
后臺(tái)數(shù)據(jù)格式
Json中List類型，并遍歷List中的對(duì)象
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ù)組，但是任然會(huì)保留上次查詢所得結(jié)果，使用myChart.setOption(option,true)語(yǔ)句可以更新頁(yè)面效果
如果這種方式?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)計(jì)時(shí)間';
linename.yname = '次數(shù)/次';
this.moveCarCountLine(numObj,linename,lengendName);
}else if(flag == 'countkwh'){
this.fiveOpera = '';
linename.xname = '統(tǒng)計(jì)時(shí)間';
linename.yname = '電量/度';
ydata = chargingPowerObj;
this.moveCarCountLine(chargingPowerObj,linename,lengendName);
}else if(flag == 'countkm'){
this.fiveOpera = '';
linename.xname = '統(tǒng)計(jì)時(shí)間';
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 : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'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清空?qǐng)D表：There is a chart instance already initialized on the dom.
有一個(gè)關(guān)于dom的圖表實(shí)例已初始化
我們?cè)谑褂脠D表的時(shí)候，常用的使用場(chǎng)景就是數(shù)據(jù)展示。
我們自然希望，數(shù)據(jù)的改變會(huì)帶來(lái)圖表的重繪。
也就是說(shuō)，指定的區(qū)域作為canvas容器，根據(jù)觸發(fā)條件改動(dòng)數(shù)據(jù)之后，依舊沿用之前的的圖表配置，把圖表重新生成。
重繪圖表時(shí)，我們要把之前已經(jīng)渲染好的圖表清空。
Echarts提供的有clear()和dispose()方法。
另外還有js方法。
先說(shuō)我用著無(wú)效的兩個(gè)
①js：
let ele=element.getElementById('元素id');
ele.innerHTML=''這是把canvas元素的內(nèi)容清空，視覺(jué)效果上，確實(shí)實(shí)現(xiàn)了清空。
但是canvas實(shí)例依舊存在，控制臺(tái)就會(huì)出現(xiàn)上面的問(wèn)題：There is a chart instance already initialized on the dom.
②clear()方法
let ele=element.getElementById('元素id')
ele.clear()官方解釋是：
清空當(dāng)前實(shí)例，會(huì)移除實(shí)例中所有的組件和圖表。
看定義我是覺(jué)得能實(shí)現(xiàn)需求的，但實(shí)際用的時(shí)候效果不盡人意。
注：這里我也查找了很多資料，來(lái)佐證方法的適用性。有的朋友記錄該方法確實(shí)可用，但是有的就和我一樣，沒(méi)有作用。
不過(guò)，可能是使用方法的位置不正確，導(dǎo)致方法沒(méi)有合適的被使用也說(shuō)不一定。
以上是問(wèn)題記錄，接下來(lái)說(shuō)一下解決方案吧。
dispose()方法:
銷毀實(shí)例，實(shí)例銷毀后無(wú)法再被使用。
實(shí)話講，看見(jiàn)官方的這個(gè)解釋，我在最初的時(shí)候根本沒(méi)考慮用它。
原因就是銷毀二字，我想當(dāng)然，圖表我還需要用，你銷毀再用的時(shí)候怎么獲取呢？
后來(lái)其他方案確實(shí)沒(méi)辦法解決已初始化的問(wèn)題，我又看了一下自己使用圖表的方法：
let chart = echarts.init(this.$refs.chart);
init()！?。?/p>
創(chuàng)建一個(gè) ECharts 實(shí)例，返回 echartsInstance，不能在單個(gè)容器上初始化多個(gè) ECharts 實(shí)例。
所以切換數(shù)據(jù)，顯示不同圖表的過(guò)程其實(shí)也就是 ECharts 實(shí)例的銷毀—創(chuàng)建過(guò)程。
自然而然，想到dispose()銷毀方法，可問(wèn)題是我們什么時(shí)候使用呢？
能銷毀肯定需要先存在，所以定義一個(gè)全局變量來(lái)存儲(chǔ)創(chuàng)建后的ECharts 實(shí)例，在改變數(shù)據(jù)需要重新繪制圖表的時(shí)候加上條件判斷：圖例是否存在來(lái)決定是否銷毀。
所以呢：
我在data里定義：
chart: null,//接收實(shí)例對(duì)象
觸發(fā)切換數(shù)據(jù)的方法里面：
if (this.chart != null && this.chart != '' && this.chart != undefined) {
? ?this.chart.dispose(); //銷毀
}嘎嘎好用！
不過(guò)我在想，上面clear()方法沒(méi)用，或許是實(shí)例沒(méi)保存，觸發(fā)時(shí)機(jī)不對(duì)。
按照正確的處理思路，dispose()換成clear()可能也好用。（有時(shí)間我試一下，再來(lái)更新）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了淺談Vue下使用百度地圖的簡(jiǎn)易方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來(lái)介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下2023-10-10![解決Vue3.0刷新頁(yè)面警告[Vue Router warn]:No match found for location with path /xxx](http://img.jbzj.com/images/xgimg/bcimg2.png)
解決Vue3.0刷新頁(yè)面警告[Vue Router warn]:No match
這篇文章主要介紹了解決Vue3.0刷新頁(yè)面警告[Vue Router warn]:No match found for location with path /xxx問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3中的模板語(yǔ)法和vue指令,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
最近遇到了個(gè)問(wèn)題,用v-bind動(dòng)態(tài)綁定img的src,圖片加載不出來(lái),所以下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)加載本地圖片的相關(guān)資料,需要的朋友可以參考下2021-07-07
本文主要介紹了解決vuex?數(shù)據(jù)丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解決echarts圖表y軸數(shù)據(jù)間隔過(guò)大的問(wèn)題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過(guò)大的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了通過(guò)命令行生成vue項(xiàng)目框架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07