Echarts图表之饼图
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
// 各个饼块对应的背景色
color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
// 整个图表的背景色
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: 20,
right: 20,
top: 0,
bottom: 20
},
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['0-6', '6-18', '18-28', '28-55', '55以上']
},
series: [{
name: '访问来源',
// 饼图
type: 'pie',
radius: '55%',
// 饼图的位置
center: ['50%', '55%'],
data: [{
value: 335,
name: '0-6'
},
{
value: 310,
name: '6-18'
},
{
value: 234,
name: '18-28'
},
{
value: 135,
name: '28-55'
},
{
value: 158,
name: '55以上'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
标签：name,55,18,28,value,图表,255,Echarts,之饼 来源： https://blog.csdn.net/gly_technology/article/details/122553483