import * as echarts from "echarts";
import { textFormatter } from "~/pages/Container/Map/js/utils";

export const initEcharts1 = (mainRef, chartInstance, data) => {
  const XAxisData = [];
  const seriesData1 = [];
  const seriesData2 = [];

  data.forEach((e) => {
    XAxisData.push(e.AREA_NAME);
    seriesData1.push(Number(e.CAR_IN) + Number(e.PEOPLE_IN));
    seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT));
  });

  chartInstance.current = echarts.init(mainRef.current);

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "5%",
      top: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        type: "slider",
        height: 6,
        bottom: 0,
        show: true,
        start: 0,
        end: 25,
        handleSize: 3,
        handleStyle: {
          color: "#DCE2E8",
        },
        xAxisIndex: [0],
        filterMode: "filter",
        showDetail: false,
      },
    ],
    legend: {
      top: "0%",
      right: "0%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      itemWidth: 12,
      itemHeight: 10,
    },
    xAxis: {
      type: "category",
      data: XAxisData,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      axisLabel: {
        rotate: 0,
        color: "#fff",
        fontSize: 14,
        interval: 0,
        formatter(value) {
          return textFormatter(value, 3);
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#8c9493",
        },
      },
      axisLabel: {
        fontSize: 14,
        color: "#fff",
      },
    },
    series: [
      {
        name: "进",
        type: "bar",
        barWidth: "30%",
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#00f0ff",
            },
            {
              offset: 1,
              color: "#0066ff",
            },
          ],
          false,
        ),
        data: seriesData1,
      },
      {
        name: "出",
        type: "bar",
        barWidth: "30%",
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#003cff",
            },
            {
              offset: 1,
              color: "#00ff9c",
            },
          ],
          false,
        ),
        data: seriesData2,
      },
    ],
  };

  chartInstance.current.setOption(option);
};
