fateverse-react/src/view/custom-query/echarts-editor/index.tsx

import { useState, useRef, useEffect } from "react";
import "../index.scss";
import { Button, Select } from "antd";
// import type { EChartsOption } from "node_modules/react-echarts-core/lib/ChartCore";
// import ChartCore from "node_modules/react-echarts-core/lib/ChartCore";
import * as echarts from "echarts";
export default function EchartsEditor() {
  const echartRef: any = useRef(null);
  const [xList, setXList] = useState<any[]>([]);
  const [yList, setYList] = useState<any[]>([]);
  const [currentDrag, setCurrentDrag] = useState<any>({});
  const [dataList, setDataList] = useState<any[]>([
    { id: 1, name: "Vue", state: "Value" },
    { id: 2, name: "React", state: "Value" },
    { id: 3, name: "Angular", state: "Key" },
  ]);
  const [echartOption, setEchartOption] = useState<object | any>({
    xAxis: {
      data: ["A", "B", "C", "D", "E"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [1, 2, 3, 4, 5],
        type: "line",
      },
    ],
  });

  const onDragStart: any = (item: any) => {
    console.log(item.name, "开始拖拽");
    setCurrentDrag(item);
  };

  const onDragEnd: any = (item: any) => {
    console.log(item.name, "结束拖拽");
  };

  const onYDragOver: any = (e: any) => {
    e.preventDefault();
  };

  const onXDrop: any = () => {
    console.log("拖拽至X轴区域");
    setXList(xList.concat(currentDrag));
    let newDataList = handleDelDataList(currentDrag.id);
    setDataList(newDataList);
    setEchartOption({
      ...echartOption,
      xAxis: {
        data: xList.map((item) => item.name),
      },
    });
  };

  const onXDragOver: any = (e: any) => {
    e.preventDefault();
  };

  const onYDrop: any = () => {
    console.log("拖拽至Y轴区域");
    setYList(yList.concat(currentDrag));
    let newDataList = handleDelDataList(currentDrag.id);
    setDataList(newDataList);
  };

  const handleDelDataList = (id: number) => {
    let newDataList = dataList;
    const curIndex = newDataList.findIndex((item) => item.id === id);
    newDataList.splice(curIndex, 1);
    return newDataList;
  };

  // const res = () => {
  //   let res: any[] = [];
  //   setXList(xList);
  //   xList.forEach((item: any) => {
  //     res.push(item.name);
  //   });
  //   setXEchartList(res);
  //   console.log(xEchartList);
  //   return xEchartList;
  // };

  useEffect(() => {
    const myEchart: any = echarts.init(document.querySelector(".canvas"));
    myEchart.setOption(echartOption);
    console.log(echartOption);
  }, [echartOption]);

  return (
    <>
      <div className="controller">
        <div className="data bg">
          <Select
            placeholder="折线图"
            allowClear
            style={{ width: 100 + "%" }}
            options={[{ value: "折线图", label: "折线图" }]}
          />
          {dataList.map((item: any) => {
            return (
              <div
                className="list-item"
                key={item.id}
                draggable={true}
                onDragStart={() => onDragStart(item)}
                onDragEnd={() => onDragEnd(item)}
              >
                {item.name}
              </div>
            );
          })}
        </div>

        <div
          className="index-x bg"
          onDragOver={onXDragOver}
          onDrop={() => onXDrop()}
        >
          <span>值轴/X轴</span>
          {xList.map((item: any) => {
            return (
              <div
                className="list-item"
                key={item.id}
                // draggable={true}
                // onDragStart={() => onDragStart(item)}
                // onDragEnd={() => onDragEnd(item)}
              >
                {item.name}
              </div>
            );
          })}
        </div>
        <div
          className="index-y bg"
          onDragOver={onYDragOver}
          onDrop={() => onYDrop()}
        >
          <span>值轴/y轴</span>
          {yList.map((item: any) => {
            return (
              <div
                className="list-item"
                key={item.id}
                // draggable={true}
                // onDragStart={() => onDragStart(item)}
                // onDragEnd={() => onDragEnd(item)}
              >
                {item.name}
              </div>
            );
          })}
        </div>
      </div>
      <div className="center-edit">
        <div></div>
      </div>
      <div className="center-edit">
        <Button>保存</Button>
        <Button>高级设置</Button>
      </div>
      <div className="canvas" ref={echartRef}>
        {/* <ChartCore option={option}></ChartCore> */}
      </div>
    </>
  );
}