快捷導(dǎo)航

echarts3如何清空上一次加載的series數(shù)據(jù)

更新時(shí)間：2022年10月21日 11:04:33 作者：博仔show

這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

我有一個(gè)下拉選框，每次選中都切換不同的數(shù)據(jù)，數(shù)據(jù)是從后臺(tái)查詢獲取的，但是如果后臺(tái)返回了數(shù)據(jù)每次渲染都沒(méi)有問(wèn)題，如果后臺(tái)沒(méi)有返回?cái)?shù)據(jù)，但是我在渲染圖表的時(shí)候

series雖然是[] 數(shù)組，但是任然會(huì)保留上次查詢所得結(jié)果，我找了好多資料，有的說(shuō)notMerge，這個(gè)是echarts 2.0的方法，用了還是不好使，有的說(shuō)myChart.setOption(option,true)我也加上這個(gè)屬性了，但是還是不行，真的很崩潰呀！??！

1、表格1 是正常查詢

2、圖二是后臺(tái)返回?cái)?shù)據(jù)是null

但是圖表還有渲染了上一次的數(shù)據(jù)

最后看了文檔我恍然大悟

echartsInstance.clear*

清空當(dāng)前實(shí)例，會(huì)移除實(shí)例中所有的組件和圖表。清空后調(diào)用getOption方法返回一個(gè){}空對(duì)象。

我的代碼寫(xiě)的不好，但是這樣是可以解決問(wèn)題了，對(duì)付參考下啦，先清空后，清空后，圖表樣式可能會(huì)被覆蓋成原始狀態(tài)，在重新定義一下樣式就可以了

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軸數(shù)據(jù)
        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: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                type: 'shadow' // 默認(rèn)為直線，可選為：'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'
        ],
    }
}