import * as echarts from 'echarts'

/**
 * 统一样式，加载
 * @param {*} id
 * @param {*} option
 */
export function loadEcharts(id, option) {
  var myChart = echarts.init(document.getElementById(id))

  if (option.textStyle == null) {
    option.textStyle = {
      fontFamily: 'Microsoft YaHei',
      color: '#ffffff'
    }
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.clear()
  myChart.setOption(option, true)

  window.addEventListener('resize', function() {
    myChart.resize()
  })

  return myChart
}

const colorX = '#c7e7ff'
const colorY = '#7696c5'

// 脉链看板
export function mapArea() {

}

export function pie1(data) {
  const titleArr = []
  const seriesArr = []
  const colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
  data.forEach(function(item, index) {
    titleArr.push(
      {
        text: item.name,
        left: index * 20 + 9.5 + '%',
        top: '55%',
        textAlign: 'center',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '16',
          color: colors[index][0],
          textAlign: 'center'
        }
      }
    )
    seriesArr.push(
      {
        name: item.name,
        type: 'pie',
        clockWise: false,
        radius: [50, 60], // 调整饼图大小
        itemStyle: {
          normal: {
            color: colors[index][0],
            shadowColor: colors[index][0],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        center: [index * 20 + 10 + '%', '50%'],
        data: [{
          value: item.value,
          label: {
            normal: {
              formatter: function(params) {
                return params.value + '%'
              },
              position: 'center',
              show: true,
              textStyle: {
                fontSize: '16',
                fontWeight: 'normal',
                // fontWeight: 'bold',
                color: colors[index][0]
              }
            }
          }
        }, {
          value: 100 - item.value,
          name: 'invisible',
          itemStyle: {
            normal: {
              color: colors[index][1]
            },
            emphasis: {
              color: colors[index][1]
            }
          }
        }]
      }
    )
  })

  const option = {
    backgroundColor: 'transparent',
    title: titleArr,
    series: seriesArr
  }

  return option
}

export function bar1(data1, data2) {
  const titleText = '工厂人员出勤率'
  const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
  // const data1 = ['80', '90', '70', '30', '50']
  // const data2 = ['70', '60', '50', '40', '30']
  const option = {
    backgroundColor: 'transparent',
    // tooltip: {
    //   show: false,
    //   trigger: 'axis',
    //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //   },
    //   formatter: function(e) {
    //     if (e.length > 1) {
    //       var S = e[1].data - e[0].data
    //       return e[0].axisValue + ':<br>差额=当前－年初<br>=' + S
    //     } else if (e.length = 1) {
    //       return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
    //     }
    //   }
    // },
    title: {
      text: titleText,
      x: '40%',
      y: '0%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    legend: {
      show: false,
      // data: ['title1', 'title2'],
      data: ['title1'],
      left: 220,
      top: 10,
      textStyle: {
        color: '#00ffff',
        fontSize: 14
      },
      itemWidth: 12,
      itemHeight: 10,
      itemGap: 35,
      color: '#242424'
    },
    xAxis: {
      type: 'category',
      // data: ['车间一', '车间二', '车间三', '车间四', '车间五'],
      data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业'],
      axisLine: {
        lineStyle: {
          show: true,
          lineStyle: {
            color: '#6A989E'
          }
        }
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: colorX, // x轴颜色
          fontWeight: 'normal',
          fontSize: '12',
          lineHeight: 22
        }
      }
      // splitLine:{
      //     show:true,
      //     lineStyle: {
      //         type: 'dashed',
      //         color: 'rgba(135,140,147,0.8)'
      //     }
      // },
    },
    yAxis:
      {
        name: '%',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: '#7696c5'
            // color: this.colorY
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: true
        }
      },
    //   {
    //   type: 'value',
    //   // name: '数量（单位：个）',
    //   name: '',
    //   nameTextStyle: {
    //     color: '#ffffff'
    //   },
    //   axisLine: {
    //     show: false,
    //     lineStyle: {
    //       type: 'dashed',
    //       color: 'rgba(135,140,147,0.8)'
    //     }
    //   },
    //   splitLine: {
    //     show: true,
    //     lineStyle: {
    //       color: 'rgba(135,140,147,1)' // 左侧显示线
    //     }
    //   },
    //   axisLabel: {
    //     formatter: '{value}',
    //     color: colorY,
    //     fontSize: 14
    //   }
    // },
    series: [
      {
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        // symbolOffset: [-18, -4],
        symbolOffset: [0, -4],
        symbolPosition: 'end',
        z: 12,
        color: '#3440FF',
        data: data1
      },
      // {
      //   type: 'pictorialBar',
      //   symbol: path,
      //   symbolSize: [30, 8],
      //   symbolOffset: [18, -4],
      //   // symbolOffset: [20, -5],
      //   symbolPosition: 'end',
      //   z: 12,
      //   color: '#FF1155',
      //   data: data2
      // },
      {
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        // symbolOffset: [-18, 4],
        symbolOffset: [0, 4],
        z: 12,
        color: 'rgba(126,192,238,0.6)',
        data: data1
      },
      // {
      //   name: '',
      //   type: 'pictorialBar',
      //   symbol: path,
      //   symbolSize: [30, 8],
      //   // symbolOffset: [20, 4],
      //   symbolOffset: [18, 4],
      //   color: '#FFC0CB',
      //   z: 12,
      //   data: data2
      // },
      {
        name: 'title1',
        type: 'bar',
        barWidth: '30',
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'blue'
            }, {
              offset: 1,
              color: '#7EC0EE'
            }]),
            barBorderRadius: 0
          }

        },
        label: {
          show: true,
          // position: ['-18','-18'],
          position: 'top',
          color: '#00f8ff',
          fontSize: 12
        },
        data: data1
      }
      // {
      //   name: 'title2',
      //   type: 'bar',
      //   barWidth: '30',
      //   itemStyle: {
      //     normal: {
      //       opacity: 0.7,
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: '#FF2246'
      //       }, {
      //         offset: 1,
      //         color: '#FFC0CB'
      //
      //       }]),
      //       barBorderRadius: 0
      //     }
      //
      //   },
      //   label: {
      //     show: true,
      //     // position: ['18','-18'],
      //     position: 'top',
      //     color: '#00f8ff',
      //     fontSize: 12
      //   },
      //   data: data2
      // }
    ]
  }

  return option
}

