Echarts 饼图视觉引导线隐藏和显示

由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线。直接上代码

var arr1=[{value: "10",  name: "资金运用"},
          {value: "12", name: "资金管理"},
          {value: "12", name: "资金余额"}
          ]
option = {
    backgroundColor: '#fff',
    color:["#86891F",
        "#95794B",
        "#760A34"],
    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

   
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            
            data:genData(arr1)
        
        }
    ]
};
function genData(arr){
    arr.forEach(item=>{
        item.label={
            show: function () {
                if (item.value <= 10) {
                    return false;
                } else {
                    return true;
                }
            }(),
            formatter:function(v){
                    var text=''
                    if(v.name.length>5){
                      text=v.name.substring(0,5)+'...'
                      
                    }else{
                       text=v.name
                    }
                    return text
                  },
            position: function () {
                if (item.value <= 10) {
                    return 'inside';
                } else {
                    return 'outside';
                }
            }(),
        };
        item.labelLine={
            show: function () {
                if (item.value <= 10) {
                    return false;
                } else {
                    return true;
                }
            }(),
        };
    })
    return arr
}

echarts饼图的示例,复制以上代码替换
效果图如下:
在这里插入图片描述

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值