ECharts學習(4)--儀表盤


1.  ECharts中的儀表盤,要使用這個圖表時把series中的type屬性修改成‘gauge’,然后在detail中設置儀表盤詳情,用於顯示數據。最常用的是formatter(格式化函數或者字符串),然后可以設置data屬性用來表示指針的指向。下面我們可以設置value的值為每隔2秒就隨機生成一個數,然后就可以模擬顯示指針的動態顯示。

2.  代碼展示:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts練習</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>

    <body>
        <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基於准備好的dom,初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定圖表的配置項和數據
            var option = {
            title: {
                text: '業務指標', //標題文本內容
            },
            toolbox: { //可視化的工具箱
                show: true,
                feature: {
                    restore: { //重置
                        show: true
                    },
                    saveAsImage: {//保存圖片
                        show: true
                    }
                }
            },
            tooltip: { //彈窗組件
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [{
                name: '業務指標',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 45, name: '完成率'}]
            }]

            };

            // 使用剛指定的配置項和數據顯示圖表。
            myChart.setOption(option);
            
            setInterval(function(){//把option.series[0].data[0].value的值使用random()方法獲取一個隨機數
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                myChart.setOption(option, true);
            }, 2000);
        </script>
    </body>

</html>

3.  效果展示:

 

 

 

 

4.  這里只是最簡單的實現了儀表盤,如果我們要實現更加復雜的功能,可以參考API文檔中的其他參數進行設置,在官網的案例中做了一個十分酷炫的汽車的夜間儀表盤,下面我粘貼下代碼,大家可以自己研究下,不懂得參數可以查看文檔:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ECharts練習</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>

    <body>
        <!-- 為ECharts准備一個具備大小(寬高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基於准備好的dom,初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定圖表的配置項和數據
            option = {
                backgroundColor: '#1b1b1b',
                tooltip: {
                    formatter: "{a} <br/>{c} {b}"
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                series: [{
                    name: '速度',
                    type: 'gauge',
                    min: 0,
                    max: 220,
                    splitNumber: 11,
                    radius: '50%',
                    axisLine: { // 坐標軸線
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: [
                                [0.09, 'lime'],
                                [0.82, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 3,
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: { // 坐標軸小標記
                        textStyle: { // 屬性lineStyle控制線條樣式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐標軸小標記
                        length: 15, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: 'auto',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: { // 分隔線
                        length: 25, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    pointer: { // 分隔線
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5
                    },
                    title: {
                        textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        backgroundColor: 'rgba(30,144,255,0.8)',
                        borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5,
                        offsetCenter: [0, '50%'], // x, y,單位px
                        textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff'
                        }
                    },
                    data: [{
                        value: 40,
                        name: 'km/h'
                    }]
                }, 
                {
                    name: '轉速',
                    type: 'gauge',
                    center: ['25%', '55%'], // 默認全局居中
                    radius: '30%',
                    min: 0,
                    max: 7,
                    endAngle: 45,
                    splitNumber: 7,
                    axisLine: { // 坐標軸線
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: [
                                [0.29, 'lime'],
                                [0.86, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: { // 坐標軸小標記
                        textStyle: { // 屬性lineStyle控制線條樣式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐標軸小標記
                        length: 12, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: 'auto',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: { // 分隔線
                        length: 20, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 5,
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%'], // x, y,單位px
                        textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
                            fontWeight: 'bolder',
                            fontStyle: 'italic',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    detail: {
                        //backgroundColor: 'rgba(30,144,255,0.8)',
                        // borderWidth: 1,
                        borderColor: '#fff',
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5,
                        width: 80,
                        height: 30,
                        offsetCenter: [25, '20%'], // x, y,單位px
                        textStyle: { // 其余屬性默認使用全局文本樣式,詳見TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff'
                        }
                    },
                    data: [{
                        value: 1.5,
                        name: 'x1000 r/min'
                    }]
                }, 
                {
                    name: '油表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默認全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 135,
                    endAngle: 45,
                    splitNumber: 2,
                    axisLine: { // 坐標軸線
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐標軸小標記
                        length: 12, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: 'auto',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: { // 屬性lineStyle控制線條樣式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        },
                        formatter: function(v) {
                            switch(v + '') {
                                case '0':
                                    return 'E';
                                case '1':
                                    return 'Gas';
                                case '2':
                                    return 'F';
                            }
                        }
                    },
                    splitLine: { // 分隔線
                        length: 15, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                }, 
                {
                    name: '水表',
                    type: 'gauge',
                    center: ['75%', '50%'], // 默認全局居中
                    radius: '30%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: { // 坐標軸線
                        lineStyle: { // 屬性lineStyle控制線條樣式
                            color: [
                                [0.2, 'lime'],
                                [0.8, '#1e90ff'],
                                [1, '#ff4500']
                            ],
                            width: 2,
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: { // 坐標軸小標記
                        show: false
                    },
                    axisLabel: {
                        textStyle: { // 屬性lineStyle控制線條樣式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        },
                        formatter: function(v) {
                            switch(v + '') {
                                case '0':
                                    return 'H';
                                case '1':
                                    return 'Water';
                                case '2':
                                    return 'C';
                            }
                        }
                    },
                    splitLine: { // 分隔線
                        length: 15, // 屬性length控制線長
                        lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默認透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默認透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 0.5,
                        name: 'gas'
                    }]
                }]
            };
            
            myChart.setOption(option);

            setInterval(function() {
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
                option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                myChart.setOption(option);
            }, 2000)
        </script>
    </body>

</html>

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM