import tools from "./tools";

export const barChart1 = {
  yAxis: {
    nameGap: 23,
    minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#C3C4C4'},
    axisPointer: {show: false}
  },
  axisPointer: {
    type: 'shadow',
    triggerTooltip: false,
    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
  },
  color: [
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        {offset: 0, color: 'rgba(0, 249, 255, 1)'},
        {offset: 1, color: 'rgba(0, 249, 255, 0.4)'}
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        {offset: 0, color: 'rgba(236, 102, 102, 1)'},
        {offset: 1, color: 'rgba(236, 102, 102, 0.4)'}
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        {offset: 0, color: 'rgba(252, 59, 255, 1)'},
        {offset: 1, color: 'rgba(252, 59, 255, 0.4)'}
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        {offset: 0, color: 'rgba(24, 144, 255, 1)'},
        {offset: 1, color: 'rgba(24, 144, 255, 0.4)'}
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        {offset: 0, color: 'rgba(149, 255, 68, 1)'},
        {offset: 1, color: 'rgba(149, 255, 68, 0.4)'}
      ]
    }
  ],
  daemon: {
    type: 'bar',
    barWidth: 20,
    barCategoryGap: 40,
    itemStyle: {}
  }
}
export const barChart2 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
    itemWidth: 16, itemHeight: 5
  },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'}
  },
  yAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff'}, axisPointer: {show: false}
  },
  axisPointer: {
    type: 'shadow', show: true,
    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
  },
  daemon: {type: 'bar', barWidth: 2, barGap: 4}
}
export const barChart3 = {
  legend: {show: false},
  yAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff'}, axisPointer: {show: false}
  },
  axisPointer: {
    type: 'none', show: true, triggerTooltip: false,
  },
  daemon: {
    type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
    barWidth: 24,
    showBackground: true,
    // backgroundStyle: {
    //   color: 'rgba(123, 165, 255, .2)'
    // },
    emphasis: {
      itemStyle: {
        color: {
          type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
          // colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
        }
      }
    }
  }
}
export const barChart5 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
    itemWidth: 16, itemHeight: 5
  },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
    textStyle: {color: '#fff'}
  },
  yAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff'}, axisPointer: {show: false}
  },
  axisPointer: {
    type: 'none', show: true, triggerTooltip: false,
  },
}
export const barChart7 = {
  legend: {show: false},
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
    axisPointer: {
      type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
      label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {color: '#fff', fontSize: 14},
    axisTick: {show: false},
    axisLine: {show: false},
  },
  xAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff', fontSize: 14},
  },
  daemon: {
    type: 'bar', barWidth: 10, barGap: '40%',
    label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(123, 165, 255, .2)'
    },
    itemStyle: {
      color: {
        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
        colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
      }
    },
    emphasis: {
      label: {color: '#28FBFF', position: 'right'},
      itemStyle: {
        color: {
          type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
          colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
        }
      }
    }
  }
}
export const barChart8 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
    itemWidth: 16, itemHeight: 5
  },
  grid: {
    left: 50, right: 0
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
  },
  yAxis: {
    type: 'category',
    axisLabel: {color: '#fff', fontSize: 14},
    axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
    axisPointer: {show: false},
  },
  xAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff', fontSize: 14},
  },
  daemon: {
    type: 'bar', barWidth: 10,
    itemStyle: {
      color: ({color}) => ({
        type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
        colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
      })
    },
  }
}
export const barChart9 = {
  legend: {
    right: 0, itemGap: 16,
    textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
    itemWidth: 16, itemHeight: 5
  },
  grid: {
    left: 80, right: 0
  },
  tooltip: {
    backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
  },
  yAxis: {
    type: 'category',
    axisLabel: {color: '#fff', fontSize: 14, margin: 23},
    axisTick: {show: false},
    axisLine: {show: false},
  },
  xAxis: {
    nameGap: 23, minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#fff', fontSize: 14},
  },
  daemon: {
    type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
    showBackground: true,
    backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
  }
}
export const barChart10 = {
  yAxis: {
    nameGap: 23,
    minInterval: 1,
    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
    axisLabel: {color: '#C3C4C4'},
    axisPointer: {show: false}
  },
  axisPointer: {
    type: 'shadow',
    triggerTooltip: false,
    shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
  },
  daemon: {
    type: 'bar',
    barWidth: 20,
    barCategoryGap: 40,
    itemStyle: {
      borderRadius: 20,
      color(params) {
        const color = ['#DBB36E', '#2C97E8', '#00EFFF', '#BFEAFF'][params.dataIndex]
        return {
          type: 'linear',
          x: 0,
          x2: 0,
          y: 0,
          y2: 1,
          colorStops: [
            {offset: 0, color},
            {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, .1)}
          ]
        }
      }
    }
  }
}

export default {
  barChart1,
  barChart2,
  barChart3,
  barChart5,
  barChart7,
  barChart8,
  barChart9,
  barChart10
}