echarts通过ajax获取数据,无法清空上一次加载的内容

场景描述:ajax请求后过来的后台数据赋到echarts上,每次点击查询图标都会累计显示,无法清除上次图例。


上效果图:

解析代码:

ajax:



echarts:

//加载echarts

function showechart() {

var baroption = {

title: {

text:'近10天油料'

        },

        tooltip: {

trigger:'axis'

        },

        legend: {

data: ['日消耗', '日增加']

},

        grid: {

x:30,

            x2:40,

            y2:24

        },

        calculable:true,

        xAxis: [

{

type:'category',

                data:data_time,

            }

],

        yAxis: [

{

type:'value'

            }

],

        series: [

{

name:'日消耗',

                type:'bar',

                data:outNum,

            },

            {

name:'日增加',

                type:'bar',

                data:inNum,

            }

]

};    barChart.setOption(baroption, true);

    window.onresize =barChart.resize;

}

clear方法:查看官网API

echartsInstance.clear

any

清空当前实例,会移除实例中所有的组件和图表。

echartsInstance.isDisposed

any

() => boolean

当前实例是否已经被释放。

echartsInstance.dispose

any

销毁实例,销毁后实例无法再被使用。

barChart.clear();

barChart.setOption(baroption, true);

window.onresize =barChart.resize;

可以清除画布内容,但是没有清除series数据。

解决办法:

barChart.clear();

barChart.setOption(baroption, true);

window.onresize =barChart.resize;

//清空数据  很重要

data_time = [];

inNum = [];

outNum = [];

arr==[];

初始化数据,很重要。

展示效果:

你可能感兴趣的:(echarts通过ajax获取数据,无法清空上一次加载的内容)