如何解決在ie下，Echarts屢次使用setOption更改數據時，數據錯亂問題

1、問題描述

根據用戶的操做，經過Ajax請求，獲取某段時間內的某數據趨勢折線圖數據。用戶切換數據項或更改時間段時，ie中渲染的折線圖包含了上一次獲取的數據，致使數據錯亂，以下圖所示：

 

2、代碼

數據項1setOption代碼：

myChart3.setOption({
    tooltip: {
        trigger: 'axis',
        formatter: _name + '：-'
    },
    xAxis: [{
        data: ["2016-12-15", "2016-12-31", "2017-1-1", "2017-1-15", "2017-1-31", "2017-2-1", "2017-2-15"]
    }],
    series: [{
        name: _name ? _name : '違規總數',
        data: [2, 66, 10, 248, 50, 168, 22]
    }]
});

數據項2setOption代碼：

myChart3.setOption({
    tooltip: {
        trigger: 'axis',
        formatter: _name + '：-'
    },
    xAxis: [{
        data: ["2017-1-15", "2017-1-31", "2017-2-1", "2017-2-15"]
    }],
    series: [{
        name: _name ? _name : '違規總數',
        data: [55, 11, 3, 99]
    }]
});

 

3、解決方案

經過測試，發現ie瀏覽器在首次設置數據項數據時，不會發生數據錯亂。數據錯亂只發生在再次使用setOption設置數據，由此猜想是上次的數據遺留影響了數據的顯示。在API中找到了clear方法，用於清空當前實例，官網中解釋以下：

在setOption以前插入以下代碼：

myChart3.clear();
initChart3Option();

再次測試ie中的數據項2：

4、結束語

使用echarts時出現數據混亂，能夠先嚐試使用clear看看效果啦，clear以後記得從新initOption喔，由於clear以後，以前配置的圖表參數也沒啦~\(≧▽≦)/~如果內容有錯誤或遺漏，歡迎你們批評指正~