echarts饼图标签formatter使用及饼图自定义标签

1. formatter使用

在echarts中，饼图的标签可以通过formatter属性来进行自定义。formatter是一个回调函数，用于控制标签的显示格式。

1.1 格式化函数的语法

formatter: function(param) {
    // param为当前标签的数据项
    // 返回需要展示的标签内容
}

1.2 参数说明

• param: 当前标签的数据项对象，包含各种属性，如param.name表示标签名称，param.percent表示所占比例等。

1.3 示例

option = {
    series: [
        {
            type: 'pie',
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            label: {
                show: true,
                position: 'outside',
                formatter: function(param) {
                    return param.percent + '%'; // 显示百分比
                }
            }
        }
    ]
};

在上述示例中，formatter函数将标签内容设置为所占比例的百分比。

2. 饼图自定义标签

除了使用formatter来自定义标签内容外，还可以通过悬浮框样式和富文本格式来实现更复杂的标签效果。

2.1 悬浮框样式

使用textStyle属性来设置文本样式，如字体大小、颜色等。

option = {
    series: [
        {
            type: 'pie',
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            label: {
                show: true,
                position: 'outside',
                textStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                formatter: '{b}: {c}'
            }
        }
    ]
};

在上述示例中，formatter: '{b}: {c}'表示将标签设置为名称和对应数值的组合。

2.2 富文本格式

使用rich属性可以实现更复杂的标签样式，如分行显示、不同文本样式等。

option = {
    series: [
        {
            type: 'pie',
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            label: {
                show: true,
                position: 'outside',
                textStyle: {
                    fontSize: 14,
                    color: '#333'
                },
                formatter: function(param) {
                    return `{a|${param.name}}\n{b|${param.percent}%}`;
                },
                rich: {
                    a: {
                        color: '#666',
                        fontSize: 12
                    },
                    b: {
                        color: '#EE0000',
                        fontSize: 14
                    }
                }
            }
        }
    ]
};

在上述示例中，通过rich属性定义了两个样式，a用于标签名称，b用于所占比例的百分比。通过使用{a|}和{b|}表示使用对应的样式。

以上就是关于echarts饼图标签formatter使用及饼图自定义标签的完整攻略。通过使用formatter属性和悬浮框样式、富文本格式等技巧，可以灵活地定制饼图标签的显示效果。