echarts饼图内部显示文字

最新推荐文章于 2023-12-19 17:41:36 发布

原创最新推荐文章于 2023-12-19 17:41:36 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

6 篇文章

订阅专栏

该文章介绍如何在ECharts的Pie图系列中配置label，显示中心标签。通过设置`label.normal`和`label.emphasis`，可以控制标签的显示、位置、颜色和格式。`formatter`函数用于自定义标签内容，同时调整了边框样式和避免标签重叠的选项。

在option的series里面添加label

 series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          // 主角代码开始分割线-----------
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#fff',
              formatter: `{total|${200}}\n{active|总数}`,//写死的200可改为别的数值
              rich: {
                total: {
                  fontSize: 20,
                  fontFamily: "微软雅黑",
                  color: '#000'
                },
                active: {
                  // fontFamily : "微软雅黑", 
                  fontSize: 10, color: '#000',
                  lineHeight: 30,
                },
              }
            },
          },
          // 主角代码结束分割线-----------
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: dataList//数据
        }
 ]

代码结构（直接拿官方文档的基础参数）