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]
      // }
    ]
  }
}