唐简：echart编辑器demo

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

@@ -0,0 +1,171 @@
+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>
+    </>
+  );
+}