import * as echarts from "echarts";

const getBarChart = (nameList, valueList) => {
  const option = {
    tooltip: {},
    grid: {
      width: '100%',
      height: '83%',
      top: '15%',
      right: '5%',
      bottom: '2%',
      left: '1%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: "项",
      nameLocation: 'end',
      nameGap: 12,
      nameTextStyle: {
        color: '#666',
        fontSize: 14,
        fontWeight: 400,
        padding: [0, 0, 6, -26]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#666',
        fontSize: 14,
        fontWeight: 400
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e7f3ff',
          type: 'dashed',
        }
      },
    },
    xAxis: {
      type: 'category',
      data: nameList.map(item => item.name),
      axisLine: {
        show: true,
        lineStyle: {
            color: '#e7f3ff',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(95, 101, 108, 1)',
          fontFamily: 'Microsoft YaHei',
          fontsize: 14,
        }
      }
    },
    series: [{
      type: 'bar',
      data: valueList,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: 'rgba(5, 95, 194, 1)',
          fontSize: 16,
          fontWeight: 700,
          fontFamily: 'Microsoft YaHei'
        },
        formatter: function (params) {
          return params.value
        }
      },
      barWidth: 20,
      markPoint: {
        symbol: 'circle',
        symbolSize: 0,
        data: (function () {
          const data = [];
          nameList.forEach((item, index) => {
            data.push({
              name: `icon${index}`,
              xAxis: index,
              yAxis: valueList[index],
              symbol: `image://${item.img}`,
              symbolSize: [20, 20],
              symbolOffset: [0, 10]
            });
          });
          return data;
        })()
      },
      itemStyle: {
        color: function (params) {
          return new echarts.graphic.LinearGradient(0, 1, 0, 0,
            [{
              offset: 0,
              color: 'rgba(5, 95, 194, 0)'
            },
            {
              offset: 1,
              color: 'rgba(5, 95, 194, 1)'
            }
            ]);
        },
        barBorderRadius: [10, 10, 4, 4],
      }
    }]
  }
  return option
}

export default getBarChart