1.综合看板修改

loulijun2021

2022-10-10 fde1edb0a61b411ad236177c7ee6bf94337362a1

 src/utils/myEcharts.js

@@ -1,6 +1,6 @@
import * as echarts from 'echarts'

/**
/** 255
 * 统一样式，加载
 * @param {*} id
 * @param {*} option
@@ -1570,7 +1570,7 @@
export function zhkb01() {
  // const zhkb01name = ['计划完成进度(自产)', '计划完成进度(外购)'] // 名称
  const zhkb01name = ['', ''] // 名称
  const zhkb01Value = [88, 95] // 值
  const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 值
  const zhkb01Max = []

  const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
@@ -1816,7 +1816,7 @@

}

export function zhkb03() {
export function zhkb03(title) {
  const labelData = []
  const labelData1 = []
  for (let i = 0; i < 80; ++i) {
@@ -1980,7 +1980,7 @@
    backgroundColor: 'transparent',
    title: [
      {
        text: '螺母投入产出率',
        text: title,
        x: '46%',
        y: '38%',
        textAlign: 'center',
@@ -2235,6 +2235,8 @@

export function zhkb04() {
  const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
  // const data = [330, 404, 780, 509, 150]
  const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
  const option = {
    backgroundColor: 'transparent',
    grid: {
@@ -2285,7 +2287,8 @@
            fontSize: 16
          }
        },
        data: ['12566', '12566', '12566', '12566', '12566']

        data: data
      },
      {
        show: false,
@@ -2308,7 +2311,7 @@
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: [33, 44, 78, 59, 15],
        data: data.map(r => r / 10),
        label: {
          normal: {
            show: false,
@@ -2383,7 +2386,8 @@
          }
        },
        z: 2
      }]
      }
    ]
  }

  return option
@@ -2392,9 +2396,10 @@
export function zhkb05() {
// 数据
//   var XName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  var XName = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
  var XName = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月']
  var data1 = [
    [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
    // [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
    [Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
    // [123, 154, 234, 321, 120, 390, 634],
    // [63, 194, 234, 321, 278, 110, 534],
    // [53, 254, 234, 321, 118, 240, 434],
@@ -2564,26 +2569,26 @@
  return option
}

export function zhkb06() {
export function zhkb06(title) {
  const option = {
    backgroundColor: 'transparent',
    title: [
      {
        text: '检验及时率',
        text: title,
        x: 'center',
        top: '55%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12,
          fontSize: 14,
          fontWeight: 100
        }
      },
      {
        text: '75%',
        text: '95%',
        x: 'center',
        top: '38%',
        textStyle: {
          fontSize: 12,
          fontSize: 14,
          color: '#FFFFFF',
          fontFamily: 'DINAlternate-Bold, DINAlternate',
          foontWeight: 100
@@ -2722,11 +2727,11 @@
  return option
}

export function zhkb07() {
export function zhkb07(title, value) {
  const dataArr = [
    {
      value: 61,
      name: '我是标题'
      value: value,
      name: title
    }
  ]
  const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -2740,17 +2745,17 @@
    }
  ])
  const colorSet = [
    [0.61, color],
    [value / 100, color],
    [1, '#15337C']
  ]
  const rich = {
    white: {
      fontSize: 12,
      fontSize: 14,
      color: '#fff',
      fontWeight: '500'
    },
    bule: {
      fontSize: 12,
      fontSize: 14,
      fontFamily: 'DINBold',
      color: '#fff',
      fontWeight: 100
@@ -2761,7 +2766,7 @@
      // lineHeight:80,
      borderWidth: 1,
      borderColor: '#0092F2',
      fontSize: 12,
      fontSize: 14,
      color: '#fff',
      backgroundColor: '#1B215B',
      borderRadius: 20,
@@ -2789,7 +2794,7 @@
        detail: {
          formatter: function(value) {
            var num = Math.round(value)
            return '{bule|' + num + '}{white|分}'
            return '{bule|' + num + '}{white|%}'
          },
          rich: rich,
          offsetCenter: ['0%', '0%']
@@ -2799,7 +2804,7 @@
          show: true,
          color: '#fff',
          offsetCenter: ['0', '75%'],
          fontSize: 12
          fontSize: 14
        },
        axisLine: {
          show: true,
@@ -2832,3 +2837,897 @@

  return option
}

export function zhkb08() {
  const data = [
    {
      name: '钢材改制车间',
      value: Math.floor(Math.random() * 10 + 90)
    },
    {
      name: '冷墩车间',
      value: Math.floor(Math.random() * 10 + 90)
    },
    {
      name: '热墩车间',
      value: Math.floor(Math.random() * 10 + 90)
    },
    {
      name: '热处理车间',
      value: Math.floor(Math.random() * 10 + 90)
    },
    {
      name: '达克罗车间',
      value: Math.floor(Math.random() * 10 + 90)
    },
    {
      name: '镀锌车间',
      value: Math.floor(Math.random() * 10 + 90)
    }
  ]

  const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']

  const getArrByKey = (data, k) => {
    const key = k || 'value'
    const res = []
    if (data) {
      data.forEach(function(t) {
        res.push(t[key])
      })
    }
    return res
  }
  const getSymbolData = (data) => {
    const arr = []
    for (var i = 0; i < data.length; i++) {
      arr.push({
        value: data[i].value,
        symbolPosition: 'end'
      })
    }
    return arr
  }
  // console.log(getSymbolData(data));
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '15%',
      containLabel: true
    },
    title: {
      text: '九月能耗用量',
      x: '44%',
      y: '0%',
      textStyle: {
        color: '#09d8f2',
        fontSize: 16
      }
      // subtextStyle: {
      //   color: '#90979c',
      //   fontSize: '16'
      // }
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 0,
          // color: colorY,
          align: 'left',
          margin: 30,
          textStyle: {
            color: function(value, index) {
              let temp = ''
              myColor.forEach((it, ind) => {
                if (index === ind) {
                  temp = it
                }
              })
              return temp
            },
            fontSize: 16,
            align: 'right'
            // width: 36
          }
          // formatter: function(value, index) {
          //   return '{title|' + value + '}'
          // },
          // rich: {
          //   title: {
          //     width: 36,
          //     align: 'right',
          //     fontSize: 16
          //   }
          // }
        }
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          shadowOffsetX: '-20px',
          // color: colorX,
          color: function(value, index) {
            let temp = ''
            myColor.forEach((it, ind) => {
              if (index === ind) {
                temp = it
              }
            })
            return temp
          },
          align: 'left',
          verticalAlign: 'center',
          lineHeight: 40,
          fontSize: 16,
          margin: 20,
          formatter: function(value, index) {
            // return data[index].value + '%'
            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],
        symbolOffset: [20, 0],
        z: 12,
        itemStyle: {
          normal: {
            color: '#fff'
          }
        },
        data: getSymbolData(data)
      },
      {
        name: '条',
        type: 'bar',
        showBackground: true,
        yAxisIndex: 0,
        data: data,
        barWidth: 10,
        // align: left,
        itemStyle: {
          normal: {
            color: function(params) {
              return myColor[params.dataIndex]
            },
            barBorderRadius: 10
          }
        }
        // label: {
        //     normal: {
        //         color: '#fff',
        //         show: true,
        //         position: ["-80px", 0],
        //         textStyle: {
        //             fontSize: 16
        //         },
        //         formatter: function(a, b) {
        //             return a.name
        //         }
        //     }
        // }
      }]
  }

  return option
}

// 暂时弃用
export function zhkb092222() {
  const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
  const sideData = data.map(item => item + 4.5)

  const option = {

    backgroundColor: 'transparent',
    // tooltip: {
    //   trigger: 'axis',
    //   formatter: '{b} : {c}',
    //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //   }
    // },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true
    },
    title: {
      text: '近一年每月能耗使用',
      x: '40%',
      y: '0%',
      textStyle: {
        color: '#09d8f2',
        fontSize: 16
      }
      // subtextStyle: {
      //   color: '#90979c',
      //   fontSize: '16'
      // }
    },
    xAxis: {
      data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
      // 坐标轴
      axisLine: {
        lineStyle: {
          color: '#3eb2e8'
        }
      },
      // 坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: colorX,
          fontSize: 14
        }
      }
    },
    yAxis: {
      // 坐标轴
      axisLine: {
        show: false
      },
      // 坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#09d8f2',
          fontSize: 14
        }
      },
      // 分格线
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(135,140,147,0.8)'
        }
      },
      splitNumber: 3
    },
    series: [
      {
        name: 'a',
        tooltip: {
          show: false
        },
        type: 'bar',
        barWidth: 18,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#0B4EC3' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: '#138CEB' // 60% 处的颜色
            }, {
              offset: 1,
              color: '#17AAFE' // 100% 处的颜色
            }], false)
          }
        },
        data: data,
        barGap: 0
      },
      {
        type: 'bar',
        barWidth: 8,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#09337C' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: '#0761C0' // 60% 处的颜色
            }, {
              offset: 1,
              color: '#0575DE' // 100% 处的颜色
            }], false)
          }
        },
        barGap: 0,
        data: sideData
      },
      {
        name: 'b',
        tooltip: {
          show: false
        },
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#0571D5',
          color: '#1779E0'
        },
        symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
        symbolSize: ['30', '6'],
        symbolOffset: ['0', '-4'],
        // symbolRotate: -5,
        symbolPosition: 'end',
        data: data,
        z: 3
      }
    ]
  }
  return option
}

export function zhkb09() {
  // const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
  const dataY = [(80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true
    },
    title: {
      text: '近一年每月能耗使用',
      x: '40%',
      y: '0%',
      textStyle: {
        color: '#09d8f2',
        fontSize: 16
      }
    },
    color: ['#3cefff'],
    tooltip: {},
    xAxis: [
      {
        type: 'category',
        data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月'],
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          color: '#82b0ec'
        },
        axisLine: {
          lineStyle: {
            color: '#82b0ec'
          }
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            // color: '#82b0ec'
            color: colorX,
            fontSize: 14
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#09d8f2',
            fontSize: 14
          }
          // formatter: '{value}%'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(135,140,147,0.8)'
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [20, 10],
        symbolOffset: [0, -5],
        symbolPosition: 'end',
        z: 12,
        label: {
          normal: {
            show: false,
            position: 'top',
            formatter: '{c}%'
          }
        },
        data: dataY
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [20, 10],
        symbolOffset: [0, 5],
        z: 12,
        data: dataY
      },
      {
        type: 'bar',
        itemStyle: {
          normal: {
            opacity: 0.7
          }
        },
        barWidth: '20',
        data: dataY
        // markLine: {
        //   silent: true,
        //   label: {
        //     position: 'middle',
        //     formatter: '{b}',
        //     color: 'red'
        //   },
        //   data: [
        //     {
        //       name: '目标值',
        //       yAxis: 80,
        //       lineStyle: {
        //         color: 'red'
        //       },
        //       itemStyle: {
        //         color: 'red'
        //       },
        //       label: {
        //         position: 'end',
        //         formatter: '{b}\n {c}%'
        //       }
        //     }
        //   ]
        // }
      },
      {
        type: 'effectScatter',
        silent: true,
        tooltip: {
          show: false
        },
        zlevel: 3,
        symbolSize: 10,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
          color: '#3cefff',
          scale: 5
        },
        itemStyle: {
          color: '#3cefff'
        },
        hoverAnimation: true,
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
    ]
  }

  return option
}

export function zhkb10() {
  const _legendColor = '#8FD8FF'
  const _fontSize = 16
  const _fontColor = '#8FD8FF'
  // const data1 = [70, 90, 100, 70, 90, 100]
  // const data2 = [80, 60, 80, 50, 90, 60]
  const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
  const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
  const option = {
    backgroundColor: 'transparent',
    legend: {
      x: 'right',
      y: '2%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 16,
        color: 'rgba(255,255,255,.7)'
      }
    },
    grid: {
      left: '2%',
      top: '7%',
      right: '2%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      // max: Math.ceil(Math.max(...data1) * 1.2),
      max: 100,
      type: 'value',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        color: '#00FFFF',
        fontSize: 14
      },
      splitLine: {
        show: false
      }
    },
    xAxis: {
      type: 'category',
      nameTextStyle: {
        fontSize: 16,
        color: '#7dd6ea'
      },
      axisLabel: {
        show: true,
        interval: 0,
        // margin: 20,
        textStyle: {
          color: colorX,
          fontSize: 16
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
          // width: 3
        }
      },
      data: ['钢材改制', '冷墩', '热墩', '热处理', '达克罗', '镀锌']
    },
    series: [
      {
        name: '人员分析1',
        type: 'bar',
        barWidth: 15,
        barGap: '30%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0,234,255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(0,234,255, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 36,
        //     color: '#00EAFF'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data1,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [-10, 0],
        data: data1,
        width: 2,
        z: 0,
        zlevel: 1
      },
      {
        name: '人员分析2',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(252,160,0, 1)'
              },
              {
                offset: 1,
                color: 'rgba(252,160,0, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 16,
        //     color: '#FFA200'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data2,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [10, 0],
        data: data2,
        width: 2,
        z: 0,
        zlevel: 1
      }
    ]
  }
  return option
}

export function zhkb11() {
  const option = {
    backgroundColor: 'transparent',
    // title: {
    //   text: '时段-进出港流量',
    //   left: '5%',
    //   top: '5%',
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: '18px'
    //   }
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: [
      {
        icon: 'react',
        right: '0%',
        top: '0%',
        textStyle: {
          color: '#fff',
          fontSize: 14
        },
        itemGap: 30,
        itemWidth: 30,
        itemHeight: 4,
        data: ['设备利用率', '设备开机率']
      }
    ],
    grid: {
      top: '10%',
      right: '5%',
      left: '1%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: [
      {
        type: 'category',
        data: ['冷镦车间', '热墩车间', '达克罗车间', '磷化车间', '注塑车间'],
        axisLine: {
          lineStyle: {
            color: '#4E84AC'
            // width: 2
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          // margin: 10,
          color: '#09d8f2',
          textStyle: {
            fontSize: 16
          }
        }
      }
    ],
    xAxis: [
      {
        axisLabel: {
          formatter: '{value}',
          color: '#6895CA',
          textStyle: {
            fontSize: 16,
            color: colorX
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: '#4E84AC'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            // 使用深浅的间隔色
            color: '#184D9A'
          }
        }
      }
    ],
    series: [
      {
        name: '设备利用率',
        type: 'bar',
        barGap: '70%',
        data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
        barWidth: 12,
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#00FFFF' //  0%  处的颜色
                },
                {
                  offset: 1,
                  color: '#00FF00' //  100%  处的颜色
                }
              ],
              global: false //  缺省为  false
            },
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4
          }
        },
        label: {
          normal: {
            show: true,
            // lineHeight: 20,
            // width: 80,
            // height: 20,
            verticalAlign: 'center',
            borderRadius: 200,
            position: 'right',
            color: '#00FF00',
            fontSize: 16
          }
        }
      },
      {
        name: '设备开机率',
        type: 'bar',
        data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
        barWidth: 12,
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#00FFFF' //  0%  处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFF00' //  100%  处的颜色
                }
              ],
              global: false //  缺省为  false
            },
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4
          }
        },
        label: {
          normal: {
            show: true,
            // lineHeight: 20,
            // width: 80,
            // height: 20,
            borderRadius: 200,
            verticalAlign: 'center',
            // position: ['-0', '-20'],
            position: 'right',
            color: '#FFFF00',
            fontSize: 16
          }
        }
      }
    ]
  }
  return option
}

export function zhkb12() {

}