export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    title: {
      // text: '销售额概览',
      text: '各工厂能耗',
      left: '50%',
      top: '0%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#ddd'
        }
      },
      backgroundColor: 'rgba(255,255,255,1)',
      padding: [5, 10],
      textStyle: {
        color: '#7588E4'
      },
      extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
    },
    legend: {
      show: false,
      right: 20,
      orient: 'vertical',
      data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业']
    },
    xAxis: {

      // data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
      // type: 'category',
      // boundaryGap: true,
      // axisLabel: {
      //   interval: 0,
      //   formatter: '{value}',
      //   fontSize: 14,
      //   margin: 20,
      //   textStyle: {
      //     // color: this.colorX
      //     color: '#c7e7ff'
      //   }
      // },
      // axisLine: {
      //   lineStyle: {
      //     color: '#032c58'
      //   }
      // },
      // splitLine: {
      //   show: false,
      //   lineStyle: {
      //     color: '#032c58'
      //   }
      // },
      // axisTick: {
      //   show: false
      // }
      // name: '月',
      // nameTextStyle: {
      //   color: colorX,
      //   fontSize: 14,
      //   lineHeight: 20
      // },
      boundaryGap: false,
      // splitLine: {
      //   show: false,
      //   interval: 'auto',
      //   lineStyle: {
      //     color: ['#D4DFF5']
      //   }
      // },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          show: true,
          lineStyle: {
            color: '#6A989E'
          }
        }
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          color: colorX,
          fontSize: 14
        }
      }
    },
    yAxis:
      {
        name: '',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        boundaryGap: false,
        splitNumber: 5,
        type: 'value',
        // offset: -30,
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: '#7696c5'
            // color: this.colorY
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: true
        }
      },
    series: [
      {
        name: '浙江皇冠',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
        data: dataY,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0,215,236,0.5)'
            }, {
              offset: 1,
              color: 'rgba(0,215,236,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#f7b851'
            //   color: `rgb(73, 226, 196)`
            color: `rgb(0, 215, 236)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '永康皇冠',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY2,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(60,244,184,0.5)'
            }, {
              offset: 1,
              color: 'rgba(60,244,184,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: `rgb(60, 244, 184)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '北辰电机',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(55,183,255,0.5)'
            }, {
              offset: 1,
              color: 'rgba(55,183,255,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(55, 183, 255)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '恒泰皇冠园林',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY4,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(26,202,200,0.5)'
            }, {
              offset: 1,
              color: 'rgba(26,202,200,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(26, 202, 200)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '迈拓塑业',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY5,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(243,94,94,0.5)'
            }, {
              offset: 1,
              color: 'rgba(243,94,94,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(243, 94, 94)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      }
    ]
  }

  return option
}

export function pie2(title, scaleData) {
  var rich = {
    white: {
      color: '#ddd',
      align: 'center',
      padding: [5, 0]
    }
  }
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0, 0, 0, 0)',
      borderWidth: 0
    }
  }
  var data = []
  for (var i = 0; i < scaleData.length; i++) {
    data.push({
      value: scaleData[i].value,
      name: scaleData[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 30,
          borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: '#7777eb'
          }, {
            offset: 1,
            color: '#70ffac'
          }]),
          shadowColor: 'rgba(142, 152, 241, 0.6)'
        }
      }
    }, {
      value: 4,
      name: '',
      itemStyle: placeHolderStyle
    })
  }
  var seriesObj = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [60, 65],
    top: '10%',
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: 'outside',
          // color: '#ddd',
          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|' + '' + percent + '%}'
            } else {
              return ''
            }
          },
          rich: rich
        },
        labelLine: {
          show: false
        }
      }
    },
    data: data
  }]
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      show: false
    },
    top: 'middle',
    title: {
      text: title,
      left: '50%',
      top: '7%',
      textAlign: 'center',
      textStyle: {
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
    legend: {
      show: false
    },
    toolbox: {
      show: false
    },
    series: seriesObj
  }

  return option
}

