Gauge, also known as dial chart or speedometer chart, is used to display data similar to the readings on the speedometer, and is a skeuomorphic display form. Dashboard is one of the commonly used business intelligence (BI) charts, which can easily display user data and clearly see the range of a certain indicator value. In order to view the actual completion rate data of the project more intuitively, as well as the speed of the car, the speed of the engine, the status of the fuel gauge and the water gauge, it is necessary to draw a single dashboard and multiple dashboards in ECharts for display.
Lin Feng, the main founder of ECharts, once said that during a long traffic jam, he had the opportunity to observe and think about the dashboard, and suddenly realized that the dashboard not only conveys data, but also conveys an easy-to-remember state , and affect people's emotions. This positive or negative emotional impact is helpful for decision-making operations. In the dashboard, the color of the dashboard can be used to divide the category of the indicated value, while the scale mark, pointer indication dimension, and pointer angle can be used to represent the value. Dashboards only need to assign minimum and maximum values and define a color range, and the pointer will display the data or current progress of key indicators. Dashboards can be applied to things like speed, volume, temperature, progress, completion rate, satisfaction, etc.
<!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>
Multi-dashboard
<!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>