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'
],
}
}
3,
希望可以帮助和我出现一样的问题童鞋
————————————————
版权声明:本文为CSDN博主「博仔123」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u013817453/article/details/79840628
echarts3 清空上一次加载的series数据相关推荐
- 使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
<template><div class="sg-page-body"><div class="sg-list"><v ...
- php下拉上滑分页,Flutter实现下拉刷新 上拉分页加载更多
一.Flutter实现下拉刷新和上拉分页加载更多 在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator.但是没有提供上拉分页加载更多的组件.但是在Flutter Li ...
- “Word自动更改后的内容保存到通用文档模板上。是否加载该模板?“的解决办法...
在win7系统下,Word2010出现了不能正常关闭.打开一个已有word文档,点击右上角关闭按钮后,先提示"word已停止工作,windows正在检查该问题的解决方案",随后提示 ...
- 如何快速写一款小而美的“上滑无限加载的控件”?| 博文精选
作者 | ShuSheng007 责编 | 郭芮 出品 | CSDN博客 在日常从事Android开发工作时,经常会遇到下拉刷新列表页面,上拉自动加载列表的需求, GitHub上已经有很多关于这方面的 ...
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 参考文章: (1)微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 (2)https://www.cnblogs.com/co ...
- 【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
- 微信小程序体验版数据加载不了,打开调试模式下才行(在微信开发者工具上也能加载数据)
记一次微信小程序体验版数据加载不了的解决过程(请求不到数据),供大家参考: 注:域名已经备案.https已经配置.ssl证书在1.2以上版本.小程序后台已经配置服务器域名 注:域名已经备案.https ...
- [小黄书小程序]主页面笔记图片高度自适应及上拉无限加载及下拉更新
上一章我们实现了小黄书小程序标签栏的左右滑动和弹出框UI功能,今天我们会开始实现主页面中笔记的呈现. 主要的功能会囊括以下几个方面: 笔记的两列式布局: 一行只是显示两个笔记.且每个笔记的封面图片的高 ...
- .net core api 图片上传与加载
关于.net core API 图片上传与加载 文件夹 [TOC] 1.上传图片 1.配置Swagger 与文件夹.接口添加 1.建立.net core api 项目 下载 NuGet 包 Swash ...
最新文章
- 什么是MySQL锁?有哪些锁类型?如何使用?
- MATLAB中导入数据:importdata函数
- ie关闭浏览器tab提示信息
- 3个可以写进简历的京东AI NLP项目实战,走完这五步就是Top算法工程师
- Lesson 021 —— python 循环语句
- 关于WampServer一些配置修改
- 设计模式中类之间的关系
- VB6转换C#2010函数替换
- C - And and Pair
- 制作一个大风车加载条
- java语言特点 字符串不变_面试必问:Java中String类型为什么设计成不可变的?
- android 日程安排view,RecyclerView 列表控件中简单实现时间线
- Sencha Touch 给 Panel 注册点击事件(tap)和其他touchstart,touchend 等事件
- ASP.NET使用Coolite.Ext.Web.dll,显示ext未定义的解决方法
- java开发环境以及数据类型
- 2016年11月14日--SQL创建数据库、表-查、插、删、改
- C语言课程学习的总结
- setValuesForKeysWithDictionary:的用途
- 陈强教授《机器学习及R应用》课程 第五章作业
- 实现类似于目录的虚线填充样式
热门文章
- 快捷高效且实用的淘宝api接口
- Nacos系列(12)-Nacos1.3.2注册中心nacos.discovery配置参数详解
- 【淘宝SEO技巧】深度揭秘淘宝搜索排名算法模型
- word 调整word中一部分格式,全文都跟着变的解决办法
- 01-ESP8266的STA模式学习
- “ 装逼不成,被雷劈了。。。。 ”答案
- Python学习之线性图
- NTC热敏电阻采集温度
- Python每日一练——第26天:内置函数
- 全球计算机科学研究生排名,新|美国计算机科学研究生专业世界排名靠50强名单...