echarts 环形图上牵引线样式自定义

最新推荐文章于 2023-08-17 14:55:20 发布

39135917_ss

最新推荐文章于 2023-08-17 14:55:20 发布

阅读量939

点赞数

文章标签： echarts 前端 javascript

原文链接：https://blog.csdn.net/SpringHASh/article/details/115699229

版权

在这里插入图片描述
在series内部添加如下代码

label: {
            show: true,
            position: 'outer',
            width:0,
            height: 0,
            lineHeight: 0,
            backgroundColor: 'auto',
            padding: [2,-2,2,-2],
            borderRadius: 2,
            distanceToLabelLine: 0,
            // formatter: '{top|{b}}\n{bottom|{d}%}',
            // 格式化牵引线上文字
            formatter: '{top|{b}，{d}%}',
            align: 'center',
            rich: {
                top: {
                    verticalAlign: 'bottom',
                        padding: [5, 10, 0, 10],
                        align: 'center',
                        // 牵引线上文字大小
                        fontSize:9,
                },
                bottom: {
                    padding: [0, 10, 5, 10],
                        verticalAlign: 'top',
                        align: 'center'
                }
            }
        },
        labelLine: {
            show: true,//数据标签引导线
                // 牵引线长度
                length: 20,
                length2: 50,
                lineStyle: {
                width: 1,
                    type: 'solid'
            }
        },