首页 前端知识 echarts 饼图中间添加文字

echarts 饼图中间添加文字

2024-01-26 10:01:57 前端知识 前端哥 270 714 我要收藏

需求:饼图中间展示总量数据

 方法一、设置series对应饼图的label属性

series: [{
  type: "pie",
  radius: ['55%', '62%'],
  center: ["67%", "50%"],
  itemStyle: {
    borderRadius: 10,
    borderColor: '#fff',
    borderWidth: 2
  },
  // 主要代码在这里
  label: {
    normal: {
      show: true,
      position: 'center', // 展示在中间位置
      formatter:() => {
        return `{a|数据量}\n\n{${String(total[0]).length < 10 ? 'bM' : 'bS'}|${total[2]}GB}`
      },
      rich: {
        a: {
          color: '#111928',
          fontSize: 16,
          fontWeight: 900,
        },
        bM: {
          fontSize: 16,
          fontWeight: 700,
          color: '#6B7280'
        },
        bS: {
          fontSize: 12,
          fontWeight: 700,
          color: '#6B7280'
        },
      },
    },
  },
  labelLine: {
    length: 10,
    length2: 30,
    minTurnAngle: 135,
    lineStyle: {
      type: 'dashed',
      width: 0.5,
    }
  },
  encode: {
    itemName: "product",
    value: "数据量",
  },
}]

但这种方法会把“饼图扇区外侧,通过视觉引导线连到相应的扇区”的label覆盖掉,以至于显示不了。如下图:

 

方法二、基于上一个方法做优化,为series再设置一个相同位置的饼图

series: [{
  type: "pie",
  radius: ['55%', '62%'],
  center: ["67%", "50%"],
  itemStyle: {
    borderRadius: 10,
    borderColor: '#fff',
    borderWidth: 2
  },
  // 真正的饼图就不动label的默认配置了
  // 下面是为视觉引导线做配置
  labelLine: {
    length: 10,
    length2: 30,
    minTurnAngle: 135,
    lineStyle: {
      type: 'dashed',
      width: 0.5,
    }
  },
  encode: {
    itemName: "product",
    value: "数据量",
  },
},
// 下面这个饼图是为了中间字写的
{
  type: 'pie',
  radius: ['0%', '0%'],
  center: ["67%", "50%"], // 这个要与真正的饼图写一样的位置
  emphasis:{
    disabled: true, // 是否关闭高亮状态
  },
  tooltip: {
    show: false // 是否展示提示框浮层
  },
  // 这里与方法一的label设置的一样
  label: {
    normal: {
      show: true,
      position: 'center',
      formatter:() => {
        return `{a|数据量}\n\n{${String(total[0]).length < 10 ? 'bM' : 'bS'}|${total[2]}GB}`
      },
      rich: {
        a: {
          color: '#111928',
          fontSize: 16,
          fontWeight: 900,
        },
        bM: {
          fontSize: 16,
          fontWeight: 700,
          color: '#6B7280'
        },
        bS: {
          fontSize: 12,
          fontWeight: 700,
          color: '#6B7280'
        },
      },
    },
  },
}]

另外,大家应该也可以用title的配置,修改放置位置来展示中间字;当然,也会有相同的问题,如果需求需要正常的title展示,就可以借鉴方法二,画一个相同位置且不展示的饼图实现它。

大家要是遇到更优的方法,欢迎评论~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/465.html
标签
echarts
评论
发布的文章

CSS3新增样式

2024-02-05 11:02:24

jQuery的介绍

2024-02-05 11:02:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!