Echart使用之饼图的问题

最新推荐文章于 2024-09-09 14:08:32 发布

weixin_34129145

最新推荐文章于 2024-09-09 14:08:32 发布

阅读量303

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1540325/blog/411621

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、问题描述

在项目之中，我们有时候期望的图如下：
结果效果如下：
我们看到，百分比都是乱码了，然后，像数量什么的，如果是0,下面的图就不会显示。

二、解决办法，我们采取逐个击破的方法。

1.首先看那种数量为0，显示不了的问题，代码如下：

var mychart = echarts.init(document.getElementById(elementID));
var labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            textStyle: {
                baseline : 'bottom'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelBottom = {
    normal : {
        color: '#ccc',
        label : {
            show : true,
            position : 'center',
            formatter : function(a,b,c){return c.toString() },
            textStyle: {
                baseline : 'top'
            }
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var radius = [28, 29];
var option = {
    toolbox: {
        show : false,
    },
    series : [
    {
        type : 'pie',
        center : ['50%', '50%'], //圆心坐标
        radius : radius,         //内径和外径
        data : [
            {name:'other', value:Count, itemStyle : labelBottom},
            {name:'', value:0, itemStyle : labelTop}
        ]
    }
    ]
};
mychart.setOption( option );

我们先来理解下这段代码：

1>.这两个变量labelBottom、labelTop来设置图型样式，里面包括：像圆圈的颜色color，还有 labelLine-标签视觉引导线，最重要的就是这个label里面可以显示我们要显示的数量或者百分比。

2>.还有一个蛮重要的就是series.data变量了，会根据里面有多少项，然后根据本项的value值在所有项的value值里面的占的比例，本项的颜色圈弧会在总的圆圈中占一定的比例。例如下图:

data : [
{name:'other', value:50, itemStyle : labelBottom},//将用户传进来的数量原样显示
{name:'', value:50, itemStyle : labelTop}
]

所以第一个问题就可以迎刃而解，在最开始贴的代码中，可以看到，第二个value值为0，当第一为0的时候，自然就会没有外面的圆圈，所有一定要把第二个value值不为0，就给一个1，我们只用第一value值，第二个不用，就算第一个value值为0，但是第二个value值不为0，自然会有圆圈，但是，第二个颜色会占一部分，所以可以把第一个和第二个的颜色设置成为一样了，这样就解决了这个问题了。

3>还有一个问题

formatter : function(a,b,c){return c.toString() },

这个c.toString()，在新的2.2.1版本中会报错，可以改成如下：

formatter :  "{c}",

最后变为：

var mychart = echarts.init(document.getElementById("main"));
var labelTop = {
normal : {
color:'#b4b4b4',
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'middle'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#b4b4b4',
label : {
show : true,
position : 'center',
formatter :  "{c}",
textStyle: {
baseline : 'middle'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: '#b4b4b4',
}
};
var radius = [28, 29];
var option = {
toolbox: {
show : false,
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : radius,
data : [
{name:'other', value:50, itemStyle : labelBottom},//将用户传进来的数量原样显示
{name:'', value:1, itemStyle : labelTop}
]
}
]
};
mychart.setOption( option );
</script>

2.就是那个百分比乱码的问题。

其实就是这个formatter的问题,

var mychart = echarts.init(document.getElementById(elementID));
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center',
formatter : function(a,b,c){return 100 - c + '%'},
textStyle: {
baseline : 'top'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [27, 30];
var option = {
toolbox: {
show : false,
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : radius,
data : [
{name:'other', value:100-elementPercent, itemStyle : labelBottom},
{name:'', value:elementPercent,itemStyle : labelTop}
]
}
]
};
mychart.setOption( option );
};

其实就是：

formatter : function(a,b,c){return 100 - c + '%'},

这儿的问题，我们先看一个这函数，在2.2.1版本同样的表示方法可以为：

 formatter : function (params){
                return 100 - params.value + '%'
            },

我们来研究一下formatter对于饼图下的情况

饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称）

所以可以直接这样显示百分比，不用自己还去运算：

formatter :  "{d}%",

所以上面的代码也很别扭，传给第二个data项的百分比，确实通过第一data项的label显示出来，所以可以修改下labelBottom、和labelTop里面的label，因为要显示第二个的百分比，j所以可以删去第一个label中的formater这行代码，只在第二个label中加入下面这句代码:

formatter :  "{d}%",

最后的代码如下：

var mychart = echarts.init(document.getElementById("main"));
var labelTop = {
    normal : {
        color:'#5eb9ef',
        label : {
            show : true,         //让其显示出来
            position : 'center',
            formatter :  "{d}%",  //名字和对应的data项在总的占的百分比
            textStyle: {
                baseline : 'middle'
            }
        },
        labelLine : {
            show : true  
        }
    }
};
var labelBottom = {
    normal : {
        color: '#b4b4b4',
        label : {
            show : false,
            position : 'center',
            textStyle: {
                baseline : 'middle'
            }
        },
        labelLine : {
            show : false  // 不让那条线给显示出来
        }
    },
    emphasis: {
        color: '#b4b4b4',
    }
};
var radius = [28, 39];
var option = {
    toolbox: {
    show : false,
    },
    series : [
    {
        type : 'pie',
        center : ['50%', '50%'],
        radius : radius,
        data : [
            {name:'other', value:(1-0.2), itemStyle : labelBottom},//这儿value是用户传进来的百分比数据
            {name:'aaaaa', value:(0.2), itemStyle : labelTop}
        ]
    }
    ]
};
mychart.setOption( option );

至此，基本问题就解决了！

转载于:https://my.oschina.net/u/1540325/blog/411621