ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有的时候我们在选择一定得条件时获取不到数据,当没有数据时ECharts会默认调用 noDataLoadingOption 这个配置项中的内容来显示一个冒泡的页面,中间显示暂无数据这四个字:

2. 当我们使用的这个图表没有 xAxis 这个配置项的时候就没有问题,但是我们使用柱状图和折线图的时候就会报错
,这个问题我一开始就有一点点想不通,因为这个错误显示的是 option 下的data,但是大家都知道 option 下没有 data 这个配置项,于是我就在官网的实例中试着在有 data 的配置项中删除数据,然后发现是 xAxis 中的 data 为空时就会报错,有了错误之后这个 js 就不会继续执行下去,这个我们都是知道的,但是我需要的就是在没有数据时显示以上的界面啊,这个问题就把我难倒了,于是我在网上搜索这个问题的答案,发现并没有,但是这还是阻止不了我解决问题的脚步,于是我突然想到了可不可以自己在新定义一个 option 呢?想到这个后我就新定义了一个 option ,里面就是有几个什么内容都没有的配置项,代码下面会贴出,这个时候我们就可以在 js 中进行判断了,当 xAxis 中的 data 没有数据的时候我们就可以使用自己新建的 option ,反则使用之前的 option:这个时候新建的 option 因为里面什么都没有,就会显示上面的界面。
if(insOption.xAxis[0].data.length == 0){
pieChart.clear();
var option1 = {
title :{
text:""
},
series:[
{
}
]
};
pieChart.setOption(option1);
}else{
pieChart.clear();
pieChart.setOption(insOption);
}
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决的更多相关文章
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- Python 中 plt 画柱状图和折线图
1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...
- 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合
数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...
- echar图柱状图和折线图混合加双侧y轴坐
代码如下: floorSalesBar(){//方法名====这个方法应该放在methods中并在mounted中调用哦 methods let _this = this; let myChart = ...
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
- JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)
import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
随机推荐
- Elasticsearch 监控和部署
Elasticsearch: ! [ https://elasticsearch.cn/book/elasticsearch_definitive_guide_2.x/_cluster_health. ...
- 在网站中配置MIME类型
经常会遇到这样的情况,某种类型的文件不能够正常下载,*.7z,自定义的文件类型等,需要在配置文件里配置后才能正常下载. 打开Web.Config文件: <system.webServer> ...
- iOS-UIImageView播放动画
NSArray *gifArray = [NSArray arrayWithObjects:[UIImage imageNamed:@"lanya1"],[UIImage imag ...
- OpenCV漫水填充算法示例代码
#include<cv.h> #include<highgui.h> int main(int argc, char** argv) { IplImage* img = cvL ...
- windows下Memcached 架设及java应用(转)
1 Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可 ...
- thead tfoot tbody标签的使用
这三个都是<body>元素的子标签,不常用,因为其只是对<tr>标签做了一个区分 <thread>用于包裹表格头信息 <tfoot>用于包裹表格最后一行 ...
- JDK的弃儿:Vector、Stack、Hashtable、Enumeration
随着JDK的发展,一些设计缺陷或者性能不足的类库难免会被淘汰,最常见的就是Vector.Stack.HashTable和Enumeration了. Vector(@since 1.0) 首先看看Vec ...
- 手把手教你通过Eclipse工程配置调用JNI完全攻略
本文地址:http://www.cnblogs.com/wavky/p/JNI.html 当你找到并鬼使神差地打开这个博文的时候,我敢肯定你已经知道什么是JNI,基本概念就不粘贴了. 百度出来的JNI ...
- tomcat work目录
1 用tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序(发布到tomcat的项目里含的类,会被编译成.class后才发布过来,源文件没有发布过来,但这里的 ...
- 串的模式匹配算法(求子串位置的定位函数Index(S,T,pos))
串的模式匹配的一般方法如算法4.5(在bo4-1.cpp 中)所示:由主串S 的第pos 个字 符起,检验是否存在子串T.首先令i 等于 pos(i 为S 中当前待比较字符的位序),j 等于 1(j ...