import ReactECharts from "echarts-for-react";

const years = [];

for (let year = 2011; year <= 2020; year++) {
  years.push(year);
}

const observedData = [
  -0.90765893, 0.14846958, 1.6577014, -0.32029018, -1.2422978, 0.44113398,
  -0.45218363, 1.897564, -0.6926195, -0.529819,
];

const predictedData = [
  -0.20760797, 0.206235, 0.85673275, 0.13969683, -0.39370838, 0.23775028,
  -0.34866039, 0.93110625, 0.19143088, 0.5760311,
];

function ChartPanel() {
  const option = {
    title: {
      // text: "Stacked Line",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["观测结果", "预测结果"],
      textStyle: { color: "#04fbfd", cursor: "point" },
    },
    animationDuration: years.length * 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],
      },
    },
    yAxis: {
      type: "value",
      min: -2.0,
      max: 2.0,
      interval: 0.5,
      splitNumber: 5,
      splitLine: { show: false },
      axisLine: {
        onZero: false,
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
      },
      axisLabel: {
        show: true,
      },
      axisTick: { show: true },
      scale: true,
    },
    dataZoom: { type: "inside", start: 0, end: 100 },
    series: [
      {
        name: "观测结果",
        type: "line",
        stack: "Total",
        data: observedData,
        color: "black",
        symbol: "none",
        itemStyle: {
          color: "black",
        },
      },
      {
        name: "预测结果",
        type: "line",
        // stack: "Total",
        data: predictedData,
        color: "red",
        symbol: "none",
        itemStyle: {
          color: "red",
        },
      },
    ],
  };

  return (
    <div className="chart-info-panel">
      <ReactECharts
        option={option}
        lazyUpdate={true}
        style={{
          height: "100%",
          width: "100%",
        }}
      />
    </div>
  );
}

export default ChartPanel;