From 2bf7aff3435c9abcb38b9ced5b6fa56957aeae89 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 13 九月 2023 15:59:56 +0800
Subject: [PATCH] 1  车间质量、仓库管理、及五个车间看板  递交

---
 src/utils/myEcharts.js |  849 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 846 insertions(+), 3 deletions(-)

diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 8add81c..a74f8ef 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1745,7 +1745,7 @@
           textBorderColor: '#000',
           textBorderWidth: 1,
           textShadowBlur: 1,
-          textShadowColor: colorY,
+          textShadowColor: colorX,
           textShadowOffsetX: 0,
           textShadowOffsetY: 0,
           paddingTop: 10,
@@ -1797,7 +1797,7 @@
         splitLine: { // 鍒嗛殧绾�
           length: 10, // 灞炴�ength鎺у埗绾块暱
           lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
-            color: colorY
+            color: colorX
           }
         },
         axisLabel: {
@@ -1829,7 +1829,7 @@
           textBorderColor: '#000',
           textBorderWidth: 1,
           textShadowBlur: 1,
-          textShadowColor: colorY,
+          textShadowColor: colorX,
           textShadowOffsetX: 0,
           textShadowOffsetY: 0,
           paddingTop: 10,
@@ -1853,3 +1853,846 @@
   }
   return option
 }
