如何用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>