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

最新推荐文章于 2024-04-28 12:04:20 发布
最新推荐文章于 2024-04-28 12:04:20 发布
阅读量6.2w 收藏 33
点赞数 13
分类专栏： web前端 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011768325/article/details/73499299
版权

备注：文章里使用的是老版本的echart.js（2.x）. 新版本（5.0.2）的echart.js的话可以参考https://blog.csdn.net/weixin_42080056/article/details/114523820

 

首先阐述下为什么会有这个需求，这个和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>

 

 

 

 

 

 

风过留痕丶
关注
  • 13
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
专栏目录
echart 饼图数据为0不显示或者太小显示其他的解决办法
03-18 6090
饼图数据为0或者太小显示如下，不美观 解决办法： 为0的去掉，小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(JSON.stringify(_rowData)) var sum=rowData.reduce(function(o,v,i){ ...
echarts 饼状图没有数据时的展示
weixin_44101779的博客
04-10 1万+
function getScrapItemTop5() { var queryData = { factoryid:factoryid, workshop:workshop }; $.ajax({ ...
EChart ToolTip中不显示value为0的数据
墨的博客
11-11 1712
EChart ToolTip中不显示value为0的数据 option.tooltip.formatter = function(params) { var res = `${params[0].name} <br/>` for (const item of params) { if (item.value !== 0) { res += `<span style="background: ${item.color}; height:10
Echarts学习之四：series-pie饼图_echarts里的pie可以倾斜吗
最新发布
2401_84418883的博客
04-28 872
mypoint={symbol:“pin”, //图形 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’symbolSize:50, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。symbolRotate:0, //标记的旋转角度。
echarts饼图，设置值为0时不显示
weixin_42844590的博客
03-16 3490
设置最小扇形区域角度后，值为0的也会显示，若想让值为0的不显示，需要处理数据
使用pyecharts生成饼图的时候，标签为数字0的图例显示不出来
qq_56776909的博客
06-20 1566
在使用pyecharts生成饼图时，如果标签为数字0的图例显示不出来，可能是因为pyecharts默认会将数字0当作False处理，导致图例不显示。可以通过设置标签的类型为字符串来解决这个问题。记录一下在使用pyecharts作图的时候遇到的一些问题。明明数字0是被当做标签(x)传入的，并不是数值（y）传入的，为什么会显示不了。在原代码中查看x_data里面元素的类型，发现确实是int类型，不是字符串类型。所以我们只需要将x_data列表中的元素都转换为str类型即可。
echarts饼图+接口数据为0时饼图不渲染的解决
bbt953的博客
12-27 5384
以上是理想状态，点击下拉列表，当某个选择下的数据为0时，图表也同步渲染 但是现在是这样的，我的数据为0时，图表还停留在上一数据的样子，并不重新渲染 解决：这都要谢谢我那老后端，给我传的数据格式，当有数据时，他给我传的是好的 当数据为0时，人家不给我传0，人直接我个空数组 所以当我res.data.map的时候，如果res.data=[]，那就不会push任何东西，所以series.data没有数据，自然不会渲染，其实后端给返的就是{name:’’,value:’’}格式，没数据就是个空数组，所以直..
echarts饼图不显示为0的数据
li_970408的博客
09-22 2548
首先在data里把lableLine和lable都设置为true 然后再在下面这里进行判断设置他们的显示与否
Highcharts 饼图数据是0的时候不显示
crabpp_7的博客
11-25 1277
Highcharts 饼图数据是0的时候不显示
django echarts饼图数据动态加载的实例
09-18
今天小编就为大家分享一篇django echarts饼图数据动态加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts饼图之数据展示
01-08
Echarts饼图之数据展示 1、组件简介 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形...
echarts数据库 动态获取数据 代码（饼图）
11-17
希望能帮到你
echarts圆环饼图初始中间显示数据
02-02
场景：在开发中，使用环形图我们有时希望某个数据初始显示在环中间 代码：该实例提供2种方法实现参考，可根据自己需要学习参考
设置echarts多维柱状图数据为0的柱子不显示
yanwu666的博客
03-01 2747
设置echarts多维柱状图数据为0的柱子不显示。
echarts设置tooltip遇到值为0不展示的问题(已解决)
博客简介
01-18 1293
【代码】echarts设置tooltip遇到值为0不展示的问题(已解决)
echarts 图表无数据/空数据 展示“暂无数据”
热门推荐
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
echarts柱状图加滑动，echarts饼状图无数据时显示暂无数据文字，不显示动画
weixin_41765715的博客
09-08 1176
1.当柱状图x轴数据项过多时，无法很好的显示，可以通过加滚动条来实现较好的使用体验。2.echarts图形无数据时，实现不显示动画，显示【暂无数据】文字。可以通过start属性控制初始展示数据项的比例。若start的值为100，则全部显示。
echarts pie饼图初始化的时候没数据
hzxOnlineOk的博客
04-10 2078
原因：我们在componentDidMount生命周期里初始化了Pie（echarts的饼图） componentDidMount() { this.showPieChart() } showPieChart = () => { let myChart = echarts.init(document.getElementById('PieWrap')) let...
饼状图数据为零时候不显示数据
axi19990710的博客
01-19 953
百度了老多没啥能用的，完成需求之后晒到网上来吧，能帮助一个是一个别再着急挠头了 下面展示一些 内联代码片。 <template> <div :class="className" :style="{ height: height, width: width }" /> </template> <script> import echarts from "echarts"; //引入 require("echarts/theme/macarons"); //
echarts饼图数据显示不全
08-26
您好！关于Echarts饼图数据显示不全的问题，可能有几种原因导致。以下是一些常见的解决方法： 1. 调整图表容器的大小：确保图表容器的尺寸足够大，以便能够完整显示饼图的所有数据。您可以通过设置容器的宽度和高度来调整大小。 2. 调整饼图的半径：通过设置饼图的半径属性，可以控制饼图的大小。如果饼图的半径较小，可能导致数据无法完整显示。您可以尝试增大半径值，以确保数据能够完整展示。 3. 使用图例：将图例放置在饼图旁边，可以帮助解决数据显示不全的问题。通过点击图例上的项，可以隐藏或显示相应的数据。 4. 调整数据标签位置：如果数据标签过于密集，可能会导致重叠或显示不全。您可以尝试调整数据标签的位置，将其放置在合适的位置，以便更好地显示数据。 以上是一些可能的解决方法，您可以根据具体情况进行尝试。如果问题仍然存在，建议提供更多的细节或代码片段，以便更准确地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值