直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts餅圖</title>
<style>
/*注意必須要給餅圖存放的父元素設(shè)置高度 也可以設(shè)置寬度*/
#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: { //標(biāo)題內(nèi)容的樣式
color: '#000',
fontStyle: 'normal',
fontWeight: 100,
fontSize: 16 //主題文字字體大小，默認(rèn)為18px
},
},
tooltip: {
formatter: "泪幌 : {c} (l5jvfpc%)"http://鼠標(biāo)劃過時餅狀圖上顯示的數(shù)據(jù) 一般樣式為 name: value (所占百分比)
},
legend: {//圖例 標(biāo)注各種顏色代表的模塊
orient: 'vertical',//圖例的顯示方式 默認(rèn)橫向顯示
bottom: 0,//控制圖例出現(xiàn)的距離 默認(rèn)左上角
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,//餅圖上是否出現(xiàn)標(biāo)注文字 標(biāo)注各模塊代表什么 默認(rèn)是true
// position: 'inner',//控制餅圖上標(biāo)注文字相對于餅圖的位置 默認(rèn)位置在餅圖外
},
labelLine: {
show: false//官網(wǎng)demo里外部標(biāo)注上的小細(xì)線的顯示隱藏 默認(rèn)顯示
}
}
},
data: [//每個模塊的名字和值
{ value: 40, name: '班級一' },
{ value: 35, name: '班級二' },
{ value: 25, name: '班級三' }
]
}]
};
myChart.setOption(option);
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
