如何用echarts構建一個儀表盤---可生成URL鏈接嵌入其他BI可視化工具中

在上一篇講解如何入門使用echarts：
https://blog.csdn.net/weixin_41744624/article/details/104480570
本篇我們來概述如何用echarts構建一個儀表盤，生成的儀表盤可以使用URL方式嵌套到我們使用的BI可視化工具中，如tableau等。
----文末附全代碼----
…………………………………………………………………………

首先進入echarts萬能的官方網站實例

在左邊框可以選擇儀表盤的大致樣式

在本例中我們選擇如下樣式，點擊進入就可以得到相應的展示主體框架代碼。

將代碼嵌套至我們的前端展示工具中
此處以brackets爲例，將代碼粘貼至紅框位置

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: {            // 座標軸小標記
                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: {            // 座標軸小標記
                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: {
                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: {
                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'}]
        }
    ]
};

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);

此時運行就可以展示出固定的儀表盤了

對於數據的修改
我們可以對於給出的固定儀表盤格式進行修改，如代碼中註釋的大小及儀表盤個數等（本部分因需求而異不做過多敘述）。下對通用更改，展現的變量及數值修改做介紹：
我們可以看到，展示的儀表盤的值是四個儀表盤（最右端爲上下兩個）中的隨機生成的值，並且變量名爲已給出的。
如果我們要修改變量名，需要找到代碼中的series部分來修改，其中展示在儀表盤上的內容爲data中的name部分，如下圖：

如果我們要修改展示的數值：
在尾部代碼給出了四個儀表盤隨機生成數據展示，我們只需要替換其中的內容就可進行固定值展示

將上部分替換爲如下代碼：

var dynData={"201703":0.27,"201706":0.56,"201709":0.88};
        
setInterval(function (){
    option.series[0].data[0].value = dynData[stat_mo]*100;
    myChart.setOption(option);
},2000);

其中，dynDate字典放置我們需要展示的值，stat_mo可以替換爲例如“201703,201706,201709”中任意的值，固定展示27,56，88

根據生成儀表盤圖像的鏈接，就可以URL鏈接到我們的前端可視化工具中了。

下一篇博客會整理如何動態傳參至echarts進行固定圖像展示~~

以下爲本文全代碼

<html>  
  <head>
    <script src="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 = {
    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: {            // 座標軸小標記
                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: {            // 座標軸小標記
                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: {
                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: {
                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'}]
        }
    ]
};

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>

如何用echarts構建一個儀表盤---可生成URL鏈接嵌入其他BI可視化工具中

Python神經網絡模型--Sequential應用舉例

Python神經網絡模型--Sequential詳解及樣例

python--安裝TensorFlow解決Cannot uninstall‘wrapt’It is a distutils installed project

Python--時間序列一本通----實例大舞臺，有碼你就來

Python--KMeans聚類實例--航空公司客戶價值分析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結