在echaerts饼图(环形图)内部自定义文字

需求是利用echarts的饼图之环形图在内部自定义文字。如下图:
在这里插入图片描述

    const option = {
        title: [
          { // 第一个圆环标题
            text: '省市公司', // 主标题
            textStyle: { // 主标题样式
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            },
            left: '24%', // 定位到适合的位置
            top: '50%', // 定位到适合的位置
            subtext: 'xxx', // 副标题
            subtextStyle: { // 副标题样式
              color: 'red',
              fontSize: 13,
              fontWeight: 'bold'
            },
            textAlign: 'center' // 主、副标题水平居中显示
          },
          {// 第二个圆环标题
            text: '县公司',
            textStyle: {
              color: '#333',
              fontWeight: 'bold',
              fontSize: 14
            },
            left: '74%',
            top: '50%',
            subtext: 'xxx',
            subtextStyle: {
              color: 'red',
              fontSize: 13,
              fontWeight: 'bold'
            },
            textAlign: 'center'
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '3%',
          left: 'center'
        },
        series: [
          { // 第一个圆环
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['25%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner', // 数据会显示在图形上,'center':会显示在圆环的内部
              color: '#000',
              formatter: '{c}' // 显示的数据
            },
            data: [2,4,1], //
          },
          { // 第二个圆环
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['75%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              color: '#000',
              formatter: '{c}'
            },
            data: [1,1,1],
          }
        ]
      };

上面使用了title属性,通过偏移来定位到需要显示的位置,设置主、副标题样式,这样就达到了我们的要求。除了title属性,graphic属性也可以通过设置偏移达到上述效果。graphic还可以设置图片等其它样式。

---------------------2022.04.07更新-----------------------
使用graphic

上面使用了标题和副标题的形式来实现文字居中环形内部,今天用 graphic 实现一下。
option添加配置graphic

graphic: [
			{
				type: 'text',// 类型,可以是文字、图片或其它类型
				id: 'text1', 
				left: 'center',
				top: '46%',
				style: {
					text: '要显示的文字xxx',
					fill: '#919399', // 文字的颜色
					fontSize: 18
				}
			},
			{
				type: 'text',
				id: 'text2',
				left: 'center',
				top: '52%',
				style: {
					text: '要显示的文字xxx',
					fill: '#273849',
					fontSize: 33
				}
			}
		],
  • 5
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值