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

关注

原创最新推荐文章于 2026-04-11 10:49:36 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

echarts3d饼图，环形图（包含透明效果）先看效果图：饼图：环形图：带透明度的环形图：安装echarts "echarts":"^5.1.2" "echarts-gl":"^2.0.8" import Vue from 'vue' import * as echarts from 'echarts' import 'echarts-gl' // 3d图表库 Vue.prototype.$echarts = echarts .vue文件 <template> &l... 阅读详情

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

收录于