问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问一下这2种图表。是自己手写吗？还是用插件啊？echarts里面好像也没有这种效果啊

头像
天下熙熙皆为利来
    40835270392

    如题，请问一下这2种图表。是自己手写吗？还是用插件啊？echarts里面好像也没有这种效果啊？
    第一个效果是236那几个数字的效果。
    第二个是下面那个多个圆形和里面不规则的三角形。的效果
    image.png

    图表css3vue.jsecharts
    阅读 3.2k
    3 个回答
    得票最新
    头像
    Fractal
      5.5k22433

      image

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle Progress</title>
    <style type="text/css">
    .flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
    .flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
    .flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}


    .circle-progress {position:relative;}
    .circle-progress .progress {}
    .circle-progress .progress:after {content:'\200B';display:block;height:0;clear:both;overflow:hidden;}
    .circle-progress .progress .left  {float:left;width:50px;height:100px;overflow:hidden;}
    .circle-progress .progress .left .arc {width:100px;height:100px;border-radius:50%;background:linear-gradient(to right, transparent 0%, transparent 50%, #369 50%, #369 100%);transform-origin:center center;transform:rotate(30deg);}
    .circle-progress .progress .right {float:left;width:50px;height:100px;overflow:hidden;}
    .circle-progress .progress .right .arc {margin-left:-100%;width:100px;height:100px;border-radius:50%;background:linear-gradient(to right, #369 0%, #369 50%, transparent 50%, transparent 100%);transform-origin:center center;transform:rotate(180deg);}
    .circle-progress .content {position:absolute;top:5px;left:5px;width:90px;height:90px;border-radius:50%;border:5px solid #FFF;background-color:#FFF;box-sizing:border-box;box-shadow:0 0 2px 1px #369, 0 0 2px 1px #369 inset;overflow:hidden;}
    .circle-progress .content .chart {margin-top:50%;height:50%;}
    .circle-progress .content .chart .bar {width:0;border-top:0 solid transparent;box-sizing:border-box;}
    .circle-progress .content .chart .bar-peak {position:relative;}
    .circle-progress .content .chart .bar-peak .dot {position:absolute;display:block;margin-right:-2px;margin-top:-2px;width:5px;height:5px;top:0;right:0;border-radius:50%;box-shadow:0 0 0 1px #369 inset;z-index:5;}
    .circle-progress .content .chart .bar-peak-left  {border-left:10px solid #DEF;}
    .circle-progress .content .chart .bar-peak-right {border-right:10px solid #DEF;}
    .circle-progress .content .chart .bar-peak-left .dot  {right:0;}
    .circle-progress .content .chart .bar-peak-right .dot {right:-10px;}
    </style>
</head>
<body>
<div class="circle-progress debug">
    <div class="progress">
        <div class="left"><div class="arc"></div></div>
        <div class="right"><div class="arc"></div></div>
    </div>
    <div class="content">
        <div class="flex-row chart" style="align-items:flex-end;">
            <div class="flex-side bar bar-peak bar-peak-left"  style="border-top-width:0;height:50%;"><i class="dot"></i></div>
            <div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:10px;height:70%;"><i class="dot" style="margin-top:-10px;"></i></div>
            <div class="flex-side bar bar-peak bar-peak-left"  style="border-top-width:10px;height:70%;"><i class="dot"></i></div>
            <div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:25px;height:100%;"><i class="dot" style="margin-top:-25px;"></i></div>
            <div class="flex-side bar bar-peak bar-peak-left"  style="border-top-width:10px;height:100%;"><i class="dot"></i></div>
            <div class="flex-side bar bar-peak bar-peak-left"  style="border-top-width:20px;height:80%;"><i class="dot"></i></div>
            <div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:10px;height:60%;"><i class="dot" style="margin-top:-10px;"></i></div>
        </div>
    </div>
</div>
</body>
</html>
      头像
      阿古达木
        5741413

        数字那个很好弄，div就可以写三角形，只要border-width设置的很宽，border-corlor设置成几个不同的颜色就可以
        更简单粗暴的就是切十张图片，写个映射关系就完事。

        下面圆形，进度条和小波峰用canvas可以实现。
        圆形和进度条用arc方法实现。
        曲线的话，就一直lineTo、lineTo、lineTo、lineTo、lineTo然后fill()一下就完事

        头像
        浪子回头金不还
          3821627

          看上去不像是echarts,只是外面的进度条是动态的
          image.png

          你可以想象下中间的换成你需要的内容....

          查看全部 3 个回答
          推荐问题