html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>温度仪表盘</title>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
window.onload=function(){
var myChart = echarts.init(document.getElementById('temperature'));
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}℃"
},
series: [
{
name: '温度',
type: 'gauge',
min:50,//最小值
max:60,//最大值
splitNumber:20, //刻度的个数
radius:"100%",//大小
pointer:{ //指针
width:3,
length:'90%',
},
axisLabel:{ //刻度的大小
textStyle:{
fontSize:7,
},
},
axisLine:{ //外轮廓的宽度
lineStyle:{
width:15,
}
},
splitLine:{ //刻度线的长度和宽度
length:15,
lineStyle:{
width:1,
}
},
detail: {
formatter:'{value}℃',
textStyle:{ //当前温度的文字大小
fontSize:12
},
},
data: [{
value: 50,
name: '温度',
}]
}
]
};
setInterval(function () {
option.series[0].data[0].value = randomFrom(50,60);
myChart.setOption(option, true);
},2000);
}
function randomFrom(lowerValue,upperValue)
{
return (Math.random() * (upperValue - lowerValue + 1)+ lowerValue).toFixed(1);
}
</script>
</head>
<body>
<div id="temperature" style="width:300px;height: 300px"></div>
</body>
</html>
View Code