直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts饼图</title>
<style>
/*注意必须要给饼图存放的父元素设置高度 也可以设置宽度*/
#pie{
width:500px;
height:200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="" id="pie"></div>
</body>
<script src="./js/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('pie'));
var option = {
title: {
text: '饼图',
left: 'right',
textStyle: { //标题内容的样式
color: '#000',
fontStyle: 'normal',
fontWeight: 100,
fontSize: 16 //主题文字字体大小，默认为18px
},
},
tooltip: {
formatter: "{b} : {c} ({d}%)"//鼠标划过时饼状图上显示的数据 一般样式为 name: value (所占百分比)
},
legend: {//图例 标注各种颜色代表的模块
orient: 'vertical',//图例的显示方式 默认横向显示
bottom: 0,//控制图例出现的距离 默认左上角
left: 'left',//控制图例的位置
itemWidth: 16,//图例颜色块的宽度和高度
itemHeight: 12,
textStyle: {//图例中文字的样式
color: '#000',
fontSize: 16
},
data: ['班级一', '班级二', '班级三']//图例上显示的饼图各模块上的名字
},
color: ['#FE3A64', '#79E454','#F98C62','#4D5DFD'],//饼图中各模块的颜色
series: [{
type: 'pie',//echarts图的类型 pie代表饼图
radius: '80%',//饼图中饼状部分的大小所占整个父元素的百分比
center: ['50%', '50%'],//整个饼图在整个父元素中的位置
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: false,//饼图上是否出现标注文字 标注各模块代表什么 默认是true
// position: 'inner',//控制饼图上标注文字相对于饼图的位置 默认位置在饼图外
},
labelLine: {
show: false//官网demo里外部标注上的小细线的显示隐藏 默认显示
}
}
},
data: [//每个模块的名字和值
{ value: 40, name: '班级一' },
{ value: 35, name: '班级二' },
{ value: 25, name: '班级三' }
]
}]
};
myChart.setOption(option);
</script>
</html>
