Echart使用之饼图的问题
1、问题描述html
在项目之中，咱们有时候指望的图以下：echarts
结果效果以下：函数
咱们看到，百分比都是乱码了，而后，像数量什么的，若是是0,下面的图就不会显示。spa
2、解决办法，咱们采起逐个击破的方法。code
1.首先看那种数量为0，显示不了的问题，代码以下：orm
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 );
咱们先来理解下这段代码：htm
1>.这两个变量labelBottom、labelTop来设置图型样式，里面包括：像圆圈的颜色color，还有 labelLine-标签视觉引导线，最重要的就是这个label里面能够显示咱们要显示的数量或者百分比。ip
2>.还有一个蛮重要的就是series.data变量了，会根据里面有多少项，而后根据本项的value值在全部项的value值里面的占的比例，本项的颜色圈弧会在总的圆圈中占必定的比例。例以下图:element
data : [
{name:'other', value:50, itemStyle : labelBottom},//将用户传进来的数量原样显示
{name:'', value:50, itemStyle : labelTop}
]
因此第一个问题就能够迎刃而解，在最开始贴的代码中，能够看到，第二个value值为0，当第一为0的时候，天然就会没有外面的圆圈，全部必定要把第二个value值不为0，就给一个1，咱们只用第一value值，第二个不用，就算第一个value值为0，可是第二个value值不为0，天然会有圆圈，可是，第二个颜色会占一部分，因此能够把第一个和第二个的颜色设置成为同样了，这样就解决了这个问题了。get
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 );
至此，基本问题就解决了！