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为空时报错问题解决的更多相关文章

  1. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  2. Python 中 plt 画柱状图和折线图

    1. 背景 Python在一些数据可视化的过程中需要使用 plt 函数画柱状图和折线图. 2. 导入 import matplotlib.pyplot as plt 3. 柱状图 array= np. ...

  3. 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合

    数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...

  4. echar图柱状图和折线图混合加双侧y轴坐

    代码如下: floorSalesBar(){//方法名====这个方法应该放在methods中并在mounted中调用哦 methods let _this = this; let myChart = ...

  5. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

  6. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  7. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  8. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  9. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 测试理论-selenium的工作原理

  2. [转]如何清空Chrome缓存和Cookie

    当您使用浏览器(例如 Chrome)时,浏览器会将网站中的一些信息保存在其缓存和 Cookie 中. 清除这些内容可以解决某些问题,例如网站上的加载或格式设置问题. 在 Chrome 中 在计算机上打 ...

  3. android仿QQ的SlideMenu

    这其实很简单就可以实现,只需要自定义一个View继承自HorizontalScrollView 1,新建一个项目,再新建一个MySlideMenu继承HorizontalScrollView publ ...

  4. 图书 Framework 设计指南: 可重用 .NET 库的约定、惯用法和模式 引出资料

    文章:框架设计准则     --微软 地址:https://docs.microsoft.com/zh-cn/dotnet/standard/design-guidelines/index

  5. WEBSTORM中html文件运行之后出现乱码的问题解决

    出现如下问题: 解决方案: 1.点击"文件编码" 2.选择GBK 3.点击Reload. 4.此时,源代码中的中文字体会变成乱码,把这些乱码重新输入成原先的中文.然后运行html文 ...

  6. java线程(4)——线程同步的锁技术

    同步 同步,字面来看,有点一起工作的意思.但在线程同步中,"同"意为协同.互相配合. 比如: A.B两个线程,并不是说两个线程必须同时一起工作,而是说互相配合工作,在某个时间可能线 ...

  7. 绝对定位后a、button等hover状态样式不显示问题

    <div class="operate"> <el-button>提交项目</el-button> <el-button type=&qu ...

  8. element-ui的el-tabel组件怎么使用type=“expand”实现表格嵌套并且在子表格没有数据的时候隐藏展开按钮

    效果如下: 试过很多种办法,思路都在怎么控制<el-table-column type="expand">里面的type上,比如使用v-show等等,但是发现,要不就是 ...

  9. WebKit 渲染过程

    webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 Webkit渲染过程 ...

  10. Delphi函数详解:全局函数,内部函数,类的成员函数,类的静态方法

    1. Delphi中的全局函数 //要点: 需要给其他单元调用, 必须在 interface 声明, 但必须在 uses 区后面 unit Unit1; interface uses   Window ...