echarts pie中心偏移以后,如何让title始终相对饼图居中

发布于 2022-09-11 20:47:24 字数 199 浏览 10 评论 0

图片描述

如图所示,pie的,根据需要,pie需要偏移:

center: ['30%', '50%']

这种情况下title如何才能保证相对饼图居中呢,echarts的宽度是自适应的.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

苏别ゝ 2022-09-18 20:47:24

我也遇到了这个问题,最后自己想出来了,可以设置padding为负值(应该是标题宽度的一半)。
left的偏移量应该和饼图的中心点位置一致。
image.pngimage.png

南薇 2022-09-18 20:47:24

加textAlign: "center", 让其水平对其,然后在调节left:xx%,

image

一曲爱恨情仇 2022-09-18 20:47:24
    graphic:{ 
      type:"text",
      left:"center",
      top:"center",
      style:{
        text:'236',
        textAlign:"center",
        fill:"#fff",
        fontSize:16
      }
    },
荒路情人 2022-09-18 20:47:24

这么写下试下呢 我这边可以实现自适应

graphic: [{
                type: 'group',
                left: '15%',
                top: '35%',
                bounding: 'raw',
                children: [{
                    type: 'text',
                    style: {
                        text:data.value,
                        fontSize: 8,
                        fill: "#27D9C8",
                        textVerticalAlign: 'middle',
                        textAlign: 'center'
                    }
                }]
            }
        ],
可遇━不可求 2022-09-18 20:47:24

不建议这样做,我这种方式label是一个叠一个的,不推荐,建议html直接定位做

目的就是在饼图中间加一个说明文本,想实现一个自适应水平居中的效果,不一定要用title来实现,可以选择使用label,同时设置hover时,不隐藏label即可
pie设置偏移可以用left 50%这样来实现,label设置多行,可以用富文本来做
参考代码

series: [
          {
            name: 'hello test',
            left: '-50%',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              formatter: () => '{count|4425}\n{name|hello}',
              rich: {
                count: {
                  fontSize: 24,
                  padding: [0, 0, 5, 0],
                  color: '#49DEFF',
                  textVerticalAlign: 'middle'
                },
                name: {
                  fontSize: 12,
                }
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
、、、
一抹微笑 2022-09-18 20:47:24

您好,你那个echarts饼图圆心偏移后title自适应问题解决了吗,我也遇到了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文