使用echart儀表盤

本文轉載自查看原文 2019-08-07 15:56 475 echart

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echart儀表盤字體的修改 echart 之儀表盤動態分段顏色實現 echart 畫出儀表盤式進度條 vue UI 項目儀表盤的使用 1、使用uCharts繪制儀表盤儀表盤gauge 自己繪制的儀表盤 python儀表盤 idea如何調出儀表盤 Excel制作儀表盤