export function bar2(list) {
  // const list = [500, 400, 300, 200, 200]
  const yName = ['浏览客户', '进店客户', '认购客户', '下单客户', '再次购买']
  const xData = [500, 400, 300, 200, 100]
  // const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1', '#15a0ff', '#11e2ff', '#58febe']
  const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1']
  const barWidth = 15
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '平台链接客户',
      left: '50%',
      top: '5%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    yAxis: [{
      inverse: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14,
          color: colorX
        }
      },
      data: yName
    }],
    series: [{ // 内
      type: 'bar',
      barWidth,
      legendHoverLink: false,
      symbolRepeat: true,
      silent: true,
      itemStyle: {
        normal: {
          // barBorderRadius: [4, 4, 4, 4],
          color: function(params) {
            var colorlist = color
            return colorlist[params.dataIndex]
          }
        }
      },
      data: list,
      z: 1,
      animationEasing: 'elasticOut'
    },
    { // 背景
      type: 'pictorialBar',
      animationDuration: 0,
      symbolRepeat: 'fixed',
      symbolMargin: '20%',
      symbol: 'roundRect',
      symbolSize: [6, barWidth],
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,0.3)'
        }
      },

      data: xData,
      z: 0,
      animationEasing: 'elasticOut'
    },
    { // 分隔
      type: 'pictorialBar',
      itemStyle: {
        color: '#051e43'
      },
      symbolRepeat: 'fixed',
      symbolMargin: 4,
      symbol: 'roundRect',
      symbolClip: true,
      symbolSize: [2, barWidth],
      symbolPosition: 'start',
      symbolOffset: [0, 0],
      data: list,
      z: 2,
      animationEasing: 'elasticOut'
    }
    ]
  }

  return option
}

export function custom1() {

}

export function bar3() {
  const a1 = 20 + Math.floor(Math.random() * 80)
  const a2 = 20 + Math.floor(Math.random() * 80)
  const a3 = 20 + Math.floor(Math.random() * 80)
  const a4 = 20 + Math.floor(Math.random() * 80)
  const a5 = 20 + Math.floor(Math.random() * 80)
  const a6 = 20 + Math.floor(Math.random() * 80)
  const a7 = 20 + Math.floor(Math.random() * 80)
  const a8 = 20 + Math.floor(Math.random() * 80)
  const a9 = 20 + Math.floor(Math.random() * 80)
  const a10 = 20 + Math.floor(Math.random() * 80)
  const a11 = 20 + Math.floor(Math.random() * 80)
  const a12 = 20 + Math.floor(Math.random() * 80)
  const list = [
    {
      key: '进货数量',
      value: [
        { value: a1 },
        { value: a2 },
        { value: a3 },
        { value: a4 },
        { value: a5 },
        { value: a6 },
        { value: a8 },
        { value: a9 },
        { value: a10 },
        { value: a11 },
        { value: a12 }
      ]
    }, {
      key: '合格数量',
      value: [
        { value: a1 - 2 },
        { value: a2 - 3 },
        { value: a3 - 5 },
        { value: a4 - 1 },
        { value: a5 - 2 },
        { value: a6 - 4 },
        { value: a7 - 5 },
        { value: a8 - 2 },
        { value: a9 - 2 },
        { value: a10 - 6 },
        { value: a11 - 1 },
        { value: a12 - 3 }
      ]
    }, {
      key: '不合格数量',
      value: [
        { value: 2 },
        { value: 3 },
        { value: 5 },
        { value: 1 },
        { value: 2 },
        { value: 4 },
        { value: 5 },
        { value: 2 },
        { value: 2 },
        { value: 6 },
        { value: 1 },
        { value: 3 }
      ]
    }
  ]
  const color = ['26,171,234', '73,226,196', '255,221,97']
  // const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
  const seriesData = []

  list.forEach((r, i) => {
    var o = {
      name: r.key,
      type: 'bar',
      smooth: false,
      yAxisIndex: 0,
      showSymbol: true,
      showAllSymbol: true,
      barWidth: 8,
      zlevel: 3,
      lineStyle: {
        normal: {
          width: 2,
          color: `rgba(${color[i]})`
        }
      },
      areaStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: `rgba(${color[i]}, 0.0)`// 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(${color[i]}, 0.0)` // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          } // 渐变颜色
        }
      },
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: `rgba(${color[i]}, 1)`// 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(${color[i]}, 0.2)` // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          } // 渐变颜色
        }
      },
      data: r.value.map(r => r.value)
    }
    // if (i === 0) {
    //   xList = r.value.map(r => r.key)
    // }
    // if (r.percent) {
    //   this.$set(o, 'symbolSize', 6)
    // } else {
    //   this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
    // }
    seriesData.push(o)
  })
  const option = {
    backgroundColor: 'transparent',
    legend: {
      show: true,
      data: list.map(r => r.key),
      top: '2%',
      itemHeight: 20,
      itemWidth: 20,
      textStyle: {
        fontSize: 14,
        color: 'F1F1F3'
        // color: colorX
      },
      right: '1%'
    },
    title: {
      text: '合格率分析',
      left: '28%',
      top: '2%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis', // axis , item
      backgroundColor: 'RGBA(0, 0, 0, 0.3)',
      borderColor: 'rgba(0, 151, 251, 0.6)',
      borderWidth: 1,
      borderRadius: 0,
      textStyle: {
        color: '#BCE9FC',
        fontSize: 14,
        align: 'left'
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        interval: 0,
        formatter: '{value}',
        fontSize: 14,
        margin: 20,
        textStyle: {
          // color: this.colorX
          color: '#c7e7ff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#032c58'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#032c58'
        }
      },
      axisTick: {
        show: false
      },
      data: xList
    }],
    yAxis: [
      {
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        name: '%',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        axisLabel: {
          textStyle: {
            fontSize: 14,
            color: '#7696c5'
            // color: this.colorY
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#032c58'
          }
        },
        axisTick: {
          show: true
        }
      },
      {
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            // color: this.colorY
            color: '#7696c5'
          }
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 14,
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            color: '#032c58'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: true
        }
      }
    ],
    series: seriesData
  }
  return option
}

