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

 更新时间:2022年10月21日 11:04:33   作者:博仔show  
这篇文章主要介绍了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'
        ],
    }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue create 创建项目只有两个文件问题

    解决vue create 创建项目只有两个文件问题

    这篇文章主要介绍了解决vue create 创建项目只有两个文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue开发项目中如何使用Font Awesome 5

    Vue开发项目中如何使用Font Awesome 5

    Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,我们可以直接在Font Awesome中找到并且使用,这篇文章主要给大家介绍了关于Vue开发项目中如何使用Font Awesome5的相关资料,需要的朋友可以参考下
    2021-11-11
  • vuex(vue状态管理)的特殊应用案例分享

    vuex(vue状态管理)的特殊应用案例分享

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    2020-03-03
  • 详解vue移动端项目的适配(以mint-ui为例)

    详解vue移动端项目的适配(以mint-ui为例)

    这篇文章主要介绍了详解vue移动端项目的适配(以mint-ui为例),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue父组件触发事件改变子组件的值的方法实例详解

    vue父组件触发事件改变子组件的值的方法实例详解

    这篇文章主要介绍了vue父组件触发事件改变子组件的值的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue绑定对象与数组变量更改后无法渲染问题解决

    Vue绑定对象与数组变量更改后无法渲染问题解决

    这篇文章主要介绍了Vue绑定对象与数组变量更改后无法渲染问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 如何使用Vue3设计实现一个Model组件浅析

    如何使用Vue3设计实现一个Model组件浅析

    v-model在Vue里面是一个语法糖,数据的双向绑定,本质上还是通过 自定义标签的attribute传递和接受,下面这篇文章主要给大家介绍了关于如何使用Vue3设计实现一个Model组件的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue自动添加浏览器兼容前后缀操作

    vue自动添加浏览器兼容前后缀操作

    这篇文章主要介绍了vue自动添加浏览器兼容前后缀操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-star评星组件开发实例

    vue-star评星组件开发实例

    下面小编就为大家分享一篇vue-star评星组件开发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue自定义表单验证(rule,value,callback)使用详解

    Vue自定义表单验证(rule,value,callback)使用详解

    这篇文章主要介绍了Vue自定义表单验证(rule,value,callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用,需要的朋友可以参考下
    2023-07-07

最新评论