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 ...
随机推荐
- poj 1236(强连通分量分解模板题)
传送门 题意: N(2<N<100)个学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输. 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都 ...
- 读取Easy UI的DATa grid里面的所有数据
目前我知道的有两种方法: 1.读取行数,循环读出 $("#btnEcxel").click(function () { var rows = $('#tbVehicleList') ...
- mySql插入网页地址失败
如题:插入的网页地址失败,只显示了开头10位字符.以为是特殊字符的问题. 后来发现是字符串长度不够: ALTER TABLE `news` MODIFY COLUMN `from` VARCHAR( ...
- 单例设计模式Singleton之懒加载模式(懒汉模式)【原】
单例设计模式Singleton之懒加载模式(懒汉模式) SingletonLazy.java类 package kingtool; import kingtool.http.IPTool; publi ...
- linux 更改文件夹所有者
更改“tp5”文件的所有者为”www” chown -R tp5/ www 修改目录及其子目录的用户组为“www” chgrp -R www tp5 同时更改文件或目录的所有者和用户组 chown - ...
- JQuery 的Bind()事件
刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...
- 以前的 Delphi版本
Delphi 1 Delphi 2 Delphi 3 Delphi 4 Delphi 5 Delphi 6 Delphi 7 Delphi 8 Delphi 2005
- [转]gcc -ffunction-sections -fdata-sections -Wl,–gc-sections 参数详解
背景 有时我们的程序会定义一些暂时使用不上的功能和函数,虽然我们不使用这些功能和函数,但它们往往会浪费我们的ROM和RAM的空间.这在使用静态库时,体现的更为严重.有时,我们只使用了静态库仅有的几个功 ...
- Mask RCNN 简单使用
涉及到的知识点补充: FasterRCNN:https://www.cnblogs.com/wangyong/p/8513563.html RoIPooling.RoIAlign:https://ww ...
- 基于Python的机器学习实战:AadBoost
目录: 1. Boosting方法的简介 2. AdaBoost算法 3.基于单层决策树构建弱分类器 4.完整的AdaBoost的算法实现 5.总结 1. Boosting方法的简介 返回目录 Boo ...