devexpress 饼状图 label 重叠怎么解决啊？

Posted 2023-04-25

参考技术A 将标签的backstyle属性设置成0试试

echarts 饼状图调节 label和labelLine的位置

 

原理

使用一个默认颜色为透明的，并且只显示labelLine的饼状图

然后通过调节这个透明的饼状图 以达到修改labelLine的位置

echarts地址

https://gallery.echartsjs.com/editor.html?c=x6VnXPfxlx

 

echarts源码：

option = 
    backgroundColor: "#03141c",
    title: 
        text: "84%",
        subtext: ‘完成部门占比‘,
        x: ‘center‘,
        y: ‘center‘,
        textStyle: 
            color: "#fff",
            fontSize: 30,
            fontWeight: ‘normal‘
        ,
        subtextStyle: 
            color: "rgba(255,255,255,.45)",
            fontSize: 14,
            fontWeight: ‘normal‘
        
    ,
    tooltip: 
        trigger: ‘item‘,
        formatter: "a <br/>b : c (d%)"
    ,
    legend: 
        x: ‘center‘,
        y: ‘bottom‘,
        data: [‘rose3‘, ‘rose5‘, ‘rose6‘, ‘rose7‘, ‘rose8‘]
    ,
    calculable: true,
    series: [
        
            type: ‘pie‘,
            radius: [80, 120],
            center: [‘50%‘, ‘50%‘],
            data: [
                
                    value: 10,
                    name: ‘吴际帅\n牛亚莉‘,
                    itemStyle: 
                        color: "transparent"
                    
                ,
                
                    value: 90,
                    name: ‘rose2‘,
                    itemStyle: 

                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            offset: 0,
                            color: ‘#0ce4da‘
                        , 
                            offset: 1,
                            color: ‘#f6fb08‘
                        ])
                    ,
                    labelLine: 
                      show: false,
                      length: 200,
                      length2: 100
                    ,
                    label: 
                        color: "rgba(255,255,255,.45)",
                        fontSize: 14,
                        show: false,
                        position: ‘outside‘,
                        formatter: ‘客户满意度\na|52个‘,
                        rich: 
                            a: 
                                color: "#fff",
                                fontSize: 20,
                                lineHeight: 30
                            ,
                        
                    
                
            ]
        ,
         // 指示线
            // 通过value 的值 调节lableLine的位置
            type: ‘pie‘,
            radius: [80, 100],
            data: [
                
                    value: 100,
                    itemStyle: 
                        color: ‘transparent‘
                    
                    
                ,
                
                    value: 50,
                    itemStyle: 
                        color: "transparent"
                    ,
                    labelLine: 
                      show: true,
                      length: 2,
                      length2: 240,
                      color: ‘orange‘,
                      lineStyle: 
                          color: ‘orange‘
                      
                    ,
                    label: 
                        color: "rgba(255,255,255,.45)",
                        fontSize: 14,
                        position: ‘outside‘,
                        formatter: ‘客户满意度\na|52个‘,
                        rich: 
                            a: 
                                color: "#fff",
                                fontSize: 20,
                                lineHeight: 30
                            ,
                        
                    
                
            ]
        ,
        
            type: ‘pie‘,
            radius: [80, 100],
            center: [‘50%‘, ‘50%‘],
            data: [
                    value: 10,
                    itemStyle: 
                        color: ‘#06d3cd‘
                    ,
                    labelLine: 
                        show: false
                    
                ,
                
                    value: 90,
                    itemStyle: 
                        color: "transparent"
                    
                
            ]
        
        
    ]
;