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

最新推荐文章于 2024-12-30 18:17:49 发布

原创

最新推荐文章于 2024-12-30 18:17:49 发布 · 3k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细解析了Echarts中数据标签(label)和牵引线(labelLine)的配置选项，包括显示设置、位置调整、样式定制以及富文本支持等，帮助开发者实现更美观的数据可视化效果。

在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',