echarts實現圓環任務進度條
最終的效果
源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>學習餅圖-圓環</title>
<script src="../echarts.min3.js"></script>
</head>
<body>
<!--爲echarts準備顯示區域DOM-->
<div id = "main" style = "width: 300px;height: 300px;"></div>
<script type = "text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
// 標題組件，包含主標題和副標題
title:{
show:true,
text:"執行任務",
x:"center",
textStyle:{
fontSize:"15",
color:"green",
fontWeight:"bold",
}
},
// 提示框組件
tooltip: {
//是否顯示提示框組件，包括提示框浮層和 axisPointe
show:false,
// 觸發類型: item:數據項觸發，axis：座標軸觸發
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// // 圖例
// legend: {
// orient: 'vertical',
// x: 'left',
// data:['完成率']
// },
// 系列列表。每個系列通過 type 決定自己的圖表類型
series: [
{
// 系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
name:'任務進度',
type:'pie',
// 餅圖的半徑，數組的第一項是內半徑，第二項是外半徑
radius: ['50%', '70%'],
// 是否啓用防止標籤重疊策略，默認開啓
avoidLabelOverlap: false,
hoverAnimation: false,
// 標籤的視覺引導線樣式，在 label 位置 設置爲'outside'的時候會顯示視覺引導線
labelLine: {
normal: {
show: false
}
},
data:[
{ // 數據值
value:20,
// 數據項名稱
name:'完成率',
//該數據項是否被選中
selected:false,
// 單個扇區的標籤配置
label: {
normal: {
// 是顯示標籤
show: true,
position: 'center',
fontSize: 20,
// 標籤內容格式器，支持字符串模板和回調函數兩種形式，字符串模板與回調函數返回的字符串均支持用 \n 換行
formatter:'{b}\n{d}%',
}
},
},
{
value:100,
label:{
normal:{
show:false,
}
}
},
]
}
]
};
myChart.setOption(option)
</script>
</body>
</html>