export function bar4() {
  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 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: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    title: {
      text: '工厂达成率',
      x: '46%',
      y: '5%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      },
      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: 60,
        formatter: function(value, index) {
          return '{title|' + value + '}'
        },
        rich: {
          title: {
            width: 50,
            align: 'right',
            fontSize: 18
          }
        }
      }
    }, {
      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: ['#fff'],
        color: colorX,
        align: 'left',
        verticalAlign: 'center',
        lineHeight: 40,
        fontSize: 18,
        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],
      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 barline1() {
  return {
    backgroundColor: 'transparent',
    tooltip: {},
    title: {
      text: '订单完成总数',
      left: '50%',
      top: '5%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    legend: {
      show: false,
      itemGap: 50,
      data: ['注册总量', '最新注册量'],
      textStyle: {
        color: '#f9f9f9',
        borderColor: '#fff'
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        interval: 0,
        formatter: '{value}',
        fontSize: 14,
        margin: 20,
        textStyle: {
          color: colorX
        }
      },
      axisLine: {
        lineStyle: {
          color: '#032c58'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#032c58'
        }
      },
      axisTick: {
        show: false
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
    }],
    yAxis: [
      {
        max: 800,
        boundaryGap: false,
        splitNumber: 4,
        type: 'value',
        axisLabel: {
          textStyle: {
            fontSize: 14,
            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'
          }
        },
        itemStyle: {
          normal: {
            color: '#28ffb3'

          }
        },
        tooltip: {
          show: false
        },
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            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设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        // data: [393, 438, 485, 631, 689, 824, 987]
        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), 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 zhkb01() {
  // const zhkb01name = ['计划完成进度(自产)', '计划完成进度(外购)'] // 名称
  const zhkb01name = ['', ''] // 名称
  const zhkb01Value = [88, 95] // 值
  const zhkb01Max = []

  const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
  for (let i = 0; i < zhkb01Value.length; i++) {
    zhkb01Max.push(max * 4)
    // zhkb01Max.push(100)
  }
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '5%',
      containLabel: true
    },
    // tooltip: {
    //   formatter: (params) => {
    //     if (params.name !== '') {
    //       return params.name + ' : ' + zhkb01Value[params.dataIndex]
    //     }
    //   },
    //   textStyle: {
    //     align: 'left'
    //   }
    // },
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          show: false,
          color: '#fff',
          formatter: function(val) {
            return val + ''
          },
          textStyle: {
            fontSize: '13'
          }
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 5, //  平均分为5份
        splitNumber: 5,
        splitLine: {
          show: false,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
            width: 1,
            opacity: 0.3
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        type: 'value',
        axisLabel: {
          show: false
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 10, //  平均分为5份
        splitNumber: 10,
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#D8D8D8'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        // show: true,//暂时不显示
        show: false,
        inverse: false,
        data: zhkb01name,
        axisLabel: {
          padding: [30, 0, 0, -135],
          // inside: true
          textStyle: {
            fontSize: 16,
            fontFamily: 'PingFang SC',
            // fontWeight: 400,
            color: '#3dffef',
            align: 'left'
          }
          // formatter: '{value}\n{a|占位}',
          // rich: {
          //   a: {
          //     // color: 'transparent',
          //     color: 'red',
          //     lineHeight: 30,
          //     fontFamily: 'digital',
          //     fontSize: 20,
          //     // shadowColor: 'rgba(0, 0, 0, 1)',
          //     shadowColor: 'red',
          //     shadowBlur: 10
          //   }
          // }
        },
        // scale: true, // 自适应
        // offset: 50,
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      {
        // 左侧柱状图的Y轴
        gridIndex: 0, // y轴所在的 grid 的索引
        splitLine: 'none',
        axisTick: 'none',
        axisLine: 'none',
        data: zhkb01Value,
        // inverse: true,//是否是反向坐标轴。
        axisLabel: {
          show: true,
          verticalAlign: 'center',
          align: 'left',
          padding: [0, 0, 0, 0],
          textStyle: {
            color: '#fff',
            fontSize: '20'
          },
          formatter: function(value) {
            return '{x|  ' + value + '} {y|' + '%}'
          },
          rich: {
            y: {
              color: '#3dffef',
              fontFamily: 'Orbitron',
              fontSize: 16
            },
            x: {
              color: '#3dffef',
              fontFamily: 'Orbitron',
              fontSize: 16
            }
          }
        }
      }
    ],
    series: [
      {
        name: '值',
        type: 'bar',
        barGap: '-130%',
        // zlevel: 1,
        xAxisIndex: 0,
        label: {
          show: false,
          position: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 4,
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: '#46B7ED' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#48EDD3' // 100% 处的颜色
                }
              ]
            }
          }
        },
        barWidth: 12,
        data: zhkb01Value,
        z: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        symbolRotate: '-20',
        itemStyle: {
          normal: {
            color: 'rgba(1, 12, 38, 0.4)'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 10,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [5, 28],
        symbolPosition: 'start',
        symbolOffset: [0, -1],
        data: zhkb01Value,
        z: 66,
        animationEasing: 'elasticOut'
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 14,
        barGap: '-110%',
        data: zhkb01Max,
        itemStyle: {
          normal: {
            color: 'rgba(5,59,113,.7)',
            barBorderRadius: 6,
            borderColor: 'rgba(0, 255, 236, 1)'
          }
        },
        z: -1
      }
    ]
  }
  return option
}

