echarts3 清空上一次加载的series数据
今天做图表的时候发现了一个问题,想和大家分享一下
我有一个下拉选框,每次选中都切换不同的数据,数据是从后台查询获取的,但是如果后台返回了数据每次渲染都没有问题,如果后台没有返回数据,但是我在渲染图表的时候
2,图二是后台返回数据是null,但是图表还有渲染了上一次的数据
最后看了文档我恍然大悟
清空当前实例,会移除实例中所有的组件和图表。清空后调用 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,
希望可以帮助和我出现一样的问题童鞋
echarts3 清空上一次加载的series数据的更多相关文章
- “Word自动更改后的内容保存到通用文档模板上。是否加载该模板?“的解决办法
在win7系统下,Word2010出现了不能正常关闭.打开一个已有word文档,点击右上角关闭按钮后,先提示"word已停止工作,windows正在检查该问题的解决方案",随后提示 ...
- echarts 图表重新加载,原来的数据依然存在图表上
问题 在做一个全国地图上一些饼图,并且向省一级的地图钻取的时候,原来的饼图依然显示 原因 echars所有添加的图表都在一个series属性集合中,并且同一个echars对象默认是合并之前的数据的,所 ...
- Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件
原文 http://blog.csdn.net/bboyfeiyu/article/details/39253051 前言 下 拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采 ...
- ListView下拉刷新,上拉自动加载更多
下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图. ...
- 关于iOS11上MJRefresh tabview刷新后,重新加载另一组数据, 回不到顶部或者头尾显示混乱等问题解决
MJRefresh在iOS11上存在很多bug 比如在iphoenx上首尾仍会显示的问题 刷新数据后tableview置顶不上去等问题 虽然官方给出了适配方案 但是问题还没有的到解决 比如tabvi ...
- [原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...
- jsTree 的简单用法--异步加载和刷新数据
首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...
- hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据);HADOOP存储数据压缩方案对比(LZO,gz,ORC)
数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...
- mxnet自定义dataloader加载自己的数据
实际上关于pytorch加载自己的数据之前有写过一篇博客,但是最近接触了mxnet,发现关于这方面的教程很少 如果要加载自己定义的数据的话,看mxnet关于mnist基本上能够推测12 看pytorc ...
随机推荐
- hdu1507 Uncle Tom's Inherited Land* 二分匹配
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1507 将i+j为奇数的构成x集合中 将i+j为偶数的构成y集合中 然后就是构建二部图 关键就是构图 然 ...
- 通过BitSet完成对单词使用字母的统计
什么是BitSet BitSet类实现了一组位或标记(flag),这些位可被分别设置或清除.当需要跟踪一组布尔值时,这种类很有用. 您只需让每一位对应一个值,并根据需要设置或清除即可. 标记(flag ...
- Java学习笔记——排序算法之快速排序
会当凌绝顶,一览众山小. --望岳 如果说有哪个排序算法不能不会,那就是快速排序(Quick Sort)了 快速排序简单而高效,是最适合学习的进阶排序算法. 直接上代码: public class Q ...
- [转]shell awk 入门,中级,高级使用
awk很常用,对于我们在shell中分析log和file很有好处,很实用的东西,大家一起分享学习- 作为技术支持工程师,我们最最经常的工作就是要处理文本文件,不管是什么数据库最后都可以导成文本,我们就 ...
- UICollection无法下拉刷新的问题
当UICollectonView加载的内容不够多的时候会出现无法上下拉刷新的问题,折腾了半天,原来是有一个属性没有打开 设置 : self.collectionView.alwaysBounceVer ...
- java虚拟机学习-JVM调优总结-新一代的垃圾回收算法(11)
垃圾回收的瓶颈 传统分代垃圾回收方式,已经在一定程度上把垃圾回收给应用带来的负担降到了最小,把应用的吞吐量推到了一个极限.但是他无法解决的一个问题,就是Full GC所带来的应用暂停.在一些对实时性要 ...
- promise知识点汇总
Promise对象被写进ES6的规范当中,提供的是另外一种更加友好的对于异步编程的解决方案,在这之前大多使用的是回调函数和事件来实现异步编程. 怎么来理解Promise对象呢?对于这个ES6新加入的小 ...
- 利用formatter原理自动化参数化查询
前言:对于经常忙于服务端开发的小伙伴来说,与DB层打交道是在正常不过的事了,但是每次页面的查询条件新增往往意味着后端代码参数化同比增长,当然你可以不使用sqlhelper自带的参数化条件查询,可以直接 ...
- .net开源权限管理系统
有业务请加QQ 245747009 源码地址:http://git.oschina.net/sunzewei/EIP 一.更新记录1.更新日期:2017-02-24 00:00:002.更新内容: 版 ...
- 移动端网页meta设置和响应式
苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...