import ChartPanel from "@/components/common/ChartPanel";

const years = [];

for (let year = 1961; year <= 2010; year++) {
  years.push(year);
}

// 北极
const AntarcticaData = [];

// 南极
const ArcticData = [];

// 青藏高原
const TibetanData = [];

function CustomChartPanel() {
  const option = {
    title: {
      // text: "Stacked Line",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["南极", "北极", "青藏高原"],
      textStyle: { color: "#04fbfd", cursor: "point", fontSize: 20 },
    },
    animationDuration: 10 * 1000,
    animationEasing: "cubicInOut",
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // toolbox: {
    //   feature: {
    //     // 下载
    //     saveAsImage: {},
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: years,
      axisLine: {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
        lineStyle: {
          color: "#04fbfd",
        },
      },
      axisLabel: {
        interval: 4,
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 1800000,
      //   interval: 0.5,
      //   splitNumber: 5,
      splitLine: { show: false },
      axisLine: {
        onZero: false,
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 1],
        lineStyle: {
          color: "#04fbfd",
        },
      },
      axisLabel: {
        show: true,
        interval: 300000,
      },
      axisTick: { show: true },
      scale: true,
    },
    dataZoom: { type: "inside", start: 0, end: 100 },
    series: [
      {
        name: "北极",
        type: "line",
        stack: "Total",
        data: AntarcticaData,
        smooth: true,
        color: "red",
        symbol: "none",
        itemStyle: {
          color: "red",
        },
      },
      {
        name: "南极",
        type: "line",
        // stack: "Total",
        data: ArcticData,
        smooth: true,
        color: "blue",
        symbol: "none",
        itemStyle: {
          color: "blue",
        },
      },
      {
        name: "青藏高原",
        type: "line",
        // stack: "Total",
        data: TibetanData,
        smooth: true,
        color: "green",
        symbol: "none",
        itemStyle: {
          color: "green",
        },
      },
    ],
  };

  return <ChartPanel option={option} />;
}

export default CustomChartPanel;
