import * as echarts from "echarts";
const getMultiBarChart = (dataX, data) => {
  const colorList = ['rgba(22, 119, 255, 1)', 'rgba(206, 79, 81, 1)', 'rgba(255, 197, 61, 1)', 'rgba(255, 204, 199, 1)', 'rgba(179, 127, 235, 1)']
  return {
    tooltip: {
      trigger: 'axis'
    },
    color: ['rgba(22, 119, 255, 1)', 'rgba(206, 79, 81, 1)', 'rgba(255, 197, 61, 1)', 'rgba(255, 204, 199, 1)', 'rgba(179, 127, 235, 1)'],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      icon: 'circle'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true, // 坐标轴两边留白策略，默认为true，这时候刻度线和数据标签对齐。设置为false可以让刻度线和数据标签错开。
      data: dataX,  // X轴数据点
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true, // 显示 Y 轴的网格线
        lineStyle: {
          color: 'rgba(246, 251, 255, 1)' // 网格线颜色
        }
      },
      splitArea: {
        show: true, // 显示 Y 轴的间隔带
        areaStyle: {
          color: ['rgba(255,255,255,1)', 'rgba(246, 251, 255, 1)'] // 间隔带颜色，可以设置渐变色
        }
      }
    },
    series: data.map((item, index) => {
      return {
        name: item.name,
        type: 'bar',
        data: item.value,
        barWidth: 10,
        barGap: '80%',
        itemStyle: {
          color: function () {
            return new echarts.graphic.LinearGradient(0, 1, 0, 0,
              [{
                offset: 0,
                color: 'rgba(255,255,255,0)'
              },
              {
                offset: 1,
                color: colorList[index]
              }
              ]);

          },
          barBorderRadius: 5,
        }
      }
    })
  }
}

export default getMultiBarChart