当前位置：文江博客话题详情

图表 CSS3 Vue.js ECharts

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

发布于 2022-09-12 04:07:06 字数 168 浏览 23 评论 0

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

收藏 0

分享到微博

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

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

发布评论

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

评论（3）

不气馁 2022-09-19 04:07:06

<!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>

左耳近心 2022-09-19 04:07:06

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

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

原来分手还会想你 2022-09-19 04:07:06

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

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

~没有更多了~

关于作者

↘人皮目录ツ

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

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

原文