echarts饼图文本标签百分比左右对称效果

先看下效果图,实现引导线处百分比数值左右对称效果


先开始想到对引导线上方文本label用 formatter:{d}% {c}万元 表示,但是呈现的结果


最终分别对百分比、数据名、数据值调整padding实现

option = {
    backgroundColor: '#000',
    color: ['#FF5C5C','#FFC000','#17B1B9','#08B0F9'],
    series: [
        {
            type: 'pie',
            radius: ['30%', '35%'],
            labelLine: {
                show: true,
                length: 15, // 第一段线 长度
                length2: 105, // 第二段线 长度 
            },
            label:{
                 color:'#fff',
                fontSize: 8,
                padding:[-2,-110,2,-110],
                formatter:[
                        '{d|{d}%}',
                        '{c|{c}}万元',
                        '{b|{b}}',
                    ].join('\n'),
                rich:{
                    c:{
                        fontSize: 19,
                        color:'#fff',
                        padding:[4,4,-2,0],
                    },
                   b: {
                       padding:[8,0,0,0],
                       color:'#fff',
                       fontSize: 10,
                   },
                   d:{
                       color:'#fff',
                       fontSize: 10,
                       padding:[-15,70,15,70],
                   }
                }
            },
            data: [
                {value: 1500, name: '政府'},
                {value: 1200, name: '其他'},
                {value: 1300, name: '混合'},
                {value: 1400, name: '企业'}
            ]
        }
    ]
};

好记性不如烂笔头,总结和记录工作学习中的点点滴滴,如有不对之处还请指教。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。