web技术

echarts饼图不显示数据为0的数据

如果你选择的展示图形为饼图,然后你的数据里有一条数据为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对饼图里的所有数据都做统一处理,大家根据需要进行选择)

附上代码:

  1. <html>
  2. <head>
  3. <title>echarts测试</title>
  4. <script type=“text/javascript” src=“echarts.js”></script>
  5. <script type=“text/javascript” src=“jquery-1.7.1.min.js”></script>
  6. </head>
  7. <body>
  8. <!– 为 ECharts 准备一个具备大小(宽高)的 DOM –>
  9. <div id=“main” style=“width: 600px;height:800px;”></div>
  10. <script type=“text/javascript”>
  11. // 基于准备好的dom,初始化echarts实例
  12. var myChart = echarts.init(document.getElementById(‘main’));
  13. var option = {
  14. tooltip : {
  15. trigger: ‘item’,
  16. formatter: “{a} <br/>{b} : {c} ({d}%)”
  17. },
  18. title: {
  19. text: ‘某站点用户访问来源’,
  20. subtext: ‘纯属虚构’,
  21. x:‘center’
  22. },
  23. legend: {
  24. orient: ‘vertical’,
  25. left: ‘left’,
  26. //这个为提示条,注意名称要和data里的name一一对应
  27. data: [‘视频广告’,‘联盟广告’, ‘邮件营销’, ‘直接访问’,“搜索引擎”,“黑客”]
  28. },
  29. series : [
  30. {
  31. name: ‘访问来源’,
  32. type: ‘pie’,
  33. radius: ‘55%’,
  34. data:[
  35. {value:335, name:‘直接访问’},
  36. {value:310, name:‘邮件营销’},
  37. {value:234, name:‘联盟广告’},
  38. {value:135, name:‘视频广告’},
  39. {value:1548, name:‘搜索引擎’},
  40. // {value:0, name:’黑客’}
  41. //注意:这种方式,这个过滤只针对黑客这个属性,其他属性如果为0的话还是会显示的,
  42. //这个是具体根据某个属性做的设置,如果需要对所有的属性都做处理,推荐使用第三种
  43. {value:0, name:‘黑客’,itemStyle:{
  44. normal:{
  45. label:{
  46. show: true,
  47. formatter: function (params,option) {
  48. if(params.data.value == 0){
  49. // params.data.itemStyle.normal.labelLine.show = false;
  50. params.data.label.normal.show = false;
  51. params.data.labelLine.normal.show = false;
  52. }
  53. },
  54. },
  55. labelLine: {
  56. show: true
  57. }
  58. }
  59. }}
  60. ]
  61. }
  62. ]
  63. }
  64. // var opt = option.series[0];
  65. // lineHide(opt);
  66. // //数据为零时隐藏线段
  67. // function lineHide(opt) {
  68. // jQuery.each(opt.data, function (i, item) {
  69. // if (item.value == 0) {
  70. // item.itemStyle.normal.labelLine.show = false;
  71. // item.itemStyle.normal.label.show = false;
  72. // }
  73. // });
  74. // }
  75. // 使用刚指定的配置项和数据显示图表。
  76. myChart.setOption(option);
  77. </script>
  78. </body>
  79. </html>

 

3.写一个函数,遍历所有的数据,将为0的数据隐藏掉

附上代码:

  1. <html>
  2. <head>
  3. <title>echarts测试</title>
  4. <script type=“text/javascript” src=“echarts.js”></script>
  5. <script type=“text/javascript” src=“jquery-1.7.1.min.js”></script>
  6. </head>
  7. <body>
  8. <!– 为 ECharts 准备一个具备大小(宽高)的 DOM –>
  9. <div id=“main” style=“width: 600px;height:800px;”></div>
  10. <script type=“text/javascript”>
  11. // 基于准备好的dom,初始化echarts实例
  12. var myChart = echarts.init(document.getElementById(‘main’));
  13. var option = {
  14. tooltip : {
  15. trigger: ‘item’,
  16. formatter: “{a} <br/>{b} : {c} ({d}%)”
  17. },
  18. title: {
  19. text: ‘某站点用户访问来源’,
  20. subtext: ‘纯属虚构’,
  21. x:‘center’
  22. },
  23. legend: {
  24. orient: ‘vertical’,
  25. left: ‘left’,
  26. //这个为提示条,注意名称要和data里的name一一对应
  27. data: [‘视频广告’,‘联盟广告’, ‘邮件营销’, ‘直接访问’,“搜索引擎”,“黑客”]
  28. },
  29. series : [
  30. {
  31. name: ‘访问来源’,
  32. type: ‘pie’,
  33. radius: ‘55%’,
  34. data:[
  35. //使用该种方法记得要加上itemStyle属性,不然会找不到show属性报错的
  36. {value:335, name:‘直接访问’,itemStyle:{
  37. normal:{
  38. label:{
  39. show: true,
  40. },
  41. labelLine: {
  42. show: true
  43. }
  44. }
  45. }},
  46. {value:310, name:‘邮件营销’,itemStyle:{
  47. normal:{
  48. label:{
  49. show: true,
  50. },
  51. labelLine: {
  52. show: true
  53. }
  54. }
  55. }},
  56. {value:234, name:‘联盟广告’,itemStyle:{
  57. normal:{
  58. label:{
  59. show: true,
  60. },
  61. labelLine: {
  62. show: true
  63. }
  64. }
  65. }},
  66. {value:135, name:‘视频广告’,itemStyle:{
  67. normal:{
  68. label:{
  69. show: true,
  70. },
  71. labelLine: {
  72. show: true
  73. }
  74. }
  75. }},
  76. {value:1548, name:‘搜索引擎’,itemStyle:{
  77. normal:{
  78. label:{
  79. show: true,
  80. },
  81. labelLine: {
  82. show: true
  83. }
  84. }
  85. }},
  86. {value:0, name:‘黑客’,itemStyle:{
  87. normal:{
  88. label:{
  89. show: true,
  90. },
  91. labelLine: {
  92. show: true
  93. }
  94. }
  95. }}
  96. ]
  97. }
  98. ]
  99. }
  100. var opt = option.series[0];
  101. lineHide(opt);
  102. //数据为零时隐藏线段
  103. function lineHide(opt) {
  104. jQuery.each(opt.data, function (i, item) {
  105. if (item.value == 0) {
  106. item.itemStyle.normal.labelLine.show = false;
  107. item.itemStyle.normal.label.show = false;
  108. }
  109. });
  110. }
  111. // 使用刚指定的配置项和数据显示图表。
  112. myChart.setOption(option);
  113. </script>
  114. </body>
  115. </html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注