关于javascript:手写个Echarts环形图

设计稿设计了一个环形图，就只有一个环形图，引入 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>

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

关于javascript:手写个Echarts环形图

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）