echarts3 清空上一次載入的series資料
阿新 • • 發佈:2019-02-07
今天做圖表的時候發現了一個問題,想和大家分享一下
我有一個下拉選框,每次選中都切換不同的資料,資料是從後臺查詢獲取的,但是如果後臺返回了資料每次渲染都沒有問題,如果後臺沒有返回資料,但是我在渲染圖表的時候
series雖然是[] 陣列,但是任然會保留上次查詢所得結果,我找了好多資料,有的說notMerge,這個是echarts 2.0的方法,用了還是不好使,有的說myChart.setOption(option,true)我也加上這個屬性了,但是還是不行,真的 很崩潰呀!!!1,表格1 是正常查詢2,圖二是後臺返回資料是null,但是圖表還有渲染了上一次的資料
最後看了文件我恍然大悟
echartsInstance.clear *清空當前例項,會移除例項中所有的元件和圖表。清空後呼叫 getOption 方法返回一個{}
空物件。
我的程式碼寫的不好,但是這樣是可以解決問題了,對付參考下啦,先清空後,清空後,圖表樣式可能會被覆蓋成原始狀態,在重新定義一下樣式就可以了
getEcharts() { let _bar = this.$refs.bar, this.http.post('xx/xx/xx', { id: JSON.stringify(this.selectParkIds[0]), fixedDate: JSON.stringify(this.today) }).then(data => { _bar.clear() if (data) return if (data.resultData) { _bar.mergeOptions(getBarOption(inParkDataList) } }) },
const getBarOption = (data) => { let xAxisAry = [], //x軸資料 legend = [], inParkExitsFist = [], inParkExitsList = [], dataAllAry = [], alignCenter = '' for (let obj of data) { xAxisAry.push(obj.hour) inParkExitsList.push(obj.inParkExits) } inParkExitsFirst = data[0].inParkExits for (let obj of inParkExitsFist) { legend.push(obj.parkExitName) } legend.length > 10 ? alignCenter = '12%' : alignCenter = '30%' for (let lenObj of legend) { let dataAry = [], dataObj = {} for (let ary of inParkExitsList) { ary.forEach(function(element) { if (element.parkExitName == lenObj) { dataAry.push(element.inParkCount) } }); } dataObj.name = lenObj dataObj.data = dataAry dataObj.type = "bar" dataAllAry.push(dataObj) } return { tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器,座標軸觸發有效 type: 'shadow' // 預設為直線,可選為:'line' | 'shadow' } }, title: { //text: obj.title }, xAxis: { data: xAxisAry }, yAxis: { axisLabel: { show: true }, name: "單位(輛)" }, legend: { data: legend, left: alignCenter, y: "bottom", itemGap: 30, align: 'auto', }, grid: { bottom: '30%' }, series: dataAllAry, color: [ '#3b4ca9', '#1689ce', '#1fc659', '#f98b24', '#e2346e', '#d52f30', '#5d6dbe', '#1a9ce2', '#25e47b', '#fda639', '#f44c86', '#eb393a', '#5f77b1', '#34b6f3', '#6cf090', '#fdad2a', '#f06997', '#ec5454', '#7a88c9', '#59c7ef', '#6feeaf', '#feb657', '#f290b1', '#e27375', '#9fa9d8', '#84d5f8', '#bbf5cb', '#fecc86', '#f6bbd0', '#ed9a9b' ], } }
3,
希望可以幫助和我出現一樣的問題童鞋