Echarts中饼图隐藏指示线、设置指示线长度

效果图

效果图

设置内容如下

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '10%',    // 中心圆大小
            data: [
                {value: 36, labelLine:{show: false}},   // 隐藏指定区域指示线
                {value: 21.6, name: '直接访问'},
                {value: 21.6, name: '邮件营销'},
                {value: 21.6, name: '联盟广告'},
                {value: 21.6, name: '联盟广告'},
                {value: 21.6, name: '联盟广告'},
                {value: 36, labelLine:{show: false}},
                {value: 36, labelLine:{show: false}},
                 {value: 21.6, name: '直接访问'},
                {value: 21.6, name: '邮件营销'},
                {value: 21.6, name: '联盟广告'},
                {value: 21.6, name: '联盟广告'},
                {value: 21.6, name: '联盟广告'},
                {value: 36, labelLine:{show: false}}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            labelLine:{  
                normal:{  
                    // 统一设置指示线长度
                    length:45, 
                    length2:45,
                }  
            },
        }
    ],
    textStyle: {
        fontSize: 20
    },
};

设置指示线长度

• 设置指示线长度需要分别设置length和length2的大小。
• 隐藏对指定区域的指示线只需要在series中的data中的某一个数据中加入labelLine:{show: false}，如果需要完全隐藏指示线，需要在labelLine的normal中加入show: false，

labelLine:{  
   normal:{  
       length:45, 
       length2:45,
       show: false    // 隐藏所有指示线
   }  
},