@easyv/config 1.0.45 → 1.0.49

package/src/series.js

@@ -1,632 +1,816 @@
-import { mapping, label, multiColor } from '.';
-
-const _mapping = { fieldName: '', displayName: '' };
-
-const defaultBandSeries = {
-  mapping: _mapping,
-  yOrZ: 'y',
-  stack: '',
-  fill: {
-    type: 'linear',
-    pure: '#fff',
-    linear: {
-      stops: [
-        { offset: 0, color: '#fff' },
-        { offset: 50, color: '#ff0' },
-        { offset: 100, color: '#f0f' },
-      ],
-      angle: 30,
-      opacity: 1,
-    },
-  },
-  highlight: {
-    show: false,
-    extent: 'max',
-    fill: {
-      type: 'linear',
-      pure: '#fff',
-      linear: {
-        stops: [
-          { offset: 0, color: '#fff' },
-          { offset: 50, color: '#ff0' },
-          { offset: 100, color: '#f0f' },
-        ],
-        angle: 30,
-        opacity: 1,
-      },
-    },
-  },
-};
-
-export const bandSeries = (
-  name = Math.random() + '',
-  {
-    mapping: {
-      fieldName = defaultBandSeries.mapping.fieldName,
-      displayName = defaultBandSeries.mapping.displayName,
-    } = defaultBandSeries.mapping,
-    yOrZ = defaultBandSeries.yOrZ,
-    stack,
-    patternType,
-    patternWidth,
-    patternHeight,
-    patternImage,
-    fill = defaultBandSeries.fill,
-    highlight: {
-      show: showHighlight = defaultBandSeries.highlight.show,
-      extent: highlightExtent = defaultBandSeries.highlight.extent,
-      fill: highlightFill = defaultBandSeries.highlight.fill,
-    } = defaultBandSeries.highlight,
-  } = defaultBandSeries
-) => {
-  return {
-    name,
-    displayName: '系列',
-    value: [
-      mapping({ fieldName, displayName }),
-      {
-        name: 'yOrZ',
-        displayName: '纵轴选择',
-        value: yOrZ,
-        type: 'select',
-        config: {
-          options: [
-            { name: 'Y轴', value: 'y' },
-            { name: 'Z轴', value: 'z' },
-          ],
-        },
-      },
-      stack !== undefined && {
-        name: 'stack',
-        displayName: '堆叠',
-        value: stack,
-        type: 'input',
-      },
-      {
-        name: 'fill',
-        displayName: '颜色',
-        type: 'multicolor',
-        value: fill,
-      },
-      patternType !== undefined && {
-        name: 'patternType',
-        displayName: '纹理类型',
-        value: patternType,
-        type: 'radio',
-        config: {
-          options: [
-            { name: '默认', value: 'default' },
-            { name: '自定义', value: 'custom' },
-          ],
-        },
-      },
-      patternImage !== undefined && {
-        rule: [['patternType', '$eq', 'custom']],
-        name: 'patternImage',
-        displayName: '纹理',
-        value: patternImage,
-        type: 'uploadImage',
-      },
-      patternWidth !== undefined && {
-        name: 'patternWidth',
-        displayName: '纹理宽度',
-        value: patternWidth,
-        type: 'number',
-        config: {
-          suffix: 'px',
-        },
-      },
-      patternHeight !== undefined && {
-        name: 'patternHeight',
-        displayName: '纹理高度',
-        value: patternHeight,
-        type: 'number',
-        config: {
-          suffix: 'px',
-        },
-      },
-      {
-        name: 'highlight',
-        displayName: '极值高亮',
-        value: [
-          {
-            name: 'show',
-            displayName: '显示',
-            type: 'boolean',
-            value: showHighlight,
-          },
-          {
-            rule: [['show', '$eq', true]],
-            name: 'extent',
-            displayName: '极值',
-            value: highlightExtent,
-            type: 'select',
-            config: {
-              options: [
-                { name: '最大值', value: 'max' },
-                { name: '最小值', value: 'min' },
-              ],
-            },
-          },
-          {
-            rule: [['show', '$eq', true]],
-            name: 'fill',
-            displayName: '颜色',
-            type: 'multicolor',
-            value: highlightFill,
-          },
-        ],
-      },
-    ].filter((item) => !!item),
-    type: 'object',
-  };
-};
-
-const defaultLineSeries = {
-  mapping: _mapping,
-  yOrZ: 'y',
-  line: {
-    type: 'solid',
-    color: '#FFFFFF',
-    lineWidth: '1',
-    curve: true,
-    tension: 0,
-    connectNulls: false,
-    lighter: {
-      show: false,
-      fill: {
-        type: 'linear',
-        pure: '#fff',
-        linear: {
-          stops: [
-            { offset: 0, color: '#fff' },
-            { offset: 50, color: '#ff0' },
-            { offset: 100, color: '#f0f' },
-          ],
-          angle: 30,
-          opacity: 1,
-        },
-      },
-      length: 200,
-      width: 2,
-      unitStep: 1,
-    },
-  },
-  areaColor: {
-    type: 'linear',
-    pure: '#fff',
-    linear: {
-      stops: [
-        { offset: 0, color: '#fff' },
-        { offset: 50, color: '#ff0' },
-        { offset: 100, color: '#f0f' },
-      ],
-      angle: 30,
-      opacity: 1,
-    },
-  },
-};
-const defaultIcon = {
-  show: true,
-  mode: 'double',
-  inner: { color: '#83C4FF', radius: 3 },
-  outer: { color: 'rgba(24,144,255,0.4)', radius: 6 },
-  color: '#1283E3',
-  radius: 4,
-};
-
-const commonLine = (
-  {
-    type = defaultLineSeries.line.type,
-    color = defaultLineSeries.line.color,
-    lineWidth = defaultLineSeries.line.lineWidth,
-    curve = defaultLineSeries.line.curve,
-    tension = defaultLineSeries.line.tension,
-    connectNulls = defaultLineSeries.line.connectNulls,
-  } = defaultLineSeries.line
-) => [
-  {
-    name: 'type',
-    displayName: '类型',
-    value: type,
-    type: 'select',
-    config: {
-      options: [
-        {
-          name: '实线',
-          value: 'solid',
-        },
-        {
-          name: '虚线',
-          value: 'dash',
-        },
-      ],
-    },
-  },
-  {
-    name: 'color',
-    displayName: '颜色',
-    value: color,
-    type: 'color',
-  },
-  {
-    name: 'lineWidth',
-    displayName: '粗细',
-    value: lineWidth,
-    type: 'input',
-    config: {
-      suffix: 'px',
-    },
-  },
-  {
-    name: 'curve',
-    displayName: '曲线',
-    value: curve,
-    type: 'boolean',
-  },
-  {
-    rule: [['curve', '$eq', true]],
-    name: 'tension',
-    displayName: '曲线张力',
-    value: tension,
-    type: 'range',
-    config: {
-      min: 0,
-      max: 1,
-      step: 0.1,
-    },
-  },
-  {
-    name: 'connectNulls',
-    displayName: 'null值连接',
-    value: connectNulls,
-    type: 'boolean',
-  },
-];
-
-const lighter = (
-  {
-    show = defaultLineSeries.line.lighter.show,
-    fill = defaultLineSeries.line.lighter.fill,
-    length = defaultLineSeries.line.lighter.length,
-    width = defaultLineSeries.line.lighter.width,
-    unitStep = defaultLineSeries.line.lighter.unitStep,
-  } = defaultLineSeries.line.lighter
-) => ({
-  name: 'lighter',
-  displayName: '光效',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'fill',
-      displayName: '颜色',
-      type: 'multicolor',
-      value: fill,
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'length',
-      displayName: '长度',
-      value: length,
-      type: 'number',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'width',
-      displayName: '宽度',
-      value: width,
-      type: 'number',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'unitStep',
-      displayName: '速度',
-      value: unitStep,
-      type: 'number',
-    },
-  ],
-});
-
-const icon = ({
-  show = defaultIcon.show,
-  mode = defaultIcon.mode,
-  inner: {
-    color: innerColor = defaultIcon.inner.color,
-    radius: innerRadius = defaultIcon.inner.innerRadius,
-  } = defaultIcon.inner,
-  outer: {
-    color: outerColor = defaultIcon.outer.color,
-    radius: outerRadius = defaultIcon.outer.radius,
-  } = defaultIcon.outer,
-  color = defaultIcon.color,
-  radius = defaultIcon.radius,
-} = defaultIcon) => ({
-  name: 'icon',
-  displayName: '数据标记',
-  value: [
-    {
-      name: 'show',
-      displayName: '显示',
-      value: show,
-      type: 'boolean',
-    },
-    {
-      rule: [['show', '$eq', true]],
-      name: 'mode',
-      displayName: '模式',
-      value: mode,
-      type: 'select',
-      config: {
-        options: [
-          {
-            name: '单圆',
-            value: 'single',
-          },
-          {
-            name: '双圆',
-            value: 'double',
-          },
-        ],
-      },
-    },
-    {
-      rule: [
-        ['show', '$eq', true],
-        ['mode', '$eq', 'double'],
-      ],
-      name: 'inner',
-      displayName: '内圆',
-      value: [
-        {
-          name: 'color',
-          displayName: '颜色',
-          value: innerColor,
-          type: 'color',
-        },
-        {
-          name: 'radius',
-          displayName: '半径',
-          value: innerRadius,
-          type: 'number',
-          config: {
-            min: 0,
-            suffix: 'px',
-          },
-        },
-      ],
-    },
-    {
-      rule: [
-        ['show', '$eq', true],
-        ['mode', '$eq', 'double'],
-      ],
-      name: 'outer',
-      displayName: '外圆',
-      value: [
-        {
-          name: 'color',
-          displayName: '颜色',
-          value: outerColor,
-          type: 'color',
-        },
-        {
-          name: 'radius',
-          displayName: '半径',
-          value: outerRadius,
-          type: 'number',
-          config: {
-            min: 0,
-            suffix: 'px',
-          },
-        },
-      ],
-    },
-    {
-      rule: [
-        ['show', '$eq', true],
-        ['mode', '$eq', 'single'],
-      ],
-      name: 'color',
-      displayName: '颜色',
-      value: color,
-      type: 'color',
-    },
-    {
-      rule: [
-        ['show', '$eq', true],
-        ['mode', '$eq', 'single'],
-      ],
-      name: 'radius',
-      displayName: '半径',
-      value: radius,
-      type: 'number',
-      config: {
-        min: 0,
-        suffix: 'px',
-      },
-    },
-  ],
-});
-export const lineSeries = (
-  name = Math.random() + '',
-  {
-    mapping: {
-      fieldName = defaultLineSeries.mapping.fieldName,
-      displayName = defaultLineSeries.mapping.displayName,
-    } = defaultLineSeries.mapping,
-    yOrZ = defaultLineSeries.yOrZ,
-    line = defaultLineSeries.line,
-    icon: lineIcon,
-    label: lineLabel,
-  } = defaultLineSeries
-) => ({
-  name,
-  displayName: '系列',
-  value: [
-    mapping({ fieldName, displayName }),
-    {
-      name: 'yOrZ',
-      displayName: '纵轴选择',
-      value: yOrZ,
-      type: 'select',
-      config: {
-        options: [
-          { name: 'Y轴', value: 'y' },
-          { name: 'Z轴', value: 'z' },
-        ],
-      },
-    },
-    {
-      name: 'line',
-      displayName: '折线',
-      value: commonLine(line),
-    },
-    icon(lineIcon),
-    label(lineLabel),
-  ],
-  type: 'object',
-});
-
-export const areaSeries = (
-  name = Math.random() + '',
-  {
-    mapping: {
-      fieldName = defaultLineSeries.mapping.fieldName,
-      displayName = defaultLineSeries.mapping.displayName,
-    } = defaultLineSeries.mapping,
-    yOrZ = defaultLineSeries.yOrZ,
-    line: {
-      type = defaultLineSeries.line.type,
-      color = defaultLineSeries.line.color,
-      lineWidth = defaultLineSeries.line.lineWidth,
-      curve = defaultLineSeries.line.curve,
-      tension = defaultLineSeries.line.tension,
-      connectNulls = defaultLineSeries.line.connectNulls,
-      lighter: lineLighter,
-    } = defaultLineSeries.line,
-    label: areaLabel = defaultLineSeries.label,
-    areaColor = defaultLineSeries.areaColor,
-  } = defaultLineSeries
-) => ({
-  name,
-  displayName: '系列',
-  value: [
-    mapping({ fieldName, displayName }),
-    {
-      name: 'yOrZ',
-      displayName: '纵轴选择',
-      value: yOrZ,
-      type: 'select',
-      config: {
-        options: [
-          { name: 'Y轴', value: 'y' },
-          { name: 'Z轴', value: 'z' },
-        ],
-      },
-    },
-    {
-      name: 'areaColor',
-      displayName: '区域颜色',
-      type: 'multicolor',
-      value: areaColor,
-    },
-    {
-      name: 'line',
-      displayName: '折线',
-      value: [
-        ...commonLine({
-          type,
-          color,
-          lineWidth,
-          curve,
-          tension,
-          connectNulls,
-        }),
-        // lineLighter && lighter(lineLighter),
-      ].filter((item) => !!item),
-    },
-    label(areaLabel),
-  ],
-  type: 'object',
-});
-
-const defaultPieSeries = {
-  mapping: _mapping,
-  color: {
-    type: 'linear',
-    pure: '#fff',
-    linear: {
-      stops: [
-        { offset: 0, color: '#fff' },
-        { offset: 50, color: '#ff0' },
-        { offset: 100, color: '#f0f' },
-      ],
-      angle: 30,
-      opacity: 1,
-    },
-  },
-};
-export const pieSeries = (
-  name = Math.random() + '',
-  {
-    mapping: {
-      fieldName = defaultPieSeries.mapping.fieldName,
-      displayName = defaultPieSeries.mapping.displayName,
-    } = defaultPieSeries.mapping,
-    color = defaultPieSeries.color,
-    currentColor
-  } = defaultPieSeries
-) => ({
-  name: name,
-  displayName: '系列',
-  value: [
-    mapping({ fieldName, displayName }),
-    {
-      name: 'color',
-      displayName: currentColor !=undefined?'默认颜色':'颜色',
-      type: 'multicolor',
-      value: multiColor(color),
-    },
-    currentColor !=undefined && {
-      name: 'currentColor',
-      displayName: '当前颜色',
-      type:"multicolor",
-      value: multiColor(currentColor)
-    }
-  ].filter((item)=>!!item),
-  type: 'object',
-});
-
-const defaultPurePieSeries = {
-  mapping: _mapping,
-  color: "#fff"
-};
-export const purePieSeries = (
-  name = Math.random() + '',
-  {
-    mapping: {
-      fieldName = defaultPurePieSeries.mapping.fieldName,
-      displayName = defaultPurePieSeries.mapping.displayName,
-    } = defaultPurePieSeries.mapping,
-    color = defaultPurePieSeries.color
-  } = defaultPurePieSeries
-) => ({
-  name: name,
-  displayName: '系列',
-  value: [
-    mapping({ fieldName, displayName }),
-    {
-      name: 'color',
-      displayName: '填充',
-      type: 'color',
-      value: color,
-    }
-  ],
-  type: 'object',
+import { mapping, label, multiColor } from '.';
+
+const _mapping = { fieldName: '', displayName: '' };
+
+const defaultBandSeries = {
+  mapping: _mapping,
+  yOrZ: 'y',
+  fillType: 'color',
+  fillImage: 'components/static-image/superChart/pattern.png',
+  fill: {
+    type: 'linear',
+    pure: '#fff',
+    linear: {
+      stops: [
+        { offset: 0, color: '#fff' },
+        { offset: 50, color: '#ff0' },
+        { offset: 100, color: '#f0f' },
+      ],
+      angle: 30,
+      opacity: 1,
+    },
+  },
+  highlight: {
+    show: false,
+    extent: 'max',
+    fill: {
+      type: 'linear',
+      pure: '#fff',
+      linear: {
+        stops: [
+          { offset: 0, color: '#fff' },
+          { offset: 50, color: '#ff0' },
+          { offset: 100, color: '#f0f' },
+        ],
+        angle: 30,
+        opacity: 1,
+      },
+    },
+  },
+  size: {
+    width: 10,
+    height: 10
+  },
+  opacity: 0.65
+};
+
+export const bandSeries = (
+  name = Math.random() + '',
+  {
+    mapping: {
+      fieldName = defaultBandSeries.mapping.fieldName,
+      displayName = defaultBandSeries.mapping.displayName,
+    } = defaultBandSeries.mapping,
+    yOrZ = defaultBandSeries.yOrZ,
+    stack,
+    patternType,
+    fillType,
+    fillImage = defaultBandSeries.fillImage,
+    patternWidth,
+    patternHeight,
+    patternImage,
+    fill = defaultBandSeries.fill,
+    size: {
+      width: urlWidth = defaultBandSeries.size.width,
+      height: urlHeight = defaultBandSeries.size.height
+    } = defaultBandSeries.size,
+    opacity = defaultBandSeries.opacity,
+    highlight: {
+      show: showHighlight = defaultBandSeries.highlight.show,
+      extent: highlightExtent = defaultBandSeries.highlight.extent,
+      fill: highlightFill = defaultBandSeries.highlight.fill,
+    } = defaultBandSeries.highlight,
+  } = defaultBandSeries
+) => {
+  return {
+    name,
+    displayName: '系列',
+    value: [
+      mapping({ fieldName, displayName }),
+      {
+        name: 'yOrZ',
+        displayName: '纵轴选择',
+        value: yOrZ,
+        type: 'select',
+        config: {
+          options: [
+            { name: 'Y轴', value: 'y' },
+            { name: 'Z轴', value: 'z' },
+          ],
+        },
+      },
+      stack !== undefined && {
+        name: 'stack',
+        displayName: '堆叠',
+        value: stack,
+        type: 'input',
+      },
+      patternType === undefined && {
+        name: 'fillType',
+        displayName: '填充样式',
+        value: fillType,
+        type: 'radio',
+        config: {
+          options: [
+            { name: '颜色', value: 'color' },
+            { name: '纹理', value: 'pattern' },
+          ],
+        },
+      },
+      patternType === undefined && {
+        rule: [['fillType', '$eq', 'color']],
+        name: 'fill',
+        displayName: '颜色',
+        type: 'multicolor',
+        value: fill,
+      },
+      patternType === undefined && {
+        rule: [['fillType', '$eq', 'pattern']],
+        name: 'url',
+        displayName: '纹理图片',
+        type: 'uploadImage',
+        value: fillImage,
+      },
+      patternType === undefined && {
+        rule: [['fillType', '$eq', 'pattern']],
+        name: 'size',
+        displayName: '尺寸',
+        value: [
+          {
+            name: 'width',
+            displayName: '宽度',
+            value: urlWidth,
+            config: { span: 12, suffix: 'W' },
+          },
+          {
+            name: 'height',
+            displayName: '高度',
+            value: urlHeight,
+            config: { span: 12, suffix: 'H' },
+          },
+        ],
+        type: 'group',
+      },
+      patternType === undefined && {
+        rule: [['fillType', '$eq', 'pattern']],
+        type: "range",
+        name: "opacity",
+        displayName: "透明度",
+        value: opacity,
+        config: { max: 1, min: 0, step: 0.01 }
+      },
+      patternType !== undefined && {
+        name: 'fill',
+        displayName: '颜色',
+        type: 'multicolor',
+        value: fill,
+      },
+      patternType !== undefined && {
+        name: 'patternType',
+        displayName: '纹理类型',
+        value: patternType,
+        type: 'radio',
+        config: {
+          options: [
+            { name: '默认', value: 'default' },
+            { name: '自定义', value: 'custom' },
+          ],
+        },
+      },
+      patternImage !== undefined && {
+        rule: [['patternType', '$eq', 'custom']],
+        name: 'patternImage',
+        displayName: '纹理',
+        value: patternImage,
+        type: 'uploadImage',
+      },
+      patternWidth !== undefined && {
+        name: 'patternWidth',
+        displayName: '纹理宽度',
+        value: patternWidth,
+        type: 'number',
+        config: {
+          suffix: 'px',
+        },
+      },
+      patternHeight !== undefined && {
+        name: 'patternHeight',
+        displayName: '纹理高度',
+        value: patternHeight,
+        type: 'number',
+        config: {
+          suffix: 'px',
+        },
+      },
+      {
+        name: 'highlight',
+        displayName: '极值高亮',
+        value: [
+          {
+            name: 'show',
+            displayName: '显示',
+            type: 'boolean',
+            value: showHighlight,
+          },
+          {
+            rule: [['show', '$eq', true]],
+            name: 'extent',
+            displayName: '极值',
+            value: highlightExtent,
+            type: 'select',
+            config: {
+              options: [
+                { name: '最大值', value: 'max' },
+                { name: '最小值', value: 'min' },
+              ],
+            },
+          },
+          {
+            rule: [['show', '$eq', true]],
+            name: 'fill',
+            displayName: '颜色',
+            type: 'multicolor',
+            value: highlightFill,
+          },
+        ],
+      },
+    ].filter((item) => !!item),
+    type: 'object',
+  };
+};
+
+const defaultLineSeries = {
+  mapping: _mapping,
+  yOrZ: 'y',
+  line: {
+    type: 'solid',
+    color: '#FFFFFF',
+    lineWidth: '1',
+    curve: true,
+    tension: 0,
+    connectNulls: false,
+    lighter: {
+      show: false,
+      fill: {
+        type: 'linear',
+        pure: '#fff',
+        linear: {
+          stops: [
+            { offset: 0, color: '#fff' },
+            { offset: 50, color: '#ff0' },
+            { offset: 100, color: '#f0f' },
+          ],
+          angle: 30,
+          opacity: 1,
+        },
+      },
+      length: 200,
+      width: 2,
+      unitStep: 1,
+    },
+  },
+  areaType: 'color',
+  size: {
+    width: 10,
+    height: 10
+  },
+  url: 'components/static-image/superChart/pattern.png',
+  opacity: 0.65,
+  areaColor: {
+    type: 'linear',
+    pure: '#fff',
+    linear: {
+      stops: [
+        { offset: 0, color: '#fff' },
+        { offset: 50, color: '#ff0' },
+        { offset: 100, color: '#f0f' },
+      ],
+      angle: 30,
+      opacity: 1,
+    },
+  },
+};
+const defaultIcon = {
+  show: true,
+  mode: 'double',
+  inner: { color: '#83C4FF', radius: 3 },
+  outer: { color: 'rgba(24,144,255,0.4)', radius: 6 },
+  color: '#1283E3',
+  radius: 4,
+  image: 'components/static-image/superChart/fang.png',
+  size: {
+    width: 10,
+    height: 10
+  }
+};
+
+const commonLine = (
+  {
+    type = defaultLineSeries.line.type,
+    color = defaultLineSeries.line.color,
+    lineWidth = defaultLineSeries.line.lineWidth,
+    curve = defaultLineSeries.line.curve,
+    tension = defaultLineSeries.line.tension,
+    connectNulls = defaultLineSeries.line.connectNulls,
+  } = defaultLineSeries.line
+) => [
+    {
+      name: 'type',
+      displayName: '类型',
+      value: type,
+      type: 'select',
+      config: {
+        options: [
+          {
+            name: '实线',
+            value: 'solid',
+          },
+          {
+            name: '虚线',
+            value: 'dash',
+          },
+        ],
+      },
+    },
+    {
+      name: 'color',
+      displayName: '颜色',
+      value: color,
+      type: 'color',
+    },
+    {
+      name: 'lineWidth',
+      displayName: '粗细',
+      value: lineWidth,
+      type: 'input',
+      config: {
+        suffix: 'px',
+      },
+    },
+    {
+      name: 'curve',
+      displayName: '曲线',
+      value: curve,
+      type: 'boolean',
+    },
+    {
+      rule: [['curve', '$eq', true]],
+      name: 'tension',
+      displayName: '曲线张力',
+      value: tension,
+      type: 'range',
+      config: {
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    {
+      name: 'connectNulls',
+      displayName: 'null值连接',
+      value: connectNulls,
+      type: 'boolean',
+    },
+  ];
+
+const lighter = (
+  {
+    show = defaultLineSeries.line.lighter.show,
+    fill = defaultLineSeries.line.lighter.fill,
+    length = defaultLineSeries.line.lighter.length,
+    width = defaultLineSeries.line.lighter.width,
+    unitStep = defaultLineSeries.line.lighter.unitStep,
+  } = defaultLineSeries.line.lighter
+) => ({
+  name: 'lighter',
+  displayName: '光效',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'fill',
+      displayName: '颜色',
+      type: 'multicolor',
+      value: fill,
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'length',
+      displayName: '长度',
+      value: length,
+      type: 'number',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'width',
+      displayName: '宽度',
+      value: width,
+      type: 'number',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'unitStep',
+      displayName: '速度',
+      value: unitStep,
+      type: 'number',
+    },
+  ],
+});
+
+const icon = ({
+  show = defaultIcon.show,
+  mode = defaultIcon.mode,
+  inner: {
+    color: innerColor = defaultIcon.inner.color,
+    radius: innerRadius = defaultIcon.inner.innerRadius,
+  } = defaultIcon.inner,
+  outer: {
+    color: outerColor = defaultIcon.outer.color,
+    radius: outerRadius = defaultIcon.outer.radius,
+  } = defaultIcon.outer,
+  color = defaultIcon.color,
+  radius = defaultIcon.radius,
+  image = defaultIcon.image,
+  size: {
+    width: imageWidth = defaultIcon.size.width,
+    height: imageHeight = defaultIcon.size.height
+  } = defaultIcon.size
+} = defaultIcon) => ({
+  name: 'icon',
+  displayName: '数据标记',
+  value: [
+    {
+      name: 'show',
+      displayName: '显示',
+      value: show,
+      type: 'boolean',
+    },
+    {
+      rule: [['show', '$eq', true]],
+      name: 'mode',
+      displayName: '模式',
+      value: mode,
+      type: 'select',
+      config: {
+        options: [
+          {
+            name: '单圆',
+            value: 'single',
+          },
+          {
+            name: '双圆',
+            value: 'double',
+          },
+          {
+            name: '自定义',
+            value: 'custom',
+          },
+        ],
+      },
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'custom'],
+      ],
+      name: 'image',
+      displayName: '图片',
+      value: image,
+      type: 'uploadImage',
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'custom'],
+      ],
+      name: 'size',
+      displayName: '尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: imageWidth,
+          config: {
+            span: 12,
+            suffix: 'W',
+          },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: imageHeight,
+          config: {
+            span: 12,
+            suffix: 'H',
+          },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'double'],
+      ],
+      name: 'inner',
+      displayName: '内圆',
+      value: [
+        {
+          name: 'color',
+          displayName: '颜色',
+          value: innerColor,
+          type: 'color',
+        },
+        {
+          name: 'radius',
+          displayName: '半径',
+          value: innerRadius,
+          type: 'number',
+          config: {
+            min: 0,
+            suffix: 'px',
+          },
+        },
+      ],
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'double'],
+      ],
+      name: 'outer',
+      displayName: '外圆',
+      value: [
+        {
+          name: 'color',
+          displayName: '颜色',
+          value: outerColor,
+          type: 'color',
+        },
+        {
+          name: 'radius',
+          displayName: '半径',
+          value: outerRadius,
+          type: 'number',
+          config: {
+            min: 0,
+            suffix: 'px',
+          },
+        },
+      ],
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'single'],
+      ],
+      name: 'color',
+      displayName: '颜色',
+      value: color,
+      type: 'color',
+    },
+    {
+      rule: [
+        ['show', '$eq', true],
+        ['mode', '$eq', 'single'],
+      ],
+      name: 'radius',
+      displayName: '半径',
+      value: radius,
+      type: 'number',
+      config: {
+        min: 0,
+        suffix: 'px',
+      },
+    },
+  ],
+});
+export const lineSeries = (
+  name = Math.random() + '',
+  {
+    mapping: {
+      fieldName = defaultLineSeries.mapping.fieldName,
+      displayName = defaultLineSeries.mapping.displayName,
+    } = defaultLineSeries.mapping,
+    yOrZ = defaultLineSeries.yOrZ,
+    line = defaultLineSeries.line,
+    icon: lineIcon,
+    label: lineLabel,
+  } = defaultLineSeries
+) => ({
+  name,
+  displayName: '系列',
+  value: [
+    mapping({ fieldName, displayName }),
+    {
+      name: 'yOrZ',
+      displayName: '纵轴选择',
+      value: yOrZ,
+      type: 'select',
+      config: {
+        options: [
+          { name: 'Y轴', value: 'y' },
+          { name: 'Z轴', value: 'z' },
+        ],
+      },
+    },
+    {
+      name: 'line',
+      displayName: '折线',
+      value: commonLine(line),
+    },
+    icon(lineIcon),
+    label(lineLabel),
+  ],
+  type: 'object',
+});
+
+export const areaSeries = (
+  name = Math.random() + '',
+  {
+    mapping: {
+      fieldName = defaultLineSeries.mapping.fieldName,
+      displayName = defaultLineSeries.mapping.displayName,
+    } = defaultLineSeries.mapping,
+    yOrZ = defaultLineSeries.yOrZ,
+    line: {
+      type = defaultLineSeries.line.type,
+      color = defaultLineSeries.line.color,
+      lineWidth = defaultLineSeries.line.lineWidth,
+      curve = defaultLineSeries.line.curve,
+      tension = defaultLineSeries.line.tension,
+      connectNulls = defaultLineSeries.line.connectNulls,
+      lighter: lineLighter,
+    } = defaultLineSeries.line,
+    label: areaLabel = defaultLineSeries.label,
+    areaType = defaultLineSeries.areaType,
+    areaColor = defaultLineSeries.areaColor,
+    url = defaultLineSeries.url,
+    size: {
+      width: urlWidth = defaultLineSeries.size.width,
+      height: urlHeight = defaultLineSeries.size.height
+    } = defaultLineSeries.size,
+    opacity = defaultLineSeries.opacity
+  } = defaultLineSeries
+) => ({
+  name,
+  displayName: '系列',
+  value: [
+    mapping({ fieldName, displayName }),
+    {
+      name: 'yOrZ',
+      displayName: '纵轴选择',
+      value: yOrZ,
+      type: 'select',
+      config: {
+        options: [
+          { name: 'Y轴', value: 'y' },
+          { name: 'Z轴', value: 'z' },
+        ],
+      },
+    },
+    {
+      name: "areaType",
+      displayName: "区域样式",
+      value: areaType,
+      type: 'radio',
+      config: {
+        options: [
+          { name: "颜色", value: "color" },
+          { name: "纹理", value: "pattern" }
+        ]
+      }
+    },
+    {
+      rule: [['areaType', '$eq', 'color']],
+      name: 'areaColor',
+      displayName: '区域颜色',
+      type: 'multicolor',
+      value: areaColor,
+    },
+    {
+      rule: [
+        ['areaType', '$eq', 'pattern']
+      ],
+      name: "url",
+      displayName: "纹理图片",
+      value: url,
+      type: "uploadImage"
+    },
+    {
+      rule: [['areaType', '$eq', 'pattern']],
+      name: 'size',
+      displayName: '尺寸',
+      value: [
+        {
+          name: 'width',
+          displayName: '宽度',
+          value: urlWidth,
+          config: { span: 12, suffix: 'W' },
+        },
+        {
+          name: 'height',
+          displayName: '高度',
+          value: urlHeight,
+          config: { span: 12, suffix: 'H' },
+        },
+      ],
+      type: 'group',
+    },
+    {
+      rule: [['areaType', '$eq', 'pattern']],
+      type: "range",
+      name: "opacity",
+      displayName: "透明度",
+      value: opacity,
+      config: { max: 1, min: 0, step: 0.01 }
+    },
+    {
+      name: 'line',
+      displayName: '折线',
+      value: [
+        ...commonLine({
+          type,
+          color,
+          lineWidth,
+          curve,
+          tension,
+          connectNulls,
+        }),
+        // lineLighter && lighter(lineLighter),
+      ].filter((item) => !!item),
+    },
+    label(areaLabel),
+  ],
+  type: 'object',
+});
+
+const defaultPieSeries = {
+  mapping: _mapping,
+  color: {
+    type: 'linear',
+    pure: '#fff',
+    linear: {
+      stops: [
+        { offset: 0, color: '#fff' },
+        { offset: 50, color: '#ff0' },
+        { offset: 100, color: '#f0f' },
+      ],
+      angle: 30,
+      opacity: 1,
+    },
+  },
+};
+export const pieSeries = (
+  name = Math.random() + '',
+  {
+    mapping: {
+      fieldName = defaultPieSeries.mapping.fieldName,
+      displayName = defaultPieSeries.mapping.displayName,
+    } = defaultPieSeries.mapping,
+    color = defaultPieSeries.color,
+    currentColor
+  } = defaultPieSeries
+) => ({
+  name: name,
+  displayName: '系列',
+  value: [
+    mapping({ fieldName, displayName }),
+    {
+      name: 'color',
+      displayName: currentColor != undefined ? '默认颜色' : '颜色',
+      type: 'multicolor',
+      value: multiColor(color),
+    },
+    currentColor != undefined && {
+      name: 'currentColor',
+      displayName: '当前颜色',
+      type: "multicolor",
+      value: multiColor(currentColor)
+    }
+  ].filter((item) => !!item),
+  type: 'object',
+});
+
+const defaultPurePieSeries = {
+  mapping: _mapping,
+  color: "#fff"
+};
+export const purePieSeries = (
+  name = Math.random() + '',
+  {
+    mapping: {
+      fieldName = defaultPurePieSeries.mapping.fieldName,
+      displayName = defaultPurePieSeries.mapping.displayName,
+    } = defaultPurePieSeries.mapping,
+    color = defaultPurePieSeries.color
+  } = defaultPurePieSeries
+) => ({
+  name: name,
+  displayName: '系列',
+  value: [
+    mapping({ fieldName, displayName }),
+    {
+      name: 'color',
+      displayName: '填充',
+      type: 'color',
+      value: color,
+    }
+  ],
+  type: 'object',
 });