请问echarts怎么实现饼图圆环这种效果

发布于 2022-09-13 00:37:24 字数 86 浏览 19 评论 0

image.png
没看到有参数可以调整这种交界处边界

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

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

发布评论

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

评论(1

别想她 2022-09-20 00:37:24

其实用html + css 也可以实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pie {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        position: relative;
        transform: rotate(-30deg);
      }

      .one {
        background: red;
        width: 20%;
        height: 100%;
      }

      .two {
        background: blue;
        width: 40%;
        height: 100%;
      }

      .three {
        background: yellow;
        width: 40%;
        height: 100%;
      }

      .small-box {
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        border-radius: 50%;

      }
    </style>
  </head>
  <body>
    <div class="pie">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="small-box"></div>
    </div>
  </body>
</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文