echarts饼图学习

最新推荐文章于 2022-10-13 15:55:40 发布

Steven Jon

最新推荐文章于 2022-10-13 15:55:40 发布

阅读量381

点赞数 4

分类专栏： echarts 文章标签： echarts 饼图

本文链接：https://blog.csdn.net/qq_36270361/article/details/116760644

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

实现代码

可直接复制运行：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>饼图</title>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<style type="text/css">
			.center {
				position: absolute; 
				width: 50%; 
				height: 80%;  
				box-shadow: 1px 2px 10px 0 rgba(0, 196, 196, 0.5);
				border-radius: 10px;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id = "content" class = "center"></div>
		<script type="text/javascript">
			var pipe = echarts.init(document.getElementById('content'));
			var option = {
				title: {
					//标题内容
					text: '张飞收入情况：',
					textStyle: {
						fontWeight: 'bold',
						fontFamily: 'Microsoft YaHei',
						fontSize: 24
					},
					//标题位置
					top: '5%',
					left: '5%'
				},
				//自定义提示框 {a}（系列名称）,{b}（数据项名称）,{c}（数值）,{d}（百分比）
				tooltip: {
					confine: true, //将提示框限制在图表的区域内，防止超出外界被截断
					formatter: '{a}<br>{b} : <span>{d}% ({c})</span>'
				},
				series: [{
					name: '张飞',
					type: 'pie',
					radius: '50%',//饼图大小
					center: ['50%', '50%'],//圆心位置['左右'， '上下']
					itemStyle: {
						normal: {
							//增加阴影效果
							shadowBlur: 200,
							shadowColor: 'rgba(44, 196, 196, 0.12)',
							//增加数据显示内容 ：{a}（系列名称）,{b}（数据项名称）,{c}（数值）,{d}（百分比）
							label: {
								fontSize: 16,
								formatter: '{b} : {d}% ({c})'
							}
						}
					},
					data: [{name: '工资', value: 3000}, {name: '奖金', value: 9000}, {name: '其他', value: 2000}]
				}],
				//改变饼图数据颜色
				color: ['#73A0FA', '#73DEB3', '#b7e3fb']
			};
			pipe.setOption(option);
			//随着浏览器窗口大小改变而改变
			window.addEventListener("resize", function() {
				pipe.resize();
			});
		</script>
	</body>
</html>

Steven Jon

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
7
评论
echarts饼图学习

效果图实现代码可直接复制运行：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>饼图</title> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <style type="text/css">
复制链接

扫一扫