echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求，这个和echarts自身的显示效果有关。
如果你选择的展示图形为饼图，然后你的数据里有一条数据为0，那么展示的数据就为一条直线，看上去效果并不好，
会很突兀。
当然如果你的业务需求就算是直线的话也要展示出来，那么下面的文章你可以略过了，对你画图表并没有什么帮助。
言归正传，我这里会结合代码和图给大家看看效果，首先看看数据为0时的效果。效果如下
附上代码：
<html>
<head>
<title>echarts测试</title>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
legend: {
orient: 'vertical',
left: 'left',
//这个为提示条，注意名称要和data里的name一一对应
data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:1400, name:'搜索引擎'},
{value:0, name:'黑客'}
// {value:0, name:'黑客',itemStyle:{
// normal:{
// label:{
// show: true,
// formatter: function (params,option) {
// if(params.data.value == 0){
// // params.data.itemStyle.normal.labelLine.show = false;
// params.data.label.normal.show = false;
// params.data.labelLine.normal.show = false;
// }
// },
// },
// labelLine: {
// show: true
// }
// }
// }}
]
}
]
}
// var opt = option.series[0];
// lineHide(opt);
// //数据为零时隐藏线段
// function lineHide(opt) {
// jQuery.each(opt.data, function (i, item) {
// if (item.value == 0) {
// item.itemStyle.normal.labelLine.show = false;
// item.itemStyle.normal.label.show = false;
// }
// });
// }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
是不是很难受。
下面我这里介绍下将0数据不在饼图上显示的几种方式。
现附上最终效果图：
1.在后台数据处理时候讲数据结果为0的数据过滤掉（这个大家根据业务情况做处理，这里只讲述下思路，不做具体展示）
2.在option的定义里处理（和第三个方法本质上是一样的，2的方式对各个数据进行处理，更有针对性，而3对饼图里的所有数据都做统一处理，大家根据需要进行选择）
附上代码：
<html>
<head>
<title>echarts测试</title>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
legend: {
orient: 'vertical',
left: 'left',
//这个为提示条，注意名称要和data里的name一一对应
data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'},
// {value:0, name:'黑客'}
//注意：这种方式，这个过滤只针对黑客这个属性，其他属性如果为0的话还是会显示的，
//这个是具体根据某个属性做的设置，如果需要对所有的属性都做处理，推荐使用第三种
{value:0, name:'黑客',itemStyle:{
normal:{
label:{
show: true,
formatter: function (params,option) {
if(params.data.value == 0){
// params.data.itemStyle.normal.labelLine.show = false;
params.data.label.normal.show = false;
params.data.labelLine.normal.show = false;
}
},
},
labelLine: {
show: true
}
}
}}
]
}
]
}
// var opt = option.series[0];
// lineHide(opt);
// //数据为零时隐藏线段
// function lineHide(opt) {
// jQuery.each(opt.data, function (i, item) {
// if (item.value == 0) {
// item.itemStyle.normal.labelLine.show = false;
// item.itemStyle.normal.label.show = false;
// }
// });
// }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.写一个函数，遍历所有的数据，将为0的数据隐藏掉
附上代码：
<html>
<head>
<title>echarts测试</title>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
legend: {
orient: 'vertical',
left: 'left',
//这个为提示条，注意名称要和data里的name一一对应
data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
//使用该种方法记得要加上itemStyle属性，不然会找不到show属性报错的
{value:335, name:'直接访问',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:310, name:'邮件营销',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:234, name:'联盟广告',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:135, name:'视频广告',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:1548, name:'搜索引擎',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}},
{value:0, name:'黑客',itemStyle:{
normal:{
label:{
show: true,
},
labelLine: {
show: true
}
}
}}
]
}
]
}
var opt = option.series[0];
lineHide(opt);
//数据为零时隐藏线段
function lineHide(opt) {
jQuery.each(opt.data, function (i, item) {
if (item.value == 0) {
item.itemStyle.normal.labelLine.show = false;
item.itemStyle.normal.label.show = false;
}
});
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
echarts饼图不显示数据为0的数据的更多相关文章
- 解决echarts饼图不显示数据为0的数据
如图所示 饼图数据为0但是还是会显示lableline和lable 解决方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], ...
- echart 饼图数据为0不显示或者太小显示其他的解决办法
饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...
- 微软BI 之SSRS 系列 - 不显示 Pie Chart 饼图上 0% 的数据
SSRS 小技巧系列专门用来记录 SSRS 报表开发过程中常用的小技巧 - 效果图 - 0% 的标签数据不需要显示出来. 效果图 - 正常的效果. 解决方法 - 使用 IIF 条件判断,如果计算值为 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示 传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- ECharts – 大数据时代，重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...
- ECharts饼图制作分析
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
随机推荐
- STM32 --- 什么时候打开复用IO的时钟（比如RCC_APB2Periph_AFIO）
需要用到外设的重映射功能时才需要使能AFIO的时钟,包括外部中断. 外部中断(EXTI)中与AFIO有关的寄存器是AFIO-EXTICR1.2.3,它们是用来选择EXTIx外部中断的输入脚之用. 举例 ...
- nodeJS安装和环境变量的配置
推荐博客:https://www.cnblogs.com/zhouyu2017/p/6485265.html npm config list 获取npm配置信息 ------------- 主要写一下 ...
- spring boot 2.0.3+spring cloud （Finchley）2、搭建负载均衡Ribbon （Eureka+Ribbon+RestTemplate）
Ribbon是Netflix公司开源的一个负载均衡组件,将负载均衡逻辑封装在客户端中,运行在客户端的进程里. 本例子是在搭建好eureka的基础上进行的,可参考spring boot 2.0.3+sp ...
- ActiveMQ进阶配置
配置web管理页面的安全认证 配置web管理页面的绑定IP和端口 配置MQ连接的安全认证 禁用不使用的连接协议 绑定协议连接端口到指定IP 使用MySql作为持久化保存 配置基于JDBC的高可用环境 ...
- 【转载】掌握 HTTP 缓存——从请求到响应过程的一切（下）
作者:Ulrich Kautz 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58bd4dd1204d50674934c3b0 ...
- 转--python之正则入门
原文地址 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法 ...
- Keil stm32 printf到Debug窗口
使用JlinkV8+Keil41.在main.c输入以下代码 #include <stdio.h> #define ITM_Port8(n) (*((volatile unsigned c ...
- ubuntu18.04使用sudo时反应时间长
一.查看/etc/sudoer这个文件,是否有当前用户,若无,请联系 管理员或者是通过root用户添加 二.用hostname命令查看自己的主机名 三.添加自己的主机名到/etc/hosts文件中
- Qt之QEvent（所有事件的翻译）
QEvent 类是所有事件类的基类,事件对象包含事件参数. Qt 的主事件循环(QCoreApplication::exec())从事件队列中获取本地窗口系统事件,将它们转化为 QEvents,然后将 ...
- QLabel-标签控件的应用
label = QLabel('我是李明') #创建标签控件对象.参数:标签中要显示的文本 label.setText('我是明明') 修改标签控件显示的文本 self.label.text() 返回 ...