@easyv/config 1.0.43 → 1.0.47

package/src/legend.js

@@ -1,954 +1,968 @@
-const { translate: translateConfig, font, show: showConfig, showRule } = require('.');
-const defaultFont = font({
-  fontFamily: 'Mircosoft Yahei',
-  fontSize: 12,
-  color: 'rgba(230, 247, 255, 1)',
-  bold: false,
-  italic: false,
-  letterSpacing: 0,
-});
-
-const defaultLegend = {
-  show: true,
-  font: defaultFont,
-  iconSize: {
-    width: 10,
-    height: 10,
-  },
-  iconGap: 5,
-  layout: {
-    gridTemplateColumns: 3,
-    gridGap: {
-      gridRowGap: 0,
-      gridColumnGap: 30,
-    },
-    alignment: 'center bottom',
-    translate: { x: 0, y: 0 },
-  },
-  interactive: true,
-  unselect: {
-    opacity: 30,
-  },
-};
-export default ({
-  show = defaultLegend.show,
-  font = defaultLegend.font,
-  iconSize: {
-    width = defaultLegend.iconSize.width,
-    height = defaultLegend.iconSize.height,
-  } = defaultLegend.iconSize,
-  iconGap = defaultLegend.iconGap,
-  layout: {
-    gridTemplateColumns = defaultLegend.layout.gridTemplateColumns,
-    gridGap: {
-      gridRowGap = defaultLegend.layout.gridGap.gridRowGap,
-      gridColumnGap = defaultLegend.layout.gridGap.gridColumnGap,
-    } = defaultLegend.layout.gridGap,
-    alignment = defaultLegend.layout.alignment,
-    translate: {
-      x = defaultLegend.layout.translate.x,
-      y = defaultLegend.layout.translate.y,
-    } = defaultLegend.layout.translate,
-  } = defaultLegend.layout,
-  interactive = defaultLegend.interactive,
-  unselect: {
-    opacity = defaultLegend.unselect.opacity,
-  } = defaultLegend.unselect,
-} = defaultLegend) => ({
-  name: 'legend',
-  displayName: '图例',
-  value: [
-    showConfig(show),
-    {
-      rule: [['show', '$eq', true]],
-      name: 'font',
-      displayName: '文本样式',
-      value: font,
-      type: 'textStyle',
-    },
-    {
-      name: 'iconSize',
-      displayName: '图标尺寸',
-      value: [
-        {
-          name: 'width',
-          displayName: '宽度',
-          value: width,
-          config: {
-            span: 12,
-            suffix: 'px',
-          },
-        },
-        {
-          name: 'height',
-          displayName: '高度',
-          value: height,
-          config: {
-            span: 12,
-            suffix: 'px',
-          },
-        },
-      ],
-      type: 'group',
-    },
-    {
-      name: 'iconGap',
-      displayName: '间距',
-      value: iconGap,
-      config: {
-        suffix: 'px',
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'layout',
-      displayName: '布局',
-      value: [
-        {
-          name: 'gridTemplateColumns',
-          displayName: '列数',
-          value: gridTemplateColumns,
-          type: 'number',
-        },
-        {
-          name: 'gridGap',
-          displayName: '间距',
-          value: [
-            {
-              name: 'gridRowGap',
-              displayName: '行距',
-              value: gridRowGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-            {
-              name: 'gridColumnGap',
-              displayName: '列距',
-              value: gridColumnGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-          ],
-          type: 'group',
-        },
-        {
-          type: 'grid',
-          name: 'alignment',
-          displayName: '位置',
-          value: alignment,
-          config: {
-            options: [
-              'left top',
-              'center top',
-              'right top',
-              'center left',
-              '',
-              'center right',
-              'left bottom',
-              'center bottom',
-              'right bottom',
-            ],
-          },
-        },
-        {
-          ...translateConfig(x, y),
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'interactive',
-      displayName: '点击交互',
-      value: interactive,
-      type: 'boolean',
-    },
-    {
-      rule: [
-        ['show', '$eq', true],
-        ['interactive', '$eq', true],
-      ],
-      name: 'unselect',
-      displayName: '未选中样式',
-      value: [
-        {
-          name: 'opacity',
-          displayName: '透明度',
-          value: opacity,
-          type: 'range',
-          config: {
-            min: 0,
-            max: 100,
-            step: 1,
-            suffix: '%',
-          },
-        },
-      ],
-    },
-  ].filter((item) => !!item),
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultLegendOfRose = {
-  show: true,
-  font: defaultFont,
-  iconSize: {
-    width: 10,
-    height: 10,
-  },
-  iconGap: 5,
-  layout: {
-    gridTemplateColumns: 3,
-    gridGap: {
-      gridRowGap: 0,
-      gridColumnGap: 30,
-    },
-    alignment: 'center bottom',
-    translate: { x: 0, y: 0 },
-  }
-}
-export const legendOfRose = ({
-  show = defaultLegendOfRose.show,
-  font = defaultLegendOfRose.font,
-  iconSize: {
-    width = defaultLegendOfRose.iconSize.width,
-    height = defaultLegendOfRose.iconSize.height,
-  } = defaultLegendOfRose.iconSize,
-  iconGap = defaultLegendOfRose.iconGap,
-  layout: {
-    gridTemplateColumns = defaultLegendOfRose.layout.gridTemplateColumns,
-    gridGap: {
-      gridRowGap = defaultLegendOfRose.layout.gridGap.gridRowGap,
-      gridColumnGap = defaultLegendOfRose.layout.gridGap.gridColumnGap,
-    } = defaultLegendOfRose.layout.gridGap,
-    alignment = defaultLegendOfRose.layout.alignment,
-    translate: {
-      x = defaultLegendOfRose.layout.translate.x,
-      y = defaultLegendOfRose.layout.translate.y,
-    } = defaultLegendOfRose.layout.translate,
-  } = defaultLegendOfRose.layout
-} = defaultLegendOfRose)=>({
-  name: 'legend',
-  displayName: '图例',
-  value: [
-    showConfig(show),
-    {
-      rule: [['show', '$eq', true]],
-      name: 'font',
-      displayName: '文本样式',
-      value: font,
-      type: 'textStyle',
-    },
-    {
-      name: 'iconSize',
-      displayName: '图标尺寸',
-      value: [
-        {
-          name: 'width',
-          displayName: '宽度',
-          value: width,
-          config: {
-            span: 12,
-            suffix: 'px',
-          },
-        },
-        {
-          name: 'height',
-          displayName: '高度',
-          value: height,
-          config: {
-            span: 12,
-            suffix: 'px',
-          },
-        },
-      ],
-      type: 'group',
-    },
-    {
-      name: 'iconGap',
-      displayName: '间距',
-      value: iconGap,
-      config: {
-        suffix: 'px',
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'layout',
-      displayName: '布局',
-      value: [
-        {
-          name: 'gridTemplateColumns',
-          displayName: '列数',
-          value: gridTemplateColumns,
-          type: 'number',
-        },
-        {
-          name: 'gridGap',
-          displayName: '间距',
-          value: [
-            {
-              name: 'gridRowGap',
-              displayName: '行距',
-              value: gridRowGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-            {
-              name: 'gridColumnGap',
-              displayName: '列距',
-              value: gridColumnGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-          ],
-          type: 'group',
-        },
-        {
-          type: 'grid',
-          name: 'alignment',
-          displayName: '位置',
-          value: alignment,
-          config: {
-            options: [
-              'left top',
-              'center top',
-              'right top',
-              'center left',
-              '',
-              'center right',
-              'left bottom',
-              'center bottom',
-              'right bottom',
-            ],
-          },
-        },
-        {
-          ...translateConfig(x, y),
-        },
-      ],
-    }
-  ],
-  config: {
-    defaultOpen: true,
-  },
-})
-
-const defaultLegendOfPie = {
-  show: true,
-  order: '',
-  iconSize: {
-    width: 10,
-    height: 10,
-  },
-  iconGap: 5,
-  name: { show: true, font: defaultFont },
-  percent: {
-    show: true,
-    precision: 0,
-    sameColor: false,
-    gap: 0,
-    font: defaultFont,
-  },
-  value: {
-    show: true,
-    sameColor: false,
-    gap: 0,
-    font: defaultFont,
-    suffix: {
-      show: true,
-      text: '',
-      fontSize: 12,
-      translate: { x: 0, y: 0 },
-    },
-  },
-  layout: {
-    gridTemplateColumns: 1,
-    gridGap: { gridRowGap: 10, gridColumnGap: 10 },
-    alignment: 'center right',
-    translate: { x: 0, y: 0 },
-  },
-};
-export const legendOfPie = ({
-  show = defaultLegendOfPie.show,
-  order = defaultLegendOfPie.order,
-  iconSize: {
-    width = defaultLegendOfPie.iconSize.width,
-    height = defaultLegendOfPie.iconSize.height,
-  } = defaultLegendOfPie.iconSize,
-  iconGap = defaultLegendOfPie.iconGap,
-  name: {
-    show: showName = defaultLegendOfPie.name.show,
-    font: nameFont = defaultLegendOfPie.name.font,
-  } = defaultLegendOfPie.name,
-  percent: {
-    show: showPercent = defaultLegendOfPie.percent.show,
-    precision = defaultLegendOfPie.percent.precision,
-    sameColor: percentSameColor = defaultLegendOfPie.percent.sameColor,
-    gap: percentGap = defaultLegendOfPie.percent.gap,
-    font: percentFont = defaultLegendOfPie.percent.font,
-  } = defaultLegendOfPie.percent,
-  value: {
-    show: showValue = defaultLegendOfPie.value.show,
-    sameColor: valueSameColor = defaultLegendOfPie.value.sameColor,
-    gap: valueGap = defaultLegendOfPie.value.gap,
-    font: valueFont = defaultLegendOfPie.value.font,
-    suffix: {
-      show: showSuffix = defaultLegendOfPie.value.suffix.show,
-      text = defaultLegendOfPie.value.suffix.text,
-      fontSize = defaultLegendOfPie.value.suffix.fontSize,
-      translate: {
-        x: suffixTranslateX = defaultLegendOfPie.value.suffix.translate.x,
-        y: suffixTranslateY = defaultLegendOfPie.value.suffix.translate.y,
-      } = defaultLegendOfPie.value.suffix.translate,
-    } = defaultLegendOfPie.value.suffix,
-  } = defaultLegendOfPie.value,
-  layout: {
-    gridTemplateColumns = defaultLegendOfPie.layout.gridTemplateColumns,
-    gridGap: {
-      gridRowGap = defaultLegendOfPie.layout.gridGap.gridRowGap,
-      gridColumnGap = defaultLegendOfPie.layout.gridGap.gridColumnGap,
-    } = defaultLegendOfPie.layout.gridGap,
-    alignment = defaultLegendOfPie.layout.alignment,
-    translate: {
-      x = defaultLegendOfPie.layout.translate.x,
-      y = defaultLegendOfPie.layout.translate.y,
-    } = defaultLegendOfPie.layout.translate,
-  } = defaultLegendOfPie.layout,
-} = defaultLegendOfPie) => ({
-  name: 'legend',
-  displayName: '图例',
-  value: [
-    showConfig(show),
-    {
-      ...showRule(),
-      name: 'order',
-      displayName: '顺序',
-      value: order,
-      type: 'select',
-      config: {
-        options: [
-          { name: '数据返回顺序', value: '' },
-          { name: '从大到小', value: 'desc' },
-          { name: '从小到大', value: 'asc' },
-        ],
-      },
-    },
-    {
-      ...showRule(),
-      name: 'iconSize',
-      displayName: '图标尺寸',
-      value: [
-        {
-          name: 'width',
-          displayName: '宽度',
-          value: width,
-          config: {
-            span: 12,
-          },
-        },
-        {
-          name: 'height',
-          displayName: '高度',
-          value: height,
-          config: {
-            span: 12,
-          },
-        },
-      ],
-      type: 'group',
-    },
-    {
-      ...showRule(),
-      name: 'iconGap',
-      displayName: '间距',
-      value: iconGap,
-      config: {
-        suffix: 'px',
-      },
-    },
-    {
-      ...showRule(),
-      name: 'name',
-      displayName: '类目',
-      value: [
-        showConfig(showName),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: nameFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      ...showRule(),
-      name: 'percent',
-      displayName: '占比值',
-      value: [
-        showConfig(showPercent),
-        {
-          ...showRule(),
-          name: 'precision',
-          displayName: '小数位数',
-          value: precision,
-          type: 'number',
-          config: {
-            min: 0,
-          },
-        },
-        {
-          ...showRule(),
-          name: 'gap',
-          displayName: '间距',
-          value: percentGap,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-        {
-          ...showRule(),
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: percentSameColor,
-          type: 'boolean',
-        },
-        {
-          ...showRule(),
-          name: 'font',
-          displayName: '文本样式',
-          value: percentFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      ...showRule(),
-      name: 'value',
-      displayName: '真实值',
-      value: [
-        showConfig(showValue),
-        {
-          ...showRule(),
-          name: 'suffix',
-          displayName: '后缀',
-          value: [
-            {
-              name: 'show',
-              displayName: '显示',
-              value: showSuffix,
-              type: 'boolean',
-            },
-            {
-              ...showRule(),
-              name: 'text',
-              displayName: '内容',
-              value: text,
-              type: 'input',
-            },
-            {
-              ...showRule(),
-              name: 'fontSize',
-              displayName: '字号',
-              value: fontSize,
-              type: 'number',
-              config: {
-                suffix: 'px',
-              },
-            },
-            {
-              ...showRule(),
-              ...translateConfig(suffixTranslateX, suffixTranslateY),
-            },
-          ],
-          config: {
-            defaultOpen: true,
-          },
-        },
-        {
-          ...showRule(),
-          name: 'gap',
-          displayName: '间距',
-          value: valueGap,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-        {
-          ...showRule(),
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: valueSameColor,
-          type: 'boolean',
-        },
-        {
-          ...showRule(),
-          name: 'font',
-          displayName: '文本样式',
-          value: valueFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      ...showRule(),
-      name: 'layout',
-      displayName: '布局',
-      value: [
-        {
-          name: 'gridTemplateColumns',
-          displayName: '列数',
-          value: gridTemplateColumns,
-          type: 'number',
-        },
-        {
-          name: 'gridGap',
-          displayName: '间距',
-          value: [
-            {
-              name: 'gridRowGap',
-              displayName: '行距',
-              value: gridRowGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-            {
-              name: 'gridColumnGap',
-              displayName: '列距',
-              value: gridColumnGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-          ],
-          type: 'group',
-        },
-        {
-          type: 'grid',
-          name: 'alignment',
-          displayName: '位置',
-          value: alignment,
-          config: {
-            options: [
-              'left top',
-              'center top',
-              'right top',
-              'center left',
-              '',
-              'center right',
-              'left bottom',
-              'center bottom',
-              'right bottom',
-            ],
-          },
-        },
-        translateConfig(x, y),
-      ],
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultLegendOfPieNoIcon={
-  show: true,
-  order: '',
-  name: { show: true, font: defaultFont },
-  percent: {
-    show: true,
-    precision: 0,
-    sameColor: false,
-    gap: 0,
-    font: defaultFont,
-  },
-  value: {
-    show: true,
-    sameColor: false,
-    gap: 0,
-    font: defaultFont,
-    suffix: {
-      show: true,
-      text: '',
-      fontSize: 12,
-      translate: { x: 0, y: 0 },
-    },
-  },
-  layout: {
-    gridTemplateColumns: 1,
-    gridGap: { gridRowGap: 10, gridColumnGap: 10 },
-    alignment: 'center right',
-    translate: { x: 0, y: 0 },
-  },
-};
-export const legendOfPieNoIcon = ({
-  show = defaultLegendOfPieNoIcon.show,
-  order = defaultLegendOfPieNoIcon.order,
-  name: {
-    show: showName = defaultLegendOfPieNoIcon.name.show,
-    font: nameFont = defaultLegendOfPieNoIcon.name.font,
-  } = defaultLegendOfPieNoIcon.name,
-  percent: {
-    show: showPercent = defaultLegendOfPieNoIcon.percent.show,
-    precision = defaultLegendOfPieNoIcon.percent.precision,
-    sameColor: percentSameColor = defaultLegendOfPieNoIcon.percent.sameColor,
-    gap: percentGap = defaultLegendOfPieNoIcon.percent.gap,
-    font: percentFont = defaultLegendOfPieNoIcon.percent.font,
-  } = defaultLegendOfPieNoIcon.percent,
-  value: {
-    show: showValue = defaultLegendOfPieNoIcon.value.show,
-    sameColor: valueSameColor = defaultLegendOfPieNoIcon.value.sameColor,
-    gap: valueGap = defaultLegendOfPieNoIcon.value.gap,
-    font: valueFont = defaultLegendOfPieNoIcon.value.font,
-    suffix: {
-      show: showSuffix = defaultLegendOfPieNoIcon.value.suffix.show,
-      text = defaultLegendOfPieNoIcon.value.suffix.text,
-      fontSize = defaultLegendOfPieNoIcon.value.suffix.fontSize,
-      translate: {
-        x: suffixTranslateX = defaultLegendOfPieNoIcon.value.suffix.translate.x,
-        y: suffixTranslateY = defaultLegendOfPieNoIcon.value.suffix.translate.y,
-      } = defaultLegendOfPieNoIcon.value.suffix.translate,
-    } = defaultLegendOfPieNoIcon.value.suffix,
-  } = defaultLegendOfPieNoIcon.value,
-  layout: {
-    gridTemplateColumns = defaultLegendOfPieNoIcon.layout.gridTemplateColumns,
-    gridGap: {
-      gridRowGap = defaultLegendOfPieNoIcon.layout.gridGap.gridRowGap,
-      gridColumnGap = defaultLegendOfPieNoIcon.layout.gridGap.gridColumnGap,
-    } = defaultLegendOfPieNoIcon.layout.gridGap,
-    alignment = defaultLegendOfPieNoIcon.layout.alignment,
-    translate: {
-      x = defaultLegendOfPieNoIcon.layout.translate.x,
-      y = defaultLegendOfPieNoIcon.layout.translate.y,
-    } = defaultLegendOfPieNoIcon.layout.translate,
-  } = defaultLegendOfPieNoIcon.layout,
-} = defaultLegendOfPieNoIcon) => ({
-  name: 'legend',
-  displayName: '图例',
-  value: [
-    showConfig(show),
-    {
-      name: 'order',
-      displayName: '顺序',
-      value: order,
-      type: 'select',
-      config: {
-        options: [
-          { name: '数据返回顺序', value: '' },
-          { name: '从大到小', value: 'desc' },
-          { name: '从小到大', value: 'asc' },
-        ],
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'name',
-      displayName: '类目',
-      value: [
-        showConfig(showName),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: nameFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'percent',
-      displayName: '占比值',
-      value: [
-        showConfig(showPercent),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'precision',
-          displayName: '小数位数',
-          value: precision,
-          type: 'number',
-          config: {
-            min: 0,
-          },
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'gap',
-          displayName: '间距',
-          value: percentGap,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: percentSameColor,
-          type: 'boolean',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: percentFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'value',
-      displayName: '真实值',
-      value: [
-        showConfig(showValue),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'suffix',
-          displayName: '后缀',
-          value: [
-            {
-              name: 'show',
-              displayName: '显示',
-              value: showSuffix,
-              type: 'boolean',
-            },
-            {
-              rule: [['show', '$eq', true]],
-              name: 'text',
-              displayName: '内容',
-              value: text,
-              type: 'input',
-            },
-            {
-              rule: [['show', '$eq', true]],
-              name: 'fontSize',
-              displayName: '字号',
-              value: fontSize,
-              type: 'number',
-              config: {
-                suffix: 'px',
-              },
-            },
-            {
-              rule: [['show', '$eq', true]],
-              ...translateConfig(suffixTranslateX, suffixTranslateY),
-            },
-          ],
-          config: {
-            defaultOpen: true,
-          },
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'gap',
-          displayName: '间距',
-          value: valueGap,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: valueSameColor,
-          type: 'boolean',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: valueFont,
-          type: 'textStyle',
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'layout',
-      displayName: '布局',
-      value: [
-        {
-          name: 'gridTemplateColumns',
-          displayName: '列数',
-          value: gridTemplateColumns,
-          type: 'number',
-        },
-        {
-          name: 'gridGap',
-          displayName: '间距',
-          value: [
-            {
-              name: 'gridRowGap',
-              displayName: '行距',
-              value: gridRowGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-            {
-              name: 'gridColumnGap',
-              displayName: '列距',
-              value: gridColumnGap,
-              type: 'number',
-              config: {
-                span: 12,
-                suffix: 'px',
-              },
-            },
-          ],
-          type: 'group',
-        },
-        {
-          type: 'grid',
-          name: 'alignment',
-          displayName: '位置',
-          value: alignment,
-          config: {
-            options: [
-              'left top',
-              'center top',
-              'right top',
-              'center left',
-              '',
-              'center right',
-              'left bottom',
-              'center bottom',
-              'right bottom',
-            ],
-          },
-        },
-        translateConfig(x, y),
-      ],
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
+const { translate: translateConfig, font, show: showConfig, showRule } = require('.');
+const defaultFont = font({
+  fontFamily: 'Mircosoft Yahei',
+  fontSize: 12,
+  color: 'rgba(230, 247, 255, 1)',
+  bold: false,
+  italic: false,
+  letterSpacing: 0,
+});
+
+const defaultLegend = {
+  show: true,
+  font: defaultFont,
+  iconSize: {
+    width: 10,
+    height: 10,
+  },
+  iconGap: 5,
+  layout: {
+    gridTemplateColumns: 3,
+    gridGap: {
+      gridRowGap: 0,
+      gridColumnGap: 30,
+    },
+    alignment: 'center bottom',
+    translate: { x: 0, y: 0 },
+  },
+  interactive: true,
+  unselect: {
+    opacity: 30,
+  },
+};
+export default ({
+  show = defaultLegend.show,
+  font = defaultLegend.font,
+  iconSize: {
+    width = defaultLegend.iconSize.width,
+    height = defaultLegend.iconSize.height,
+  } = defaultLegend.iconSize,
+  iconGap = defaultLegend.iconGap,
+  layout: {
+    gridTemplateColumns = defaultLegend.layout.gridTemplateColumns,
+    gridGap: {
+      gridRowGap = defaultLegend.layout.gridGap.gridRowGap,
+      gridColumnGap = defaultLegend.layout.gridGap.gridColumnGap,
+    } = defaultLegend.layout.gridGap,
+    alignment = defaultLegend.layout.alignment,
+    translate: {
+      x = defaultLegend.layout.translate.x,
+      y = defaultLegend.layout.translate.y,
+    } = defaultLegend.layout.translate,
+  } = defaultLegend.layout,
+  interactive = defaultLegend.interactive,
+  unselect: {
+    opacity = defaultLegend.unselect.opacity,
+  } = defaultLegend.unselect,
+} = defaultLegend) => ({
+  name: 'legend',
+  displayName: '图例',
+  value: [
+    showConfig(show),
+    {
+      rule: [['show', '$eq', true]],
+      name: 'font',
+      displayName: '文本样式',
+      value: font,
+      type: 'textStyle',
+    },
+    {
+      name: 'iconSize',
+      displayName: '图标尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: width,
+          config: {
+            span: 12,
+            suffix: 'px',
+          },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: height,
+          config: {
+            span: 12,
+            suffix: 'px',
+          },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      name: 'iconGap',
+      displayName: '间距',
+      value: iconGap,
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'layout',
+      displayName: '布局',
+      value: [
+        {
+          name: 'gridTemplateColumns',
+          displayName: '列数',
+          value: gridTemplateColumns,
+          type: 'number',
+        },
+        {
+          name: 'gridGap',
+          displayName: '间距',
+          value: [
+            {
+              name: 'gridRowGap',
+              displayName: '行距',
+              value: gridRowGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+            {
+              name: 'gridColumnGap',
+              displayName: '列距',
+              value: gridColumnGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+          ],
+          type: 'group',
+        },
+        {
+          type: 'grid',
+          name: 'alignment',
+          displayName: '位置',
+          value: alignment,
+          config: {
+            options: [
+              'left top',
+              'center top',
+              'right top',
+              'center left',
+              '',
+              'center right',
+              'left bottom',
+              'center bottom',
+              'right bottom',
+            ],
+          },
+        },
+        {
+          ...translateConfig(x, y),
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'interactive',
+      displayName: '点击交互',
+      value: interactive,
+      type: 'boolean',
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['interactive', '$eq', true],
+      ],
+      name: 'unselect',
+      displayName: '未选中样式',
+      value: [
+        {
+          name: 'opacity',
+          displayName: '透明度',
+          value: opacity,
+          type: 'range',
+          config: {
+            min: 0,
+            max: 100,
+            step: 1,
+            suffix: '%',
+          },
+        },
+      ],
+    },
+  ].filter((item) => !!item),
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultLegendOfRose = {
+  show: true,
+  font: defaultFont,
+  iconSize: {
+    width: 10,
+    height: 10,
+  },
+  iconGap: 5,
+  layout: {
+    gridTemplateColumns: 3,
+    gridGap: {
+      gridRowGap: 0,
+      gridColumnGap: 30,
+    },
+    alignment: 'center bottom',
+    translate: { x: 0, y: 0 },
+  }
+}
+export const legendOfRose = ({
+  show = defaultLegendOfRose.show,
+  font = defaultLegendOfRose.font,
+  iconSize: {
+    width = defaultLegendOfRose.iconSize.width,
+    height = defaultLegendOfRose.iconSize.height,
+  } = defaultLegendOfRose.iconSize,
+  iconGap = defaultLegendOfRose.iconGap,
+  layout: {
+    gridTemplateColumns = defaultLegendOfRose.layout.gridTemplateColumns,
+    gridGap: {
+      gridRowGap = defaultLegendOfRose.layout.gridGap.gridRowGap,
+      gridColumnGap = defaultLegendOfRose.layout.gridGap.gridColumnGap,
+    } = defaultLegendOfRose.layout.gridGap,
+    alignment = defaultLegendOfRose.layout.alignment,
+    translate: {
+      x = defaultLegendOfRose.layout.translate.x,
+      y = defaultLegendOfRose.layout.translate.y,
+    } = defaultLegendOfRose.layout.translate,
+  } = defaultLegendOfRose.layout
+} = defaultLegendOfRose)=>({
+  name: 'legend',
+  displayName: '图例',
+  value: [
+    showConfig(show),
+    {
+      rule: [['show', '$eq', true]],
+      name: 'font',
+      displayName: '文本样式',
+      value: font,
+      type: 'textStyle',
+    },
+    {
+      name: 'iconSize',
+      displayName: '图标尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: width,
+          config: {
+            span: 12,
+            suffix: 'px',
+          },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: height,
+          config: {
+            span: 12,
+            suffix: 'px',
+          },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      name: 'iconGap',
+      displayName: '间距',
+      value: iconGap,
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'layout',
+      displayName: '布局',
+      value: [
+        {
+          name: 'gridTemplateColumns',
+          displayName: '列数',
+          value: gridTemplateColumns,
+          type: 'number',
+        },
+        {
+          name: 'gridGap',
+          displayName: '间距',
+          value: [
+            {
+              name: 'gridRowGap',
+              displayName: '行距',
+              value: gridRowGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+            {
+              name: 'gridColumnGap',
+              displayName: '列距',
+              value: gridColumnGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+          ],
+          type: 'group',
+        },
+        {
+          type: 'grid',
+          name: 'alignment',
+          displayName: '位置',
+          value: alignment,
+          config: {
+            options: [
+              'left top',
+              'center top',
+              'right top',
+              'center left',
+              '',
+              'center right',
+              'left bottom',
+              'center bottom',
+              'right bottom',
+            ],
+          },
+        },
+        {
+          ...translateConfig(x, y),
+        },
+      ],
+    }
+  ],
+  config: {
+    defaultOpen: true,
+  },
+})
+
+const defaultLegendOfPie = {
+  show: true,
+  order: '',
+  iconSize: {
+    width: 10,
+    height: 10,
+  },
+  iconGap: 5,
+  name: { show: true, font: defaultFont },
+  percent: {
+    show: true,
+    precision: 0,
+    sameColor: false,
+    gap: 0,
+    font: defaultFont,
+  },
+  value: {
+    show: true,
+    sameColor: false,
+    gap: 0,
+    font: defaultFont,
+    suffix: {
+      show: true,
+      text: '',
+      fontSize: 12,
+      translate: { x: 0, y: 0 },
+    },
+  },
+  layout: {
+    gridTemplateColumns: 1,
+    gridGap: { gridRowGap: 10, gridColumnGap: 10 },
+    alignment: 'center right',
+    translate: { x: 0, y: 0 },
+  },
+};
+export const legendOfPie = ({
+  show = defaultLegendOfPie.show,
+  order = defaultLegendOfPie.order,
+  iconSize: {
+    width = defaultLegendOfPie.iconSize.width,
+    height = defaultLegendOfPie.iconSize.height,
+  } = defaultLegendOfPie.iconSize,
+  iconGap = defaultLegendOfPie.iconGap,
+  name: {
+    show: showName = defaultLegendOfPie.name.show,
+    font: nameFont = defaultLegendOfPie.name.font,
+  } = defaultLegendOfPie.name,
+  percent: {
+    show: showPercent = defaultLegendOfPie.percent.show,
+    precision = defaultLegendOfPie.percent.precision,
+    sameColor: percentSameColor = defaultLegendOfPie.percent.sameColor,
+    gap: percentGap = defaultLegendOfPie.percent.gap,
+    font: percentFont = defaultLegendOfPie.percent.font,
+  } = defaultLegendOfPie.percent,
+  value: {
+    show: showValue = defaultLegendOfPie.value.show,
+    sameColor: valueSameColor = defaultLegendOfPie.value.sameColor,
+    gap: valueGap = defaultLegendOfPie.value.gap,
+    font: valueFont = defaultLegendOfPie.value.font,
+    suffix: {
+      show: showSuffix = defaultLegendOfPie.value.suffix.show,
+      text = defaultLegendOfPie.value.suffix.text,
+      fontSize = defaultLegendOfPie.value.suffix.fontSize,
+      translate: {
+        x: suffixTranslateX = defaultLegendOfPie.value.suffix.translate.x,
+        y: suffixTranslateY = defaultLegendOfPie.value.suffix.translate.y,
+      } = defaultLegendOfPie.value.suffix.translate,
+    } = defaultLegendOfPie.value.suffix,
+  } = defaultLegendOfPie.value,
+  layout: {
+    gridTemplateColumns = defaultLegendOfPie.layout.gridTemplateColumns,
+    gridGap: {
+      gridRowGap = defaultLegendOfPie.layout.gridGap.gridRowGap,
+      gridColumnGap = defaultLegendOfPie.layout.gridGap.gridColumnGap,
+    } = defaultLegendOfPie.layout.gridGap,
+    alignment = defaultLegendOfPie.layout.alignment,
+    translate: {
+      x = defaultLegendOfPie.layout.translate.x,
+      y = defaultLegendOfPie.layout.translate.y,
+    } = defaultLegendOfPie.layout.translate,
+  } = defaultLegendOfPie.layout,
+} = defaultLegendOfPie) => ({
+  name: 'legend',
+  displayName: '图例',
+  value: [
+    showConfig(show),
+    {
+      ...showRule(),
+      name: 'order',
+      displayName: '顺序',
+      value: order,
+      type: 'select',
+      config: {
+        options: [
+          { name: '数据返回顺序', value: '' },
+          { name: '从大到小', value: 'desc' },
+          { name: '从小到大', value: 'asc' },
+        ],
+      },
+    },
+    {
+      ...showRule(),
+      name: 'iconSize',
+      displayName: '图标尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: width,
+          config: {
+            span: 12,
+          },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: height,
+          config: {
+            span: 12,
+          },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      ...showRule(),
+      name: 'iconGap',
+      displayName: '间距',
+      value: iconGap,
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      ...showRule(),
+      name: 'name',
+      displayName: '类目',
+      value: [
+        showConfig(showName),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: nameFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      ...showRule(),
+      name: 'percent',
+      displayName: '占比值',
+      value: [
+        showConfig(showPercent),
+        {
+          ...showRule(),
+          name: 'precision',
+          displayName: '小数位数',
+          value: precision,
+          type: 'number',
+          config: {
+            min: 0,
+          },
+        },
+        {
+          ...showRule(),
+          name: 'gap',
+          displayName: '间距',
+          value: percentGap,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          ...showRule(),
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: percentSameColor,
+          type: 'boolean',
+        },
+        {
+          ...showRule(),
+          name: 'font',
+          displayName: '文本样式',
+          value: percentFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      ...showRule(),
+      name: 'value',
+      displayName: '真实值',
+      value: [
+        showConfig(showValue),
+        {
+          ...showRule(),
+          name: 'suffix',
+          displayName: '后缀',
+          value: [
+            {
+              name: 'show',
+              displayName: '显示',
+              value: showSuffix,
+              type: 'boolean',
+            },
+            {
+              ...showRule(),
+              name: 'text',
+              displayName: '内容',
+              value: text,
+              type: 'input',
+            },
+            {
+              ...showRule(),
+              name: 'fontSize',
+              displayName: '字号',
+              value: fontSize,
+              type: 'number',
+              config: {
+                suffix: 'px',
+              },
+            },
+            {
+              ...showRule(),
+              ...translateConfig(suffixTranslateX, suffixTranslateY),
+            },
+          ],
+          config: {
+            defaultOpen: true,
+          },
+        },
+        {
+          ...showRule(),
+          name: 'gap',
+          displayName: '间距',
+          value: valueGap,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          ...showRule(),
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: valueSameColor,
+          type: 'boolean',
+        },
+        {
+          ...showRule(),
+          name: 'font',
+          displayName: '文本样式',
+          value: valueFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      ...showRule(),
+      name: 'layout',
+      displayName: '布局',
+      value: [
+        {
+          name: 'gridTemplateColumns',
+          displayName: '列数',
+          value: gridTemplateColumns,
+          type: 'number',
+        },
+        {
+          name: 'gridGap',
+          displayName: '间距',
+          value: [
+            {
+              name: 'gridRowGap',
+              displayName: '行距',
+              value: gridRowGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+            {
+              name: 'gridColumnGap',
+              displayName: '列距',
+              value: gridColumnGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+          ],
+          type: 'group',
+        },
+        {
+          type: 'grid',
+          name: 'alignment',
+          displayName: '位置',
+          value: alignment,
+          config: {
+            options: [
+              'left top',
+              'center top',
+              'right top',
+              'center left',
+              '',
+              'center right',
+              'left bottom',
+              'center bottom',
+              'right bottom',
+            ],
+          },
+        },
+        translateConfig(x, y),
+      ],
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultLegendOfDoublePie={
+  show: true,
+  key:"legend",
+  displayName:"图例",
+  iconSize: {
+    width: 10,
+    height: 10,
+  },
+  iconGap: 5,
+  name: { show: true, font: defaultFont },
+  percent: {
+    show: true,
+    precision: 0,
+    sameColor: false,
+    gap: 0,
+    font: defaultFont,
+  },
+  value: {
+    show: true,
+    sameColor: false,
+    gap: 0,
+    font: defaultFont,
+    suffix: {
+      show: true,
+      text: '',
+      fontSize: 12,
+      translate: { x: 0, y: 0 },
+    },
+  },
+  layout: {
+    gridTemplateColumns: 1,
+    gridGap: { gridRowGap: 10, gridColumnGap: 10 },
+    alignment: 'center right',
+    translate: { x: 0, y: 0 },
+  },
+};
+export const legendOfDoublePie = ({
+  show = defaultLegendOfDoublePie.show,
+  key = defaultLegendOfDoublePie.key,
+  displayName = defaultLegendOfDoublePie.displayName,
+  iconSize: {
+    width = defaultLegendOfDoublePie.iconSize.width,
+    height = defaultLegendOfDoublePie.iconSize.height,
+  } = defaultLegendOfDoublePie.iconSize,
+  iconGap = defaultLegendOfDoublePie.iconGap,
+  name: {
+    show: showName = defaultLegendOfDoublePie.name.show,
+    font: nameFont = defaultLegendOfDoublePie.name.font,
+  } = defaultLegendOfDoublePie.name,
+  percent: {
+    show: showPercent = defaultLegendOfDoublePie.percent.show,
+    precision = defaultLegendOfDoublePie.percent.precision,
+    sameColor: percentSameColor = defaultLegendOfDoublePie.percent.sameColor,
+    gap: percentGap = defaultLegendOfDoublePie.percent.gap,
+    font: percentFont = defaultLegendOfDoublePie.percent.font,
+  } = defaultLegendOfDoublePie.percent,
+  value: {
+    show: showValue = defaultLegendOfDoublePie.value.show,
+    sameColor: valueSameColor = defaultLegendOfDoublePie.value.sameColor,
+    gap: valueGap = defaultLegendOfDoublePie.value.gap,
+    font: valueFont = defaultLegendOfDoublePie.value.font,
+    suffix: {
+      show: showSuffix = defaultLegendOfDoublePie.value.suffix.show,
+      text = defaultLegendOfDoublePie.value.suffix.text,
+      fontSize = defaultLegendOfDoublePie.value.suffix.fontSize,
+      translate: {
+        x: suffixTranslateX = defaultLegendOfDoublePie.value.suffix.translate.x,
+        y: suffixTranslateY = defaultLegendOfDoublePie.value.suffix.translate.y,
+      } = defaultLegendOfDoublePie.value.suffix.translate,
+    } = defaultLegendOfDoublePie.value.suffix,
+  } = defaultLegendOfDoublePie.value,
+  layout: {
+    gridTemplateColumns = defaultLegendOfDoublePie.layout.gridTemplateColumns,
+    gridGap: {
+      gridRowGap = defaultLegendOfDoublePie.layout.gridGap.gridRowGap,
+      gridColumnGap = defaultLegendOfDoublePie.layout.gridGap.gridColumnGap,
+    } = defaultLegendOfDoublePie.layout.gridGap,
+    alignment = defaultLegendOfDoublePie.layout.alignment,
+    translate: {
+      x = defaultLegendOfDoublePie.layout.translate.x,
+      y = defaultLegendOfDoublePie.layout.translate.y,
+    } = defaultLegendOfDoublePie.layout.translate,
+    extraInput = []
+  } = defaultLegendOfDoublePie.layout,
+} = defaultLegendOfDoublePie) => ({
+  name: key,
+  displayName: displayName,
+  value: [
+    showConfig(show),
+    {
+      ...showRule(),
+      name: 'iconSize',
+      displayName: '图标尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: width,
+          config: {
+            span: 12,
+          },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: height,
+          config: {
+            span: 12,
+          },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      ...showRule(),
+      name: 'iconGap',
+      displayName: '间距',
+      value: iconGap,
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'name',
+      displayName: '类目',
+      value: [
+        showConfig(showName),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: nameFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'percent',
+      displayName: '占比值',
+      value: [
+        showConfig(showPercent),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'precision',
+          displayName: '小数位数',
+          value: precision,
+          type: 'number',
+          config: {
+            min: 0,
+          },
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'gap',
+          displayName: '间距',
+          value: percentGap,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: percentSameColor,
+          type: 'boolean',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: percentFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'value',
+      displayName: '真实值',
+      value: [
+        showConfig(showValue),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'suffix',
+          displayName: '后缀',
+          value: [
+            {
+              name: 'show',
+              displayName: '显示',
+              value: showSuffix,
+              type: 'boolean',
+            },
+            {
+              rule: [['show', '$eq', true]],
+              name: 'text',
+              displayName: '内容',
+              value: text,
+              type: 'input',
+            },
+            {
+              rule: [['show', '$eq', true]],
+              name: 'fontSize',
+              displayName: '字号',
+              value: fontSize,
+              type: 'number',
+              config: {
+                suffix: 'px',
+              },
+            },
+            {
+              rule: [['show', '$eq', true]],
+              ...translateConfig(suffixTranslateX, suffixTranslateY),
+            },
+          ],
+          config: {
+            defaultOpen: true,
+          },
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'gap',
+          displayName: '间距',
+          value: valueGap,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: valueSameColor,
+          type: 'boolean',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: valueFont,
+          type: 'textStyle',
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'layout',
+      displayName: '布局',
+      value: [
+        {
+          name: 'gridTemplateColumns',
+          displayName: '列数',
+          value: gridTemplateColumns,
+          type: 'number',
+        },
+        {
+          name: 'gridGap',
+          displayName: '间距',
+          value: [
+            {
+              name: 'gridRowGap',
+              displayName: '行距',
+              value: gridRowGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+            {
+              name: 'gridColumnGap',
+              displayName: '列距',
+              value: gridColumnGap,
+              type: 'number',
+              config: {
+                span: 12,
+                suffix: 'px',
+              },
+            },
+          ],
+          type: 'group',
+        },
+        ...extraInput
+      ].filter(item=>!!item),
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});