近期在做一个小程序的时候,需要显示重要位置显示几个饼图。遇到这种情况,第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的ECharts。同时项目也进展顺利,在最后临近提交小程序审核的时候,发现Echarts在ios下会偶尔导致屏幕无法滑动。网上一搜,都在说问题,解决方案很少,也不太适合。
考虑到我们只需要显示一个静态的饼图,就在想能否用Css直接画一个出来呢。这样代码量少,运行速度还更快。毕竟一般的图标空间都是一大堆代码,运行都需要时间的。
还真找到网上有用Css画饼图的,于是就Copy代码运行了下,第一感觉还挺不错的。正准备大量修改用于项目的时候发现,尽然只支持2个扇区的饼图。心顿时凉了大半截。同时彻夜未眠...
虽然彻夜未眠,但还真想出一个用CSS画多扇形饼图的方案。先出一个效果图:
1. 绘制一个圆作为容器,超出隐藏
2. 用4个view/div将原型容器分成一个田字格,并定义为4个区域,设置区域属性为
position:relative; //为了容器内的div可以重叠
3. 在第一个区域放置一个和区域一样大的view/div, 并设置背景,然后进行旋转
Css旋转是以为View/Div中心点进行旋转的,所以还需要设置旋转的中心
width:100%;height:100%;position:absolute;left:0;top:0;
position:absolute; //设置该属性后可以多个div重叠
transform-origin:left bottom; //根据div所在的区域,设置不同的旋转中心点
transform:rotate(30deg); //旋转30度
4. 如果有扇形跨越区域边界线怎么?
将跨越区域边界线的扇形分成2个小扇形
偷懒把代码弄成了一个html页面,方便大家复制代码看效果,代码不规范,请谅解。
代码仅仅是样式代码的一个示例,因为js代码设计业务,所以利用js自动生产图表的部分已经省略。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>纯CSS制作多比例饼图和环形图</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
.my-chart-box { margin: 20px; min-height: 440px; background: #fff; border-radius: 10px; margin-top: 30px; padding-top: 10px; position: relative; }
.pietitle { line-height: 60px; text-align: center; font-size: 32px; }
.pie { width: 180px; height: 180px; border-radius: 50%; display: block; overflow: hidden; margin: 0px; position: relative; padding: 0px; }
.pie .area { display: flex; height: 50%; width: 100%; display: flex; overflow: hidden; margin: 0px; padding: 0px; }
.pie .area-item { flex: 1; height: 90px; overflow: hidden; position: relative; }
.pie .area-1 .part { transform-origin: left bottom; }
.pie .area-2 .part { transform-origin: left top; }
.pie .area-3 .part { transform-origin: right top; }
.pie .area-4 .part { transform-origin: right bottom; }
.pie .part { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.pie-blank { width: 110px; height: 110px; position: absolute; left: 35px; top: 35px; border-radius: 50%; z-index: 50; background: #fff; }
.legend { margin-right: 10px; line-height: 40px; padding-top: 0px; position: absolute; right: 10px; top: 60px; height: 300px; overflow: auto; }
.legend .legend-item { padding-top: 10px; clear: both; }
.legend .legend-item text { float: right; font-size: 28px; }
.legend .legend-item .icon { width: 80px; height: 40px; display: inline-block; border-radius: 10px; float: right; margin-left: 10px; text-align: center; color: #fff; }
.color1 { background: #dd6b66; }
.color2 { background: #759aa0; }
.color3 { background: #e69d87; }
.color4 { background: #8dc1a9; }
.color5 { background: #ea7e53; }
.color6 { background: #ea7e53; }
.color7 { background: #73a373; }
.color8 { background: #73a373; }
.color9 { background: #7289ab; }
.color10 { background: #91ca8c; }
.color11 { background: #f49f42; }
</style>
</head>
<body>
<div class="my-chart-box" style="width:600px;margin:auto;">
<div class="pietitle">图表标题</div>
<div style="float:left;">
<div class="pie" style="transform:scale(1.2, 1.2)">
<div class="area">
<div class="area-item area-4">
<div class="part color4" style="transform:rotate(0deg);"></div>
<div class="part color5" style="transform:rotate(30deg);"></div>
</div>
<div class="area-item area-1">
<div class="part color1" style="transform:rotate(0deg);"></div>
<div class="part color2" style="transform:rotate(30deg);"></div>
</div>
</div>
<div class="area">
<div class="area-item area-3">
<div class="part color3" style="transform:rotate(0deg);"></div>
<div class="part color4" style="transform:rotate(30deg);"></div>
</div>
<div class="area-item area-2">
<div class="part color2" style="transform:rotate(0deg);"></div>
<div class="part color3" style="transform:rotate(30deg);"></div>
</div>
</div>
<div class="pie-blank"></div>
</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="color1 icon">12</div>
<text>项目名称</text>
</div>
<div class="legend-item">
<div class="color2 icon">12</div>
<text>项目名称</text>
</div>
<div class="legend-item">
<div class="color3 icon">12</div>
<text>项目名称</text>
</div>
<div class="legend-item">
<div class="color4 icon">12</div>
<text>项目名称</text>
</div>
</div>
</div>
</body>
</html>
我非专业前端人员,仅为一爱好者。我学习较杂,但是什么都不精通。希望专业前端人员多提意见,勿喷。
技术交流:ksoft@qq.com
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。