export function zhkb02() {

}

export function zhkb03() {
  const labelData = []
  const labelData1 = []
  for (let i = 0; i < 80; ++i) {
    labelData.push({
      value: 1,
      name: i,
      itemStyle: {
        normal: {
          color: 'rgba(0,209,228,0)'
        }
      }
    })
  }
  for (let i = 0; i < labelData.length; ++i) {
    if (labelData[i].name < 15) {
      labelData[i].itemStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [{
              offset: 0,
              color: '#6dfbff'
            },
            {
              offset: 1,
              color: '#02aeff'
            }
            ]
          )
        }

      }
    }
  }
  for (let i = 0; i < 80; ++i) {
    labelData1.push({
      value: 1,
      name: i,
      itemStyle: {
        normal: {
          color: 'rgba(0,209,228,0)'
        }
      }
    })
  }
  for (let i = 0; i < labelData1.length; ++i) {
    if (labelData1[i].name < 80) {
      labelData1[i].itemStyle = {
        normal: {
          color: '#464451'
        }

      }
    }
  }

  function Pie() {
    const dataArr = []
    for (var i = 0; i < 100; i++) {
      if (i % 10 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 30,
          itemStyle: {
            normal: {
              color: 'rgba(0,255,255,1)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 100,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      }
    }
    return dataArr
  }

  function Pie1() {
    const dataArr = []
    for (var i = 0; i < 100; i++) {
      if (i % 5 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,255,255,1)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 100,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      }
    }
    return dataArr
  }

  function Pie2() {
    const dataArr = []
    for (var i = 0; i < 100; i++) {
      if (i % 5 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,255,255,.3)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 100,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        })
      }
    }
    return dataArr
  }

  const option = {
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0%',
      containLabel: true
    },
    backgroundColor: 'transparent',
    title: [
      {
        text: '螺母投入产出率',
        x: '46%',
        y: '38%',
        textAlign: 'center',
        textStyle: {
          fontSize: 12,
          fontWeight: 'normal',
          color: '#09d8f2'
        }
      },
      {
        text: '99%',
        x: '49%',
        y: '53%',
        textAlign: 'center',
        textStyle: {
          fontSize: 18,
          fontWeight: 800,
          color: '#09d8f2'
        }
      }],
    polar: {
      radius: ['90%', '85%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false,
      startAngle: 0
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false

      },
      axisTick: {
        show: false
      }
    },
    series: [
      // 最里圈
      {
        type: 'pie',
        radius: ['91%', '89%'],
        center: ['50%', '50%'],
        data: [{
          hoverOffset: 1,
          value: 100,
          name: '',
          itemStyle: {
            color: '#2f748b'
          },
          label: {
            show: false
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0
              }
            }
          },
          hoverAnimation: false
        }]
      },
      // 里第二圈
      {
        name: '',
        type: 'bar',
        roundCap: true, // 圆角
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: '#3d4767'
        },
        data: [75],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#0ff'
            }, {
              offset: 1,
              color: '#02aeff'
            }])
          }
        }
      },
      // 齿轮
      {
        name: '大环',
        type: 'gauge',
        splitNumber: 100,
        radius: '124%',
        center: ['50%', '50%'],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
          lineStyle: {
            color: [[0.3, '#26a7d4'], [1, '#23395a']]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          length: 8,
          lineStyle: {
            color: 'auto',
            width: 2.5
          }
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        }
      },
      // 外圈装饰
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        radius: ['110%', '108.5%'],
        center: ['50%', '50%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: Pie()
      },
      // {
      //   type: 'pie',
      //   zlevel: 0,
      //   silent: true,
      //   startAngle: -150,
      //   radius: ['58.5%', '57%'],
      //   center: ['50%', '50%'],
      //   z: 1,
      //   label: {
      //     normal: {
      //       show: false
      //     }
      //   },
      //   labelLine: {
      //     normal: {
      //       show: false
      //     }
      //   },
      //   data: Pie3()
      // },
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        startAngle: -140,
        radius: ['100%', '98.5%'],
        center: ['50%', '50%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: Pie()
      },
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        radius: ['98%', '96.5%'],
        center: ['50%', '50%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: Pie1()
      },
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        startAngle: -140,
        radius: ['98%', '96.5%'],
        center: ['50%', '50%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: Pie2()
      },
      {
        type: 'pie',
        zlevel: 0,
        silent: true,
        startAngle: -147.5,
        radius: ['98%', '96.5%'],
        center: ['50%', '50%'],
        z: 1,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: Pie2()
      }
    ]
  }

  return option
}

