shalu-dashboard-ui/components/charts/config/chartFormItemsMap.ts

import { IFormItem } from "../../cusForm";
/**
 * 用于快速配置图表配置项 
 * 
 * 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] : [];
        }
      },
      {
        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: {
                    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",
                    };
                  }
                },
                {
                  label: "背景",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "填充",
                  prop: "title.backgroundColor",
                  type: "backgroundSelect",
                  fieldProps: {
                    filterOptions: ["image"],
                  },
                  defaultValue: {
                    type: "color",
                    color: "#fff",
                  },
                  format: (formatModel, value) => {
                    formatModel.value['title.backgroundColor'] = 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] : [];
        }
      },
      {
        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",
                },
                {
                  label: "样式",
                  prop: "legend.textStyle",
                  type: "fontStyle",
                  defaultValue: {
                    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",
                    };
                  }
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "legend.borderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "颜色",
                  prop: "legend.borderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                },
                {
                  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.color;
                  }
                },
                {
                  label: "阴影",
                  prop: "legend.shadowBlur",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "开启", value: true },
                      { label: "关闭", value: false },
                    ],
                  },
                  defaultValue: false,
                  format: (formatModel, value) => {
                    formatModel.value['legend.shadowBlur'] = value ? 10 : 0;
                    formatModel.value['legend.shadowColor'] = "#000";
                  }
                },
              ]
            : [];
        },
      },
    ],
  },
  /* 系列 */
  series: {
    label: "系列",
    prop: "series.color",
    type: "group",
    children: [
      {
        label: "配色",
        prop: "colorScheme",
        type: "colorScheme",
        defaultValue: "",
      },
    ],
  },
  /* 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) => {
          formatModel.value['xAxis.showName'] = value.length ? [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['grid.bottom'] = 40;
                } else {
                  formatModel.value['xAxis.name'] = "";
                  formatModel.value['grid.bottom'] = 20;
                }
              }
            },
            {
              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';
              }
            },
            {
              label: "标题样式",
              prop: "xAxis.nameTextStyle",
              type: "fontStyle",
              defaultValue: {
                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",
                };
              }
            },
          ] : []
        }
      },
      {
        label: "轴线",
        prop: "",
        type: "divider",
      },
      {
        label: "线宽",
        prop: "xAxis.axisLine.width",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 1,
      },
      {
        label: "颜色",
        prop: "xAxis.axisLine.color",
        type: "colorSelect",
        defaultValue: "#ccc",
      },
      {
        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;
        }
      },
      {
        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",
            },
          ] : []
        }
      },
      {
        label: "标签",
        prop: "",
        type: "divider",
      },
      {
        label: "颜色",
        prop: "xAxis.axisLabel.color",
        type: "colorSelect",
        defaultValue: "#000",
      },
      {
        label: "样式",
        prop: "xAxis.axisLabel",
        type: "fontStyle",
        defaultValue: {
          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"; 
        }
      },
    ],
  },
  /* Y 轴 */
  yAxis: {
    label: "Y 轴",
    prop: "yAxis",
    type: "group",
    children: [
      {
        label: " ",
        prop: "yAliasShowTitle",
        type: "checkboxGroup",
        fieldProps: {
          options: [
            { label: "显示轴标题", value: true },
          ],
        },
        defaultValue: [],
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["yAliasShowTitle"],
        children: ({ yAliasShowTitle }) => {
          return yAliasShowTitle.length
            ? [
                {
                  label: "标题内容",
                  prop: "yAliasTitle",
                  type: "input",
                  defaultValue: "Y 轴标题",
                },
                {
                  label: "标题位置",
                  prop: "yAliasPosition",
                  type: "position",
                  defaultValue: "center",
                },
                {
                  label: "标题样式",
                  prop: "yAliasStyle",
                  type: "fontStyle",
                  defaultValue: {
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                },
              ]
            : [];
        },
      },
      {
        label: "轴线",
        prop: "",
        type: "divider",
      },
      {
        label: "线宽",
        prop: "yAliasLineWidth",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 1,
      },
      {
        label: "颜色",
        prop: "yAliasLineColor",
        type: "colorSelect",
        defaultValue: "#ccc",
      },
      {
        label: "刻度",
        prop: "",
        type: "divider",
      },
      {
        label: " ",
        prop: "yAliasTickShow",
        type: "checkboxGroup",
        fieldProps: {
          options: [
            { label: "显示刻度", value: true },
          ],
        },
        defaultValue: [true],
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ['yAliasTickShow'],
        children: ({ yAliasTickShow }) => {
          return yAliasTickShow.length ? [
            {
              label: "刻度长度",
              prop: "yAliasTickLength",
              type: "inputNumber",
              fieldProps: {
                addonAfter: "px",
              },
              defaultValue: 5,
            },
            {
              label: "刻度颜色",
              prop: "yAliasTickColor",
              type: "colorSelect",
              defaultValue: "#ccc",
            },
          ] : []
        }
      },
      {
        label: "标签",
        prop: "",
        type: "divider",
      },
      {
        label: "颜色",
        prop: "yAliasLabelColor",
        type: "colorSelect",
        defaultValue: "#000",
      },
      {
        label: "样式",
        prop: "yAliasLabelStyle",
        type: "fontStyle",
        defaultValue: {
          size: 12,
          bold: false,
          italic: false
        },
      },
    ],
  },
  /* 提示 */
  tooltip: {
    label: "提示",
    prop: "tooltip",
    type: "group",
    children: [
      {
        label: " ",
        prop: "showTooltip",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "提示可见", value: true }],
        },
        defaultValue: [true],
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["showTooltip"],
        children: ({ showTooltip }) => {
          return showTooltip.length
            ? [
                {
                  label: "文本",
                  prop: "tooltipValueType",
                  type: "checkboxGroup",
                  fieldProps: {
                    options: [
                      { label: "分类名", value: "category" },
                      { label: "系列名", value: "serie" },
                      { label: "数值", value: "value" },
                      { label: "百分比", value: "percent" },
                    ],
                  },
                  defaultValue: ["value"],
                },
                {
                  label: "格式化",
                  prop: "tooltipFormatter",
                  type: "input",
                  tip: "支持字符串模板和回调函数",
                  defaultValue: "{value}",
                },
                {
                  label: "样式",
                  prop: "tooltipStyle",
                  type: "fontStyle",
                  defaultValue: {
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "tooltipBorderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 1,
                },
                {
                  label: "颜色",
                  prop: "tooltipBorderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                },
                {
                  label: "圆角",
                  prop: "tooltipBorderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "背景",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "填充",
                  prop: "tooltipBackground",
                  type: "backgroundSelect",
                  fieldProps: {
                    filterOptions: ["image"],
                  },
                  defaultValue: {
                    type: "color",
                    color: "#fff",
                  },
                },
                {
                  label: "背景透明度",
                  prop: "tooltipBackgroudOpacity",
                  type: "slider",
                  defaultValue: 100,
                },
                {
                  label: "阴影",
                  prop: "tooltipShadow",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "开启", value: true },
                      { label: "关闭", value: false },
                    ],
                  },
                  defaultValue: false,
                },
              ]
            : [];
        },
      },
    ],
  },
  /* 背景 */
  background: {
    label: "背景",
    prop: "background",
    type: "group",
    children: [
      {
        label: "边框",
        prop: "",
        type: "divider",
      },
      {
        label: "线宽",
        prop: "backgroundBorderWidth",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 0,
      },
      {
        label: "颜色",
        prop: "backgroundBorderColor",
        type: "colorSelect",
        defaultValue: "#ccc",
      },
      {
        label: "圆角",
        prop: "backgroundBorderRadius",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 0,
      },
      {
        label: "背景",
        prop: "",
        type: "divider",
      },
      {
        label: "填充",
        prop: "backgroundBackground",
        type: "backgroundSelect",
        fieldProps: {
          filterOptions: ["image"],
        },
        defaultValue: {
          type: "color",
          color: "#fff",
        },
      },
      {
        label: "背景透明度",
        prop: "backgroundBackgroudOpacity",
        type: "slider",
        defaultValue: 100,
      },
      {
        label: "阴影",
        prop: "backgroundShadow",
        type: "radioGroup",
        fieldProps: {
          options: [
            { label: "开启", value: true },
            { label: "关闭", value: false },
          ],
        },
        defaultValue: false,
      },
    ],
  },
};

