本文介绍: 背景:产品提出需求在饼图中间放两行文字居中简单,劈劈啪啪写完了”产品再提出你这个没有适应啊,屏幕放大、缩小你这个就没有居中了,甚至会和饼图重叠emmmmm…”

背景
产品提出需求在饼图中间放两行文字居中
简单,劈劈啪啪写完了”
产品再提出你这个没有适应啊,屏幕放大、缩小你这个就没有居中了,甚至会和饼图重叠
emmmmm…”

UI图如下: 在这里插入图片描述

方案一:使用tittle(不能自适应

方案二:在series配置label(适用图表居中的情况,我这个图表在左边不适用)

方案三:在series中再加一个type: ‘gauge’(能居中支持适应

代码如下:(这里只提供了series配置

series: [{
          name: '设备总数',
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['25%', '45%'], // 图形位置
          label: {
            show: false
          },
          selectedMode: false,
          data: data
        },
          {
            name: '中间文字',
            z: 100,
            type: 'gauge',
            radius: '-50%',
            center: ['25%', '45%'],// 需和type: 'pie'中的center一致
            // 配置中间的数字样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1,-10],
              fontSize: fontSize(18),
              fontFamily: fontFamily.fontFamily95W,
              color: 'rgba(75, 186, 233, 1)',
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            // 中间的字和数字 数据
            data: [
              {
                value: totalNum,
                name:'家居总数',
                title:{// 配置“家居总数”的样式
                  show:true,
                  fontSize: fontSize(12),
                  fontFamily: fontFamily.fontFamily65W,
                  color: 'rgba(50, 197, 255, .5)',
                  offsetCenter:[0,'-20%']
                }

              },

            ],
          },
        ]

实现后的成果图如下:

在这里插入图片描述

原文地址:https://blog.csdn.net/qq_41287158/article/details/132202473

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8819.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注