如何修改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: '其他'
            }]
        }
    ]
};

结果图:

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值