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>
