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

不懂就要问
  • 489

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

回复
阅读 1.7k
3 个回答

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>

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

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

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

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

宣传栏