echarts label formatter

最新推荐文章于 2025-06-17 09:56:07 发布

Qin__

最新推荐文章于 2025-06-17 09:56:07 发布

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： vue echarts

本文链接：https://blog.csdn.net/Uookic/article/details/83863835

前端学习专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何在ECharts中自定义Label样式，通过调整字体大小、位置及使用富文本格式化器实现复杂视觉效果。示例代码展示了如何将Label拆分为多个部分并分别设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在用echarts做图表时，默认label是一个样式。这里记录下如何修改label样式

      label: {
                 normal: {
                    // position: 'inner',
                     fontSize:14,
                     formatter: function(data) { 
                        
                        let a = data.name.split(' ')[0];
                        let b = data.name.split(' ')[1];
                        let c = data.name.split(' ')[2];
                        let d = data.name.split(' ')[3]; 
                          return a +'{a|' + b + '}'+c+'{b|' + d + '}'; 
                       
                    } , rich: {
                          a: {
                              color: '#CE4C4C',
                              fontSize:14, 
                          },
                          b: {
                              color: '#F0C69E',
                              fontSize:14, 
                          }
                      } 
                }
            },

效果如下：
在这里插入图片描述