@easyv/config 1.0.44 → 1.0.48

package/src/pie.js

@@ -1,974 +1,979 @@
-import { font, show as showConfig, showRule, translate as translateConfig, axisLine } 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"
-    },
-    {
-      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"
-    },
-    {
-      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"
-    },
-    {
-      ...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, font: font() },
-    percent: {
-      show: true,
-      precision: 0,
-      font: font(),
-      translate: { x: 0, y: 0 },
-    },
-    value: {
-      show: true,
-      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,
-      font: nameFont = defaultCurrent.current.name.font,
-      translate: nameTranslate
-    } = defaultCurrent.current.name,
-    percent: {
-      show: showPercent = defaultCurrent.current.percent.show,
-      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,
-      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: 'font',
-          displayName: '文本样式',
-          value: nameFont,
-          type: 'textStyle',
-        },
-        {
-          ...showRule(),
-          ...nameTranslate!=undefined && translateConfig(nameTranslate.x,nameTranslate.y)
-        }
-      ].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: 'font',
-          displayName: '文本样式',
-          value: percentFont,
-          type: 'textStyle',
-        },
-        {
-          rule: [['show', '$eq', true]],
-          ...translateConfig(percentTranslateX, percentTranslateY),
-        },
-      ],
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'value',
-      displayName: '真实值',
-      value: [
-        showConfig(showValue),
-        {
-          rule: [['show', '$eq', true]],
-          name: 'font',
-          displayName: '文本样式',
-          value: valueFont,
-          type: 'textStyle',
-        },
-        {
-          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"
+    },
+    {
+      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"
+    },
+    {
+      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"
+    },
+    {
+      ...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, font: font() },
+    percent: {
+      show: true,
+      precision: 0,
+      font: font(),
+      translate: { x: 0, y: 0 },
+    },
+    value: {
+      show: true,
+      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,
+      font: nameFont = defaultCurrent.current.name.font,
+      translate: nameTranslate ,
+      textBreak
+    } = defaultCurrent.current.name,
+    percent: {
+      show: showPercent = defaultCurrent.current.percent.show,
+      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,
+      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: 'font',
+          displayName: '文本样式',
+          value: nameFont,
+          type: 'textStyle',
+        },
+        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: 'font',
+          displayName: '文本样式',
+          value: percentFont,
+          type: 'textStyle',
+        },
+        {
+          rule: [['show', '$eq', true]],
+          ...translateConfig(percentTranslateX, percentTranslateY),
+        },
+      ],
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'value',
+      displayName: '真实值',
+      value: [
+        showConfig(showValue),
+        {
+          rule: [['show', '$eq', true]],
+          name: 'font',
+          displayName: '文本样式',
+          value: valueFont,
+          type: 'textStyle',
+        },
+        {
+          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,
+      },
+    },
+  ],
 });