import * as echarts from "echarts";

export const initEcharts1 = (mainRef, chartInstance, data) => {
  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    color: ["#F1C416", "#0AFCFF"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "1%",
      right: "4%",
      bottom: "6%",
      top: 30,
      padding: "0 0 10 0",
      containLabel: true,
    },
    legend: {
      right: 10,
      top: 0,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      textStyle: {
        color: "#fff",
        fontStyle: "normal",
        fontFamily: "微软雅黑",
        fontSize: 12,
      },
    },
    dataZoom: [
      {
        type: "slider",
        height: 6,
        bottom: 0,
        show: true,
        start: 0,
        end: 50,
        handleSize: 3,
        handleStyle: {
          color: "#DCE2E8",
        },
        xAxisIndex: [0],
        filterMode: "filter",
        showDetail: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        data: data.map(item => item.name),
        axisLabel: {
          interval: 0,
          margin: 15,
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
            opacity: 0.2,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.06,
          },
        },
      },
    ],
    series: [
      {
        name: "单位人员数",
        type: "pictorialBar",
        symbol: "roundRect",
        symbolOffset: [-5, 0],
        symbolMargin: "1",
        barWidth: "10%",
        barMaxWidth: "20%",
        animationDelay: (dataIndex, params) => {
          return params.index * 50;
        },
        itemStyle: {
          normal: {
            color: () => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: "#F1C416",
                },
                {
                  offset: 1,
                  color: "#FF2F01",
                },
              ]);
            },
          },
        },
        z: 1,
        barGap: 0,
        symbolRepeat: true,
        symbolSize: [14, 5],
        data: data.map(item => item.unitCount),
        animationEasing: "elasticOut",
        stack: "2",
      },
      {
        name: "相关方人员数",
        type: "pictorialBar",
        symbol: "roundRect",
        barWidth: "10%",
        symbolOffset: [5, 0],
        barMaxWidth: "20%",
        symbolMargin: "1",
        animationDelay: (dataIndex, params) => {
          return params.index * 50;
        },
        itemStyle: {
          normal: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: "#0AFCFF",
                },
                {
                  offset: 1,
                  color: "#0CA1FE",
                },
              ]);
            },
          },
        },
        z: 1,
        barGap: 0,
        symbolRepeat: true,
        symbolSize: [14, 5],
        data: data.map(item => item.personnelCount),
        animationEasing: "elasticOut",
        stack: "1",
      },
    ],
  };

  chartInstance.current.setOption(option);
};
