zoukankan      html  css  js  c++  java
  • echart 饼图数据为0不显示或者太小显示其他的解决办法

    饼图数据为0或者太小显示如下,不美观

    解决办法:

    为0的去掉,小于0.005的累加起来

    方法

    function getsData(_rowData){
        var rowData=JSON.parse(JSON.stringify(_rowData))
        var sum=rowData.reduce(function(o,v,i){
            o+=parseFloat(v.value);
            return o;
        },0)
        if(isNaN(sum)||sum==0){return []}
        rowData.sort(function(a,b){
            return a.value-b.value;
        }).reverse();
        var val=0;//其他的相加
        for(var i=rowData.length-1;i>0;i--){
            var _row=rowData[i],sub;
            sub=_row.value/sum;
            //如果为0或者小于.05的比例就将此元素移除
            if(sub<0.005){
                rowData.length=i;//去掉最后一个
                val+=parseFloat(_row.value);
            }
        }
        //在后面追加一个其他的项
        if(val>0){
            rowData[length].name="其他";
            rowData[length].value=val;
        }
        return rowData;
    }

    效果图

    完整的option

    var testData=[
                    {value:3331, name:'直接访问'},
                    {value:3110, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:0, name:'联盟广告'},
                    {value:10, name:'联盟广告1'},
                    {value:10, name:'联盟广告22'},
                    {value:10, name:'联盟广告122'},
                    {value:10, name:'联盟广告333'},
                    {value:20, name:'联盟广告3'},
                    {value:10, name:'联盟广告4'},
                    {value:11135, name:'视频广告'},
                    {value:11548, name:'搜索引擎'}
                ],
    option = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:getsData(testData),
               //data:testData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    function getsData(_rowData){
        var rowData=JSON.parse(JSON.stringify(_rowData))
        var sum=rowData.reduce(function(o,v,i){
            o+=parseFloat(v.value);
            return o;
        },0)
        if(isNaN(sum)||sum==0){return []}
        rowData.sort(function(a,b){
            return a.value-b.value;
        }).reverse();
        var val=0;//其他的相加
        for(var i=rowData.length-1;i>0;i--){
            var _row=rowData[i],sub;
            sub=_row.value/sum;
            //如果为0或者小于.05的比例就将此元素移除
            if(sub<0.005){
                rowData.length=i;//去掉最后一个
                val+=parseFloat(_row.value);
            }
        }
        //在后面追加一个其他的项
        if(val>0){
            rowData[length].name="其他";
            rowData[length].value=val;
        }
        return rowData;
    }
    View Code
  • 相关阅读:
    gulp
    php
    自定义指令
    angular
    nullnullAndroid开发:TextView换行
    包用于Intel MIC性能测试程序
    卡系统Intel MIC开发环境安装
    苹果运营商中移动苹果互盼“在一起” 最快Q3推4G移动版iPhone
    位置高度ios 开发中跟绘图相关的CGFloat,CGPoint,CGSize,CGRect,CGRectZero
    程序编程Intel MIC学习资料
  • 原文地址:https://www.cnblogs.com/pengfei25/p/10553058.html
Copyright © 2011-2022 走看看