美文网首页
Echarts中饼图隐藏指示线、设置指示线长度

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

作者: wxyzcctn | 来源:发表于2021-02-19 13:57 被阅读0次
    效果图
    效果图

    设置内容如下

    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    // 隐藏所有指示线
       }  
    },
    

    相关文章

      网友评论

          本文标题:Echarts中饼图隐藏指示线、设置指示线长度

          本文链接:https://www.haomeiwen.com/subject/hhraxltx.html