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

其他 2018-06-05 14:37:50 阅读次数: 3

首先阐述下为什么会有这个需求，这个和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，那么展示的数据就为一条直线，看上去效果并不好，

会很突兀。

当然如果你的业务需求就算是直线的话也要展示出来，那么下面的文章你可以略过了，对你画图表并没有什么帮助。

言归正传，我这里会结合代码和图给大家看看效果，首先看看数据为0时的效果。效果如下

附上代码：

[html]  view plain  copy
 
  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.    
  14.         var option = {  
  15.             tooltip : {  
  16.                 trigger: 'item',  
  17.                 formatter: "{a} <br/>{b} : {c} ({d}%)"  
  18.             },  
  19.             title: {  
  20.                 text: '某站点用户访问来源',  
  21.                 subtext: '纯属虚构',  
  22.                 x:'center'  
  23.             },  
  24.             legend: {  
  25.                 orient: 'vertical',  
  26.                 left: 'left',  
  27.                 //这个为提示条，注意名称要和data里的name一一对应  
  28.                 data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]  
  29.             },  
  30.   
  31.             series : [  
  32.                 {  
  33.                     name: '访问来源',  
  34.                     type: 'pie',  
  35.                     radius: '55%',   
  36.   
  37.                     data:[  
  38.                         {value:235, name:'视频广告'},  
  39.                         {value:274, name:'联盟广告'},  
  40.                         {value:310, name:'邮件营销'},  
  41.                         {value:335, name:'直接访问'},  
  42.                         {value:1400, name:'搜索引擎'},  
  43.                         {value:0, name:'黑客'}  
  44.   
  45.                         // {value:0, name:'黑客',itemStyle:{  
  46.                         //    normal:{  
  47.                         //         label:{  
  48.                         //             show: true,  
  49.                         //             formatter: function (params,option) {  
  50.                         //                 if(params.data.value == 0){  
  51.                         //                     // params.data.itemStyle.normal.labelLine.show = false;  
  52.                         //                     params.data.label.normal.show = false;   
  53.                         //                     params.data.labelLine.normal.show = false;      
  54.                         //                 }  
  55.                         //             },  
  56.                         //         },  
  57.                         //         labelLine: {  
  58.                         //             show: true  
  59.                         //         }  
  60.                         //    }  
  61.                         // }}  
  62.                     ]  
  63.                 }  
  64.             ]  
  65.         }  
  66.   
  67. //         var opt = option.series[0];  
  68. // lineHide(opt);  
  69. // //数据为零时隐藏线段  
  70. // function lineHide(opt) {  
  71. //     jQuery.each(opt.data, function (i, item) {  
  72. //         if (item.value == 0) {  
  73. //             item.itemStyle.normal.labelLine.show = false;  
  74. //             item.itemStyle.normal.label.show = false;  
  75. //         }  
  76. //     });  
  77. // }  
  78.   
  79.         // 使用刚指定的配置项和数据显示图表。  
  80.         myChart.setOption(option);  
  81.     </script>  
  82. </body>  
  83. </html>  


是不是很难受。

下面我这里介绍下将0数据不在饼图上显示的几种方式。

现附上最终效果图：

1.在后台数据处理时候讲数据结果为0的数据过滤掉（这个大家根据业务情况做处理，这里只讲述下思路，不做具体展示）

2.在option的定义里处理（和第三个方法本质上是一样的，2的方式对各个数据进行处理，更有针对性，而3对饼图里的所有数据都做统一处理，大家根据需要进行选择）

附上代码：

 

[html]  view plain  copy
 
  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.    
  14.         var option = {  
  15.             tooltip : {  
  16.                 trigger: 'item',  
  17.                 formatter: "{a} <br/>{b} : {c} ({d}%)"  
  18.             },  
  19.             title: {  
  20.                 text: '某站点用户访问来源',  
  21.                 subtext: '纯属虚构',  
  22.                 x:'center'  
  23.             },  
  24.             legend: {  
  25.                 orient: 'vertical',  
  26.                 left: 'left',  
  27.                 //这个为提示条，注意名称要和data里的name一一对应  
  28.                 data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]  
  29.             },  
  30.   
  31.             series : [  
  32.                 {  
  33.                     name: '访问来源',  
  34.                     type: 'pie',  
  35.                     radius: '55%',   
  36.   
  37.                     data:[  
  38.                         {value:335, name:'直接访问'},  
  39.                         {value:310, name:'邮件营销'},  
  40.                         {value:234, name:'联盟广告'},  
  41.                         {value:135, name:'视频广告'},  
  42.                         {value:1548, name:'搜索引擎'},  
  43.                         // {value:0, name:'黑客'}  
  44.                         //注意：这种方式，这个过滤只针对黑客这个属性，其他属性如果为0的话还是会显示的，  
  45.                         //这个是具体根据某个属性做的设置，如果需要对所有的属性都做处理，推荐使用第三种  
  46.                         {value:0, name:'黑客',itemStyle:{  
  47.                            normal:{  
  48.                                 label:{  
  49.                                     show: true,  
  50.                                     formatter: function (params,option) {  
  51.                                         if(params.data.value == 0){  
  52.                                             // params.data.itemStyle.normal.labelLine.show = false;  
  53.                                             params.data.label.normal.show = false;   
  54.                                             params.data.labelLine.normal.show = false;      
  55.                                         }  
  56.                                     },  
  57.                                 },  
  58.                                 labelLine: {  
  59.                                     show: true  
  60.                                 }  
  61.                            }  
  62.                         }}  
  63.                     ]  
  64.                 }  
  65.             ]  
  66.         }  
  67.   
  68. //         var opt = option.series[0];  
  69. // lineHide(opt);  
  70. // //数据为零时隐藏线段  
  71. // function lineHide(opt) {  
  72. //     jQuery.each(opt.data, function (i, item) {  
  73. //         if (item.value == 0) {  
  74. //             item.itemStyle.normal.labelLine.show = false;  
  75. //             item.itemStyle.normal.label.show = false;  
  76. //         }  
  77. //     });  
  78. // }  
  79.   
  80.         // 使用刚指定的配置项和数据显示图表。  
  81.         myChart.setOption(option);  
  82.     </script>  
  83. </body>  
  84. </html>  



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