/* 标签配置在每个系列下，获取标签配置 */
export const getLabelFormItems = () => {
  return {
    label: "标签",
    prop: "label",
    type: "group",
    children: [
      {
        label: " ",
        prop: "showLabel",
        type: "checkboxGroup",
        fieldProps: {
          options: [{ label: "标签可见", value: true }],
        },
        defaultValue: [],
      },
      {
        label: "",
        prop: "",
        type: "dependency",
        name: ["showLabel"],
        children: ({ showLabel }) => {
          return showLabel.length
            ? [
                {
                  label: "文本",
                  prop: "labelValueType",
                  type: "checkboxGroup",
                  fieldProps: {
                    options: [
                      { label: "分类名", value: "name" },
                      { label: "系列名", value: "seriesType" },
                      { label: "数值", value: "value" },
                      // { label: "百分比", value: "percent" },
                    ],
                  },
                  defaultValue: ["value"],
                },
                {
                  label: "颜色",
                  prop: "labelColor",
                  type: "colorSelect",
                  defaultValue: "#000",
                },
                {
                  label: "样式",
                  prop: "labelStyle",
                  type: "fontStyle",
                  defaultValue: {
                    size: 12,
                    bold: false,
                    italic: false,
                  },
                },
                {
                  label: "布局",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "位置",
                  prop: "labelPosition",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "内部", value: "insideTop" },
                      { label: "外部", value: "top" },
                      { label: "中间", value: "inside" },
                    ],
                  },
                  defaultValue: "insideTop",
                },
                {
                  label: "文本方向",
                  prop: "labelDirection",
                  type: "radioGroup",
                  fieldProps: {
                    options: [
                      { label: "水平", value: "horizontal" },
                      { label: "垂直", value: "vertical" },
                    ],
                  },
                  defaultValue: "horizontal",
                },
                {
                  label: "边框",
                  prop: "",
                  type: "divider",
                },
                {
                  label: "线宽",
                  prop: "labelBorderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
                {
                  label: "颜色",
                  prop: "labelBorderColor",
                  type: "colorSelect",
                  defaultValue: "#ccc",
                },
                {
                  label: "圆角",
                  prop: "labelBorderRadius",
                  type: "inputNumber",
                  fieldProps: {
                    addonAfter: "px",
                  },
                  defaultValue: 0,
                },
              ]
            : [];
        },
      },
    ],
  }
}