export function zhkb04() {
  const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '10%',
      right: '4%',
      bottom: '0%',
      top: '5%',
      containLabel: true
    },
    xAxis: [{
      show: false
    }],
    yAxis: [
      {
        axisTick: 'none',
        axisLine: 'none',
        offset: '27',
        axisLabel: {
          textStyle: {
            color: function(value, index) {
              let temp = ''
              myColor.forEach((it, ind) => {
                if (index === ind) {
                  temp = it
                }
              })
              return temp
            },
            fontSize: 16
          }
        },
        data: ['第四季度订单数', '第三季度订单数', '第二季度订单数', '第一季度订单数', '在制订单数量']
      },
      {
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          textStyle: {
            color: function(value, index) {
              let temp = ''
              myColor.forEach((it, ind) => {
                if (index === ind) {
                  temp = it
                }
              })
              return temp
            },
            fontSize: 16
          }
        },
        data: ['12566', '12566', '12566', '12566', '12566']
      },
      {
        show: false,
        name: '单位：件',
        nameGap: '50',
        nameTextStyle: {
          color: '#ffffff',
          fontSize: '16'
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0)'
          }
        },
        data: []
      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: [33, 44, 78, 59, 15],
        label: {
          normal: {
            show: false,
            position: 'right',
            formatter: function(param) {
              return param.value + '%'
            },
            textStyle: {
              color: '#ffffff',
              fontSize: '16'
            }
          }
        },
        barWidth: 12,
        itemStyle: {
          normal: {
            color: function(params) {
              var num = myColor.length
              return myColor[params.dataIndex % num]
            }
          }
        },
        z: 2
      },
      {
        name: '白框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [99.5, 99.5, 99.5, 99.5, 99.5],
        barWidth: 20,
        itemStyle: {
          normal: {
            color: '#0e2147',
            barBorderRadius: 5
          }
        },
        z: 1
      },
      {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: [100, 100, 100, 100, 100],
        barWidth: 24,
        itemStyle: {
          normal: {
            color: function(params) {
              var num = myColor.length
              return myColor[params.dataIndex % num]
            },
            barBorderRadius: 5
          }
        },
        z: 0
      },
      {
        name: '外圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0, 0, 0, 0, 0],
        yAxisIndex: 2,
        symbolSize: 30,
        itemStyle: {
          normal: {
            color: function(params) {
              var num = myColor.length
              return myColor[params.dataIndex % num]
            },
            opacity: 1
          }
        },
        z: 2
      }]
  }

  return option
}

