From a93255e0a0334b51ecbaf3d8f496ad0fae1ed747 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 07 六月 2023 10:38:00 +0800
Subject: [PATCH] 1.生产入库有源单提交测试OK

---
 src/utils/myEcharts.js | 1081 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 1,073 insertions(+), 8 deletions(-)

diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index c6330a7..8add81c 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -26,6 +26,9 @@
   return myChart
 }
 
+const colorX = '#c7e7ff'
+const colorY = '#7696c5'
+
 // 绯荤粺棣栭〉鍥�
 export function barTop(data, colorArr) {
   var salvProName = ['x']
@@ -305,9 +308,9 @@
       }
     },
     yAxis: {
-      max: 1,
+      max: 14,
       min: 0,
-      interval: 0.2,
+      interval: 2,
       splitLine: {
         show: false
       },
@@ -372,6 +375,7 @@
   // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
   const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
   const option = {
+    animation: false,
     backgroundColor: 'transparent',
     title: {
       show: false,
@@ -390,12 +394,13 @@
       }
     },
     grid: {
-      left: '10%',
-      right: '5%',
+      left: '5%',
+      right: '10%',
       bottom: '0%',
       top: '10%',
       containLabel: true
     },
+    // animation: false, // 鍙栨秷鍔ㄧ敾
     xAxis: {
       show: false
     },
@@ -418,7 +423,7 @@
           color: function(value, index) {
             return value === '0' ? 'transparent' : '#fff'
           },
-          fontSize: 18,
+          fontSize: 20,
           // formatter: function(value, index) {
           //   return [
           //     '{lg|' + (index + 1) + '銆�   }' + '{title|' + value + '} '
@@ -426,8 +431,8 @@
           // },
           formatter: function(params) {
             var val = ''
-            if (params.length > 5) {
-              val = params.substr(0, 5) + '...'
+            if (params.length > 8) {
+              val = params.substr(0, 8) + '...'
               return val
             } else {
               return params
@@ -491,7 +496,7 @@
             show: true,
             position: 'right',
             formatter: '{c}',
-            fontSize: 14,
+            fontSize: 20,
             color: '#fff'
             // formatter: '{c}%',
           }
@@ -788,3 +793,1063 @@
   }
   return option
 }
+
+// 鐪嬫澘澶撮儴鑳屾櫙鏉�
+export function kbTop() {
+  var getXY = ['瀛﹀墠鏁欒偛绯�'] // 鏁版嵁鐐瑰悕绉�
+  var getRS = [255] // 瀛︾敓婊℃剰搴�
+
+  var max = Math.ceil(255 / 10) * 10
+
+  const option = {
+    animation: false,
+    backgroundColor: 'transparent',
+    grid: {
+      left: '0%',
+      right: '0%',
+      bottom: '0%',
+      top: '0%'
+      // containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'value',
+        show: false,
+        axisLabel: {
+          margin: 5,
+          color: '#666666',
+          textStyle: {
+            fontSize: '13'
+          }
+        },
+        min: 0,
+        max: max, // 璁$畻鏈�澶у��
+        interval: max / 5, //  骞冲潎鍒嗕负5浠�
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#D1D1D1'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#333333'
+          }
+        },
+        axisTick: {
+          show: false
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        inverse: true,
+        show: false,
+        axisLabel: {
+          textStyle: {
+            color: '#6F84BD',
+            fontSize: '13'
+          }
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#333333'
+          }
+        },
+        data: getXY
+      }
+    ],
+    series: [
+      {
+        name: '鍊�',
+        type: 'bar',
+        zlevel: 1,
+        xAxisIndex: 0,
+        label: {
+          show: false,
+          position: 'right',
+          color: '#6F84BD',
+          fontSize: 14,
+          offset: [10, 0]
+        },
+        itemStyle: {
+          normal: {
+            barBorderRadius: [10, 10, 10, 10],
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+              offset: 0,
+              color: '#91ddec' // 0% 澶勭殑棰滆壊
+            }, {
+              offset: 1,
+              color: '#09d8f2' // 100% 澶勭殑棰滆壊
+            }], false)
+          }
+        },
+        barWidth: 15,
+        data: getRS
+      }
+    ]
+  }
+
+  return option
+}
+
+// 杞﹂棿璐ㄩ噺宸︿笅鍛ㄤ笉鑹�
+export function line02(dataX, dataY) {
+  return {
+    animation: false,
+    backgroundColor: 'transparent',
+    tooltip: {},
+    // title: {
+    //   show: false,
+    //   text: '璁㈠崟瀹屾垚鎬绘暟',
+    //   left: '50%',
+    //   top: '5%',
+    //   textAlign: 'center',
+    //   textStyle: {
+    //     // color: '#fff',
+    //     color: '#00ffff',
+    //     fontSize: '20',
+    //     fontWeight: 'bolder'
+    //   }
+    // },
+    grid: {
+      left: '0%',
+      right: '2%',
+      bottom: '5%',
+      top: '8%',
+      containLabel: true
+    },
+    legend: {
+      show: false,
+      itemGap: 50,
+      data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+      textStyle: {
+        color: '#f9f9f9',
+        borderColor: '#fff'
+      }
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLabel: {
+          interval: 0,
+          formatter: '{value}',
+          fontSize: 18,
+          margin: 20,
+          textStyle: {
+            color: colorX
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        data: dataX
+      }],
+    yAxis: [
+      {
+        // max: 800,
+        boundaryGap: false,
+        splitNumber: 4,
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            fontSize: 18,
+            color: colorY
+          }
+        },
+        // name: '鍗�',
+        // nameTextStyle: {
+        //   color: colorY,
+        //   fontSize: 14,
+        //   lineHeight: 20
+        // },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisTick: {
+          show: true
+        }
+      }
+    ],
+    series: [
+      {
+        name: '娉ㄥ唽鎬婚噺',
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#28ffb3' // 绾挎潯棰滆壊
+          },
+          borderColor: '#f0f'
+        },
+        label: {
+          show: true,
+          position: 'top',
+          textStyle: {
+            color: '#fff',
+            fontSize: 16
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#28ffb3'
+
+          }
+        },
+        tooltip: {
+          show: false
+        },
+        areaStyle: { // 鍖哄煙濉厖鏍峰紡
+          normal: {
+            // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: 'rgba(0,154,120,1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+            ], false),
+            shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+            shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯$硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+          }
+        },
+        data: dataY
+        // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+      }
+      //   {
+      //   name: '鏈�鏂版敞鍐岄噺',
+      //   type: 'bar',
+      //   barWidth: 20,
+      //   tooltip: {
+      //     show: false
+      //   },
+      //   label: {
+      //     show: true,
+      //     position: 'top',
+      //     textStyle: {
+      //       color: '#fff',
+      //     }
+      //   },
+      //   itemStyle: {
+      //     normal: {
+      //       // barBorderRadius: 5,
+      //       // color: new echarts.graphic.LinearGradient(
+      //       //     0, 0, 0, 1,
+      //       //     [{
+      //       //             offset: 0,
+      //       //             color: '#14c8d4'
+      //       //         },
+      //       //         {
+      //       //             offset: 1,
+      //       //             color: '#43eec6'
+      //       //         }
+      //       //     ]
+      //       // )
+      //       color: function (params) {
+      //         var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
+      //         return colorList[params.dataIndex];
+      //       }
+      //     }
+      //   },
+      //   data: [200, 382, 102, 267, 186, 315, 316]
+      // }
+    ]
+  }
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笂 鏃ヤ笉鑹�
+export function bar04(resValueArr) {
+  // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
+
+  const data = [
+    {
+      name: '瑁呴厤涓�绾�',
+      value: resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�').cont : 0
+    },
+    {
+      name: '瑁呴厤浜岀嚎',
+      value: resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎').cont : 0
+    },
+    {
+      name: '瑁呴厤涓夌嚎',
+      value: resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎').cont : 0
+    },
+    {
+      name: '瑁呴厤鍥涚嚎',
+      value: resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎').cont : 0
+    }
+  ]
+  const getSymbolData = (data) => {
+    const arr = []
+    for (var i = 0; i < data.length; i++) {
+      arr.push({
+        value: data[i].value,
+        symbolPosition: 'end'
+      })
+    }
+    return arr
+  }
+
+  const option = {
+    animation: false,
+    backgroundColor: 'transparent',
+    grid: {
+      top: '0%',
+      bottom: 0,
+      right: '4%',
+      left: -20,
+      containLabel: true
+    },
+    xAxis: {
+      show: false
+    },
+    yAxis: [{
+      triggerEvent: true,
+      show: true,
+      inverse: true,
+      data: data.map(r => r.name),
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+
+      axisLabel: {
+        show: true,
+        interval: 0,
+        color: '#fff',
+        align: 'left',
+        margin: 60,
+        formatter: function(value, index) {
+          return '{title|' + value + '}'
+        },
+        rich: {
+          title: {
+            width: 50,
+            align: 'right',
+            fontSize: 20
+          }
+        }
+      }
+    }, {
+      triggerEvent: true,
+      show: true,
+      inverse: true,
+      data: data.map(r => r.name),
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        shadowOffsetX: '-20px',
+        color: ['#fff'],
+        align: 'left',
+        verticalAlign: 'center',
+        lineHeight: 40,
+        fontSize: 20,
+        formatter: function(value, index) {
+          return data[index].value + ''
+        }
+
+      }
+    }],
+    series: [
+      {
+        name: 'XXX',
+        type: 'pictorialBar',
+        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+        // symbolSize: [50, 50],
+        symbolSize: function(params) {
+          return params === 0 ? [0, 0] : [50, 50]
+        },
+        symbolOffset: [20, 0],
+        z: 12,
+        itemStyle: {
+          normal: {
+            color: '#fff'
+          }
+        },
+        data: getSymbolData(data)
+      },
+      {
+        name: '鏉�',
+        type: 'bar',
+        showBackground: true,
+        // barBorderRadius: 30,
+        yAxisIndex: 0,
+        data: data,
+        barWidth: 10,
+        // align: left,
+        itemStyle: {
+          normal: {
+            color: 'rgba(41, 162, 245, 1)',
+            barBorderRadius: 10
+          }
+          // color: '#A71A2B',
+          // barBorderRadius: 4,
+        }
+        // label: {
+        //     normal: {
+        //         color: '#fff',
+        //         show: true,
+        //         position: ["-80px", 0],
+        //         textStyle: {
+        //             fontSize: 16
+        //         },
+        //         formatter: function(a, b) {
+        //             return a.name
+        //         }
+        //     }
+        // }
+      }]
+  }
+
+  return option
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笅  鍛ㄤ笉鑹�
+export function pie02(resValueArr) {
+  const bgColor = 'transparent'
+  const title = '鎬讳笉鑹暟'
+  const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
+  const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// 鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
+  const formatNumber = function(num) {
+    const reg = /(?=(\B)(\d{3})+$)/g
+    return num.toString().replace(reg, ',')
+  }
+  const total = echartData.reduce((a, b) => {
+    return a + b.value * 1
+  }, 0)
+
+  const option = {
+    animation: false,
+    backgroundColor: bgColor,
+    color: color,
+    // tooltip: {
+    //     trigger: 'item'
+    // },
+    title: [{
+      text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
+      top: 'center',
+      left: 'center',
+      textStyle: {
+        rich: {
+          name: {
+            fontSize: 22,
+            fontWeight: 'normal',
+            color: '#fff',
+            padding: [10, 0]
+          },
+          val: {
+            fontSize: 22,
+            fontWeight: 'bold',
+            color: '#fff'
+          }
+        }
+      }
+    }
+      // {
+      //   text: '鍗曚綅锛氫釜',
+      //   top: 20,
+      //   left: 20,
+      //   textStyle: {
+      //     fontSize: 14,
+      //     color: '#666666',
+      //     fontWeight: 400
+      //   }
+      // }
+    ],
+    // legend: {
+    //     orient: 'vertical',
+    //     icon: 'rect',
+    //     x: '80%',
+    //     y: 'center',
+    //     itemWidth: 12,
+    //     itemHeight: 12,
+    //     align: 'left',
+    //     textStyle: {
+    //         rich: {
+    //             name: {
+    //                 fontSize: 12
+    //             },
+    //             value: {
+    //                 fontSize: 16,
+    //                 padding: [0, 5, 0, 15]
+    //             },
+    //             unit: {
+    //                 fontSize: 12
+    //             }
+    //         }
+    //     },
+    //     formatter: function(name) {
+    //         let res = echartData.filter(v => v.name === name);
+    //         res = res[0] || {};
+    //         let unit = res.unit || '';
+    //         return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
+    //     }
+    //     // data: legendName
+    // },
+    series: [
+      {
+        type: 'pie',
+        radius: ['35%', '50%'],
+        center: ['50%', '50%'],
+        data: echartData,
+        hoverAnimation: false,
+        itemStyle: {
+          normal: {
+            borderColor: bgColor,
+            borderWidth: 2
+          }
+        },
+        labelLine: {
+          normal: {
+            // showAbove: false,
+            length: 20,
+            length2: 35,
+            lineStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        label: {
+          normal: {
+            formatter: params => {
+              return (
+                '{icon|鈼弣{name|' + params.name + '}{value|' +
+                formatNumber(params.value) + '}'
+              )
+            },
+            padding: [0, -50, 25, -50],
+            rich: {
+              icon: {
+                fontSize: 18,
+                color: 'red'
+              },
+              name: {
+                fontSize: 18,
+                padding: [0, 10, 0, 4],
+                color: '#fff'
+              },
+              value: {
+                fontSize: 18,
+                fontWeight: 'bold',
+                color: '#fff'
+              }
+            }
+          }
+        }
+      }]
+  }
+  return option
+}
+
+// 杞﹂棿鐢熶骇  鐢熶骇淇℃伅  鐢熶骇杩涘害 杩涘害鏉�
+export function progress(param1, param2) {
+//   param1  鎶ュ伐鏁伴噺
+  //  param2   浠诲姟鏁伴噺
+
+  // 鎷垮埌鏁版嵁涔嬪悗闇�瑕佽绠楀嚭鐩稿闀垮害  param2鐨勭浉瀵归暱搴︿负100
+  let relativeValue = ''// 鐩稿鍊�  缁胯壊鑳屾櫙
+
+  relativeValue = (param1 / param2) * 100
+  // 鐧惧垎姣旀暟鍊肩殑浣嶇疆
+  var position = 'right'
+  // if (param1 >= 50) {
+  //     position = 'inside';
+  // } else if (param1 < 50) {
+  //     position = 'right';
+  // }
+
+  var option = {
+    animation: false,
+    // animation: false, // 鍙栨秷鍔ㄧ敾
+    // animationDuration: 5000,
+    grid: {
+      top: 'center',
+      left: '0%',
+      right: '0%',
+      // height: '%',
+      // containLabel: false
+      containLabel: true
+
+    },
+    xAxis: {
+      type: 'value',
+      axisLabel: {
+        show: false
+      },
+      max: 100,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    yAxis: [{
+      type: 'category',
+      data: [],
+      axisLabel: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      z: 10
+    }, {
+      type: 'category',
+      axisLabel: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      data: []
+    }],
+    series: [{
+      name: '',
+      type: 'bar',
+      barWidth: '100%',
+      // barMaxWidth: '100%',
+      label: {
+        normal: {
+          show: true,
+          // position: ['24', '38%'],
+          position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
+          // formatter: '{c} %',
+          formatter: param1 + '/' + param2,
+          textStyle: {
+            color: '#FFFFFF',
+            fontWeight: 'bold',
+            fontFamily: 'Microsoft YaHei',
+            fontSize: 18
+          }
+        }
+      },
+      itemStyle: {
+        normal: {
+          barBorderRadius: 5,
+          shadowBlur: 10,
+          shadowColor: '#111',
+          color: '#2FD04F'
+        }
+      },
+      // data: [param1],
+      data: [relativeValue],
+      z: 10
+    }, {
+      type: 'bar',
+      barWidth: '100%',
+      yAxisIndex: 1,
+      silent: true,
+      // barMaxWidth: '100%',
+      itemStyle: {
+        normal: {
+          barBorderRadius: 5,
+          color: '#42475B'
+        }
+      },
+      // data: [param2]
+      data: [100]
+    }]
+  }
+
+  return option
+}
+
+// 閲囪喘璁㈠崟
+export function cgddchart(data1, data2, data3) {
+  // 寰楀埌鏈�澶у��  5鐨勫�嶆暟
+
+  let max = Math.max(Math.max(data1, data2), data3) + 5
+  if (max % 5 !== 0) {
+    max = 5 - max % 5 + max
+  }
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      formatter: '{a} <br/>{c} {b}'
+    },
+    series: [
+      {
+        show: false,
+        name: ' ',
+        type: 'gauge',
+        color: ['#f00'],
+        min: 0,
+        max: max,
+        splitNumber: 5,
+        radius: '70%',
+        center: ['17%', '48%'],
+        axisLine: { // 鍧愭爣杞寸嚎
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            width: 10,
+            color: [
+              [0.4, '#09d8f2'],
+              [1, '#00FFFFF']
+            ]
+          },
+          backgroundColor: 'none'
+        },
+        tooltip: {
+          show: false
+        },
+        axisTick: { // 鍧愭爣杞村皬鏍囪
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            color: 'auto'
+          }
+        },
+        splitLine: { // 鍒嗛殧绾�
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+            color: colorY
+          }
+        },
+        axisLabel: {
+          borderRadius: 1,
+          // color: 'rgba(255,255,255,0.7)',
+          color: '#00FFFF',
+          padding: 1,
+          fontSize: 18
+        },
+        title: {
+          // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+          // fontWeight: 'bolder',
+          fontSize: 22,
+          fontFamily: 'Microsoft YaHei',
+          fontColor: '#FFF',
+          color: '#FFF',
+          paddingTop: 20,
+          offsetCenter: [0, '120%']
+          // fontStyle: 'italic'
+        },
+        itemStyle: {
+          // color: '#1092ff'
+          color: '#09d8f2'
+        },
+        detail: {
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          fontFamily: 'digital',
+          fontSize: 26,
+          color: '#fff',
+          rich: {},
+          offsetCenter: [0, '90%'],
+
+          formatter: function(value) {
+            return value
+          }
+        },
+        data: [{
+          value: data1,
+          name: '鏈湀閲囪喘璁㈠崟鏁�'
+        }]
+      },
+      {
+        name: '鏈湀閲囪喘璁㈠崟鏁�',
+        type: 'gauge',
+        color: ['#f00'],
+        min: 0,
+        max: max,
+        splitNumber: 5,
+        radius: '70%',
+        center: ['17%', '48%'],
+        axisLine: { // 鍧愭爣杞寸嚎
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            width: 10,
+            color: [
+              [0.4, '#09d8f2'],
+              [1, '#00FFFFF']
+            ]
+          },
+          backgroundColor: 'none'
+        },
+        tooltip: {
+          show: false
+        },
+        axisTick: { // 鍧愭爣杞村皬鏍囪
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            color: 'auto'
+          }
+        },
+        splitLine: { // 鍒嗛殧绾�
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+            color: colorY
+          }
+        },
+        axisLabel: {
+          borderRadius: 1,
+          // color: 'rgba(255,255,255,0.7)',
+          color: '#00FFFF',
+          padding: 1,
+          fontSize: 18
+        },
+        title: {
+          // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+          // fontWeight: 'bolder',
+          fontSize: 22,
+          fontFamily: 'Microsoft YaHei',
+          fontColor: '#FFF',
+          color: '#FFF',
+          paddingTop: 20,
+          offsetCenter: [0, '120%']
+          // fontStyle: 'italic'
+        },
+        itemStyle: {
+          // color: '#1092ff'
+          color: '#09d8f2'
+        },
+        detail: {
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          fontFamily: 'digital',
+          fontSize: 26,
+          color: '#fff',
+          rich: {},
+          offsetCenter: [0, '90%'],
+
+          formatter: function(value) {
+            return value
+          }
+        },
+        data: [{
+          value: data1,
+          name: '鏈湀閲囪喘璁㈠崟鏁�'
+        }]
+      },
+      {
+        name: '鏈湀鍒拌揣鍗曟暟',
+        type: 'gauge',
+        color: ['#f00'],
+        min: 0,
+        max: max,
+        splitNumber: 5,
+        radius: '70%',
+        center: ['50%', '48%'],
+        axisLine: { // 鍧愭爣杞寸嚎
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            width: 10,
+            color: [
+              [0.4, '#09d8f2'],
+              [1, '#00FFFFF']
+            ]
+          },
+          backgroundColor: 'none'
+        },
+        tooltip: {
+          show: false
+        },
+        axisTick: { // 鍧愭爣杞村皬鏍囪
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            color: 'auto'
+          }
+        },
+        splitLine: { // 鍒嗛殧绾�
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+            color: colorY
+          }
+        },
+        axisLabel: {
+          borderRadius: 1,
+          // color: 'rgba(255,255,255,0.7)',
+          color: '#00FFFF',
+          padding: 1,
+          fontSize: 18
+        },
+        title: {
+          // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+          // fontWeight: 'bolder',
+          fontSize: 22,
+          fontColor: '#FFF',
+          color: '#FFF',
+          fontFamily: 'Microsoft YaHei',
+          paddingTop: 20,
+          offsetCenter: [0, '120%']
+          // fontStyle: 'italic'
+        },
+        itemStyle: {
+          // color: '#1092ff'
+          color: '#09d8f2'
+        },
+        detail: {
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          // borderWidth: 1,
+          textBorderColor: '#000',
+          textBorderWidth: 1,
+          textShadowBlur: 1,
+          textShadowColor: colorY,
+          textShadowOffsetX: 0,
+          textShadowOffsetY: 0,
+          paddingTop: 10,
+          fontFamily: 'digital',
+          fontSize: 20,
+          width: 30,
+          color: '#fff',
+          rich: {},
+          offsetCenter: [0, '90%'],
+          formatter: function(value) {
+            // console.info(value)
+            // return (value * 10 + '%')
+            return value
+          }
+        },
+        data: [{
+          value: data2,
+          name: '鏈湀鍒拌揣鍗曟暟'
+        }]
+      },
+      {
+        name: '鏈湀閲囪喘鍏ュ簱鍗曟暟',
+        type: 'gauge',
+        color: ['#f00'],
+        min: 0,
+        max: max,
+        splitNumber: 5,
+        radius: '70%',
+        center: ['83%', '48%'],
+        axisLine: { // 鍧愭爣杞寸嚎
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            width: 10,
+            color: [
+              [0.4, '#09d8f2'],
+              [1, '#00FFFFF']
+            ]
+          },
+          backgroundColor: 'none'
+        },
+        tooltip: {
+          show: false
+        },
+        axisTick: { // 鍧愭爣杞村皬鏍囪
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+            color: 'auto'
+          }
+        },
+        splitLine: { // 鍒嗛殧绾�
+          length: 10, // 灞炴�ength鎺у埗绾块暱
+          lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+            color: colorY
+          }
+        },
+        axisLabel: {
+          borderRadius: 1,
+          // color: 'rgba(255,255,255,0.7)',
+          color: '#00FFFF',
+          padding: 1,
+          fontSize: 18
+        },
+        title: {
+          // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+          // fontWeight: 'bolder',
+          fontSize: 22,
+          fontColor: '#FFF',
+          color: '#FFF',
+          fontFamily: 'Microsoft YaHei',
+          paddingTop: 20,
+          offsetCenter: [0, '120%']
+          // fontStyle: 'italic'
+        },
+        itemStyle: {
+          // color: '#1092ff'
+          color: '#09d8f2'
+        },
+        detail: {
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          // borderWidth: 1,
+          textBorderColor: '#000',
+          textBorderWidth: 1,
+          textShadowBlur: 1,
+          textShadowColor: colorY,
+          textShadowOffsetX: 0,
+          textShadowOffsetY: 0,
+          paddingTop: 10,
+          fontFamily: 'digital',
+          fontSize: 20,
+          width: 30,
+          color: '#fff',
+          rich: {},
+          offsetCenter: [0, '90%'],
+          formatter: function(value) {
+            return value
+          }
+        },
+        data: [{
+          value: data3,
+          name: `鏈湀閲囪喘鍏ュ簱鍗曟暟`
+        }]
+      }
+
+    ]
+  }
+  return option
+}

--
Gitblit v1.9.3