圆环环绕进度条

最新推荐文章于 2024-05-20 16:08:31 发布

杀猪刀-墨林

最新推荐文章于 2024-05-20 16:08:31 发布

阅读量314

点赞数

分类专栏： # echarts 文章标签：环绕式进度条 echarts绘制环形进度条

本文链接：https://blog.csdn.net/qq_38948398/article/details/110491709

版权

echarts 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

老规矩，echarts图形，先上效果图，后上代码

UI设计的图形中有一个进度条，是环绕形式的，当时想的是这个深度可能是绘制图形时加的3D深度绘制，可是后来发现并不是。

只用画一个二维的间断圆环，然后利用css3的3d场景，进行X轴偏转，就可以实现了。

代码附上:

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>环绕进度条</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }

    #container {
      width: 200px;
      height: 200px;
      transform: rotateX(66deg);
    }
  </style>
</head>
<div id="container"></div>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>

<body>
  <script>
    var item1 = {
      color: '#FFE58B',
      borderWidth: 0,
    };
    var item2 = {
      color: 'transparent',
      borderWidth: 0,
    };
    var item3 = {
      color: '#205C5F',
      borderColor: '#FFE58B',
    };
    let cdata = [];
    for (var i = 0; i < 64; i++) {
      if (i % 2 == 0) {
        if (i > 40) {
          cdata.push({
            value: 5,
            itemStyle: item1,
          })
        } else {
          cdata.push({
            value: 5,
            itemStyle: item3,
          })

        }
      } else {
        cdata.push({
          value: 5,
          itemStyle: item2,
        })
      }
    }

    const option = {
      backgroundColor: "#66969B",
      series: {
        radius: ['78%', '90%'],
        type: 'sunburst',
        sort: null,
        highlightPolicy: 'ancestor',
        data: cdata,
        itemStyle: {
          color: '#ddd',
          borderWidth: 2
        }
      }
    };

    echarts.init($('#container').get(0)).setOption(option);
  </script>
</body>

</html>

杀猪刀-墨林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
圆环环绕进度条

老规矩，echarts图形，先上效果图，后上代码UI设计的图形中有一个进度条，是环绕形式的，当时想的是这个深度可能是绘制图形时加的3D深度绘制，可是后来发现并不是。只用画一个二维的间断圆环，然后利用css3的3d场景，进行X轴偏转，就可以实现了。代码附上:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