bi-sdk-react 0.0.75 → 0.0.77

package/src/components/plugins/@antd/item-props/EchartsProps.tsx

@@ -1,17 +1,224 @@
-import React, { useRef } from "react";
-import { Form, InputNumber, Space, Tooltip } from "antd";
+import {
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  AlignRightOutlined,
+  FontSizeOutlined,
+  FullscreenOutlined,
+  InfoCircleOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignMiddleOutlined,
+  VerticalAlignTopOutlined,
+} from "@ant-design/icons";
 import Editor from "@monaco-editor/react";
-import type { PropEditorProps } from "./types";
+import {
+  Col,
+  Collapse,
+  ColorPicker,
+  Drawer,
+  Flex,
+  Form,
+  Input,
+  InputNumber,
+  Radio,
+  Row,
+  Select,
+  Space,
+  Switch,
+  Tooltip,
+  message,
+} from "antd";
+import * as echarts from "echarts";
+import "echarts-liquidfill";
+import "echarts-wordcloud";
+import React, {
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import * as ts from "typescript";
+import { PageContext } from "../../../context/PageContext";
 import { IconFont } from "../../../icon/IconFont";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import type { PropEditorProps } from "./types";
 
 export type EchartsModel = { script: string; height?: number };
 
+const OuterRect: React.FC<
+  PropsWithChildren<{
+    width: number;
+    height: number;
+    gap?: number;
+    active?: "left" | "right" | "top" | "bottom" | null;
+  }>
+> = ({ width, height, gap = 10, active, children }) => {
+  return (
+    <div
+      style={{
+        width,
+        height,
+        position: "relative",
+        padding: gap,
+        borderRadius: 6,
+        border: "2px solid var(--ant-color-border-secondary)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: 6,
+          border: "2px dotted var(--ant-color-border)",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          fontSize: 10,
+          userSelect: "none",
+        }}
+      >
+        {children}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: width / 2 - 3,
+          width: 4,
+          height: gap,
+          backgroundColor:
+            active === "top" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: width / 2 - 3,
+          width: 4,
+          height: gap,
+          backgroundColor:
+            active === "bottom" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          top: height / 2 - 3,
+          left: 0,
+          height: 4,
+          width: gap,
+          backgroundColor:
+            active === "left" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          top: width / 2 - 3,
+          right: 0,
+          height: 4,
+          width: gap,
+          backgroundColor:
+            active === "right" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+    </div>
+  );
+};
+
+const InnerRect: React.FC<
+  PropsWithChildren<{
+    width: number;
+    height: number;
+    gap?: number;
+    active?: "left" | "right" | "top" | "bottom" | null;
+  }>
+> = ({ width, height, gap = 10, active, children }) => {
+  return (
+    <div
+      style={{
+        width,
+        height,
+        position: "relative",
+        padding: gap,
+        borderRadius: 6,
+        border: "2px solid var(--ant-color-border-secondary)",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: 6,
+          border: "2px dotted var(--ant-color-border)",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          fontSize: 10,
+          userSelect: "none",
+        }}
+      >
+        {children}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          top: gap,
+          left: width / 2 - 3,
+          width: 4,
+          height: gap,
+          backgroundColor:
+            active === "top" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          bottom: gap,
+          left: width / 2 - 3,
+          width: 4,
+          height: gap,
+          backgroundColor:
+            active === "bottom" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          top: height / 2 - 3,
+          left: gap,
+          height: 4,
+          width: gap,
+          backgroundColor:
+            active === "left" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+      <div
+        style={{
+          position: "absolute",
+          top: width / 2 - 3,
+          right: gap,
+          height: 4,
+          width: gap,
+          backgroundColor:
+            active === "right" ? "var(--ant-color-primary)" : "#e8e8e8",
+        }}
+      ></div>
+    </div>
+  );
+};
+
 export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
   model,
   onChange,
 }) => {
+  const { globalVars, env } = useContext(PageContext);
   const ref = useRef<any>(null);
+  const fullRef = useRef<any>(null);
+  const [fullScreen, setFullScreen] = useState(false);
+
   const setScript = (v?: string) =>
     onChange && onChange({ ...model, script: v || "" });
   const triggerModel = (key: keyof EchartsModel, value: any) =>
@@ -21,55 +228,1273 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
     const editor = (ref.current as any)?.editor;
     editor?.getAction("editor.action.formatDocument")?.run();
   };
