使用echart仪表盘

html代码

使用echart仪表盘
<!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

 使用echart仪表盘

 

上一篇:echart坐标显示问题总结


下一篇:echart柱状图实现实时更新(柱状图部分自动上升以及下降)