附上代码：

 

[html]  view plain  copy
 
  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.    
  14.         var option = {  
  15.             tooltip : {  
  16.                 trigger: 'item',  
  17.                 formatter: "{a} <br/>{b} : {c} ({d}%)"  
  18.             },  
  19.             title: {  
  20.                 text: '某站点用户访问来源',  
  21.                 subtext: '纯属虚构',  
  22.                 x:'center'  
  23.             },  
  24.             legend: {  
  25.                 orient: 'vertical',  
  26.                 left: 'left',  
  27.                 //这个为提示条，注意名称要和data里的name一一对应  
  28.                 data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]  
  29.             },  
  30.   
  31.             series : [  
  32.                 {  
  33.                     name: '访问来源',  
  34.                     type: 'pie',  
  35.                     radius: '55%',   
  36.   
  37.                     data:[  
  38.                         //使用该种方法记得要加上itemStyle属性，不然会找不到show属性报错的  
  39.                         {value:335, name:'直接访问',itemStyle:{  
  40.                            normal:{  
  41.                                 label:{  
  42.                                     show: true,  
  43.                                 },  
  44.                                 labelLine: {  
  45.                                     show: true  
  46.                                 }  
  47.                            }  
  48.                         }},  
  49.                         {value:310, name:'邮件营销',itemStyle:{  
  50.                            normal:{  
  51.                                 label:{  
  52.                                     show: true,  
  53.                                 },  
  54.                                 labelLine: {  
  55.                                     show: true  
  56.                                 }  
  57.                            }  
  58.                         }},  
  59.                         {value:234, name:'联盟广告',itemStyle:{  
  60.                            normal:{  
  61.                                 label:{  
  62.                                     show: true,  
  63.                                 },  
  64.                                 labelLine: {  
  65.                                     show: true  
  66.                                 }  
  67.                            }  
  68.                         }},  
  69.                         {value:135, name:'视频广告',itemStyle:{  
  70.                            normal:{  
  71.                                 label:{  
  72.                                     show: true,  
  73.                                 },  
  74.                                 labelLine: {  
  75.                                     show: true  
  76.                                 }  
  77.                            }  
  78.                         }},  
  79.                         {value:1548, name:'搜索引擎',itemStyle:{  
  80.                            normal:{  
  81.                                 label:{  
  82.                                     show: true,  
  83.                                 },  
  84.                                 labelLine: {  
  85.                                     show: true  
  86.                                 }  
  87.                            }  
  88.                         }},  
  89.                         {value:0, name:'黑客',itemStyle:{  
  90.                            normal:{  
  91.                                 label:{  
  92.                                     show: true,  
  93.                                 },  
  94.                                 labelLine: {  
  95.                                     show: true  
  96.                                 }  
  97.                            }  
  98.                         }}  
  99.                     ]  
  100.                 }  
  101.             ]  
  102.         }  
  103.   
  104.         var opt = option.series[0];  
  105.         lineHide(opt);  
  106.         //数据为零时隐藏线段  
  107.         function lineHide(opt) {  
  108.             jQuery.each(opt.data, function (i, item) {  
  109.                 if (item.value == 0) {  
  110.                     item.itemStyle.normal.labelLine.show = false;  
  111.                     item.itemStyle.normal.label.show = false;  
  112.                 }  
  113.             });  
  114.         }  
  115.   
  116.         // 使用刚指定的配置项和数据显示图表。  
  117.         myChart.setOption(option);  
  118.     </script>  
  119. </body>  
  120. </html>  

猜你喜欢

转载自www.cnblogs.com/raind/p/9139619.html
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022