+
+  const fullFormat = () => {
+    const editor = (fullRef.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
+
+  /**
+   * 使用 AST 转换脚本：直接修改 return 对象的属性
+   * 将 return { a: 1 } 配合 modifyOptions { b: 2 } 转换为 return { a: 1, b: 2 }
+   */
+  const transformReturn = (modifyOptions?: Record<string, any>) => {
+    const code = model.script;
+    if (!code) {
+      message.warning("脚本内容为空");
+      return;
+    }
+
+    // 判断是否是来自 UI 点击的事件对象
+    const isEvent =
+      modifyOptions && (modifyOptions.nativeEvent || modifyOptions.target);
+    const options = isEvent ? { title: { text: "增强脚本" } } : modifyOptions;
+
+    try {
+      // 1. 创建 AST 源文件
+      const sourceFile = ts.createSourceFile(
+        "script.ts",
+        code,
+        ts.ScriptTarget.Latest,
+        true,
+      );
+
+      // 辅助函数：将 JS 对象转换为 AST 表达式
+      const convertToAST = (obj: any): ts.Expression => {
+        if (obj === null) return ts.factory.createNull();
+        if (obj === undefined) return ts.factory.createIdentifier("undefined");
+        if (typeof obj === "string") return ts.factory.createStringLiteral(obj);
+        if (typeof obj === "number")
+          return ts.factory.createNumericLiteral(obj);
+        if (typeof obj === "boolean")
+          return obj ? ts.factory.createTrue() : ts.factory.createFalse();
+        if (Array.isArray(obj)) {
+          return ts.factory.createArrayLiteralExpression(
+            obj.map((item) => convertToAST(item)),
+            false,
+          );
+        }
+        if (typeof obj === "object") {
+          const properties = Object.entries(obj).map(([key, value]) => {
+            return ts.factory.createPropertyAssignment(
+              /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+                ? ts.factory.createIdentifier(key)
+                : ts.factory.createStringLiteral(key),
+              convertToAST(value),
+            );
+          });
+          return ts.factory.createObjectLiteralExpression(properties, true);
+        }
+        return ts.factory.createNull();
+      };
+
+      // 辅助函数：深度合并 AST 对象字面量与 JS 对象
+      const mergeObjectAST = (
+        objectLiteral: ts.ObjectLiteralExpression,
+        patch: Record<string, any>,
+      ): ts.ObjectLiteralExpression => {
+        const properties = [...objectLiteral.properties];
+
+        Object.entries(patch).forEach(([key, value]) => {
+          const existingIndex = properties.findIndex((p) => {
+            if (ts.isPropertyAssignment(p)) {
+              if (ts.isIdentifier(p.name)) return p.name.text === key;
+              if (ts.isStringLiteral(p.name)) return p.name.text === key;
+            }
+            return false;
+          });
+
+          if (existingIndex > -1) {
+            const existingProp = properties[
+              existingIndex
+            ] as ts.PropertyAssignment;
+            // 如果新值和现有 AST 节点都是普通对象，则递归合并
+            if (
+              typeof value === "object" &&
+              value !== null &&
+              !Array.isArray(value) &&
+              ts.isObjectLiteralExpression(existingProp.initializer)
+            ) {
+              const mergedObj = mergeObjectAST(existingProp.initializer, value);
+              properties[existingIndex] = ts.factory.updatePropertyAssignment(
+                existingProp,
+                existingProp.name,
+                mergedObj,
+              );
+            } else {
+              // 否则直接替换
+              properties[existingIndex] = ts.factory.createPropertyAssignment(
+                existingProp.name,
+                convertToAST(value),
+              );
+            }
+          } else {
+            // 添加新属性
+            properties.push(
+              ts.factory.createPropertyAssignment(
+                /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)
+                  ? ts.factory.createIdentifier(key)
+                  : ts.factory.createStringLiteral(key),
+                convertToAST(value),
+              ),
+            );
+          }
+        });
+
+        return ts.factory.createObjectLiteralExpression(properties, true);
+      };
+
+      // 2. 定义转换器：查找 return 语句并进行直接修改
+      const transformer = (context: ts.TransformationContext) => {
+        return (rootNode: ts.Node) => {
+          function visit(node: ts.Node): ts.Node {
+            // 如果是 return 语句且返回的是对象字面量
+            if (
+              ts.isReturnStatement(node) &&
+              node.expression &&
+              ts.isObjectLiteralExpression(node.expression)
+            ) {
+              const updatedObject = options
+                ? mergeObjectAST(node.expression, options)
+                : node.expression;
+
+              // 更新 return 语句，返回合并后的对象字面量
+              return ts.factory.updateReturnStatement(node, updatedObject);
+            }
+            return ts.visitEachChild(node, visit, context);
+          }
+          return ts.visitNode(rootNode, visit);
+        };
+      };
+
+      // 3. 执行转换
+      const result = ts.transform(sourceFile, [transformer]);
+
+      // 4. 将转换后的 AST 打印回代码字符串
+      const printer = ts.createPrinter();
+      let transformedCode = printer.printNode(
+        ts.EmitHint.Unspecified,
+        result.transformed[0],
+        sourceFile,
+      );
+
+      // 避免将中文转为 unicode 转义字符
+      transformedCode = transformedCode.replace(
+        /\\u([0-9a-fA-F]{4})/g,
+        (match, p1) => {
+          return String.fromCharCode(parseInt(p1, 16));
+        },
+      );
+
+      // 5. 更新编辑器内容
+      setScript(transformedCode);
+    } catch (e) {
+      console.error("AST Transformation Error:", e);
+      message.error("脚本转换失败，请检查代码语法（需返回对象字面量）");
+    }
+  };
+
+  const parseConfig: any = useMemo(() => {
+    try {
+      return JSON.parse(model.script);
+    } catch (jsonError) {
+      try {
+        const safeEval = new Function(
+          "echarts",
+          "console",
+          "Math",
+          "Date",
+          "Array",
+          "Object",
+          "String",
+          "Number",
+          "Boolean",
+          "$g",
+          "$e",
+          "data",
+          `
+            "use strict";
+            const window = undefined;
+            const document = undefined;
+            const global = undefined;
+            const process = undefined;
+            const require = undefined;
+            const module = undefined;
+            const exports = undefined;
+            ${model.script}
+          `,
+        );
+        return (safeEval as any)(
+          echarts,
+          console,
+          Math,
+          Date,
+          Array,
+          Object,
+          String,
+          Number,
+          Boolean,
+          globalVars,
+          env.global,
+          {},
+        );
+      } catch (evalError) {
+        // console.error("ECharts 配置解析失败:", evalError);
+        return null;
+      }
+    }
+  }, [model.script]);
+
+  const positionRender = (propName: string) => {
+    const [focus, setFocus] = useState<
+      "top" | "bottom" | "left" | "right" | null
+    >();
+
+    const topType = useMemo(() => {
+      const top = parseConfig?.[propName]?.top;
+      if (typeof top === "number") {
+        return "px";
+      }
+      if (["auto", "top", "bottom", "middle"].includes(top)) {
+        return top;
+      }
+      return "px";
+    }, [parseConfig?.[propName]?.top]);
+
+    const onTopTypeChange = (v: string) => {
+      if (["auto", "top", "bottom", "middle"].includes(v)) {
+        transformReturn({ [propName]: { top: v } });
+      } else if (v === "px") {
+        transformReturn({ [propName]: { top: undefined } });
+      }
+    };
+
+    const leftType = useMemo(() => {
+      const left = parseConfig?.[propName]?.left;
+      if (typeof left === "number") {
+        return "px";
+      }
+      if (["auto", "left", "right", "center"].includes(left)) {
+        return left;
+      }
+      return "px";
+    }, [parseConfig?.[propName]?.left]);
+
+    const onLeftTypeChange = (v: string) => {
+      if (["auto", "left", "right", "center"].includes(v)) {
+        transformReturn({ [propName]: { left: v } });
+      } else if (v === "px") {
+        transformReturn({ [propName]: { left: undefined } });
+      }
+    };
+
+    return (
+      <Flex justify="space-between" style={{ width: "100%" }} gap={12}>
+        <OuterRect width={106} height={106} gap={20} active={focus}>
+          POS
+        </OuterRect>
+        <Row gutter={[4, 4]} style={{ width: 180 }}>
+          <Col span={24}>
+            <Radio.Group
+              size="small"
+              optionType="button"
+              buttonStyle="solid"
+              block
+              value={topType}
+              onChange={(e) => onTopTypeChange(e.target.value)}
+              options={[
+                {
+                  label: "Auto",
+                  value: "auto",
+                },
+                {
+                  label: "PX",
+                  value: "px",
+                },
+                {
+                  label: <VerticalAlignTopOutlined />,
+                  value: "top",
+                },
+                {
+                  label: <VerticalAlignMiddleOutlined />,
+                  value: "middle",
+                },
+                {
+                  label: <VerticalAlignBottomOutlined />,
+                  value: "bottom",
+                },
+              ]}
+            />
+          </Col>
+          <Col span={24}>
+            <Radio.Group
+              size="small"
+              optionType="button"
+              buttonStyle="solid"
+              block
+              value={leftType}
+              onChange={(e) => onLeftTypeChange(e.target.value)}
+              options={[
+                {
+                  label: "Auto",
+                  value: "auto",
+                },
+                {
+                  label: "PX",
+                  value: "px",
+                },
+                {
+                  label: <AlignLeftOutlined />,
+                  value: "left",
+                },
+                {
+                  label: <AlignCenterOutlined />,
+                  value: "center",
+                },
+                {
+                  label: <AlignRightOutlined />,
+                  value: "right",
+                },
+              ]}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              value={
+                topType === "px" ? parseConfig?.[propName]?.top : undefined
+              }
+              min={0}
+              size="small"
+              prefix="上"
+              suffix="px"
+              onChange={(v) =>
+                transformReturn({
+                  [propName]: { top: v },
+                })
+              }
+              onFocus={() => setFocus("top")}
+              onBlur={() => setFocus(null)}
+              disabled={topType !== "px"}
+              style={{ width: "100%" }}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              value={
+                leftType === "px" ? parseConfig?.[propName]?.left : undefined
+              }
+              min={0}
+              size="small"
+              prefix="左"
+              suffix="px"
+              onChange={(v) =>
+                transformReturn({
+                  [propName]: { left: v },
+                })
+              }
+              onFocus={() => setFocus("left")}
+              onBlur={() => setFocus(null)}
+              disabled={leftType !== "px"}
+              style={{ width: "100%" }}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              value={parseConfig?.[propName]?.bottom}
+              min={0}
+              size="small"
+              prefix="下"
+              suffix="px"
+              onChange={(v) =>
+                transformReturn({
+                  [propName]: { bottom: v },
+                })
+              }
+              onFocus={() => setFocus("bottom")}
+              onBlur={() => setFocus(null)}
+              style={{ width: "100%" }}
+            />
+          </Col>
+          <Col span={12}>
+            <InputNumber
+              value={parseConfig?.[propName]?.right}
+              min={0}
+              size="small"
+              prefix="右"
+              suffix="px"
+              onChange={(v) =>
+                transformReturn({
+                  [propName]: { right: v },
+                })
+              }
+              onFocus={() => setFocus("right")}
+              onBlur={() => setFocus(null)}
+              style={{ width: "100%" }}
+            />
+          </Col>
+        </Row>
+      </Flex>
+    );
+  };
+
   return (
     <Form>
-      <Form.Item
-        label="高度"
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}
-      >
-        <InputNumber
-          value={model.height}
-          size="small"
-          min={10}
-          max={1000}
-          suffix="px"
-          onChange={(v) => triggerModel("height", v)}
-        />
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        label={
-          <>
-              <Space>
-                Echarts 渲染脚本{" "}
-                <Tooltip
-                  title={
-                    <>
-                      模板语法参考
-                      <ul style={{padding: 0, listStyle: "none"}}>
-                        <li>变量调用：{ `{{变量名}}` }</li>
-                        <li>环境变量：{ `{{$e.变量名}}` }</li>
-                        <li>全局变量：{ `{{$g.变量名}}` }</li>
-                        <li>函数参数：{ `{{data}}` }</li>
+      <Collapse
+        size="small"
+        defaultActiveKey={["base", "custom"]}
+        items={[
+          {
+            key: "base",
+            label: "基础配置",
+            collapsible: "icon",
+            children: (
+              <Form.Item
+                label="高度"
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 18 }}
+              >
+                <InputNumber
+                  value={model.height}
+                  size="small"
+                  min={10}
+                  max={1000}
+                  suffix="px"
+                  onChange={(v) => triggerModel("height", v)}
+                />
+              </Form.Item>
+            ),
+          },
+          {
+            key: "title",
+            label: "标题",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={
+                  typeof parseConfig?.title?.show === "boolean"
+                    ? parseConfig.title.show
+                    : true
+                }
+                onChange={(v) => transformReturn({ title: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical>
+                <Space.Compact size="small" style={{ width: "100%" }}>
+                  <Input
+                    size="small"
+                    value={parseConfig?.title?.text || ""}
+                    prefix={
+                      <label
+                        style={{
+                          color: "var(--ant-color-text-description)",
+                          userSelect: "none",
+                          fontSize: 10,
+                        }}
+                      >
+                        主
+                      </label>
+                    }
+                    placeholder="请输入标题"
+                    onChange={(e) =>
+                      transformReturn({ title: { text: e.target.value } })
+                    }
+                  />
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.title?.textStyle?.fontSize}
+                    min={10}
+                    max={100}
+                    prefix={
+                      <FontSizeOutlined
+                        style={{ color: "var(--ant-color-text-description)" }}
+                      />
+                    }
+                    suffix="px"
+                    onChange={(v) =>
+                      transformReturn({
+                        title: { textStyle: { fontSize: v } },
+                      })
+                    }
+                    style={{ width: 200 }}
+                  />
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.title?.textStyle?.color}
+                    onChange={(v) =>
+                      transformReturn({
+                        title: { textStyle: { color: v.toHexString() } },
+                      })
+                    }
+                  />
+                </Space.Compact>
+                <Space.Compact size="small" style={{ width: "100%" }}>
+                  <Input
+                    size="small"
+                    value={parseConfig?.title?.subtext || ""}
+                    prefix={
+                      <label
+                        style={{
+                          color: "var(--ant-color-text-description)",
+                          userSelect: "none",
+                          fontSize: 10,
+                        }}
+                      >
+                        副
+                      </label>
+                    }
+                    placeholder="请输入副标题"
+                    onChange={(e) =>
+                      transformReturn({ title: { subtext: e.target.value } })
+                    }
+                  />
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.title?.subtextStyle?.fontSize}
+                    min={10}
+                    max={100}
+                    prefix={
+                      <FontSizeOutlined
+                        style={{ color: "var(--ant-color-text-description)" }}
+                      />
+                    }
+                    suffix="px"
+                    onChange={(v) =>
+                      transformReturn({
+                        title: { subtextStyle: { fontSize: v } },
+                      })
+                    }
+                    style={{ width: 200 }}
+                  />
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.title?.subtextStyle?.color}
+                    onChange={(v) =>
+                      transformReturn({
+                        title: { subtextStyle: { color: v.toHexString() } },
+                      })
+                    }
+                  />
+                </Space.Compact>
+                {positionRender("title")}
+              </Space>
+            ),
+          },
+          {
+            key: "legend",
+            label: "图例",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={
+                  typeof parseConfig?.legend?.show === "boolean"
+                    ? parseConfig.legend.show
+                    : true
+                }
+                onChange={(v) => transformReturn({ legend: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical>
+                <Form.Item
+                  label="图例方向"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.legend?.orient || "horizontal"}
+                    onChange={(e) => transformReturn({ legend: { orient: e.target.value } })}
+                    options={[
+                      { label: "水平", value: "horizontal" },
+                      { label: "垂直", value: "vertical" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="图例标记和文本的对齐"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.legend?.align || "auto"}
+                    onChange={(e) => transformReturn({ legend: { align: e.target.value } })}
+                    options={[
+                      { label: "自动", value: "auto" },
+                      { label: "左侧", value: "left" },
+                      { label: "右侧", value: "right" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="项间隔"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.legend?.itemGap}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ legend: { itemGap: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="图形宽度"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.legend?.itemWidth}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ legend: { itemWidth: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="图形高度"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.legend?.itemHeight}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ legend: { itemHeight: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="内容格式器"
+                  layout="vertical"
+                  tooltip="使用字符串模板，模板变量为图例名称 {name}"
+                >
+                  <Input.TextArea
+                    value={parseConfig?.legend?.formatter}
+                    onChange={(e) => transformReturn({ legend: { formatter: e.target.value } })}
+                  />
+                </Form.Item>
+                {positionRender("legend")}
+              </Space>
+            ),
+          },
+          {
+            key: "grid",
+            label: "直角坐标系",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={!!parseConfig.grid.show}
+                onChange={(v) => transformReturn({ grid: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical>
+                <Form.Item
+                  label="外边界策略"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.grid?.outerBoundsMode || "auto"}
+                    onChange={(e) => transformReturn({ grid: { outerBoundsMode: e.target.value } })}
+                    options={[
+                      { label: "auto", value: "auto" },
+                      { label: "none", value: "none" },
+                      { label: "same", value: "same" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="背景色"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.grid?.backgroundColor || "auto"}
+                    onChange={(e) => transformReturn({ grid: { backgroundColor: e.toHexString() } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="边框颜色"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.grid?.borderColor || "auto"}
+                    onChange={(e) => transformReturn({ grid: { borderColor: e.toHexString() } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="边框宽度"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.grid?.borderWidth}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ grid: { borderWidth: v } })}
+                  />
+                </Form.Item>
+                {positionRender("grid")}
+              </Space>
+            ),
+          },
+          {
+            key: "xAxis",
+            label: "X坐标系",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={
+                  typeof parseConfig?.xAxis?.show === "boolean"
+                    ? parseConfig.xAxis.show
+                    : true
+                }
+                onChange={(v) => transformReturn({ xAxis: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical style={{width: "100%"}}>
+                <Form.Item
+                  label="坐标轴名称"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <Input
+                    size="small"
+                    value={parseConfig?.xAxis?.name || ""}
+                    onChange={(e) => transformReturn({ xAxis: { name: e.target.value } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="位置"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.xAxis?.position || "auto"}
+                    onChange={(e) => transformReturn({ xAxis: { position: e.target.value } })}
+                    options={[
+                      { label: "top", value: "top" },
+                      { label: "bottom", value: "bottom" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="类型"
+                  labelCol={{ span: 4 }}
+                  wrapperCol={{ span: 20 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.xAxis?.type || "category"}
+                    onChange={(e) => transformReturn({ xAxis: { type: e.target.value } })}
+                    options={[
+                      { label: "类目轴", value: "category" },
+                      { label: "数值轴", value: "value" },
+                      { label: "时间轴", value: "time" },
+                      { label: "对数轴", value: "log" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="偏移量"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.offset || 0}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ xAxis: { offset: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="名称与轴线之间的距离"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.nameGap || 0}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ xAxis: { nameGap: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="坐标轴名字角度值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.nameRotate || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ xAxis: { nameRotate: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="刻度最小值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.min || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ xAxis: { min: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="刻度最大值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.max || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ xAxis: { max: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="分割段数"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.splitNumber || 5}
+                    min={0}
+                    onChange={(v) => transformReturn({ xAxis: { splitNumber: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="起始值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.xAxis?.startValue}
+                    min={0}
+                    onChange={(v) => transformReturn({ xAxis: { startValue: v } })}
+                  />
+                </Form.Item>
+              </Space>
+            ),
+          },
+          {
+            key: "yAxis",
+            label: "Y坐标系",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={
+                  typeof parseConfig?.yAxis?.show === "boolean"
+                    ? parseConfig.yAxis.show
+                    : true
+                }
+                onChange={(v) => transformReturn({ yAxis: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical style={{width: "100%"}}>
+                <Form.Item
+                  label="坐标轴名称"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <Input
+                    size="small"
+                    value={parseConfig?.yAxis?.name || ""}
+                    onChange={(e) => transformReturn({ yAxis: { name: e.target.value } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="位置"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.yAxis?.position || "auto"}
+                    onChange={(e) => transformReturn({ yAxis: { position: e.target.value } })}
+                    options={[
+                      { label: "left", value: "left" },
+                      { label: "right", value: "right" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="类型"
+                  labelCol={{ span: 4 }}
+                  wrapperCol={{ span: 20 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.yAxis?.type || "category"}
+                    onChange={(e) => transformReturn({ yAxis: { type: e.target.value } })}
+                    options={[
+                      { label: "类目轴", value: "category" },
+                      { label: "数值轴", value: "value" },
+                      { label: "时间轴", value: "time" },
+                      { label: "对数轴", value: "log" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="偏移量"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.offset || 0}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ yAxis: { offset: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="名称与轴线之间的距离"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.nameGap || 0}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ yAxis: { nameGap: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="坐标轴名字角度值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.nameRotate || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ yAxis: { nameRotate: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="刻度最小值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.min || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ yAxis: { min: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="刻度最大值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.max || 0}
+                    min={0}
+                    onChange={(v) => transformReturn({ yAxis: { max: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="分割段数"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.splitNumber || 5}
+                    min={0}
+                    onChange={(v) => transformReturn({ yAxis: { splitNumber: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="起始值"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.yAxis?.startValue}
+                    min={0}
+                    onChange={(v) => transformReturn({ yAxis: { startValue: v } })}
+                  />
+                </Form.Item>
+              </Space>
+            ),
+          },
+          {
+            key: "tooltip",
+            label: "提示框",
+            collapsible: "icon",
+            extra: (
+              <Switch
+                size="small"
+                value={
+                  typeof parseConfig?.tooltip?.show === "boolean"
+                    ? parseConfig.tooltip.show
+                    : true
+                }
+                onChange={(v) => transformReturn({ tooltip: { show: v } })}
+              />
+            ),
+            children: (
+              <Space vertical style={{width: "100%"}}>
+                <Form.Item
+                  label="触发类型"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.tooltip?.trigger || "item"}
+                    onChange={(e) => transformReturn({ tooltip: { trigger: e.target.value } })}
+                    options={[
+                      { label: "item", value: "item" },
+                      { label: "axis", value: "axis" },
+                      { label: "none", value: "none" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="触发条件"
+                  labelCol={{ span: 6 }}
+                  wrapperCol={{ span: 18 }}
+                >
+                  <Radio.Group
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={parseConfig?.tooltip?.triggerOn || "item"}
+                    onChange={(e) => transformReturn({ tooltip: { triggerOn: e.target.value } })}
+                    options={[
+                      { label: "移动", value: "mousemove" },
+                      { label: "点击", value: "click" },
+                      { label: "移动或点击", value: "mousemove|click" },
+                      { label: "无", value: "none" },
+                    ]}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="背景颜色"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.tooltip?.backgroundColor}
+                    onChange={(v) => transformReturn({ tooltip: { backgroundColor: v.toHexString() } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="边框颜色"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <ColorPicker
+                    size="small"
+                    value={parseConfig?.tooltip?.borderColor}
+                    onChange={(v) => transformReturn({ tooltip: { borderColor: v.toHexString() } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="边框宽度"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.tooltip?.borderWidth || 0}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ tooltip: { borderWidth: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="浮层内边距"
+                  labelCol={{ span: 12 }}
+                  wrapperCol={{ span: 12 }}
+                >
+                  <InputNumber
+                    size="small"
+                    value={parseConfig?.tooltip?.padding || 5}
+                    min={0}
+                    suffix="px"
+                    onChange={(v) => transformReturn({ tooltip: { padding: v } })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label="内容格式器"
+                  layout="vertical"
+                  tooltip={
+                    <div>
+                      {`模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：`}
+                      <ul>
+                        <li>{`折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）`}</li>
+                        <li>{`散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）`}</li>
+                        <li>{`地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）`}</li>
+                        <li>{`饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）`}</li>
                       </ul>
-                    </>
+                    </div>
                   }
                 >
-                  <InfoCircleOutlined />
-                </Tooltip>
+                  <Input.TextArea
+                    value={parseConfig?.tooltip?.formatter}
+                    onChange={(e) => transformReturn({ tooltip: { formatter: e.target.value } })}
+                  />
+                </Form.Item>
               </Space>
-            <a onClick={format}>
-              <IconFont type="icon-formate" /> 格式化
-            </a>
-          </>
+            ),
+          },
+          {
+            key: "custom",
+            label: "自定义配置",
+            collapsible: "icon",
+            children: (
+              <Form.Item
+                layout="vertical"
+                label={
+                  <>
+                    <Space>
+                      Echarts 渲染脚本{" "}
+                      <Tooltip
+                        title={
+                          <>
+                            模板语法参考
+                            <ul style={{ padding: 0, listStyle: "none" }}>
+                              <li>变量调用：{`{{变量名}}`}</li>
+                              <li>环境变量：{`{{$e.变量名}}`}</li>
+                              <li>全局变量：{`{{$g.变量名}}`}</li>
+                              <li>函数参数：{`{{data}}`}</li>
+                            </ul>
+                          </>
+                        }
+                      >
+                        <InfoCircleOutlined />
+                      </Tooltip>
+                    </Space>
+                    <Space>
+                      <a onClick={() => setFullScreen(true)}>
+                        <FullscreenOutlined /> 全屏
+                      </a>
+                      <a onClick={format}>
+                        <IconFont type="icon-formate" /> 格式化
+                      </a>
+                    </Space>
+                  </>
+                }
+                className="ant-form-item-label-space"
+              >
+                <div
+                  style={{
+                    border: "1px solid #d9d9d9",
+                    borderRadius: 4,
+                    textAlign: "left",
+                  }}
+                >
+                  <div
+                    style={{
+                      color: "#0000ff",
+                      fontSize: 14,
+                      padding: "0 50px",
+                    }}
+                  >
+                    function getOptions(data) {"{"}{" "}
+                  </div>
+                  <Editor
+                    onMount={(editor) => {
+                      (ref.current as any) = { editor };
+                    }}
+                    height="400px"
+                    defaultLanguage="javascript"
+                    value={model.script}
+                    onChange={(v) => setScript(v || "")}
+                    options={{
+                      minimap: { enabled: false },
+                      scrollBeyondLastLine: false,
+                      tabSize: 2,
+                    }}
+                  />
+                  <div
+                    style={{
+                      color: "#0000ff",
+                      fontSize: 14,
+                      padding: "0 50px",
+                    }}
+                  >
+                    {"}"}
+                  </div>
+                </div>
+              </Form.Item>
+            ),
+          },
+        ]}
+        style={{ marginBottom: 14 }}
+      />
+
+      <Drawer
+        title={
+          <Flex justify="space-between" align="center">
+            Echarts 渲染脚本
+            <Space>
+              <a key="format" onClick={fullFormat}>
+                <IconFont type="icon-formate" /> 格式化
+              </a>
+            </Space>
+          </Flex>
         }
-        className="ant-form-item-label-space"
+        open={fullScreen}
+        width="100%"
+        onClose={() => setFullScreen(false)}
+        styles={{
+          body: {
+            padding: 0,
+          },
+        }}
       >
         <div
           style={{
-            border: "1px solid #d9d9d9",
-            borderRadius: 4,
             textAlign: "left",
           }}
         >
@@ -78,9 +1503,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
           </div>
           <Editor
             onMount={(editor) => {
-              (ref.current as any) = { editor };
+              (fullRef.current as any) = { editor };
             }}
-            height="400px"
+            height="calc(100vh - 100px)"
             defaultLanguage="javascript"
             value={model.script}
             onChange={(v) => setScript(v || "")}
@@ -94,7 +1519,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
             {"}"}
           </div>
         </div>
-      </Form.Item>
+      </Drawer>
     </Form>
   );
 };