仪表盘(Gauge)也被称为拨号图表或速度表图,用于显示类似于速度计上的读数的数据,是一种拟物化的展示形式。 仪表盘是常用的商业智能(BI)类的图表之一,可以轻松展示用户的数据,并能清晰地看出某个指标值所在的范围。 为了更直观地查看项目的实际完成率数据,以及汽车的速度、发动机的转速、油表和水表的现状,需要在ECharts中绘制单仪表盘和多仪表盘进行展示。
ECharts的主要创始者林峰曾经说过,他在一次漫长的拥堵当中,有机会观察和思考仪表盘的问题,突然间意识到仪表盘不仅是在传达数据,而且能传达出一种易于记忆的状态,并且影响人的情绪,这种正面或负面的情绪影响对决策运营有一定的帮助。 在仪表盘中,仪表盘的颜色可以用于划分指示值的类别,而刻度标示、指针指示维度、指针角度则可用于表示数值。 仪表盘只需分配最小值和最大值,并定义一个颜色范围,指针将显示出关键指标的数据或当前进度。仪表盘可应用于诸如速度、体积、温度、进度、完成率、满意度等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var data1=[{
name:"完成率(%)",
value:50,
}];
var option = {
tooltip:{},
title:{
text:'项目实际完成率(%)',
x:'center',
y:25,
},
series: [
{
name: '单仪表盘',
type: 'gauge',
radius:"80%",
center:['50%','55%'],
sartAngle:225,
endAngle:-45,
clockwise:true,
min:0,
max:100,
splitNumber:10,
data:data1,
}]
};
setInterval(function() {
option.series[0].data[0].value=(Math.random()*100).toFixed(2);
myChart.setOption(option,true);
},2000);
</script>
</body>
</html>
多仪表盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var data1=[{
name:"完成率(%)",
value:50,
}];
var option = {
backgroundColor:'rgba(128,128,128,0.1)',
tooltip:{},
title:{
text:'项目实际完成率(%)',
x:'center',
y:25,
},
series: [
{
name: '速度',
type: 'gauge',
z:3,
radius:"50%",
center:['50%','55%'],
sartAngle:225,
endAngle:-45,
clockwise:true,
min:0,
max:220,
splitNumber:22,
data:data1,
},
{
name: '转速',
type: 'gauge',
radius:"35%",
center:['20%','55%'],
sartAngle:225,
endAngle:-45,
clockwise:true,
min:0,
max:7,
splitNumber:10,
data:data1,
},
{
name: '油表',
type: 'gauge',
radius:"25%",
center:['77%','50%'],
sartAngle:225,
endAngle:-45,
clockwise:true,
min:0,
max:7,
splitNumber:10,
data:data1,
}
]
};
setInterval(function() {
option.series[0].data[0].value=(Math.random()*100).toFixed(2);
myChart.setOption(option,true);
},2000);
</script>
</body>
</html>