+
+// 杞﹂棿璐ㄩ噺
+export function cjzl01(scaleData) {
+  var rich = {
+    white: {
+      color: colorX,
+      align: 'center',
+      padding: [3, 0],
+      fontSize: 20
+    }
+  }
+  var data = []
+  var color = ['#00ffff', '#ff5b00', '#006ced', '#ffe000', '#ffa800', '#ff3000']
+  for (var i = 0; i < scaleData.length; i++) {
+    data.push({
+      value: scaleData[i].value,
+      name: scaleData[i].name,
+      itemStyle: {
+        normal: {
+          borderWidth: 5,
+          shadowBlur: 20,
+          borderColor: color[i],
+          shadowColor: color[i]
+        }
+      }
+    }
+    )
+  }
+  var seriesObj = [{
+    name: '',
+    type: 'pie',
+    clockWise: false,
+    radius: [60, 65],
+    hoverAnimation: false,
+    top: '10%',
+    itemStyle: {
+      normal: {
+        label: {
+          show: true,
+          position: 'outside',
+          color: colorX,
+          fontSize: 20,
+          formatter: function(params) {
+            if (params.name !== '') {
+              return params.name + '\n{white|' + params.value + '}'
+            } else {
+              return ''
+            }
+          },
+          rich: rich
+        },
+        labelLine: {
+          length: 10,
+          length2: 10,
+          show: true,
+          color: '#00ffff'
+        }
+      }
+    },
+    data: data
+  }]
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    toolbox: {
+      show: false
+    },
+    title: {
+      text: '鎬诲拰',
+      left: '49%',
+      top: '45%',
+      textAlign: 'center',
+      textStyle: {
+        color: '#00ffff',
+        fontSize: '20',
+        fontWeight: 'bolder'
+      },
+      subtext: scaleData.length > 0 ? scaleData.map(i => parseFloat(i.value)).reduce((pre, curr) => {
+        return pre + curr
+      }) : [0],
+      subtextStyle: {
+        color: '#00ffff',
+        fontSize: '20',
+        fontWeight: 'bolder'
+      }
+    },
+    series: seriesObj
+  }
+
+  return option
+}
+
+export function cjzl02(title, scaleData) {
+  var rich = {
+    white: {
+      color: '#ddd',
+      align: 'center',
+      padding: [5, 0],
+      fontSize: 20
+    }
+  }
+
+  var data = []
+  var color = ['#00ffff', '#ff3000', '#ffe000', '#ffa800', '#ff5b00']
+  for (var i = 0; i < scaleData.length; i++) {
+    data.push({
+      value: scaleData[i].value,
+      name: scaleData[i].name,
+      itemStyle: {
+        normal: {
+          borderWidth: 5,
+          shadowBlur: 20,
+          borderColor: color[i],
+          shadowColor: [i]
+        }
+      }
+    }
+    )
+  }
+  var seriesObj = [{
+    name: '',
+    type: 'pie',
+    clockWise: false,
+    radius: [60, 65],
+    top: '10%',
+    hoverAnimation: false,
+    itemStyle: {
+      normal: {
+        label: {
+          fontSize: 20,
+          show: true,
+          position: 'outside',
+          color: colorX,
+          formatter: function(params) {
+            // var percent = 0
+            // var total = 0
+            // for (var i = 0; i < scaleData.length; i++) {
+            //   total += scaleData[i].value
+            // }
+            // percent = ((params.value / total) * 100).toFixed(0)
+            if (params.name !== '') {
+              return params.name + '\n{white|' + '' + params.value + '}'
+            } else {
+              return ''
+            }
+          },
+          rich: rich
+        },
+        labelLine: {
+          length: 10,
+          length2: 20,
+          show: true,
+          color: '#00ffff'
+        }
+      }
+    },
+    data: data
+  }]
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    top: 'middle',
+    title: {
+      text: title,
+      left: '49%',
+      top: '45%',
+      textAlign: 'center',
+      textStyle: {
+        // color: colorX,
+        color: '#00ffff',
+        fontSize: '20',
+        fontWeight: 'bolder'
+      },
+      subtext: scaleData.length > 0 ? scaleData.map(i => parseFloat(i.value)).reduce((pre, curr) => {
+        return pre + curr
+      }) : [0],
+      subtextStyle: {
+        color: '#00ffff',
+        fontSize: '20',
+        fontWeight: 'bolder'
+      }
+    },
+    legend: {
+      show: false
+    },
+    toolbox: {
+      show: false
+    },
+    series: seriesObj
+  }
+
+  return option
+}
+
+export function cjzl03(xData, legendData, yData) { // 宸︿晶
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {},
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '20%',
+      top: '10%',
+      containLabel: true
+    },
+    legend: {
+      data: legendData,
+      textStyle: { fontSize: 16, color: '#fff' },
+      itemWidth: 25,
+      itemHeight: 10,
+      itemGap: 15,
+      bottom: '5%',
+      selectedMode: false
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: true,
+      axisLabel: {
+        interval: 0,
+        formatter: '{value}',
+        fontSize: 16,
+        margin: 20,
+        textStyle: {
+          color: colorX
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#032c58'
+        }
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: '#032c58'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: xData
+    }],
+    yAxis: [
+      {
+        // max: 800,
+        boundaryGap: false,
+        splitNumber: 4,
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            fontSize: 16,
+            color: colorX
+          }
+        },
+        // 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: legendData[0],
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#00ffff' // 绾挎潯棰滆壊
+          },
+          borderColor: '#00ffff'
+        },
+        // label: {
+        //   show: true,
+        //   position: 'top',
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: '#00ffff'
+          }
+        },
+        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: yData[0]
+      },
+      {
+        name: legendData[1],
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#ff3000' // 绾挎潯棰滆壊
+          },
+          borderColor: '#ff3000'
+        },
+        // label: {
+        //   show: true,
+        //   position: 'top',
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: '#ff3000'
+          }
+        },
+        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: yData[1]
+      },
+      {
+        name: legendData[2],
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#ffe000' // 绾挎潯棰滆壊
+          },
+          borderColor: '#ffe000'
+        },
+        // label: {
+        //   show: true,
+        //   position: 'top',
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: '#ffe000'
+          }
+        },
+        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: yData[2]
+      },
+      {
+        name: legendData[3],
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#ffa800' // 绾挎潯棰滆壊
+          },
+          borderColor: '#ffa800'
+        },
+        // label: {
+        //   show: true,
+        //   position: 'top',
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: '#ffa800'
+          }
+        },
+        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: yData[3]
+      },
+      {
+        name: legendData[4],
+        type: 'line',
+        // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+        // 			symbol:'circle',  // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 6,
+        lineStyle: {
+          normal: {
+            color: '#ff5b00' // 绾挎潯棰滆壊
+          },
+          borderColor: '#ff5b00'
+        },
+        // label: {
+        //   show: true,
+        //   position: 'top',
+        //   textStyle: {
+        //     color: '#fff'
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: '#ff5b00'
+          }
+        },
+        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: yData[4]
+      }
+    ]
+  }
+}
+
+export function cjzl04(xData, data1, data2, data3) { // 鍙充晶
+  const option = {
+    backgroundColor: 'transparent',
+    grid: {
+      left: '2%',
+      top: '12%',
+      right: '2%',
+      bottom: '20%',
+      containLabel: true
+    },
+    legend: {
+      // show: true,
+      // itemGap: 20,
+      // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+      // textStyle: {
+      //   color: '#f9f9f9',
+      //   borderColor: '#fff'
+      // }
+      data: ['瀹屾垚鏁�', '浠诲姟鏁�', '瀹屾垚鐜�'],
+      textStyle: { fontSize: 16, color: '#fff' },
+      itemWidth: 25,
+      itemHeight: 10,
+      itemGap: 15,
+      bottom: '5%',
+      selectedMode: false
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      axisLabel: {
+        interval: 0,
+        formatter: '{value}',
+        fontSize: 16,
+        margin: 20,
+        textStyle: {
+          color: colorX
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#032c58'
+        }
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: '#032c58'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: xData
+    },
+    yAxis: [
+      {
+        boundaryGap: false,
+        // splitNumber: 4,
+        type: 'value',
+        // max: 100,
+        axisLabel: {
+          textStyle: {
+            fontSize: 16,
+            color: colorX
+          }
+        },
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 14,
+          lineHeight: 40
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisTick: {
+          show: false
+        }
+      },
+      {
+        boundaryGap: false,
+        // splitNumber: 4,
+        max: 100,
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            fontSize: 16,
+            color: colorX
+          }
+        },
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 16,
+          lineHeight: 40
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#032c58'
+          }
+        },
+        axisTick: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      { // 涓変釜鏈�搴曚笅鐨勫渾鐗�
+        'name': '瀹屾垚鏁�',
+        'type': 'pictorialBar',
+        'symbolSize': [45, 25],
+        'symbolOffset': [0, 10],
+        'z': 12,
+        color: `rgb(37,196,238)`,
+        itemStyle: {
+          opacity: 1,
+          color: function(params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
+            }, {
+              offset: 1,
+              color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
+            }], false)
+          }
+        },
+        'data': [1, 1, 1, 1, 1]
+      },
+
+      // 涓嬪崐鎴煴鐘跺浘
+      {
+        name: '',
+        type: 'bar',
+        barWidth: 45,
+        barGap: '-100%',
+        itemStyle: { // lenged鏂囨湰
+          opacity: 1,
+          color: function(params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: `rgb(35,131,180)` // 0% 澶勭殑棰滆壊
+            }, {
+              offset: 1,
+              color: `rgb(35,131,180)`// 100% 澶勭殑棰滆壊
+            }], false)
+          }
+        },
+        data: data1
+      },
+
+      { // 鏇夸唬鏌辩姸鍥� 榛樿涓嶆樉绀洪鑹诧紝鏄渶涓嬫柟鏌卞浘锛堥偖浠惰惀閿�锛夌殑value鍊� - 20
+        type: 'bar',
+        barWidth: 45,
+        barGap: '-100%',
+        stack: '骞垮憡',
+        itemStyle: {
+          color: 'transparent'
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'left',
+            fontSize: 16,
+            color: colorX,
+            zIndex: 10
+          }
+        },
+        data: data1
+      },
+
+      {
+        'name': '', // 澶撮儴
+        'type': 'pictorialBar',
+        'symbolSize': [45, 25],
+        'symbolOffset': [0, -10],
+        'z': 12,
+        'symbolPosition': 'end',
+        itemStyle: {
+          color: '#163F7A',
+          opacity: 1
+        },
+        'data': data2
+      },
+
+      {
+        'name': '',
+        'type': 'pictorialBar',
+        'symbolSize': [45, 25],
+        'symbolOffset': [0, -10],
+        'z': 12,
+        itemStyle: {
+          opacity: 1,
+          color: function(params) {
+            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
+            }, {
+              offset: 1,
+              color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
+            }], false)
+          }
+        },
+        'symbolPosition': 'end',
+        'data': data1
+      },
+
+      {
+        name: '浠诲姟鏁�',
+        type: 'bar',
+        barWidth: 45,
+        barGap: '-100%',
+        z: 0,
+        itemStyle: {
+          color: '#163F7A',
+          opacity: 0.7
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            fontSize: 16,
+            color: colorX,
+            offset: [0, -5]
+          }
+        },
+        data: data2
+      },
+
+      {
+        name: '瀹屾垚鐜�',
+        type: 'line',
+        yAxisIndex: 1,
+        showSymbol: true,
+        showAllSymbol: true,
+        symbolSize: 6,
+        barWidth: 14,
+        zlevel: 3,
+        lineStyle: {
+          normal: {
+            width: 2,
+            color: `rgb(108,237,100)`
+          }
+        },
+        // areaStyle: {
+        //   normal: {
+        //     color: {
+        //       type: 'linear',
+        //       x: 0,
+        //       y: 0,
+        //       x2: 0,
+        //       y2: 1,
+        //       colorStops: [
+        //         {
+        //           offset: 0,
+        //           color: `rgba(72,226,198, 0.3)`// 0% 澶勭殑棰滆壊
+        //         },
+        //         {
+        //           offset: 1,
+        //           color: `rgba(72,226,198, 0.2)` // 100% 澶勭殑棰滆壊
+        //         }
+        //       ],
+        //       globalCoord: false // 缂虹渷涓� false
+        //     } // 娓愬彉棰滆壊
+        //   }
+        // },
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: `rgb(108,237,100)`// 0% 澶勭殑棰滆壊
+                },
+                {
+                  offset: 1,
+                  color: `rgb(108,237,100)` // 100% 澶勭殑棰滆壊
+                }
+              ],
+              globalCoord: false // 缂虹渷涓� false
+            } // 娓愬彉棰滆壊
+          }
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            fontSize: 14,
+            color: colorX,
+            formatter: params => {
+              return `${params.value}%`
+            }
+            // offset: [0, -5]
+          }
+        },
+        data: data3
+      }
+    ]
+  }
+  return option
+}

--
Gitblit v1.9.3