纯CSS制作多扇区饼图和环形图

原创

无忧无忌

修改于 2020-03-06 09:54:27

4.7K0

修改于 2020-03-06 09:54:27

近期在做一个小程序的时候，需要显示重要位置显示几个饼图。遇到这种情况，第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的ECharts。同时项目也进展顺利，在最后临近提交小程序审核的时候，发现Echarts在ios下会偶尔导致屏幕无法滑动。网上一搜，都在说问题，解决方案很少，也不太适合。

考虑到我们只需要显示一个静态的饼图，就在想能否用Css直接画一个出来呢。这样代码量少，运行速度还更快。毕竟一般的图标空间都是一大堆代码，运行都需要时间的。

还真找到网上有用Css画饼图的，于是就Copy代码运行了下，第一感觉还挺不错的。正准备大量修改用于项目的时候发现，尽然只支持2个扇区的饼图。心顿时凉了大半截。同时彻夜未眠...

虽然彻夜未眠，但还真想出一个用CSS画多扇形饼图的方案。先出一个效果图：

利用到的Css特性：

圆角
旋转
View/Div重叠

一、绘制原理：

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>