@easyv/config 1.1.6 → 1.1.7

package/src/pie.js

@@ -1,1035 +1,1035 @@
-import {
-  font,
-  show as showConfig,
-  showRule,
-  translate as translateConfig,
-  axisLine,
-  sc,
-} from './';
-
-const defaultBasePie = {
-  chart: {
-    innerRadius: 0,
-    outerRadius: 1,
-    cornerRadius: 0,
-    padAngle: 2,
-  },
-};
-const basePie = ({
-  chart: {
-    innerRadius = defaultBasePie.chart.innerRadius,
-    outerRadius = defaultBasePie.chart.outerRadius,
-    cornerRadius = defaultBasePie.chart.cornerRadius,
-    padAngle = defaultBasePie.chart.padAngle,
-  } = defaultBasePie.chart,
-} = defaultBasePie) => ({
-  name: 'chart',
-  displayName: '图形',
-  value: [
-    {
-      name: 'innerRadius',
-      displayName: '半径',
-      value: innerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'outerRadius',
-      displayName: '外半径',
-      value: outerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'cornerRadius',
-      displayName: '圆角',
-      value: cornerRadius,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-    {
-      name: 'padAngle',
-      displayName: '间距',
-      value: padAngle,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 20,
-        step: 1,
-        suffix: '°',
-      },
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultBaseRose = {
-  chart: {
-    innerRadius: 0,
-    outerRadius: 1,
-    padAngle: 2,
-  },
-};
-const baseRose = ({
-  chart: {
-    innerRadius = defaultBaseRose.chart.innerRadius,
-    outerRadius = defaultBaseRose.chart.outerRadius,
-    padAngle = defaultBaseRose.chart.padAngle,
-  } = defaultBaseRose.chart,
-} = defaultBaseRose) => ({
-  name: 'chart',
-  displayName: '饼图',
-  value: [
-    {
-      name: 'innerRadius',
-      displayName: '半径',
-      value: innerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'outerRadius',
-      displayName: '外半径',
-      value: outerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'padAngle',
-      displayName: '间距',
-      value: padAngle,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 30,
-        step: 1,
-        suffix: '°',
-      },
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultGridLine = {
-  show: true,
-  color: '#BAE7FF',
-  lineWidth: 1,
-};
-const gridLine = ({
-  show = defaultGridLine.show,
-  color = defaultGridLine.color,
-  lineWidth = defaultGridLine.lineWidth,
-} = defaultGridLine) => ({
-  name: 'gridLine',
-  displayName: '网格线',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'color',
-      displayName: '颜色',
-      value: color,
-      type: 'color',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'lineWidth',
-      displayName: '粗细',
-      value: lineWidth,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-  ],
-});
-
-const defaultRoseAxis = {
-  axis: {
-    count: 6,
-    textStyle: font(),
-    gap: 10,
-    axisline: {
-      show: true,
-      color: '#BAE7FF',
-      lineWidth: 1,
-    },
-    gridLine: {
-      show: true,
-      color: '#BAE7FF',
-      lineWidth: 1,
-    },
-  },
-};
-
-const roseCategoryAxis = ({
-  axis: {
-    textStyle = defaultRoseAxis.axis.textStyle,
-    gap = defaultRoseAxis.axis.gap,
-    axisLine: axisLine_ = defaultRoseAxis.axis.axisline,
-    gridLine: gridLine_ = defaultRoseAxis.axis.gridLine,
-  } = defaultRoseAxis.axis,
-} = defaultRoseAxis) => ({
-  name: 'categoryAxis',
-  displayName: '类目轴',
-  value: [
-    {
-      name: 'textStyle',
-      displayName: '标签文本',
-      value: font(textStyle),
-      type: 'textStyle',
-      markColorType: 'textColor'
-    },
-    {
-      name: 'gap',
-      displayName: '边距',
-      value: gap,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-    axisLine(axisLine_),
-    gridLine(gridLine_),
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const roseValueAxis = ({
-  axis: {
-    count = defaultRoseAxis.axis.count,
-    textStyle = defaultRoseAxis.axis.textStyle,
-    gap = defaultRoseAxis.axis.gap,
-    axisLine: axisLine_ = defaultRoseAxis.axis.axisline,
-    gridLine: gridLine_ = defaultRoseAxis.axis.gridLine,
-  } = defaultRoseAxis.axis,
-} = defaultRoseAxis) => ({
-  name: 'valueAxis',
-  displayName: '数值轴',
-  value: [
-    {
-      name: 'count',
-      displayName: '数量',
-      value: count,
-      type: 'number',
-    },
-    {
-      name: 'textStyle',
-      displayName: '标签文本',
-      value: font(textStyle),
-      type: 'textStyle',
-      markColorType: 'textColor'
-    },
-    {
-      name: 'gap',
-      displayName: '边距',
-      value: gap,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-    axisLine(axisLine_),
-    gridLine(gridLine_),
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultCategoryText = {
-  categoryText: {
-    show: true,
-    font: font(),
-    gap: 10,
-  },
-};
-const categoryText = ({
-  categoryText: {
-    show = defaultCategoryText.categoryText.show,
-    font = defaultCategoryText.categoryText.font,
-    gap = defaultCategoryText.categoryText.gap,
-  } = defaultCategoryText,
-}) => ({
-  name: 'categoryText',
-  displayName: '类目文本',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      ...showRule(),
-      name: 'textStyle',
-      displayName: '文本样式',
-      value: font,
-      type: 'textStyle',
-      markColorType: 'textColor'
-    },
-    {
-      ...showRule(),
-      name: 'gap',
-      displayName: '间距',
-      value: gap,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-  ],
-});
-
-const defaultDecorate = {
-  decorate: {
-    show: true,
-    innerRadius: 0.3,
-    outerRadius: 0.6,
-    opacity: 80,
-    speed: 5,
-    direction: 'clockwise',
-  },
-};
-const decorate = ({
-  decorate: {
-    show = defaultDecorate.decorate.show,
-    innerRadius = defaultDecorate.decorate.innerRadius,
-    outerRadius = defaultDecorate.decorate.outerRadius,
-    opacity = defaultDecorate.decorate.opacity,
-    speed = defaultDecorate.decorate.speed,
-    direction = defaultDecorate.decorate.direction,
-  } = defaultDecorate,
-}) => ({
-  name: 'decorate',
-  displayName: '装饰物',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'innerRadius',
-      displayName: '内半径',
-      value: innerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'outerRadius',
-      displayName: '外半径',
-      value: outerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'opacity',
-      displayName: '透明度',
-      value: opacity,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 100,
-        step: 1,
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'speed',
-      displayName: '旋转速度',
-      value: speed,
-      type: 'number',
-      config: {
-        min: 0,
-        max: 10,
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'direction',
-      displayName: '旋转方向',
-      value: direction,
-      type: 'radio',
-      config: {
-        options: [
-          {
-            name: '顺时针',
-            value: 'clockwise',
-          },
-          {
-            name: '逆时针',
-            value: 'counterClockwise',
-          },
-        ],
-      },
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultDecorate2 = {
-  show: true,
-  radiusWidth: 0.3,
-  opacity: 80,
-};
-const decorate2 = ({
-  show = defaultDecorate2.show,
-  radiusWidth = defaultDecorate2.radiusWidth,
-  opacity = defaultDecorate2.opacity,
-}) => ({
-  name: 'decorate2',
-  displayName: '装饰物',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'radiusWidth',
-      displayName: '弧宽',
-      value: radiusWidth,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 100,
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'opacity',
-      displayName: '透明度',
-      value: opacity,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 100,
-        suffix: '%',
-      },
-    },
-  ],
-});
-
-const defaultCurrent = {
-  current: {
-    show: true,
-    gap: 45,
-    name: { show: true, sameColor: false, font: font() },
-    percent: {
-      show: true,
-      sameColor: false,
-      precision: 0,
-      font: font(),
-      translate: { x: 0, y: 0 },
-    },
-    value: {
-      show: true,
-      sameColor: false,
-      font: font(),
-      translate: { x: 0, y: 0 },
-      suffix: {
-        show: false,
-        text: '',
-        fontSize: 12,
-        translate: { x: 0, y: 0 },
-      },
-    },
-  },
-};
-export const current = ({
-  current: {
-    show = defaultCurrent.current.show,
-    gap = defaultCurrent.current.gap,
-    name: {
-      show: showName = defaultCurrent.current.name.show,
-      sameColor: nameColor = defaultCurrent.current.name.sameColor,
-      font: nameFont = defaultCurrent.current.name.font,
-      translate: nameTranslate,
-      textBreak,
-    } = defaultCurrent.current.name,
-    percent: {
-      show: showPercent = defaultCurrent.current.percent.show,
-      sameColor: percentColor = defaultCurrent.current.percent.sameColor,
-      precision = defaultCurrent.current.percent.precision,
-      font: percentFont = defaultCurrent.current.percent.font,
-      translate: { x: percentTranslateX, y: percentTranslateY } = defaultCurrent
-        .current.percent.translate,
-    } = defaultCurrent.current.percent,
-    value: {
-      show: showValue = defaultCurrent.current.value.show,
-      sameColor: valueColor = defaultCurrent.current.value.sameColor,
-      font: valueFont = defaultCurrent.current.value.font,
-      translate: { x: valueTranslateX, y: valueTranslateY } = defaultCurrent
-        .current.value.translate,
-      suffix: {
-        show: showSuffix = defaultCurrent.current.value.suffix.show,
-        text = defaultCurrent.current.value.suffix.text,
-        fontSize = defaultCurrent.current.value.suffix.fontSize,
-        translate: { x: suffixTranslateX, y: suffixTranslateY } = defaultCurrent
-          .current.value.suffix.translate,
-      } = defaultCurrent.current.value.suffix,
-    } = defaultCurrent.current.value,
-  } = defaultCurrent.current,
-} = defaultCurrent) => ({
-  name: 'current',
-  displayName: '当前值',
-  value: [
-    showConfig(show),
-    {
-      rule: [['show', '$eq', true]],
-      name: 'gap',
-      displayName: '间距',
-      value: gap,
-      type: 'number',
-      config: {
-        suffix: 'px',
-      },
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'name',
-      displayName: '类目',
-      value: [
-        showConfig(showName),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: nameColor,
-          type: 'boolean'
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: nameFont,
-          type: 'textStyle',
-          markColorType: 'textColor',
-        },
-        nameTranslate != undefined && {
-          ...showRule(),
-          ...translateConfig(nameTranslate.x, nameTranslate.y),
-        },
-        textBreak != undefined && {
-          ...showRule(),
-          ...sc('textBreak', '首行字数', 'number', textBreak, {
-            min: 0,
-            suffix: '个',
-          }),
-        },
-      ].filter((item) => !!item),
-    },
-    {
-      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: 'sameColor',
-          displayName: '颜色跟随',
-          value: percentColor,
-          type: 'boolean'
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: percentFont,
-          type: 'textStyle',
-          markColorType: 'textColor',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          ...translateConfig(percentTranslateX, percentTranslateY),
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'value',
-      displayName: '真实值',
-      value: [
-        showConfig(showValue),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'sameColor',
-          displayName: '颜色跟随',
-          value: valueColor,
-          type: 'boolean'
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: valueFont,
-          type: 'textStyle',
-          markColorType: 'textColor',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          ...translateConfig(valueTranslateX, valueTranslateY),
-        },
-        {
-          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',
-            },
-            {
-              rule: [['show', '$eq', true]],
-              ...translateConfig(suffixTranslateX, suffixTranslateY),
-            },
-          ],
-          config: {
-            defaultOpen: true,
-          },
-        },
-      ],
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultBaseOuter = {
-  chart: {
-    innerRadius: 0,
-    outerRadius: 1,
-    padAngle: 2,
-  },
-};
-const baseOuter = ({
-  chart: {
-    innerRadius = defaultBasePie.chart.innerRadius,
-    outerRadius = defaultBasePie.chart.outerRadius,
-    padAngle = defaultBasePie.chart.padAngle,
-  } = defaultBasePie.chart,
-} = defaultBaseOuter) => ({
-  name: 'chart',
-  displayName: '图形',
-  value: [
-    {
-      name: 'innerRadius',
-      displayName: '半径',
-      value: innerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'outerRadius',
-      displayName: '外半径',
-      value: outerRadius,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-    {
-      name: 'padAngle',
-      displayName: '间距',
-      value: padAngle,
-      type: 'range',
-      config: {
-        min: 0,
-        max: 20,
-        step: 1,
-        suffix: '°',
-      },
-    },
-  ],
-  config: {
-    defaultOpen: true,
-  },
-});
-
-const defaultOuterDecorate = {
-  outerDecorate: {
-    color: '#CF00FF',
-    width: 10,
-    tick: {
-      show: true,
-      count: 12,
-      color: '#CF00FF',
-      width: 3,
-      length: 8,
-    },
-  },
-};
-const outerDecorate = ({
-  outerDecorate: {
-    color = defaultOuterDecorate.outerDecorate.color,
-    width = defaultOuterDecorate.outerDecorate.width,
-    tick: {
-      show = defaultOuterDecorate.outerDecorate.tick.show,
-      count = defaultOuterDecorate.outerDecorate.tick.count,
-      color: tickColor = defaultOuterDecorate.outerDecorate.tick.color,
-      width: tickWidth = defaultOuterDecorate.outerDecorate.tick.width,
-      length = defaultOuterDecorate.outerDecorate.tick.length,
-    } = defaultOuterDecorate.outerDecorate.tick,
-  } = defaultOuterDecorate.outerDecorate,
-} = defaultOuterDecorate) => ({
-  name: 'outerDecorate',
-  displayName: '外环装饰',
-  value: [
-    {
-      name: 'color',
-      displayName: '颜色',
-      value: color,
-      type: 'color',
-    },
-    {
-      name: 'width',
-      displayName: '粗细',
-      value: width,
-      type: 'number',
-      config: {
-        min: 0,
-        max: 100,
-        suffix: 'px',
-      },
-    },
-    {
-      name: 'tick',
-      displayName: '刻度',
-      value: [
-        showConfig(show),
-        {
-          ...showRule(),
-          name: 'count',
-          displayName: '个数',
-          value: count,
-          type: 'number',
-          config: {
-            min: 0,
-          },
-        },
-        {
-          ...showRule(),
-          name: 'color',
-          displayName: '颜色',
-          value: tickColor,
-          type: 'color',
-        },
-        {
-          ...showRule(),
-          name: 'width',
-          displayName: '粗细',
-          value: tickWidth,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-        {
-          ...showRule(),
-          name: 'length',
-          displayName: '长度',
-          value: length,
-          type: 'number',
-          config: {
-            suffix: 'px',
-          },
-        },
-      ],
-    },
-  ],
-});
-
-export const rosePie = (_basePie = defaultBasePie) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [basePie(_basePie)],
-});
-
-export const rosePieDecorate = (
-  _baseOuter = defaultBaseOuter,
-  _outerDecorate = defaultOuterDecorate
-) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [baseOuter(_baseOuter), outerDecorate(_outerDecorate)],
-});
-
-export const donut = (
-  {
-    basePie: _basePie = defaultBasePie,
-    decorate: _decorate = defaultDecorate,
-  } = {
-    basePie: defaultBasePie,
-    decorate: defaultDecorate,
-  }
-) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [basePie(_basePie), decorate(_decorate)],
-});
-
-export const carouselDonut = (
-  { basePie: _basePie = defaultBasePie, current: _current = defaultCurrent } = {
-    basePie: defaultBasePie,
-    current: defaultCurrent,
-  }
-) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [basePie(_basePie), current(_current)],
-});
-
-export const nestRosePie = (
-  _baseRose = defaultBaseRose,
-  _categoryAxis = defaultRoseAxis,
-  _valueAxis = defaultRoseAxis
-) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [
-    baseRose(_baseRose),
-    roseCategoryAxis(_categoryAxis),
-    roseValueAxis(_valueAxis),
-  ],
-});
-
-export const carouselDonut2 = (
-  {
-    basePie: _basePie = defaultBasePie,
-    categoryText: _categoryText = defaultCategoryText,
-    decorate2: _decorate2 = defaultDecorate2,
-    current: _current = defaultCurrent,
-  } = {
-    basePie: defaultBasePie,
-    categoryText: defaultCategoryText,
-    decorate2: defaultDecorate2,
-    current: defaultCurrent,
-  }
-) => ({
-  name: 'fan',
-  displayName: '环图属性',
-  value: [
-    basePie(_basePie),
-    categoryText(_categoryText),
-    decorate2(_decorate2),
-    current(_current),
-  ],
-});
-
-const defaultPie = {
-  fan: {
-    chart: { rose: false, baseRadius: 0.5, outerRadius: 1, innerRadius: 0 },
-    angle: { startAngle: 0, endAngle: 360, antiClockwise: false },
-    stroke: { show: false, strokeWidth: 1, color: '#FFFFFF' },
-  },
-};
-
-export default ({
-  fan: {
-    chart: {
-      outerRadius = defaultPie.fan.chart.outerRadius,
-      rose = defaultPie.fan.chart.rose,
-      baseRadius = defaultPie.fan.chart.baseRadius,
-    } = defaultPie.fan.chart,
-    angle: {
-      startAngle = defaultPie.fan.angle.startAngle,
-      endAngle = defaultPie.fan.angle.endAngle,
-      antiClockwise = defaultPie.fan.angle.antiClockwise,
-    } = defaultPie.fan.angle,
-    stroke: {
-      show = defaultPie.fan.stroke.show,
-      strokeWidth = defaultPie.fan.stroke.strokeWidth,
-      color = defaultPie.fan.stroke.color,
-    } = defaultPie.fan.stroke,
-  } = defaultPie.fan,
-} = defaultPie) => ({
-  name: 'fan',
-  displayName: '饼图属性',
-  value: [
-    {
-      name: 'chart',
-      displayName: '图形',
-      value: [
-        {
-          name: 'outerRadius',
-          displayName: '半径',
-          value: outerRadius,
-          type: 'range',
-          config: {
-            min: 0,
-            max: 1,
-            step: 0.01,
-          },
-        },
-        {
-          name: 'rose',
-          displayName: '类玫瑰图',
-          value: rose,
-          type: 'boolean',
-        },
-        {
-          rule: [['rose', '$eq', true]],
-          name: 'baseRadius',
-          displayName: '最小半径',
-          value: baseRadius,
-          type: 'range',
-          config: {
-            min: 0,
-            max: 1,
-            step: 0.01,
-          },
-        },
-      ],
-      config: {
-        defaultOpen: true,
-      },
-    },
-    {
-      name: 'angle',
-      displayName: '角度',
-      value: [
-        {
-          name: 'startAngle',
-          displayName: '起始',
-          value: startAngle,
-          type: 'range',
-          config: {
-            step: 1,
-            min: 0,
-            max: 360,
-          },
-        },
-        {
-          name: 'endAngle',
-          displayName: '结束',
-          value: endAngle,
-          type: 'range',
-          config: {
-            step: 1,
-            min: 0,
-            max: 360,
-          },
-        },
-        {
-          name: 'antiClockwise',
-          displayName: '反向',
-          value: antiClockwise,
-          type: 'boolean',
-          tip: '启用使用另一时针顺序绘制饼图',
-        },
-      ],
-      config: {
-        defaultOpen: true,
-      },
-    },
-    {
-      name: 'stroke',
-      displayName: '描边',
-      value: [
-        {
-          name: 'show',
-          displayName: '开启',
-          value: show,
-          type: 'boolean',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'strokeWidth',
-          displayName: '宽度',
-          value: strokeWidth,
-          type: 'number',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          name: 'color',
-          displayName: '颜色',
-          value: color,
-          type: 'color',
-        },
-      ],
-      config: {
-        defaultOpen: true,
-      },
-    },
-  ],
-});
+import {
+  font,
+  show as showConfig,
+  showRule,
+  translate as translateConfig,
+  axisLine,
+  sc,
+} from './';
+
+const defaultBasePie = {
+  chart: {
+    innerRadius: 0,
+    outerRadius: 1,
+    cornerRadius: 0,
+    padAngle: 2,
+  },
+};
+const basePie = ({
+  chart: {
+    innerRadius = defaultBasePie.chart.innerRadius,
+    outerRadius = defaultBasePie.chart.outerRadius,
+    cornerRadius = defaultBasePie.chart.cornerRadius,
+    padAngle = defaultBasePie.chart.padAngle,
+  } = defaultBasePie.chart,
+} = defaultBasePie) => ({
+  name: 'chart',
+  displayName: '图形',
+  value: [
+    {
+      name: 'innerRadius',
+      displayName: '半径',
+      value: innerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'outerRadius',
+      displayName: '外半径',
+      value: outerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'cornerRadius',
+      displayName: '圆角',
+      value: cornerRadius,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      name: 'padAngle',
+      displayName: '间距',
+      value: padAngle,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 20,
+        step: 1,
+        suffix: '°',
+      },
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultBaseRose = {
+  chart: {
+    innerRadius: 0,
+    outerRadius: 1,
+    padAngle: 2,
+  },
+};
+const baseRose = ({
+  chart: {
+    innerRadius = defaultBaseRose.chart.innerRadius,
+    outerRadius = defaultBaseRose.chart.outerRadius,
+    padAngle = defaultBaseRose.chart.padAngle,
+  } = defaultBaseRose.chart,
+} = defaultBaseRose) => ({
+  name: 'chart',
+  displayName: '饼图',
+  value: [
+    {
+      name: 'innerRadius',
+      displayName: '半径',
+      value: innerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'outerRadius',
+      displayName: '外半径',
+      value: outerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'padAngle',
+      displayName: '间距',
+      value: padAngle,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 30,
+        step: 1,
+        suffix: '°',
+      },
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultGridLine = {
+  show: true,
+  color: '#BAE7FF',
+  lineWidth: 1,
+};
+const gridLine = ({
+  show = defaultGridLine.show,
+  color = defaultGridLine.color,
+  lineWidth = defaultGridLine.lineWidth,
+} = defaultGridLine) => ({
+  name: 'gridLine',
+  displayName: '网格线',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'color',
+      displayName: '颜色',
+      value: color,
+      type: 'color',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'lineWidth',
+      displayName: '粗细',
+      value: lineWidth,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+  ],
+});
+
+const defaultRoseAxis = {
+  axis: {
+    count: 6,
+    textStyle: font(),
+    gap: 10,
+    axisline: {
+      show: true,
+      color: '#BAE7FF',
+      lineWidth: 1,
+    },
+    gridLine: {
+      show: true,
+      color: '#BAE7FF',
+      lineWidth: 1,
+    },
+  },
+};
+
+const roseCategoryAxis = ({
+  axis: {
+    textStyle = defaultRoseAxis.axis.textStyle,
+    gap = defaultRoseAxis.axis.gap,
+    axisLine: axisLine_ = defaultRoseAxis.axis.axisline,
+    gridLine: gridLine_ = defaultRoseAxis.axis.gridLine,
+  } = defaultRoseAxis.axis,
+} = defaultRoseAxis) => ({
+  name: 'categoryAxis',
+  displayName: '类目轴',
+  value: [
+    {
+      name: 'textStyle',
+      displayName: '标签文本',
+      value: font(textStyle),
+      type: 'textStyle',
+      markColorType: 'textColor'
+    },
+    {
+      name: 'gap',
+      displayName: '边距',
+      value: gap,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+    axisLine(axisLine_),
+    gridLine(gridLine_),
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const roseValueAxis = ({
+  axis: {
+    count = defaultRoseAxis.axis.count,
+    textStyle = defaultRoseAxis.axis.textStyle,
+    gap = defaultRoseAxis.axis.gap,
+    axisLine: axisLine_ = defaultRoseAxis.axis.axisline,
+    gridLine: gridLine_ = defaultRoseAxis.axis.gridLine,
+  } = defaultRoseAxis.axis,
+} = defaultRoseAxis) => ({
+  name: 'valueAxis',
+  displayName: '数值轴',
+  value: [
+    {
+      name: 'count',
+      displayName: '数量',
+      value: count,
+      type: 'number',
+    },
+    {
+      name: 'textStyle',
+      displayName: '标签文本',
+      value: font(textStyle),
+      type: 'textStyle',
+      markColorType: 'textColor'
+    },
+    {
+      name: 'gap',
+      displayName: '边距',
+      value: gap,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+    axisLine(axisLine_),
+    gridLine(gridLine_),
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultCategoryText = {
+  categoryText: {
+    show: true,
+    font: font(),
+    gap: 10,
+  },
+};
+const categoryText = ({
+  categoryText: {
+    show = defaultCategoryText.categoryText.show,
+    font = defaultCategoryText.categoryText.font,
+    gap = defaultCategoryText.categoryText.gap,
+  } = defaultCategoryText,
+}) => ({
+  name: 'categoryText',
+  displayName: '类目文本',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      ...showRule(),
+      name: 'textStyle',
+      displayName: '文本样式',
+      value: font,
+      type: 'textStyle',
+      markColorType: 'textColor'
+    },
+    {
+      ...showRule(),
+      name: 'gap',
+      displayName: '间距',
+      value: gap,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+  ],
+});
+
+const defaultDecorate = {
+  decorate: {
+    show: true,
+    innerRadius: 0.3,
+    outerRadius: 0.6,
+    opacity: 80,
+    speed: 5,
+    direction: 'clockwise',
+  },
+};
+const decorate = ({
+  decorate: {
+    show = defaultDecorate.decorate.show,
+    innerRadius = defaultDecorate.decorate.innerRadius,
+    outerRadius = defaultDecorate.decorate.outerRadius,
+    opacity = defaultDecorate.decorate.opacity,
+    speed = defaultDecorate.decorate.speed,
+    direction = defaultDecorate.decorate.direction,
+  } = defaultDecorate,
+}) => ({
+  name: 'decorate',
+  displayName: '装饰物',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'innerRadius',
+      displayName: '内半径',
+      value: innerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'outerRadius',
+      displayName: '外半径',
+      value: outerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'opacity',
+      displayName: '透明度',
+      value: opacity,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 100,
+        step: 1,
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'speed',
+      displayName: '旋转速度',
+      value: speed,
+      type: 'number',
+      config: {
+        min: 0,
+        max: 10,
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'direction',
+      displayName: '旋转方向',
+      value: direction,
+      type: 'radio',
+      config: {
+        options: [
+          {
+            name: '顺时针',
+            value: 'clockwise',
+          },
+          {
+            name: '逆时针',
+            value: 'counterClockwise',
+          },
+        ],
+      },
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultDecorate2 = {
+  show: true,
+  radiusWidth: 0.3,
+  opacity: 80,
+};
+const decorate2 = ({
+  show = defaultDecorate2.show,
+  radiusWidth = defaultDecorate2.radiusWidth,
+  opacity = defaultDecorate2.opacity,
+}) => ({
+  name: 'decorate2',
+  displayName: '装饰物',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'radiusWidth',
+      displayName: '弧宽',
+      value: radiusWidth,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 100,
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'opacity',
+      displayName: '透明度',
+      value: opacity,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 100,
+        suffix: '%',
+      },
+    },
+  ],
+});
+
+const defaultCurrent = {
+  current: {
+    show: true,
+    gap: 45,
+    name: { show: true, sameColor: false, font: font() },
+    percent: {
+      show: true,
+      sameColor: false,
+      precision: 0,
+      font: font(),
+      translate: { x: 0, y: 0 },
+    },
+    value: {
+      show: true,
+      sameColor: false,
+      font: font(),
+      translate: { x: 0, y: 0 },
+      suffix: {
+        show: false,
+        text: '',
+        fontSize: 12,
+        translate: { x: 0, y: 0 },
+      },
+    },
+  },
+};
+export const current = ({
+  current: {
+    show = defaultCurrent.current.show,
+    gap = defaultCurrent.current.gap,
+    name: {
+      show: showName = defaultCurrent.current.name.show,
+      sameColor: nameColor = defaultCurrent.current.name.sameColor,
+      font: nameFont = defaultCurrent.current.name.font,
+      translate: nameTranslate,
+      textBreak,
+    } = defaultCurrent.current.name,
+    percent: {
+      show: showPercent = defaultCurrent.current.percent.show,
+      sameColor: percentColor = defaultCurrent.current.percent.sameColor,
+      precision = defaultCurrent.current.percent.precision,
+      font: percentFont = defaultCurrent.current.percent.font,
+      translate: { x: percentTranslateX, y: percentTranslateY } = defaultCurrent
+        .current.percent.translate,
+    } = defaultCurrent.current.percent,
+    value: {
+      show: showValue = defaultCurrent.current.value.show,
+      sameColor: valueColor = defaultCurrent.current.value.sameColor,
+      font: valueFont = defaultCurrent.current.value.font,
+      translate: { x: valueTranslateX, y: valueTranslateY } = defaultCurrent
+        .current.value.translate,
+      suffix: {
+        show: showSuffix = defaultCurrent.current.value.suffix.show,
+        text = defaultCurrent.current.value.suffix.text,
+        fontSize = defaultCurrent.current.value.suffix.fontSize,
+        translate: { x: suffixTranslateX, y: suffixTranslateY } = defaultCurrent
+          .current.value.suffix.translate,
+      } = defaultCurrent.current.value.suffix,
+    } = defaultCurrent.current.value,
+  } = defaultCurrent.current,
+} = defaultCurrent) => ({
+  name: 'current',
+  displayName: '当前值',
+  value: [
+    showConfig(show),
+    {
+      rule: [['show', '$eq', true]],
+      name: 'gap',
+      displayName: '间距',
+      value: gap,
+      type: 'number',
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'name',
+      displayName: '类目',
+      value: [
+        showConfig(showName),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: nameColor,
+          type: 'boolean'
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: nameFont,
+          type: 'textStyle',
+          markColorType: 'textColor',
+        },
+        nameTranslate != undefined && {
+          ...showRule(),
+          ...translateConfig(nameTranslate.x, nameTranslate.y),
+        },
+        textBreak != undefined && {
+          ...showRule(),
+          ...sc('textBreak', '首行字数', 'number', textBreak, {
+            min: 0,
+            suffix: '个',
+          }),
+        },
+      ].filter((item) => !!item),
+    },
+    {
+      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: 'sameColor',
+          displayName: '颜色跟随',
+          value: percentColor,
+          type: 'boolean'
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: percentFont,
+          type: 'textStyle',
+          markColorType: 'textColor',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          ...translateConfig(percentTranslateX, percentTranslateY),
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'value',
+      displayName: '真实值',
+      value: [
+        showConfig(showValue),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'sameColor',
+          displayName: '颜色跟随',
+          value: valueColor,
+          type: 'boolean'
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: valueFont,
+          type: 'textStyle',
+          markColorType: 'textColor',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          ...translateConfig(valueTranslateX, valueTranslateY),
+        },
+        {
+          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',
+            },
+            {
+              rule: [['show', '$eq', true]],
+              ...translateConfig(suffixTranslateX, suffixTranslateY),
+            },
+          ],
+          config: {
+            defaultOpen: true,
+          },
+        },
+      ],
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultBaseOuter = {
+  chart: {
+    innerRadius: 0,
+    outerRadius: 1,
+    padAngle: 2,
+  },
+};
+const baseOuter = ({
+  chart: {
+    innerRadius = defaultBasePie.chart.innerRadius,
+    outerRadius = defaultBasePie.chart.outerRadius,
+    padAngle = defaultBasePie.chart.padAngle,
+  } = defaultBasePie.chart,
+} = defaultBaseOuter) => ({
+  name: 'chart',
+  displayName: '图形',
+  value: [
+    {
+      name: 'innerRadius',
+      displayName: '半径',
+      value: innerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'outerRadius',
+      displayName: '外半径',
+      value: outerRadius,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    },
+    {
+      name: 'padAngle',
+      displayName: '间距',
+      value: padAngle,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 20,
+        step: 1,
+        suffix: '°',
+      },
+    },
+  ],
+  config: {
+    defaultOpen: true,
+  },
+});
+
+const defaultOuterDecorate = {
+  outerDecorate: {
+    color: '#CF00FF',
+    width: 10,
+    tick: {
+      show: true,
+      count: 12,
+      color: '#CF00FF',
+      width: 3,
+      length: 8,
+    },
+  },
+};
+const outerDecorate = ({
+  outerDecorate: {
+    color = defaultOuterDecorate.outerDecorate.color,
+    width = defaultOuterDecorate.outerDecorate.width,
+    tick: {
+      show = defaultOuterDecorate.outerDecorate.tick.show,
+      count = defaultOuterDecorate.outerDecorate.tick.count,
+      color: tickColor = defaultOuterDecorate.outerDecorate.tick.color,
+      width: tickWidth = defaultOuterDecorate.outerDecorate.tick.width,
+      length = defaultOuterDecorate.outerDecorate.tick.length,
+    } = defaultOuterDecorate.outerDecorate.tick,
+  } = defaultOuterDecorate.outerDecorate,
+} = defaultOuterDecorate) => ({
+  name: 'outerDecorate',
+  displayName: '外环装饰',
+  value: [
+    {
+      name: 'color',
+      displayName: '颜色',
+      value: color,
+      type: 'color',
+    },
+    {
+      name: 'width',
+      displayName: '粗细',
+      value: width,
+      type: 'number',
+      config: {
+        min: 0,
+        max: 100,
+        suffix: 'px',
+      },
+    },
+    {
+      name: 'tick',
+      displayName: '刻度',
+      value: [
+        showConfig(show),
+        {
+          ...showRule(),
+          name: 'count',
+          displayName: '个数',
+          value: count,
+          type: 'number',
+          config: {
+            min: 0,
+          },
+        },
+        {
+          ...showRule(),
+          name: 'color',
+          displayName: '颜色',
+          value: tickColor,
+          type: 'color',
+        },
+        {
+          ...showRule(),
+          name: 'width',
+          displayName: '粗细',
+          value: tickWidth,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+        {
+          ...showRule(),
+          name: 'length',
+          displayName: '长度',
+          value: length,
+          type: 'number',
+          config: {
+            suffix: 'px',
+          },
+        },
+      ],
+    },
+  ],
+});
+
+export const rosePie = (_basePie = defaultBasePie) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [basePie(_basePie)],
+});
+
+export const rosePieDecorate = (
+  _baseOuter = defaultBaseOuter,
+  _outerDecorate = defaultOuterDecorate
+) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [baseOuter(_baseOuter), outerDecorate(_outerDecorate)],
+});
+
+export const donut = (
+  {
+    basePie: _basePie = defaultBasePie,
+    decorate: _decorate = defaultDecorate,
+  } = {
+    basePie: defaultBasePie,
+    decorate: defaultDecorate,
+  }
+) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [basePie(_basePie), decorate(_decorate)],
+});
+
+export const carouselDonut = (
+  { basePie: _basePie = defaultBasePie, current: _current = defaultCurrent } = {
+    basePie: defaultBasePie,
+    current: defaultCurrent,
+  }
+) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [basePie(_basePie), current(_current)],
+});
+
+export const nestRosePie = (
+  _baseRose = defaultBaseRose,
+  _categoryAxis = defaultRoseAxis,
+  _valueAxis = defaultRoseAxis
+) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [
+    baseRose(_baseRose),
+    roseCategoryAxis(_categoryAxis),
+    roseValueAxis(_valueAxis),
+  ],
+});
+
+export const carouselDonut2 = (
+  {
+    basePie: _basePie = defaultBasePie,
+    categoryText: _categoryText = defaultCategoryText,
+    decorate2: _decorate2 = defaultDecorate2,
+    current: _current = defaultCurrent,
+  } = {
+    basePie: defaultBasePie,
+    categoryText: defaultCategoryText,
+    decorate2: defaultDecorate2,
+    current: defaultCurrent,
+  }
+) => ({
+  name: 'fan',
+  displayName: '环图属性',
+  value: [
+    basePie(_basePie),
+    categoryText(_categoryText),
+    decorate2(_decorate2),
+    current(_current),
+  ],
+});
+
+const defaultPie = {
+  fan: {
+    chart: { rose: false, baseRadius: 0.5, outerRadius: 1, innerRadius: 0 },
+    angle: { startAngle: 0, endAngle: 360, antiClockwise: false },
+    stroke: { show: false, strokeWidth: 1, color: '#FFFFFF' },
+  },
+};
+
+export default ({
+  fan: {
+    chart: {
+      outerRadius = defaultPie.fan.chart.outerRadius,
+      rose = defaultPie.fan.chart.rose,
+      baseRadius = defaultPie.fan.chart.baseRadius,
+    } = defaultPie.fan.chart,
+    angle: {
+      startAngle = defaultPie.fan.angle.startAngle,
+      endAngle = defaultPie.fan.angle.endAngle,
+      antiClockwise = defaultPie.fan.angle.antiClockwise,
+    } = defaultPie.fan.angle,
+    stroke: {
+      show = defaultPie.fan.stroke.show,
+      strokeWidth = defaultPie.fan.stroke.strokeWidth,
+      color = defaultPie.fan.stroke.color,
+    } = defaultPie.fan.stroke,
+  } = defaultPie.fan,
+} = defaultPie) => ({
+  name: 'fan',
+  displayName: '饼图属性',
+  value: [
+    {
+      name: 'chart',
+      displayName: '图形',
+      value: [
+        {
+          name: 'outerRadius',
+          displayName: '半径',
+          value: outerRadius,
+          type: 'range',
+          config: {
+            min: 0,
+            max: 1,
+            step: 0.01,
+          },
+        },
+        {
+          name: 'rose',
+          displayName: '类玫瑰图',
+          value: rose,
+          type: 'boolean',
+        },
+        {
+          rule: [['rose', '$eq', true]],
+          name: 'baseRadius',
+          displayName: '最小半径',
+          value: baseRadius,
+          type: 'range',
+          config: {
+            min: 0,
+            max: 1,
+            step: 0.01,
+          },
+        },
+      ],
+      config: {
+        defaultOpen: true,
+      },
+    },
+    {
+      name: 'angle',
+      displayName: '角度',
+      value: [
+        {
+          name: 'startAngle',
+          displayName: '起始',
+          value: startAngle,
+          type: 'range',
+          config: {
+            step: 1,
+            min: 0,
+            max: 360,
+          },
+        },
+        {
+          name: 'endAngle',
+          displayName: '结束',
+          value: endAngle,
+          type: 'range',
+          config: {
+            step: 1,
+            min: 0,
+            max: 360,
+          },
+        },
+        {
+          name: 'antiClockwise',
+          displayName: '反向',
+          value: antiClockwise,
+          type: 'boolean',
+          tip: '启用使用另一时针顺序绘制饼图',
+        },
+      ],
+      config: {
+        defaultOpen: true,
+      },
+    },
+    {
+      name: 'stroke',
+      displayName: '描边',
+      value: [
+        {
+          name: 'show',
+          displayName: '开启',
+          value: show,
+          type: 'boolean',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'strokeWidth',
+          displayName: '宽度',
+          value: strokeWidth,
+          type: 'number',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          name: 'color',
+          displayName: '颜色',
+          value: color,
+          type: 'color',
+        },
+      ],
+      config: {
+        defaultOpen: true,
+      },
+    },
+  ],
+});