Figure 1 Effect
The complete code example
<!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>
Figure 2 Effect
The complete code example
<!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>
postscript
In fact, it is also simple with, according to their display needs, I do not understand when more check out the official documents just fine.
Attached official document links
