1、资源
echarts_gauge.js下载
2、代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<title>仪表盘</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="0"/>
<style type="text/css">
.left {
float: left;
}
.clear {
clear: both;
}
.middle-bottom-left {
width: 33%;
}
.divBox {
background-color: #0d2b55;
background-repeat: repeat;
background-size: 100% 100%;
width: 50%;
height: 50%;
}
.coalA1_top {
width: 100%;
height: 13%;
padding-top: 2%;
padding-left: 13%;
font-size: 4rem;
color: #63cdff;
}
.coalA1_middle {
width: 100%;
height: 75%;
}
.coalA1_bottom {
width: 100%;
height: 10%;
}
#coalA1_chart {
width: 200%;
height: 100%;
margin-left: -78%;
}
</style>
</head>
<body>
<div class="container">
<div class="middle-bottom-left divBox">
<div class="coalA1_top">
xxxxxxxxxxx
</div>
<div class="coalA1_middle">
<div id="coalA1_chart"></div>
</div>
<div class="coalA1_bottom">
<div style="width: 30%;height: 100%" class="left"></div>
<div style="width: 70%;height: 100%" class="left">
<canvas id="coalA1_audio_canvas" style="width:50%; height:90%;"></canvas>
</div>
<div class="clear"></div>
</div>
<!--<div class="coalA4"></div>-->
</div>
</div>
</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/front/realtime/js/echarts_gauge.js}"></script>
<script type="text/javascript">
$('document').ready(function () {
$(".container").width($(window).width());
$(".container").height($(window).height());
var obj = {open_duration: 2, coal_duration: 4, gangue_duration: 68, empty_duration: 73};
drawCoalChart_A(obj);
})
function drawCoalChart_A(obj) {
var dom = document.getElementById("coalA1_chart");
var myChart1 = echarts.init(dom);
var data = [{
value: obj.open_duration,
name: 'AA1',
title: {offsetCenter: ['300%', '-50%']},
detail: {offsetCenter: ['385%', '-50%'], width: '70px'}
},
{
value: obj.coal_duration,
name: 'AA2',
title: {offsetCenter: ['300%', '-20%']},
detail: {offsetCenter: ['385%', '-20%'], width: '70px'}
// radius: ["40%", "47%"],
},
{
value: obj.gangue_duration,
name: 'AA3',
title: {offsetCenter: ['300%', '10%']},
detail: {offsetCenter: ['385%', '10%'], width: '70px'}
},
{
value: obj.empty_duration,
name: 'AA4',
title: {offsetCenter: ['300%', '40%']},
detail: {offsetCenter: ['385%', '40%'], width: '70px'}
}
];
var option1 = {
color: ['#00aaff', '#ffaa7f', '#aaaaff', '#ffffff'],
// color: ['#f4f4f4', '#f4f4f4', '#f4f4f4', '#f4f4f4'],
series: [{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 3,
borderColor: '#0b2049',
}
},
axisLine: {
lineStyle: {
width: 40,
color: [
[1, '#0b2049']
]
}
},
splitLine: {
show: false,
distance: 5,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: data,
title: {
fontSize: 14,
color: '#ffffff',
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 1,
// formatter: '{value} 秒'
formatter: function (value) {
var res = s_to_hs(value);
return res;
}
}
}]
};
myChart1.setOption(option1);
setInterval(function () {
data[0].value = +(Math.random() * 100).toFixed(0);
data[1].value = +(Math.random() * 100).toFixed(0);
data[2].value = +(Math.random() * 100).toFixed(0);
data[3].value = +(Math.random() * 100).toFixed(0);
myChart1.setOption({
series: [
{
data: data,
pointer: {
show: false
}
}
]
});
}, 2000);
}
function s_to_hs(s) {
var h;
h = Math.floor(s / 60);
s = s % 60;
//如果只有一位数，前面增加一个0
// h = (h.length == 1) ? '0' + h : h;
// s = (s.length == 1) ? '0' + s : s;
if (h > 0) {
return h + ' 分 ' + s + ' 秒';
} else {
return s + ' 秒';
}
}
</script>
</body>
</html>