本文详解ECharts饼图中label的formatter与rich配置，实现标签颜色与扇区一致。通过回调函数生成动态样式类名，解决自定义标签显示问题。此外，利用双层饼图技巧在圆心展示数据总和，并提供自适应与数据处理的参考代码。
需求描述
目标是制作一个视觉效果丰富的饼图，要求每个扇区对应的标签颜色与该扇区的填充颜色保持一致。
实现思路
修改饼图标签颜色需参考ECharts的label配置项，并借鉴官方示例“饼图引导线调整”。该示例展示了实现自定义标签所需的两个关键配置：formatter用于定义标签显示的内容结构，rich用于定义标签文字的样式细节。
label: {
formatter: '{name|{b}}\n{time|{c} 小时}',
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
}
以下对自定义标签配置项进行简要说明：
formatter
简单的标签内容可直接使用ECharts的标签字符串模板，其逻辑类似于JavaScript模板字符串。例如“{name|{b}}\n{time|{c} 小时}”包含两个部分“{b}”和“{c} 小时”，中间用“\n”换行分隔。其中“{name|}”和“{time|}”的写法类似于HTML中的class属性，如“<div class='name'>{b}</div>”，用于为对应内容指定样式类名。
此外，也可通过回调函数手动返回formatter字符串。回调函数中不使用ECharts标签字符串模板，因为传入的参数包含更完整的数据。若使用回调函数生成上述formatter字符串，写法如下：
label: {
formatter: params => {
// console.log(params)
return `{name|${params.name}}\n{time|${params.value} 小时}`
},
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
}
rich
rich用于为每个样式类名配置具体的样式属性，具体支持项可参考ECharts官方文档中的样式配置说明。
经测试，需注意两点：第一，自定义标签样式必须通过在formatter中为内容设置样式类名，并在rich中配置对应样式来实现；第二，每段内容只能指定一个样式类名。
参考代码
基于上述分析，若要实现标签颜色与饼块颜色一致，可预先定义一个配色数组，遍历该数组为每种颜色创建rich样式类名，再使用回调函数formatter为标签内容指定下标一致的样式类名。具体参考代码如下：
let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
richColor[`color${idx}`] = {
fontSize: 28,
color: item
}
})
option = {
color: pieColors,
series: [
{
name: 'Access From',
type: 'pie',
radius: ['36%', '56%'],
avoidLabelOverlap: false,
label: {
formatter: params => {
// console.log(params)
return `{color${params.dataIndex}|${params.name}(${params.value})}`
},
rich: richColor
},
labelLine: {
lineStyle: {
width: 3
}
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
在线运行
可将参考代码复制到ECharts环形图示例在线环境中进行调试：echarts环形图示例
标签plus
现增加一个小需求：在圆环饼图中心增加展示所有数据的总和，效果类似：
分析
首先想到的方案，也是笔者曾经使用的方案：自己多写一个div来展示圆环中心的数据，但现在笔者有了更好的思路，便不细讲了。
新的思路
其实和之前的思路差不多，只是不再自己写一个div自己调样式，而是利用echarts饼图支持在圆心处展示标签的特性，在series中增加一个饼图用于展示总数，参考代码如下：
let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
richColor[`color${idx}`] = {
fontSize: 28,
color: item
}
})
let chartData = [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
option = {
color: pieColors,
series: [
{
name: 'Access From',
type: 'pie',
radius: ['36%', '56%'],
avoidLabelOverlap: false,
label: {
formatter: params => {
// console.log(params)
return `{color${params.dataIndex}|${params.name}(${params.value})}`
},
rich: richColor
},
labelLine: {
lineStyle: {
width: 3
}
},
data: chartData
},
{
name: '数据总数',
type: 'pie',
radius: ['0%', '0%'],
itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
color: 'transparent'
},
label: {
position: 'inside',
formatter: `{data|{c}}\n{serie|{a}}`,
rich: {
data: {
fontWeight: 'bold',
fontSize: 64,
color: `#202020`,
lineHeight: 68,
textBorderColor: `transparent`,
textBorderWidth: 0
},
serie: {
fontSize: 24,
color: `#acbac6`,
lineHeight: 28,
textBorderColor: `transparent`,
textBorderWidth: 0
}
}
},
labelLine: {
show: false
},
data: [ // 计算表格数据value总和
chartData.reduce((prev, cur) => prev + cur.value, 0)
]
}
]
};小伙伴们可自行拷贝到echarts环形图示例在线调试~☆▽☆~
（最后再多嘴一句，echarts配置项的层级非常重要！！！如果出现了配置项“失效”的情况，可以先·仔细·对照官方文档，排查下配置项的层级问题~）
附：解决formatter无法处理数据的问题
解决图标自适应大小的问题
大家在使用echarts饼图时，经常遇到formatter无法处理精确数据的情况，怎么办呢？建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历
//首先建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历
var chartPie = echarts.init(document.getElementById("charPie"));
var option = {
backgroundColor: "#ffffff",//背景色
legend: {//图例配置
selectedMode: false,//取消图例上的点击事件
show: true,//是否显示图例
orient: 'vertical',
x: '55%',
y: '0px',
right: '0px',
top: 'center',
data: pieData,//饼图数据
icon: "circle",
itemHeight: 9,//图例圆点的高度
formatter: function (name) {
console.log(name, "打印一下name")
// let arr = ["{a|" + n + "}", "{b|" + target + "%}"]
//return arr.join("")
},
textStyle: {
rich: {
a: {
fontSize: 12,
color: "#333",
padding: 1//图例上下的间距
}
}
}
},
series: [{
name: '圆环图系列名称', // 系列名称
type: 'pie', // 系列类型
center: ['20%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: [34, 58], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
normal: {
show: false // 是否显示标签[ default: false ]
}
},
color: ['#16B6F3', '#DB3764', '#B482CE', '#F9C03D', "#44A22E", "#F39716", "#E54EB5", "#82E2D2", "#3DD5F9", "#A39D0E"], // 圆环图各环节的颜色（顺时针）
data: pieData // 系列中的数据内容数组。
}]
};
// 使用刚指定的配置项和数据显示图表
chartPie.setOption(option)
window.addEventListener("resize", function () {
chartPie.resize()//图表自适应大小
})
效果图如下：
参考网址
[1] echarts饼图label配置项
[2] echarts标签字符串模板
[3] JS模板字符串
[4] echarts支持的样式配置
[5] echarts环形图示例
总结
到此这篇关于echarts饼图标签formatter使用及饼图自定义标签的文章就介绍到这了,更多相关echarts饼图标签formatter使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！