如何修改echarts环形图的牵引线及文字位置

Ĵ近日做项目需要用到echarts的环形图,但官网原生样式无法满足需求,故将样式进行修改,效果图如下:

官网原图:

我需要修改的:

1.去掉边框和百分比

2.文字上移至牵引线的上方

3.自定义样式

代码如下

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: " {b}:{c} "
        
       // ({d}%)   代表该模块所占圆环比例
        // formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
     //环形颜色
     color:['#ffb616','#ccc'],
    legend: {
        orient: 'vertical',
        show: false,
        x: 'left',
        data: ['视频广告', '其他']
    },
    series: [
 
        {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '40%'],
            labelLine: {
                normal: {
                    length: 20,
                    length2: 70,
                    lineStyle: {
                        color: '#333'
                    }
                }
 
            },
            label: {
                normal: {
                    // \n\n可让文字居于牵引线上方,很关键
                    //  {b}  代表显示的内容标题
                    // {c}代表数据
                    formatter: ' {b}:{c} \n\n',
                    
                    borderWidth: 20,
                    borderRadius: 4,
                    padding: [0, -70],
                    rich: {
                        a: {
                            color: '#333',
                            fontSize: 12,
                            lineHeight: 20
                        },
                        b: {
                            fontSize: 12,
                            lineHeight: 20,
                            color: '#333'
                        }
                    }
                }
            },
            data: [{
                value: 8,
                name: '视频广告'
            }, {
                value: 35,
                name: '其他'
            }]
        }
    ]
};

结果图:

猜你喜欢

转载自blog.csdn.net/k912120/article/details/81477039
今日推荐