export function zhkb05() {
// 数据
//   var XName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  var XName = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
  var data1 = [
    [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
    // [123, 154, 234, 321, 120, 390, 634],
    // [63, 194, 234, 321, 278, 110, 534],
    // [53, 254, 234, 321, 118, 240, 434],
    // [23, 354, 334, 221, 178, 190, 234]
  ]
  var Line = ['云篆山水路线', '昕博朗学校路线', '新华小学路线', '云锦五路路线']
  var img = [
    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
    'image://data:image/png;base64,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',
    'image://data:image/png;base64,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',
    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAHaUlEQVR42u3cv29jWRUH8O+5P96zX5x4Mk4yjCW0S5QqZil2aIEUUG5BEQr4B2joKBclrhAF1HR0gNYVK6BapDSIyhSLnAKNxBSrLJOJd+L413vv3nsOhfNjMhmx4sfaSXSP5ESOrt/1++jcn+8qJCKI8d+FigQRL+JFvIgXI+JFvIgX8WJEvIgX8SJexIsR8SJexIt4MSJexIt4ES9GxPvfw9zGL0Ugev1vgtv3gJluw0NvApH8R+VvB+ZC8a6jCdpo096/Kd8GsIc9mfEtHnGBzXYG18b+OVgb2+gRABzgBQE7r5Q9wA7WZfuScB9tAIJ9AYiwIECz2GzbpyuwFm1ilQBgA63X+rwdAEeyCeAAkB30ziH3gXPARWTh3EfbWbaBgH0CerSOFnWxqjYAVUeqnqGpB58M9AquXoNPBvoZmrqOVG0AqotVtY4WAT0C9qkNkNz/Pu9iFN0/v/EWHQIqQZ9UqCeauaLJcWqWilM/WQYANhg9RCaFH6eMRNjYiUdfSjRkG2CgJ0BLZhkIzLMJzxHvzXAZnqn+p4mqVauZ1srQkvWToQqaisumGySVbJm1jJ0p82I09Z4bj0ue4G1eJOBc8drnfdw6WrQBqAxQyrtseuqcXSOVn5XarCilR6QUJTSFoyqssJQSasL+jLmykgR3Ilx9YC0bO5kAfAzwC/TkEC3Zw77MC28uA8bFIDEbVXfRxUeUICXlV7KCnE7XSraoatJsFKrKaa8ZOYEsseQiMJLCBKvHnECRWpuGIkCnHllizsbLKGgHuwIcvlLfFw84lwFDzn920CPgkKpoUgVGjYwt7bB05VCbwdhbu1QznBeJKJeI0kkKvAsy74J4k/MisUs1Mxh7Ww61scPSjYwtKzCqiiYBhzS7vkDuV59Hl6NrF6uqjlRNnqcme1TTFcC4cWmD8lYTrTNQBeSbAH4kKnzHQgsLmKGCFngv7DUbZ5cSlwN+8nwUskeFH6DgJ3jJV33fPcm8q6lui6qHTTJoUOVhsmRwqvJRoQ15ratWS8kjVvISwDcAfCxOJYWjhAW/gPAPAnNLWb1myOt8VGiDUzW7ToOqh006uDE/vON4Nxb524DBgKC9n5yR0kSqJK91EbSqsNYgI+zfh1bvV6W1rRMygHwM4LtKcx8+PC7Ja02kJmekoL03GBC2P39z4Q42W6LzqTEBUE+f9vVgqaHrad94W7MV5S1rlQjkHQJ9PQT+ncVXvpzxO78GqAbwP4fqL99nnLxMrSmdSEkipQpc5myccSM3KBq+Pu6Hra1GAMC4XP9+sTc3t2bb6cyWYdgCmo8BPGxgGQCRJYInQI4F8kMiTRV5+70ZHACoL2Wy/R6RphJMhEAET0SWljG7TvPx7LrX6rlPy7Pd3dZlFpSuXAL6GAKYYHKRn6ei6NvGBgHx8HryhjNtQkosH4nQV3H+uVmhPgIH/aZ67gneVTJsoSGDs0GJz4Daci5VsSIwIoUXC2ER4dz0PhRM/yBwf2WMfztO/vyhCKoE/BLMIjBSFSu15VzwGXDSP8EWGvKm+u70JJku53nAAYANAA8bSTk+sYYHSoL2LCKsErPlmQpA/Vzk5PfDyp9+AhcIVguXgWHtsYL6jVHsnMyQ1SCVwFbW1p0/BHCMq42sV+u9s5n36kx/tpV0JB51ebDG7OvCQYSdlEFAnwLCAD4goq+ReEeE71HgP2ptfkYsmyLhcYAOTsoQRNjXhR+sMXvUZRtHsoOevKneO9/ntc9/d7uAR19yV2YhSFJZtmE1q3rPeEGgfzC5D1JSPybhUin6FZH/lgZ+KmAP4NSx+NWs6ivLNoQgSe7KzKMv3e71eu7ZCmO2o3IAqA1AVYJPEymS3Cy5CgamGGljlNeOEh2I1wzUIw/+ewojUzixooOVMng2Ia0Fn6PuK35sS0rLXJviGOAdgOe5szKXzKNre8I9mXaPZFObAsZPyhfHnKHubc24JNNOc+GY/fOE8besogrNXIJDqblwSaadrRmXoe7LF8cM4yeb2hTT7vUmS/cr827u512scSswSrypWUUhPyt5okjVVyqkUF4aMBIZnOWSsXBlJVFeBNB+msPzzTXt/Pbz5tbn0St9X6cDDNGUAQrOn3p2lOYlTzFxpdcr1k0xclOYV14jp1esm7jSlzyF10uT/OkMboimdDpXfR3dvz7vZvZ1Oj3a3QW6WFVVNClBnwwaRGGYgNN0YMsJAFhPlUysgioK0cvlxRb8FEfyBC+507mYGM9/G37OD4AubmxfDndbArTkCV7yNsADFDxBj9/Sy7mzw7MMhc9QeGvykbPDs7f0cj5BjwcoeBu4bKqHC4JbQOa9noHnWYge7WL2vHbnfJrbxdFlmSdoymySPXt+2wGwe62Pmz/cAvHedMRi/xKrg5uL+xnWZVm5voJZzE0s/KzKTcTZu3a7TdibjTB7e3vy+nBwG86r0G367xafd+DnthzwuZV4dy3i4caIF/EiXsSLEfEiXsSLeDEiXsSLeBEv4sWIeBEv4kW8GBEv4kW8iBcj4v0f4l+bPQ5YnMn04QAAAABJRU5ErkJggg=='
  ]
  // var color = ['#00f8ff', '#00f15a', '#0696f9', '#dcf776']
  var color = ['#00f8ff']

  // 数据处理
  var datas = []
  Line.map((item, index) => {
    datas.push(
      {
        symbolSize: 150,
        symbol: img[index],
        name: item,
        type: 'line',
        yAxisIndex: 1,
        data: data1[index],
        itemStyle: {
          normal: {
            borderWidth: 5,
            color: color[index]
          }
        }
      }
    )
  })

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      top: '20%',
      bottom: '0%',
      right: '5%',
      containLabel: true
    },
    title: {
      text: '今年每月订单数量',
      x: '50%',
      y: '0%',
      textAlign: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#00FFFF'
      }
    },
    legend: {
      show: false,
      type: 'scroll',
      data: Line,
      itemWidth: 18,
      itemHeight: 12,
      textStyle: {
        color: '#00ffff',
        fontSize: 14
      }
    },
    yAxis: [
      {
        type: 'value',
        position: 'right',
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      {
        // show: false,
        type: 'value',
        position: 'left',
        // name: '今年每月订单数量',
        nameTextStyle: {
          color: '#00FFFF',
          fontSize: 16
        },
        splitNumber: 3,
        // nameLocation: 'center',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(135,140,147,0.8)'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: '{value}',
          color: '#00FFFF',
          fontSize: 14
        }
      }
    ],
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#6A989E'
          }
        },
        axisLabel: {
          inside: false,
          textStyle: {
            color: colorX, // x轴颜色
            fontWeight: 'normal',
            fontSize: 16,
            lineHeight: 22
          }

        },
        data: XName
      },
      {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        // -----
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      }
    ],
    series: datas
  }
  // 当点击legend选项时折线上的小图片会消失，为避免这种情况，可以采取以下初始化方法 使用svg
  // var myCharts = echarts.init(document.getElementById('AnalysisChartLine'), null, {renderer: 'svg'});
  // myCharts.clear();
  // myCharts.setOption(option)

  return option
}

