效果圖1
示例完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定圖表的配置項和數據
var valObj = {min: 30, max: 80};//自定義區間值
var colorObj = {min: '#01AAED', safe: '#5FB878', max: '#FF5722'};//顏色對應以上區間值定義
var percent = (Math.random() * 100).toFixed(2) - 0;//獲取100以內的隨機模擬數據
var maxVal = 100;//圓環極大值
//根據數值在定義區間valObj中範圍改變，顯示colorObj中對應顏色
function changecolor(percent){
var color;
if(percent < valObj.min){
color = colorObj.min;
} else if (percent >= valObj.min && percent <= valObj.max){
color = colorObj.safe;
} else {
color = colorObj.max;
}
return color;
}
var option = {
backgroundColor: '#2F4056',//背景顏色
title: {
text: `${percent}%`,//圓環中間顯示的數值單位
subtext: '負載',//圓環數值單位下面的描述文字
x: 'center',
y: 'center',
itemGap: 15,//描述文字與上面數值單位的垂直距離
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 16,
},
subtextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 16,
}
},
tooltip : {//提示框浮層屬性
show: true,
transitionDuration:0.8,
formatter: "{a} - {c}%"//提示框浮層內容格式器，支持字符串模板和回調函數兩種形式
},
series: [{
name: '負載',
type: 'pie',//餅圖類型
radius: ['36%', '50%'],//餅圖的內、外半徑
hoverAnimation: false,
label: {
normal: {
show: false,
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.3)',
}
},
data: [{//系列中的數據內容數組
value: percent,
itemStyle: {
normal: {
color: changecolor(percent)
}
}
}, {
value: maxVal - percent,
}
],
animationEasingUpdate: 'cubicInOut',
animationDurationUpdate: 1000
}]
};
setInterval(function () {
var randomVal = (Math.random() * 100).toFixed(2) - 0;//模擬數據
option.title.text = `${randomVal}%`;//圓環中間顯示的數值單位
option.series[0].data[0].value = randomVal;//定時更新數值
option.series[0].data[1].value = (maxVal - randomVal).toFixed(2) - 0;//圓環無顏色填充區域佔比
option.series[0].data[0].itemStyle.normal.color = changecolor(randomVal);//根據數值改變顏色
myChart.setOption(option, true);// 使用配置項和數據顯示圖表
},2000);
</script>
</body>
</html>
效果圖2
示例完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('myChart'));
var curVal = getRandomVal();//獲取100以內的隨機模擬數據
var maxVal = 100;//圓環極大值
var textStyle={
"fontSize": 16,
"fontWeight": "bold",
"fontFamily":'華文細黑'
}
var itemStyle={
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
},
"emphasis": {
"color": 'rgba(0,0,0,0)',
"borderColor": 'rgba(0,0,0,0)',
"borderWidth": 0
}
};
function getRandomVal(){
var randomVal = (Math.random() * 100).toFixed(2) - 0;
return ((randomVal / maxVal) * 100).toFixed(2);
}
var option = {
backgroundColor: '#2F4056',//背景顏色
"title": {
"text": '負載',
x: 'center',
y: '80%',
"textStyle": {
"fontSize": 16,
"color": 'rgba(255,255,255,0.7)'
}
},
"tooltip": {
"trigger": 'item',
"formatter": "{a} : {d}%"
},
"series": [{
"name": '負載',
"center": ["50%","50%"],
"radius": ["35%","40%"],
"clockWise": false,
"hoverAnimation": false,
"type": "pie",
"data": [{
"value": curVal,
"label": {
"normal": {
"show": true,
"formatter": '{d}%',
"textStyle":textStyle,
"position": "center"
}
},
"labelLine": {
"show": false
},
"itemStyle": {
"normal": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00a2ff'
}, {
offset: 1,
color: '#70ffac'
}]),
"borderWidth": 25
},
"emphasis": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#85b6b2'
}, {
offset: 1,
color: '#6d4f8d'
}]),
"borderWidth": 25
}
}
}, {
"value": maxVal - curVal,
"itemStyle": itemStyle
}]
}, {
"name": '負載',
"center": [ "50%","50%"],
"radius": ["50%","53%"],
"clockWise": false,
"hoverAnimation": false,
"type": "pie",
"data": [{
"value": curVal,
"label": {
"normal": {
"show": false,
"formatter": '',
"textStyle": textStyle,
"position": "center"
}
},
"labelLine": {
"show": false
},
"itemStyle": {
"normal": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00a2ff'
}, {
offset: 1,
color: '#70ffac'
}]),
"borderWidth": 2
},
"emphasis": {
"color": "#5886f0",
"borderColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#85b6b2'
}, {
offset: 1,
color: '#6d4f8d'
}]),
"borderWidth": 2
}
}
}, {
"value": maxVal - curVal,
"itemStyle": itemStyle
}]
}]
};
myChart.setOption(option);//指定圖表的配置項和數據
setInterval(function () {//定時調用刷新
var randomVal = getRandomVal();//模擬數據
option.series[0].data[0].value = randomVal;//定時更新圓環1數值
option.series[0].data[1].value = maxVal - randomVal;//圓環1無顏色填充區域佔比
option.series[1].data[0].value = randomVal;//定時更新圓環2數值
option.series[1].data[1].value = maxVal - randomVal;//圓環2無顏色填充區域佔比
myChart.setOption(option, true);
},2000);
</script>
</body>
</html>
後記
其實用起來也簡單，根據自己的顯示需求，遇到不懂的時候多查看官方文檔就好了。
附官方文檔鏈接