shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/charts/config/chartFormItemsMap.ts

import { IFormItem } from "../../cusForm";
import { colorPreset } from "./index";
import { get } from "lodash-es";
/**
 * 用于快速配置图表配置项
 *
 * prop: 图表option的路径
 * format：转换数据
 *
 * */
export const chartFormItemsMap: Record<string, IFormItem> = {
  /* 标题 */
  title: {
    label: "标题",
    prop: "title",
    type: "group",
    children: [
      {
        label: " ",
        prop: "title.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "标题可见", value: true }],
        },
        defaultValue: [],
        format: (formatModel, value) => {
          formatModel.value["title.show"] = value?.length ? true : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        type: "dependency",
        label: "",
        prop: "",
        name: ["title.show"],
        children: (model) => {
          return model["title.show"].length
            ? [
                {
                  label: "文本",
                  prop: "title.text",
                  type: "input",
                  defaultValue: "图表标题",
                },
                {
                  label: "位置",
                  prop: "title.left",
                  type: "position",
                  defaultValue: "center",
                },
                {
                  label: "样式",
                  prop: "title.textStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#ffffffff",
                    size: 18,
                    bold: true,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["title.textStyle"] = {
                      color: value.color,
                      fontSize: value.size,
                      fontWeight: value.bold ? "bold" : "normal",
                      fontStyle: value.italic ? "italic" : "normal",
                    };
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'title.textStyle.color', '#FFFFFF'),
                      size: get(model, 'title.textStyle.size', 16),
                      bold: get(model, 'title.textStyle.fontWeight') === 'bold',
                      italic: get(model, 'title.textStyle.fontStyle') === 'italic',
                    }
                  }
                },
                {
                  label: "背景",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "填充",
                  prop: "title.backgroundColor",
                  type: "backgroundSelect",
                  fieldProps: {
                    filterOptions: ["image"],
                  },
                  defaultValue: {
                    type: "color",
                    color: "#FFFFFF00",
                  },
                  format: (formatModel, value) => {
                    formatModel.value["title.backgroundColor"] = value?.type === 'color' ? value.color : 'none';
                  },
                  valueToForm: (value) => {
                    return !value || value === 'none' 
                    ? {
                      type: 'none',
                      color: '#000000ff'
                    } 
                    : {
                      type: "color",
                      color: value.color,
                    };
                  },
                },
                {
                  label: "圆角",
                  prop: "title.borderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
              ]
            : [];
        },
      },
    ],
  },
  /* 图例 */
  legend: {
    label: "图例",
    prop: "legend",
    type: "group",
    children: [
      {
        label: " ",
        prop: "legend.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "图例可见", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["legend.show"] = value?.length ? true : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        },
      },
      {
        type: "dependency",
        label: "",
        prop: "",
        name: ["legend.show"],
        children: (model) => {
          return model["legend.show"].length
            ? [
                {
                  label: "位置",
                  prop: "legend.position",
                  type: "position",
                  fieldProps: {
                    type: "round",
                  },
                  defaultValue: "top",
                  format: (formatModel, value) => {
                    if(['left', 'right'].includes(value)) {
                      formatModel.value["legend.orient"] = 'vertical';
                    } else {
                      formatModel.value["legend.orient"] = 'horizontal';
                    }
                    switch(value) {
                      case 'bottom':
                        formatModel.value["legend.top"] = 'auto';
                        formatModel.value["legend.right"] = 'auto';
                        formatModel.value["legend.bottom"] = 8;
                        formatModel.value["legend.left"] = 'center';
                        break;
                      case 'left':
                        formatModel.value["legend.bottom"] = 'auto';
                        formatModel.value["legend.right"] = 'auto';
                        formatModel.value["legend.left"] = 8;
                        formatModel.value["legend.top"] = 'center';
                        break;
                      case 'right':
                        formatModel.value["legend.bottom"] = 'auto';
                        formatModel.value["legend.left"] = 'auto';
                        formatModel.value["legend.right"] = 8;
                        formatModel.value["legend.top"] = 'center';
                        break;
                      default:
                        formatModel.value["legend.bottom"] = 'auto';
                        formatModel.value["legend.right"] = 'auto';
                        formatModel.value["legend.top"] = 32;
                        formatModel.value["legend.left"] = 'center';
                    }
                  },
                  valueToForm: (value, model) => {
                    if(get(model, 'legend.orient') === 'vertical') {
                      return value === 'top' ? 'top' : value === 'bottom' ? 'bottom' : 'left';
                    }
                    if(get(model, 'legend.bottom') === 8 && get(model, 'legend.left') === 'center') {
                      return 'bottom';
                    }
                    return 'top';
                  },
                },
                {
                  label: "样式",
                  prop: "legend.textStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["legend.textStyle"] = {
                      color: value.color,
                      fontSize: value.size,
                      fontWeight: value.bold ? "bold" : "normal",
                      fontStyle: value.italic ? "italic" : "normal",
                    };
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'legend.textStyle.color', '#000000ff'),
                      size: get(model, 'legend.textStyle.fontSize', 12),
                      bold: get(model, 'legend.textStyle.fontWeight') === 'bold',
                      italic: get(model, 'legend.textStyle.fontStyle') === 'italic',
                    }
                  }
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "legend.borderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "颜色",
                  prop: "legend.borderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
                {
                  label: "圆角",
                  prop: "legend.borderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "背景",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "背景",
                  prop: "legend.backgroundColor",
                  type: "backgroundSelect",
                  fieldProps: {
                    filterOptions: ["image"],
                  },
                  defaultValue: {
                    type: "color",
                    color: "#fff",
                  },
                  format: (formatModel, value) => {
                    formatModel.value["legend.backgroundColor"] = value?.type === 'color' ? value.color : 'none';
                  },
                  valueToForm: (value) => {
                    return !value || value === 'none' 
                    ? {
                      type: 'none'
                    } 
                    : {
                      type: "color",
                      color: value.color,
                    };
                  },
                },
                {
                  label: "阴影",
                  prop: "legend.shadowBlur",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "开启", value: true },
                      { label: "关闭", value: false },
                    ],
                  },
                  defaultValue: false,
                  format: (formatModel, value) => {
                    if(value) {
                      formatModel.value["legend.shadowBlur"] = 10;
                      formatModel.value["legend.shadowColor"] = formatModel.value['legend.backgroundColor'] || '#000000ff';
                      formatModel.value["legend.shadowOffsetX"] = 3;
                      formatModel.value["legend.shadowOffsetY"] = 3;
                    } else {
                      formatModel.value["legend.shadowBlur"] = 0;
                      formatModel.value["legend.shadowColor"] = "transparent";
                      formatModel.value["legend.shadowOffsetX"] = 0;
                      formatModel.value["legend.shadowOffsetY"] = 0;
                    }
                  },
                  valueToForm: (value) => {
                    return value ? true : false;
                  },
                },
              ]
            : [];
        },
      },
    ],
  },
  /* 系列 */
  series: {
    label: "系列",
    prop: "series",
    type: "group",
    children: [
      {
        label: "配色",
        prop: "color",
        type: "colorScheme",
        defaultValue: colorPreset[0].color,
      },
    ],
  },
  /* X轴 */
  xAxis: {
    label: "X 轴",
    prop: "xAxis",
    type: "group",
    children: [
      {
        label: "类型",
        prop: "xAxis.type",
        type: "select",
        fieldProps: {
          options: [
            { label: "类目坐标轴", value: "category" },
            { label: "数值坐标轴", value: "value" },
            { label: "时间坐标轴", value: "time" },
          ],
        },
        defaultValue: "category",
      },
      {
        label: " ",
        prop: "xAxis.showName",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示轴标题", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          if(value?.length) {
            formatModel.value["xAxis.showName"] = true;
            formatModel.value["xAxis.name"] = 'X轴标题';
            formatModel.value["xAxis.nameGap"] = 25;
          }  else {
            formatModel.value["xAxis.showName"] = false;
            formatModel.value["xAxis.name"] = "";
            formatModel.value["xAxis.nameGap"] = 15;
            formatModel.value["xAxis.nameGap"] = 15;
          }
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        },
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["xAxis.showName"],
        children: (model) => {
          return model["xAxis.showName"].length
            ? [
                {
                  label: "标题内容",
                  prop: "xAxis.name",
                  type: "input",
                  defaultValue: "X 轴标题",
                  format: (formatModel, value) => {
                    if (formatModel.value["xAxis.showName"]) {
                      formatModel.value["xAxis.name"] = value;
                      formatModel.value["xAxis.nameGap"] = 25;
                    }
                  },
                  valueToForm: (value) => {
                    return value || "X 轴标题";
                  }
                },
                {
                  label: "标题位置",
                  prop: "xAxis.nameLocation",
                  type: "position",
                  defaultValue: "center",
                  format: (formatModel, value: "left" | "center" | "right") => {
                    const p = {
                      left: "start",
                      center: "middle",
                      right: "end",
                    };
                    formatModel.value["xAxis.nameLocation"] = value
                      ? p[value]
                      : "middle";
                  },
                  valueToForm: (value: 'start' | 'middle' | 'end') => {
                    const p = {
                      start: "left",
                      middle: "center",
                      end: "right",
                    };
                    return p[value] || "center";
                  },
                },
                {
                  label: "标题样式",
                  prop: "xAxis.nameTextStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["xAxis.nameTextStyle"] = {
                      color: value.color,
                      fontSize: value.size,
                      fontWeight: value.bold ? "bold" : "normal",
                      fontStyle: value.italic ? "italic" : "normal",
                    };
                  },
                  valueToForm: (value) => {
                    return {
                      color: value?.color || '#000000ff',
                      size: value?.fontSize || 12,
                      bold: value?.fontWeight === 'bold' || false,
                      italic: value?.fontStyle === 'italic' || false,
                    }
                  }
                },
              ]
            : [];
        },
      },
      {
        label: "轴线",
        prop: "",
        type: "divider",
      },
      {
        label: "线宽",
        prop: "xAxis.axisLine.lineStyle.width",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 1,
      },
      {
        label: "颜色",
        prop: "xAxis.axisLine.lineStyle.color",
        type: "colorSelect",
        defaultValue: "#ccc",
        fieldProps: {
          gradient: false
        }
      },
      {
        label: "刻度",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "xAxis.axisTick.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示刻度", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["xAxis.axisTick.show"] = value?.length
            ? true
            : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        },
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["xAxis.axisTick.show"],
        children: (model) => {
          return model["xAxis.axisTick.show"].length
            ? [
                {
                  label: "刻度宽度",
                  prop: "xAxis.axisTick.lineStyle.width",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 5,
                },
                {
                  label: "刻度颜色",
                  prop: "xAxis.axisTick.lineStyle.color",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
              ]
            : [];
        },
      },
      {
        label: "标签",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "xAxis.axisLabel.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示标签", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["xAxis.axisLabel.show"] = value?.length
            ? true
            : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        },
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["xAxis.axisLabel.show"],
        children: (model) => {
          return model["xAxis.axisLabel.show"].length
            ? [
                {
                  label: "样式",
                  prop: "xAxis.axisLabel",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["xAxis.axisLabel.color"] = value?.color;
                    formatModel.value["xAxis.axisLabel.fontSize"] = value.size;
                    formatModel.value["xAxis.axisLabel.fontWeight"] = value.bold
                      ? "bold"
                      : "normal";
                    formatModel.value["xAxis.axisLabel.fontStyle"] =
                      value.italic ? "italic" : "normal";
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'xAxis.axisLabel.color', '#000000ff'),
                      size: get(model, 'xAxis.axisLabel.fontSize', 12),
                      bold: get(model, 'xAxis.axisLabel.fontWeight') === 'bold',
                      italic: get(model, 'xAxis.axisLabel.fontStyle') === 'italic',
                    }
                  }
                },
              ]
            : [];
        },
      },
    ],
  },
  /* Y 轴 */
  yAxis: {
    label: "Y 轴",
    prop: "yAxis",
    type: "group",
    children: [
      {
        label: " ",
        prop: "yAxis.showName",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示轴标题", value: true }],
        },
        defaultValue: [],
        format: (formatModel, value) => {
          if(value?.length) {
            formatModel.value["yAxis.showName"] = true;
            formatModel.value["yAxis.name"] = 'Y轴标题';
            formatModel.value["yAxis.nameGap"] = 25;
          }  else {
            formatModel.value["yAxis.showName"] = false;
            formatModel.value["yAxis.name"] = "";
            formatModel.value["yAxis.nameGap"] = 15;
          }
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        },
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["yAxis.showName"],
        children: (model) => {
          return model["yAxis.showName"].length
            ? [
                {
                  label: "标题内容",
                  prop: "yAxis.name",
                  type: "input",
                  defaultValue: "Y 轴标题",
                  format: (formatModel, value) => {
                    if (formatModel.value["yAxis.showName"]) {
                      formatModel.value["yAxis.name"] = value;
                      formatModel.value["yAxis.nameGap"] = 25;
                    } else {
                      formatModel.value["yAxis.name"] = "";
                      formatModel.value["yAxis.nameGap"] = 15;
                    }
                  },
                  valueToForm: (value) => {
                    return value || "Y 轴标题";
                  }
                },
                {
                  label: "标题位置",
                  prop: "yAxis.nameLocation",
                  type: "position",
                  defaultValue: "center",
                  format: (formatModel, value: "left" | "center" | "right") => {
                    const p = {
                      left: "start",
                      center: "middle",
                      right: "end",
                    };
                    formatModel.value["yAxis.nameLocation"] = value
                      ? p[value]
                      : "middle";
                  },
                  valueToForm: (value: "start" | "middle" | "end") => {
                    const p = {
                      start: "left",
                      middle: "center",
                      end: "right",
                    };
                    return p[value] || 'center ';
                  },
                },
                {
                  label: "标题样式",
                  prop: "yAxis.nameTextStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#FFFFFFFF",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["yAxis.nameTextStyle"] = {
                      color: value.color,
                      fontSize: value.size,
                      fontWeight: value.bold ? "bold" : "normal",
                      fontStyle: value.italic ? "italic" : "normal",
                    };
                  },
                  valueToForm: (value) => {
                    return {
                      color: value?.color || '#000000ff',
                      size: value?.fontSize || 12,
                      bold: value?.fontWeight === 'bold' || false,
                      italic: value?.fontStyle === 'italic' || false,
                    }
                  }
                },
              ]
            : [];
        },
      },
      {
        label: "轴线",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "yAxis.axisLine.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示轴线", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["yAxis.axisLine.show"] = value?.length
            ? true
            : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["yAxis.axisLine.show"],
        children: (model) => {
          return model["yAxis.axisLine.show"].length
            ? [
                {
                  label: "线宽",
                  prop: "yAxis.axisLine.lineStyle.width",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 1,
                },
                {
                  label: "颜色",
                  prop: "yAxis.axisLine.lineStyle.color",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
              ]
            : [];
        }
      },
      {
        label: "刻度",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "yAxis.axisTick.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示刻度", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["yAxis.axisTick.show"] = value?.length
            ? true
            : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["yAxis.axisTick.show"],
        children: (model) => {
          return model["yAxis.axisTick.show"].length
            ? [
                {
                  label: "刻度长度",
                  prop: "yAxis.axisTick.lineStyle.width",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 5,
                },
                {
                  label: "刻度颜色",
                  prop: "yAxis.axisTick.lineStyle.color",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
              ]
            : [];
        },
      },
      {
        label: "标签",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "yAxis.axisLabel.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "显示标签", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["yAxis.axisLabel.show"] = value?.length
            ? true
            : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["yAxis.axisLabel.show"],
        children: (model) => {
          return model["yAxis.axisLabel.show"].length
            ? [
                {
                  label: "样式",
                  prop: "yAxis.axisLabel",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["yAxis.axisLabel.color"] = value?.color;
                    formatModel.value["yAxis.axisLabel.fontSize"] = value.size;
                    formatModel.value["yAxis.axisLabel.fontWeight"] = value.bold
                      ? "bold"
                      : "normal";
                    formatModel.value["yAxis.axisLabel.fontStyle"] =
                      value.italic ? "italic" : "normal";
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'yAxis.axisLabel.color', '#000000ff'),
                      size: get(model, 'yAxis.axisLabel.fontSize', 12),
                      bold: get(model, 'yAxis.axisLabel.fontWeight') === 'bold',
                      italic: get(model, 'yAxis.axisLabel.fontStyle') === 'italic',
                    }
                  }
                },
                {
                  label: '旋转角度',
                  prop: "yAxis.axisLabel.rotate",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "°",
                    min: -90,
                    max: 90,
                    step: 1
                  },
                }
              ]
            : [];
        },
      },
    ],
  },
  /* 提示 */
  tooltip: {
    label: "提示",
    prop: "tooltip",
    type: "group",
    children: [
      {
        label: " ",
        prop: "tooltip.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "提示可见", value: true }],
        },
        defaultValue: [true],
        format: (formatModel, value) => {
          formatModel.value["tooltip.show"] = value?.length ? true : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["tooltip.show"],
        children: (model) => {
          return model["tooltip.show"].length
            ? [
                {
                  label: "文本",
                  prop: "tooltip.formatter",
                  type: "checkboxGroup",
                  fieldProps: {
                    options: [
                      { label: "分类名", value: "b" },
                      { label: "系列名", value: "a" },
                      { label: "数值", value: "c" },
                    ],
                  },
                  defaultValue: ["b"],
                  format: (formatModel, list) => {
                    formatModel.value["tooltip.formatter"] = list.map((item: any) => `{${item}}`).join(" ");
                  },
                  valueToForm: (_, model) => {
                    return get(model, 'tooltip.formatter')?.replace(/\{|\}/g, "")?.split(" ");
                  }
                },
                // {
                //   label: "格式化",
                //   prop: "tooltip.valueFormatter",
                //   type: "input",
                //   tip: "支持字符串模板和回调函数",
                //   defaultValue: "(value, dataIndex) => value",
                // },
                {
                  label: "样式",
                  prop: "tooltip.textStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["tooltip.textStyle"] = {
                      color: value.color,
                      fontSize: value.size,
                      fontWeight: value.bold ? "bold" : "normal",
                      fontStyle: value.italic ? "italic" : "normal",
                    };
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'tooltip.textStyle.color', '#000000ff'),
                      size: get(model, 'tooltip.textStyle.fontSize', 12),
                      bold: get(model, 'tooltip.textStyle.fontWeight') === 'bold',
                      italic: get(model, 'tooltip.textStyle.fontStyle') === 'italic',
                    }
                  }
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "tooltip.borderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 1,
                },
                {
                  label: "颜色",
                  prop: "tooltip.borderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
                {
                  label: "圆角",
                  prop: "tooltip.borderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 4,
                },
                {
                  label: "背景",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "填充",
                  prop: "tooltip.backgroundColor",
                  type: "backgroundSelect",
                  fieldProps: {
                    filterOptions: ["image"],
                  },
                  defaultValue: {
                    type: "color",
                    color: "#fff",
                  },
                  format: (formatModel, value) => {
                    formatModel.value["tooltip.backgroundColor"] = value?.type === 'color' ? value.color : 'none';
                  },
                  valueToForm: (value) => {
                    return !value || value === 'none' 
                    ? {
                      type: 'none'
                    } 
                    : {
                      type: "color",
                      color: value,
                    };
                  },
                },
                {
                  label: "阴影",
                  prop: "tooltip.extraCssText",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "开启", value: true },
                      { label: "关闭", value: false },
                    ],
                  },
                  defaultValue: false,
                  format: (formatModel, value) => {
                    formatModel.value["tooltip.extraCssText"] = value
                      ? "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
                      : "";
                  },
                  valueToForm: (_, model) => {
                    return get(model, 'tooltip.extraCssText') ? true : false;
                  }
                },
              ]
            : [];
        },
      },
    ],
  },
  /* 标签 */
  label: {
    label: "标签",
    prop: "label",
    type: "group",
    children: [
      {
        label: " ",
        prop: "label.show",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "标签可见", value: true }],
        },
        defaultValue: [],
        format: (formatModel, value) => {
          formatModel.value["label.show"] = value?.length ? true : false;
        },
        valueToForm: (value) => {
          return value ? [true] : [];
        }
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["label.show"],
        children: (model) => {
          return model["label.show"].length
            ? [
                {
                  label: "文本",
                  prop: "label.formatter",
                  type: "checkboxGroup",
                  fieldProps: {
                    options: [
                      { label: "分类名", value: "b" },
                      { label: "系列名", value: "a" },
                      { label: "数值", value: "c" },
                      // { label: "百分比", value: "percent" },
                    ],
                  },
                  defaultValue: ["a"],
                  format: (formatModel, value) => {
                    formatModel.value["label.formatter"] = `{${value}}`;
                  },
                  valueToForm: (_, model) => {
                    return get(model, 'label.formatter')?.replace(/\{|\}/g, "")?.split(" ");
                  }
                },
                {
                  label: "样式",
                  prop: "label.fontStyle",
                  type: "fontStyle",
                  defaultValue: {
                    color: "#000000ff",
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                  format: (formatModel, value) => {
                    formatModel.value["label.color"] = value?.color;
                    formatModel.value["label.fontSize"] = value.size;
                    formatModel.value["label.fontWeight"] = value.bold
                      ? "bold"
                      : "normal";
                    formatModel.value["label.fontStyle"] = value.italic
                      ? "italic"
                      : "normal";
                  },
                  valueToForm: (_, model) => {
                    return {
                      color: get(model, 'label.color', '#000000ff'),
                      size: get(model, 'label.fontSize', 12),
                      bold: get(model, 'label.fontWeight') === 'bold',
                      italic: get(model, 'label.fontStyle') === 'italic',
                    }
                  }
                },
                {
                  label: "布局",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "位置",
                  prop: "label.position",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "顶部", value: "top" },
                      { label: "左侧", value: "left" },
                      { label: "右侧", value: "right" },
                      { label: "底部", value: "bottom" },
                      { label: "内部", value: "inside" },
                      { label: "内部左侧", value: "insideLeft" },
                      { label: "内部右侧", value: "insideRight" },
                      { label: "内部顶部", value: "insideTop" },
                      { label: "内部底部", value: "insideBottom" },
                    ],
                  },
                  defaultValue: "top",
                },
                {
                  label: "文本方向",
                  prop: "label.rotate",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "水平", value: "horizontal" },
                      { label: "垂直", value: "vertical" },
                    ],
                  },
                  defaultValue: "horizontal",
                  format: (formatModel, value) => {
                    formatModel.value["label.rotate"] =
                      value === "horizontal" ? 0 : 90;
                  },
                  valueToForm: (value) => {
                    return value === 0 ? "horizontal" : "vertical";
                  },
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "label.borderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "颜色",
                  prop: "label.borderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                  fieldProps: {
                    gradient: false
                  }
                },
                {
                  label: "圆角",
                  prop: "label.borderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
              ]
            : [];
        },
      },
    ],
  },
};