echarts饼图数据为0的时候不显示,数据不为0的时候显示在扇区内

qq_15591383 2019-08-06 11:38:28
从网上看了一些方法,通过写一个函数,遍历所有的数据,将为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>
...全文
3148 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
颓� 2020-11-19
  • 打赏
  • 举报
回复
判断小于10 的只隐藏文字和指示线不隐藏数据 怎么弄啊 大佬
颓� 2020-11-19
  • 打赏
  • 举报
回复
为什么数据也会被隐藏掉 不是只隐藏文字个指示线吗

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