问题描述：

后台接口查询数据

图表然后渲染出来

再次查询想要用新的数据重新渲染图表

问题它来了：图表一直保留老数据！！！但是神奇的是可以叠加。已经重新setOption了还是不行，在这里卡了许久找bug，我真的傻。

解决！！！

清空图表数据-----将option里的series里的data和name都删除！！（有些代码可忽略）

    clear () { // 清空上次echart数据for (var i = 0; i < this.option.series.length; i++) {  //置空关键！！！  清空名字和数据this.option.series[i].data = []this.option.series[i].name = ''   }this.myGridBarChart = echarts.init(this.$refs.gridBarChartElem)  //再次初始化this.myGridBarChart.setOption(this.option, true)  //重新setOptionthis.legendList = []  //清空之前this.dataList = [] //清空之前},

我这里是调用了图表组件，在这里用props接受后台查询的图表数据且用watch侦听变化，watch使用对象侦听形式,如下仅供参考 (option 为echart基本配置）

props:{barData: {type: Array,default: () => {return []}}},
watch：{'barData': {handler (newVal) {this.clear()newVal.forEach((item, i) => {this.legendList.push(item.card) this.dataList.push(item.values)})this.option.yAxis[0].data = newVal[0].datesthis.legendList.forEach((item, index) => {this.seriesData[index] = {name: item,type: 'bar',stack: 'num',emphasis: {focus: 'series' },data: this.dataList[index]}})this.option.series = this.seriesDatathis.myGridBarChart.setOption(this.option) // 刷新图表},deep: true}
}

echart图表清空上一次数据相关推荐

vue+echart图表数据切换
vue+echart图表数据切换前言一.效果图二.代码演示 1.准备阶段 2.HTML片段 3.js片段 4.css片段总结前言最近有个需求,同一个echart图表点击切换不同数据,花了点 ...
实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
转发：Ajax动态画EChart图表
本人由于项目需要,在状态变化的时候需要动态绘制对应数据的EChart图表,并且不刷新整个网页. 所以就用Ajax动态画EChart图表,下面是开发过程中遇到的一些坑的总结. 流程:页面首次加载时展示一 ...
canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
echart图表环形图（饼图）
最近由于项目需要接触了echart图表插件,由于echart表格配置项比较多,因此整理了自己遇到的一些图表并且粘贴出代码,echarts官网API http://echarts.baidu.com/o ...
Echart图表在项目中如何使用？（前后端详细技术讲解）
Echart图表在项目中的详细使用第二章 Echart图表在项目中的详细使用-折线图篇提示:我们在讲解Echart使用时首先要安装Echart,使用的前端框架时vue,后端时springboot项 ...
Echart图表X轴为时间轴的解释
2019独角兽企业重金招聘Python工程师标准>>> 绘制Echart图表,一般情况下x轴type: 'category',但有时候也用到type: 'time', 这两者的主要 ...
别拿BI不当产品（上）进击的数据产品
开局一张图日常跟数据打交道的朋友们好-古牧君这次打算分上下两篇文章,来聊聊数据产品中的一个子类,BI报表.今天的上篇主要聊聊这类数据产品的定位,下篇分享BI报表在AI化方向上的探索本文主要结构如下 ...
extjs2.0 文件上传_extjs数据存储与传输
本章内容 qExt.data简介 qExt.data.Connection qExt.data.Record qExt.data.Store q常用proxy q常用reader q高级store q ...

echart图表清空上一次数据

问题描述：

解决！！！

echart图表清空上一次数据相关推荐

最新文章

热门文章