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> & ...
随机推荐
- 最大流——EK算法
一.算法理论 [基本思想] 反复寻找源点s到汇点t之间的增广路径,若有,找出增广路径上每一段[容量-流量]的最小值delta,若无,则结束.在寻找增广路径时,可以用BFS来找,并且更新残留网络的值(涉 ...
- Python中enumerate函数用法详解
enumerate函数用于遍历序列中的元素以及它们的下标,多用于在for循环中得到计数,enumerate参数为可遍历的变量,如 字符串,列表等 一般情况下对一个列表或数组既要遍历索引又要遍历元素时, ...
- linux基本操作1
ctrl + alt + T 打开命令行 -根目录下home中为用户建的文件夹 cd 加目录名称转到当前目录 .当前目录..上级目录 ls 当前目录下的文件ls -l 显示当前目录下文件的权限 mkd ...
- 【SSH】——hql的使用方式及实现原理
[含义] hql,即Hibernate Query Language.它与我们熟知的sql很类似,它最大的特点就是对查询进行了面向对象的封装,下面会在具体例子中说明. sql查询的是数据库中的表或字 ...
- ActiveMQ使用详解---相关概念
一.前言 公司之前使用activeMQ做过一款用于系统之间传递信息的工具,最近才正式投入生产使用,这期间出现了一些比较奇怪的问题,最终发现是没有清晰的了解activeMQ的相关配置以及一些相关概念,借 ...
- spring笔记(二)
共性问题: 1. 服务器启动报错,什么原因? * jar包缺少.jar包冲突 1) 先检查项目中是否缺少jar包引用 2) 服务器: 检查jar包有没有发布到服务器下: 用户库jar包,需要手动发布到 ...
- ELK6.2.4集群
ELK6.2.4集群安装使用 https://www.cnblogs.com/frankdeng/p/9139035.html 一 简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析 ...
- Codeforces Round #392 (div.2) E:Broken Tree
orz一开始想不画图做这个题(然后脑袋就炸了,思维能力有待提高) 我的做法是动态规划+贪心+构造 首先把题目给的树变成一个可行的情况,同时weight最小 这个可以通过动态规划解决 dp[x]表示以x ...
- Problem Collection I 位运算
XOR ARC 092B CF 959E xor-MST CF 959F
- 对C++ templates类模板的几点补充(Traits类模板特化)
前一篇文章<浅谈C++ templates 函数模板.类模板以及非类型模板参数>简单的介绍了什么是函数模板(这个最简单),类模板以及非类型模板参数.本文对类模板再做几点补充. 文章目录1. ...