echarts饼图数据为0的时候不显示,数据不为0的时候显示在扇区内
从网上看了一些方法,通过写一个函数,遍历所有的数据,将为0的数据隐藏掉,我想在这个基础上,让数据不为0的项目显示在扇区内,而不是通过折线显示在扇区外,我写了position: 'inside',但是不起作用,完整代码如下,请高手指点一下。
<div id="sxpd1" style="width:250px;height: 250px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('sxpd1'));
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
legend: {
orient: 'vertical',
show:false,
left: 'left',
//这个为提示条,注意名称要和data里的name一一对应
data: ['视频广告','联盟广告', '邮件营销', '直接访问',"搜索引擎","黑客"]
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
//使用该种方法记得要加上itemStyle属性,不然会找不到show属性报错的
{value:335, name:'直接访问',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
labelLine: {
show: true
}
}
}},
{value:310, name:'邮件营销',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
labelLine: {
show: true
}
}
}},
{value:234, name:'联盟广告',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
labelLine: {
show: true
}
}
}},
{value:135, name:'视频广告',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
labelLine: {
show: true
}
}
}},
{value:1548, name:'搜索引擎',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
labelLine: {
show: true
}
}
}},
{value:0, name:'黑客',itemStyle:{
normal:{
label:{
show: true,
position: 'inside',
formatter: '{b}:{c} \n ({d}%)',
},
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>