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 ...
随机推荐
- vue渲染数据后与owlCarousel轮播插件冲突,失效
主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行):所以会导致owlCarousel插件失效. 解决方案:数 ...
- IOS的Application以及IOS目录的介绍
1.UIApplication介绍 .UIApplication对象是应用程序的象征 .每一个应用都有自己的UIApplication对象,而且是单例的 .通过[UIApplication share ...
- Android库的标准化(不断更新中)
在Android的开发过程中,为了代码的通用性,模块化等原因,应该尽量将功能独立的,通用性高的模块抽离出来,建立单独的库.各个库的功能不同,但是同样作为库,依然有很多相通的地方. 各个库应该都应该遵循 ...
- JS解决通过按钮切换图片的问题
我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...
- WPF 杂谈——自定义控件
如果只是使用现有的WPF控件的话,是很难满足当前社会多复杂的业务.所以用户自己订制一系列控件也是一种不可避免的情势.WPF在控制方面分为俩种:用户控件和自定义控件.相信看过前面章节的就明白他们俩者之间 ...
- OpenCV探索之路(十四):绘制点、直线、几何图形
绘制点和圆 void cvCircle( CvArr* img, CvPoint center, int radius, CvScalar color, int thickness=1, int li ...
- SmartCoder每日站立会议03
1.站立会议内容 今天是站立会议第三天,由于我们是做微信小程序,所以很多方面大家都在试验学习阶段,但是经过之前的了解和最近的学习,大家还是有很大进步的.首页简单的css样式已出,正在考虑首页样式再进行 ...
- 几个常用的linux快捷键和shell知识
1) !$ !$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir $mv mydir yourdir $cd y ...
- ArcGIS 网络分析[2.5] VRP(车辆配送)
什么是VRP? VRP就是车辆配送. 大家有没有想象过一个城市的某个快递营业点,是怎么让各个快递员配送快递的? 每个快递员针对那片区域的客户,如何走路线才最省时间? 也许你会说,最短路径分析可以做到— ...
- characterEncodingFilter作用
package com.demo.test; import java.io.IOException; import javax.servlet.Filter; import javax.servlet ...