echarts饼图学习
Posted Steven Jon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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">
.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>
以上是关于echarts饼图学习的主要内容，如果未能解决你的问题，请参考以下文章