今天做圖表的時候發現了一個問題,想和大家分享一下
我有一個下拉選框,每次選中都切換不同的數據,數據是從后台查詢獲取的,但是如果后台返回了數據每次渲染都沒有問題,如果后台沒有返回數據,但是我在渲染圖表的時候
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,
希望可以幫助和我出現一樣的問題童鞋