import { Card } from "antd";
import * as echarts from "echarts/core";
import { GridComponent, GridComponentOption } from "echarts/components";
import { BarChart, BarSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { useRef, useState } from "react";
const tabList = [
  {
    key: "bar",
    label: "柱状图",
  },
  {
    key: "pie",
    label: "饼图",
  },
  {
    key: "line",
    label: "折线图",
  },
];

echarts.use([GridComponent, BarChart, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<
  GridComponentOption | BarSeriesOption
>;

var option: EChartsOption;

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};
export function ChartComponent() {
  const [activeTabKey, setActiveTabKey] = useState<string>("bar");
  const line = useRef<HTMLCanvasElement>(null);
  const bar = useRef<HTMLCanvasElement>(null);
  const pie = useRef<HTMLCanvasElement>(null);
  const contentListNoTitle: Record<string, React.ReactNode> = {
    bar: <canvas ref={bar}></canvas>,
    pie: <canvas ref={pie}></canvas>,
    line: <canvas ref={line}></canvas>,
  };
  // var myChart = echarts.init(bar);
  return (
    <>
      <Card
        style={{ width: "100%" }}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={setActiveTabKey}
        tabProps={{ size: "middle" }}
      >
        {contentListNoTitle[activeTabKey]}
      </Card>
    </>
  );
}