需求
今天分享一个很实际的ECharts图例多行显示的经验。
如图,要实现的效果如下。图例需要进行显示多行信息并且icon要与第一行持平。
步骤
显示多行多样式
首先,多行显示需要用到legend.formatter[1],该配置项支持自定义图例信息, \n
用来换行。
其次,不同的文字显示不同的样式,需要用到富文本样式[2],具体用法如下。
// 配置项,只展示关键信息
const options = {
legend: {
formatter: function (name) {
return [
`{name|${name}}{percent|30%}`,
"{num|300}",
`{others|others}`,
].join("\n");
},
textStyle: {
rich: {
name: {
fontSize: 12,
},
percent: {