echarts 环形图formatter自定义环形图中间文字，label

最新推荐文章于 2024-10-15 11:06:56 发布

原创最新推荐文章于 2024-10-15 11:06:56 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了如何在JavaScript图表中，如饼图，利用富文本功能（rich）设置字体大小、颜色，以达到美化数据展示的效果，以重大和较小风险为例进行详细说明。

设置两行，使用富文本rich自定义字体大小颜色，效果图如下

const total = 5473
series: [
          {
            type: 'pie',
            radius: ['60%', '78%'],
            label: {
              show: true,
              position:'center',
              formatter: function(){
                return "{name|" + total +"}"+"\n"+"{unit|风险数量}"

              },
              textStyle: {	// 设置样式
                rich: {
                  name: {
                    fontSize: 20,
                    color: '#ffffff',
                    fontWeight: 'bold',
                  },
                  unit: {
                    fontSize: 14,
                    color: '#ffffff'
                  }
                }
              },
            },
            data: [{value:1,name:'重大'},{value:2,name:'较小'}]
          }
        ]