唐简：echart编辑器demo

.eslintrc.cjs

@@ -2,17 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
+    "eslint:recommended",
-    'plugin:@typescript-eslint/recommended',
+    "plugin:@typescript-eslint/recommended",
-    'plugin:react-hooks/recommended',
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
-  plugins: ['react-refresh'],
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
+    "react-refresh/only-export-components": [
-      'warn',
+      "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "prefer-const": "off",
+    "@typescript-eslint/no-unused-vars": "off",
   },
-}
+};

package.json

@@ -19,6 +19,7 @@
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-echarts-core": "^1.0.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "redux-persist": "^6.0.0",

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>
+    </>
+  );
+}

src/view/custom-query/index.scss

@@ -0,0 +1,38 @@
+.controller {
+  display: flex;
+  .bg {
+    text-align: left;
+    box-shadow: 1px 1px 3px 1px #ddd;
+    background-color: #fff;
+    height: 40vh;
+    padding: 10px;
+    margin: 5px;
+  }
+  .list-item {
+    width: 95%;
+    margin: 10px auto;
+    height: 50px;
+    padding: 10px;
+    font-size: 20px;
+    border: 1px solid #ddd;
+  }
+  .data {
+    flex: 25%;
+    padding: 10px;
+  }
+  .index-x {
+    flex: 40%;
+  }
+  .index-y {
+    flex: 40%;
+  }
+}
+
+.center-edit {
+  display: flex;
+}
+.canvas {
+  width: 800px;
+  height: 400px;
+  background-color: pink;
+}