echart3的数据清空问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart3的数据清空问题相关的知识,希望对你有一定的参考价值。

echart3以上版本,把serise:[,,]变成serise:[]时,上一次的数据还会存在,又不能使用mychart.clear()做清除完全状态。因为牵扯到了一些样式问题。

参考技术A

echarts的setOption()函数参数如下:

    option

    图表的配置项和数据,具体见配置项手册。

    notMerge

    可选,是否不跟之前设置的option进行合并,默认为false,即合并。

    lazyUpdate

    可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。

    silent

    可选,阻止调用 setOption 时抛出事件,默认为false,即抛出事件。

可以设置notMerge为true,就可以避免这种情况了。

echarts3 清空上一次加载的series数据

今天做图表的时候发现了一个问题,想和大家分享一下

我有一个下拉选框,每次选中都切换不同的数据,数据是从后台查询获取的,但是如果后台返回了数据每次渲染都没有问题,如果后台没有返回数据,但是我在渲染图表的时候

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,

希望可以帮助和我出现一样的问题童鞋

以上是关于echart3的数据清空问题的主要内容,如果未能解决你的问题,请参考以下文章

Echarts地图使用经验-地图变形和添加数据

echart3怎么让图表自动适应

如何清空dataset中的数据

怎样清空数据库sql 2000,清空后让表的id从1开始

怎样清空数据库sql 2000,清空后让表的id从1开始

Vue+ElementUI,input控件清空数据恢复问题