import chartClass from 'chart-all'
import * as echarts from 'echarts'

export default {
  // 首页 - 任务数据
  line1: (id, xAxis, YAxis) => {
    const { chart } = new chartClass(id)
    chart.setOption({
      grid: {
        top: '15%',
        left: '5%',
        right: '7%',
        bottom: '5%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: [{
        type: 'category',
        // boundaryGap: true, //坐标轴两边留白
        data: xAxis,
        animation: true,
        boundaryGap: false, // 贴边
        // offset: 5,
        axisLine: {
          // x轴
          show: true,
          lineStyle: {
            color: 'rgba(137, 137, 137, 0.6)'
          }
        },
        axisTick: {
          // x轴刻度线
          show: false
        },
        axisLabel: {
          // x轴刻度文案
          show: true
        },
        splitLine: {
          // 网格
          show: false
        }
      }],
      yAxis: [{
        type: 'value',
        animation: true,
        min: 0,
        minInterval: 1,
        axisLine: {
          // y轴
          show: false
        },
        axisTick: {
          // y轴刻度线
          show: false
        },
        axisLabel: {
          // y轴刻度文案
          show: true
        },
        splitLine: {
          // 网格
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(137, 137, 137, 0.15)'
          }
        }
      }],
      series: [{
        type: 'line',
        emphasis: {
          focus: 'series'
        },
        name: '任务数',
        smooth: true, // 平滑曲线
        showSymbol: true, // 节点
        symbolSize: 6,
        animationDuration: 2500,
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(32,204,255, 0.8)' },
            { offset: 0.5, color: 'rgba(32,204,255, 0.8)' },
            { offset: 0.7, color: 'rgba(32,204,255, 0.8)' },
            { offset: 1, color: '#483D8B' }
          ])
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(32,204,255, 0.8)'
              },
              {
                offset: 0.5,
                color: 'rgba(32,204,255, 0.4)'
              },
              {
                offset: 1,
                color: 'rgba(60,212,191, 0.05)'
              }
            ])
          }
        },
        data: YAxis
      }]
    })
  },

  // 首页 - 统计
  line2: (id, xAxis, yAxis) => {
    const { chart } = new chartClass(id)
    chart.setOption({
      grid: {
        top: '4%',
        left: '5%',
        right: '8%',
        bottom: '4%',
        containLabel: true
      },
      legend: {
        show: false
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      yAxis: [{
        type: 'category',
        data: xAxis.reverse(),
        animation: true,
        offset: 5,
        axisLine: {
          show: false
        },
        axisTick: {
          // x轴刻度线
          show: false
        },
        axisLabel: {
          // x轴刻度文案
          show: true,
          showMaxLabel: true,
          rotate: 0, // 倾斜
          interval: 0,
          formatter: function(params) {
            var newParamsName = '' // 最终拼接成的字符串
            var paramsNameNumber = params.length // 实际标签的个数
            var provideNumber = 7 // 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = '' // 表示每一次截取的字符串
                var start = p * provideNumber // 开始截取的位置
                var end = start + provideNumber // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params
            }
            // 将最终的字符串返回
            return newParamsName
          }
        }
      }],
      xAxis: [{
        type: 'value',
        name: '',
        animation: true,
        axisLine: {
          // y轴
          show: false
        },
        axisTick: {
          // y轴刻度线
          show: false
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(102, 102, 102, 0.1)'
          }
        }
      }],
      series: [{
        barWidth: 12,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: 'rgba(64, 134, 255, 1)',
          barBorderRadius: [10]
        },
        data: yAxis.reverse()
      }]
    })
  }

}