export function zhkb06() {
  const option = {
    backgroundColor: 'transparent',
    title: [
      {
        text: '检验及时率',
        x: 'center',
        top: '55%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12,
          fontWeight: 100
        }
      },
      {
        text: '75%',
        x: 'center',
        top: '38%',
        textStyle: {
          fontSize: 12,
          color: '#FFFFFF',
          fontFamily: 'DINAlternate-Bold, DINAlternate',
          foontWeight: 100
        }
      }
    ],
    grid: {
      left: '0%',
      top: '0%',
      bottom: '0%',
      right: '0%',
      containLabel: true
    },
    angleAxis: {
      max: 100,
      clockwise: false, // 逆时针
      // 隐藏刻度线
      show: false,
      boundaryGap: ['40%', '40%'],
      startAngle: 90
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    polar: [
      {
        center: ['50%', '50%'], // 中心点位置
        radius: '165%' // 图形大小
      }
    ],
    series: [
      {
        name: '齿轮',
        type: 'gauge',
        splitNumber: 60,
        radius: '132%',
        center: ['50%', '50%'],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
          lineStyle: {
            color: [[0.3, '#26a7d4'], [1, '#23395a']]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          length: 8,
          lineStyle: {
            color: 'auto',
            width: 2.5
          }
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        }
      },
      {
        type: 'bar',
        z: 10,
        data: [75],
        showBackground: false,
        backgroundStyle: {
          color: 'blue',
          borderWidth: 4,
          width: 4
        },
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 6, // 大的占比环
        itemStyle: {
          normal: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: '#00FFFF'
              },
              {
                offset: 1,
                color: '#09d8f2'
              }
            ])
          }
        }
      },
      {
        type: 'pie',
        name: '内层细圆环',
        radius: ['82%', '83%'],
        startAngle: 110,
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: 'rgba(151,179,166,0.74)'
              },
              {
                offset: 1,
                color: 'rgba(151,179,166,0.74)'
              }
            ]),
            shadowBlur: 20,
            shadowColor: '#66666a'
          }
        },
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        data: [100]
      }
    ]
  }
  return option
}

export function zhkb07() {
  const dataArr = [
    {
      value: 61,
      name: '我是标题'
    }
  ]
  const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: '#1f79b6' // 0% 处的颜色
    },
    {
      offset: 1,
      color: '#0dd2db' // 100% 处的颜色
    }
  ])
  const colorSet = [
    [0.61, color],
    [1, '#15337C']
  ]
  const rich = {
    white: {
      fontSize: 12,
      color: '#fff',
      fontWeight: '500'
    },
    bule: {
      fontSize: 12,
      fontFamily: 'DINBold',
      color: '#fff',
      fontWeight: 100
    },
    radius: {
      width: 350,
      height: 80,
      // lineHeight:80,
      borderWidth: 1,
      borderColor: '#0092F2',
      fontSize: 12,
      color: '#fff',
      backgroundColor: '#1B215B',
      borderRadius: 20,
      textAlign: 'center'
    },
    size: {
      height: 400,
      padding: [100, 0, 0, 0]
    }
  }
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        type: 'gauge',
        radius: '90%',
        startAngle: '225',
        endAngle: '-45',
        pointer: {
          show: false
        },
        detail: {
          formatter: function(value) {
            var num = Math.round(value)
            return '{bule|' + num + '}{white|分}'
          },
          rich: rich,
          offsetCenter: ['0%', '0%']
        },
        data: dataArr,
        title: {
          show: true,
          color: '#fff',
          offsetCenter: ['0', '75%'],
          fontSize: 12
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: colorSet,
            width: 12,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 10,
          lineStyle: {
            color: '#00377a',
            width: 2,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false
        }
      }
    ]
  }

  return option
}