关于javascript:手写个Echarts环形图

2次阅读

共计 2262 个字符，预计需要花费 6 分钟才能阅读完成。

设计稿设计了一个环形图，就只有一个环形图，引入 ECharts 总感觉杀鸡焉用牛刀的感觉，反正也没太高的要求，罗唆本人写一个就好了！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .doughnut-box {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            flex: 1;
        }

        .list-box {
            flex: 1;
            margin-left: 30px;
            line-height: 40px;
            color: rgb(94, 90, 90);
        }
    </style>
</head>

<body>


    <div class="container">
        <div class="doughnut-box" id="doughnutBox"></div>
        <div class="list-box" id="listBox">aaa</div>
    </div>


    <script>

        // 绘制环形
        function drawDoughunt(config) {var canvasBox = document.getElementById(config.boxId);
            var canvas = null;
            if (!canvasBox.childNodes[0]) {canvas = document.createElement('canvas');
            } else {canvas = canvasBox.childNodes[0];
            }

            // 定义容器
            var width = canvasBox.clientWidth,
                height = canvasBox.clientHeight,
                ctx = canvas.getContext("2d"),
                // 总数
                count = 0,
                // 局部
                partNum = 0,
                // 半径
                radius = (width > height ? height / 2 : width / 2) * .6,
                // 中心点 X 坐标
                x = width / 2,
                // 中心点 Y 坐标
                y = height / 2,
                // 线框宽度
                lineWidth = radius * .5,
                // 起始点
                startPI = 0,
                // 判断是否都等于 0
                isZero = true;

            // 设置属性
            canvas.width = width;
            canvas.height = height;
            canvasBox.append(canvas);

            // 计算总值
            for (let i = 0; i < config.data.length; i++) {if (config.data[i].value != 0) {isZero = false;}
                count += config.data[i].value;
            }

            if (isZero) {count = config.data.length;}

            ctx.clearRect(0, 0, width, height);
            // 循环数据，并绘制圆环
            for (let i = 0; i < config.data.length; i++) {let item = config.data[i];
                if (isZero) {item.value = 1;}
                var eAngle = (item.value / count) * (2 * Math.PI);
                ctx.beginPath();
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = item.color;
                ctx.arc(x, y, radius, startPI, startPI + eAngle);
                ctx.stroke();
                startPI = startPI + eAngle;
            }

            showList(config.data);
        }

         // 显示左边列表
         function showList(list) {var listBox = document.getElementById('listBox');
            var strHtml = '';
            list.forEach(item => {strHtml += '<div class="item"><span>' + item.name + '：</span><span style="color:'+ item.color +';">' + item.value + '</span></div>';});

            listBox.innerHTML = strHtml;
        }


        // 配置文件
        var config = {
            boxId: 'doughnutBox',  // 容器 ID
            data: [
                {
                    name: '搜索引擎',
                    value: 1048,
                    color: 'rgba(44, 91, 245, 1)'
                },
                {
                    name: '间接拜访',
                    value: 735,
                    color: 'rgba(246, 7, 7, 1)'
                },
                {
                    name: '邮件营销',
                    value: 580,
                    color: 'rgba(255, 178, 6, 1)'
                },
                {
                    name: '联盟广告',
                    value: 484,
                    color: 'rgba(109, 214, 60, 1)'
                }
            ]
        }
        
        // 调用办法
        drawDoughunt(config);



    </script>

</body>

</html>

正文完