@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/option/config/radiusAxis/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import base from './base';
+import merge from '../../../util/merge';
+import Token from '../../../feature/token';
+
+function radiusAxis(iChartOption, chartName) {
+  let radiusAxisOpt;
+  switch (chartName) {
+    case 'JadeJueChart':
+      radiusAxisOpt = base();
+      merge(radiusAxisOpt, iChartOption.radiusAxis);
+      break;
+    case 'PolarBarChart':
+      radiusAxisOpt = base();
+      radiusAxisOpt.axisLabel.margin = Token.config.radiusAxisLabelGap;
+      merge(radiusAxisOpt, iChartOption.radiusAxis);
+      break;
+    case 'CircleProcessChart':
+      radiusAxisOpt = {
+        type: 'category',
+        show: false,
+      };
+      break;
+    default:
+      break;
+  }
+
+  return radiusAxisOpt;
+}
+
+export default radiusAxis;

package/src/components/charts/option/config/rectTitle/base.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../../feature/token';
+
+// 直角坐标系中的title用于y轴名称
+function getBaseOption() {
+  return {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal',
+      color: Token.config.yAxisNameColor,
+      fontSize: Token.config.yAxisNameFontSize,
+    },
+    padding: [0, 0, 0, 0],
+  };
+}
+
+function base() {
+  return getBaseOption();
+}
+
+export default base;

package/src/components/charts/option/config/rectTitle/index.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import base from './base';
+import { getTextWidth } from '../../../util/dom';
+import merge from '../../../util/merge';
+
+/**
+ * 配置纵轴名称
+ */
+function title(iChartOption, chartName, nameTextStyle = {}) {
+  let name = '';
+  if (iChartOption.yAxisName) {
+    name = iChartOption.yAxisName;
+  }
+  if (iChartOption.yAxis && iChartOption.yAxis.name) {
+    name = iChartOption.yAxis.name;
+  }
+  if (iChartOption.yAxis && iChartOption.yAxis.length === 1 && iChartOption.yAxis[0].name) {
+    name = iChartOption.yAxis[0].name;
+  }
+  let theme = iChartOption.theme;
+  let padding = iChartOption.padding;
+  let title = base(theme);
+  // 名称
+  title.text = name;
+  // 如果图表为柱状图，并且为横向
+  if (chartName == 'BarChart' && iChartOption.direction === 'horizontal') {
+    const nameLength = getTextWidth(name, 12);
+    title.right = padding[1] - nameLength - 24;
+    title.bottom = padding[2];
+    title.textAlign = 'left';
+  } else {
+    // 位置
+    title.padding[0] = padding[0] - 30;
+    title.padding[3] = padding[3];
+  }
+  // y轴文本的样式需要合并到title配置上
+  merge(title.textStyle, nameTextStyle);
+  merge(title.padding, nameTextStyle.padding);
+  delete title.textStyle.padding;
+  return title;
+}
+
+export default title;

package/src/components/charts/option/config/toolbox/base.js

@@ -0,0 +1,42 @@
+import Token from '../../../feature/token';
+
+function base() {
+  return {
+    show: true,
+    showTitle:true,
+    feature: {
+      saveAsImage: {
+        show: false,
+      },
+      restore: {
+        show: false
+      },
+      dataView: {
+        show: false
+      },
+      dataZoom: {
+        show: true,
+      },
+      magicType: {
+        show: false,
+      },
+    },
+    tooltip: {
+      show: false,
+      formatter: undefined,
+      borderRadius: Token.config.tooltipBorderRaduis,
+      textStyle: {
+        color: Token.config.tooltipTextColor,
+        fontSize: Token.config.tooltipTextFontSize,
+      },
+      borderWidth: Token.config.tooltipBorderWidth,
+      padding: Token.config.tooltipPadding,
+      backgroundColor: Token.config.tooltipBg,
+      extraCssText: `box-shadow:0 ${Token.config.tooltipShadowOffsetY}px ${Token.config.tooltipShadowBlur}px 0 ${Token.config.tooltipShadowColor};`
+    }
+  };
+}
+
+
+
+export default base;

package/src/components/charts/option/config/toolbox/index.js

@@ -0,0 +1,12 @@
+import base from './base';
+import merge from '../../../util/merge';
+
+function toolbox(iChartOption) {
+    const { toolbox } = iChartOption
+    if (!toolbox) return undefined
+    const baseToolbox = base()
+    toolbox && merge(baseToolbox, toolbox)
+    return baseToolbox
+}
+
+export default toolbox;

package/src/components/charts/option/config/tooltip/axisPointer.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../../feature/token';
+
+function axisPointer(tooltip, chartName) {
+  switch (chartName) {
+    case 'ProcessBarChart':
+    case 'BarChart':
+      tooltip.axisPointer = {
+        z: -999,
+        type: 'shadow',
+        shadowStyle: {
+          color: Token.config.tooltipAxisPointerShadowColor,
+        },
+      };
+      break;
+    default:
+      break;
+  }
+}
+
+export default axisPointer;

package/src/components/charts/option/config/tooltip/base.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../../feature/token';
+
+const chartType = [
+  'CircleProcessChart',
+  'GaugeChart',
+  'RadarChart',
+  'FunnelChart',
+  'JadeJueChart',
+  'LiquidfillChart',
+  'PieChart',
+  'PolarBarChart',
+  'SunburstChart',
+  'BulletChart',
+  'HeatMapChart',
+  'WordCloudChart',
+  'AssembleBubbleChart'
+];
+
+function base(chartName) {
+  const trigger = chartName && chartType.includes(chartName) ? 'item' : 'axis';
+  return {
+    trigger,
+    confine: true,
+    borderRadius: Token.config.tooltipBorderRaduis,
+    axisPointer: {
+      z: 0,
+      type: 'line',
+      lineStyle: {
+        type: Token.config.tooltipAxisPointerLineType,
+        width: Token.config.tooltipAxisPointerLineWidth,
+        color: Token.config.tooltipAxisPointerLineColor,
+      },
+      shadowStyle: {
+        color: Token.config.tooltipAxisPointerShadowColor,
+      },
+    },
+    textStyle: {
+      color: Token.config.tooltipTextColor,
+      fontSize: Token.config.tooltipTextFontSize,
+    },
+    borderWidth: Token.config.tooltipBorderWidth,
+    padding: Token.config.tooltipPadding,
+    backgroundColor: Token.config.tooltipBg,
+    formatter: undefined,
+    extraCssText: `box-shadow:0 ${Token.config.tooltipShadowOffsetY}px ${Token.config.tooltipShadowBlur}px 0 ${Token.config.tooltipShadowColor};`,
+  };
+}
+
+
+
+export default base;

package/src/components/charts/option/config/tooltip/formatter.js

@@ -0,0 +1,64 @@
+import defendXSS from '../../../util/defendXSS';
+import Token from '../../../feature/token';
+
+function validateName(name) {
+    return name !== null && name !== undefined && name !== ''
+}
+
+// 暂时不校验''
+function formatValue(value) {
+    if (value === null || value === undefined || value === '') {
+        return '--'
+    }
+    return value
+}
+
+function getDataHtmlStr(dataConfig) {
+    const { tooltipIconGap, tooltipValueGap, legendCircleItemHeight, tooltipDataNameColor, tooltipValueColor } = Token.config
+    const {
+        iconColor,
+        name,
+        nameColor = tooltipDataNameColor,
+        value,
+        valueColor = tooltipValueColor,
+        unit = '',
+        unitColor = tooltipValueColor
+    } = dataConfig
+    let iconStr = '', unitStr = ''
+    if (iconColor) {
+        iconStr = `<div style="width:${legendCircleItemHeight}px;height:${legendCircleItemHeight}px;border-radius:50%;background-color:${defendXSS(iconColor)};"></div>`
+    }
+    if (unit) {
+        unitStr = `<span style="font-weight:bold;color:${unitColor};">${defendXSS(unit)}</span>`
+    }
+    const validateVal = formatValue(value)
+    return `<div style="display:flex;align-items:center;justify-content:space-between;gap:${tooltipValueGap}px">
+                      <div style="display:flex;gap:${tooltipIconGap}px;align-items:center;">
+                      ${iconStr}
+                      <span style="display:inline-block;color:${nameColor};">${defendXSS(name)}</span>
+                      </div>
+                      <div style="display:flex;">
+                      <span style="font-weight:bold;color:${valueColor};">${defendXSS(validateVal)}</span>
+                      ${unitStr}
+                      </div> 
+            </div>`;
+}
+
+function getTooltipContentHtmlStr(tipConfig) {
+    const { tooltipItemGap, tooltipTitleColor } = Token.config
+    const { title, titleColor = tooltipTitleColor, children } = tipConfig
+    let content = ''
+    if (validateName(title)) {
+        content = `<div style="color:${titleColor}">${defendXSS(title)}</div>`;
+    }
+    if (children && children.length !== 0) {
+        children.forEach(item => {
+            content += getDataHtmlStr(item)
+        })
+    }
+    const htmlString = `<div style="display:flex;flex-direction:column;gap:${tooltipItemGap}px;">${content}</div>`
+    return htmlString;
+}
+
+export default getTooltipContentHtmlStr
+export { getDataHtmlStr, formatValue, validateName }

package/src/components/charts/option/config/tooltip/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import base from './base';
+import axisPointer from './axisPointer';
+import merge from '../../../util/merge';
+
+/**
+ * tipHtml 和 tipHtmlStyle 为旧属性，后续逐步废弃
+ */
+function tooltip(iChartOption, chartName, callBack) {
+  const formatter = iChartOption.tipHtml;
+  const formatterStyle = iChartOption.tipHtmlStyle;
+  const tooltip = base(chartName);
+  // 组件默认的extraCssText样式
+  const extraCssText = tooltip.extraCssText;
+  if (formatter) {
+    tooltip.formatter = formatter;
+  }
+  if (formatterStyle) {
+    tooltip.padding = formatterStyle.padding || tooltip.padding;
+    tooltip.backgroundColor = formatterStyle.backgroundColor || tooltip.backgroundColor;
+  }
+  axisPointer(tooltip, chartName);
+  callBack && callBack(tooltip)
+  merge(tooltip, iChartOption.tooltip);
+  if (iChartOption.tooltip?.extraCssText) {
+    tooltip.extraCssText = iChartOption.tooltip.extraCssText + extraCssText;
+  }
+  return tooltip;
+}
+
+export default tooltip;

package/src/components/charts/option/config/visualMap/index.js

@@ -0,0 +1,91 @@
+import Token from '../../../feature/token'
+
+function getCommonProperty() {
+    return {
+        show: false,
+        // 指定 visualMapPiecewise 组件的最小值,
+        // 在 连续型数据自定义分段 模式（即 visualMap-piecewise.pieces 被使用）或 离散数据根据类别分段 模式（即 visualMap-piecewise.categories 被使用）时，max 和 min 不需指定。
+        // 在 连续型数据平均分段 模式（即 (that is, when visualMap-piecewise.splitNumber 被使用时）需指定 min、max，如果不指定，则默认为 [0, 200]（注意并不是默认为 series.data 的 dataMin 和 dataMax）。
+        // 指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定
+        min: undefined,
+        // 指定 visualMapPiecewise 组件的最大值。参见 visualMap-piecewise.splitNumber
+        // 连续型数据自定义分段 模式（即 visualMap-piecewise.pieces 被使用）或 离散数据根据类别分段 模式（即 visualMap-piecewise.categories 被使用），max 和 min 不需指定。
+        // 连续型数据平均分段 模式（即 (that is, when visualMap-piecewise.splitNumber 被使用时）需指定 min、max，如果不指定，则默认为 [0, 200]（注意并不是默认为 series.data 的 dataMin 和 dataMax）。
+        // 指定 visualMapContinuous 组件的允许的最大值
+        max: undefined,
+        // 是否反转
+        inverse: false,
+        // visualMapPiecewise代表每个小块的宽度
+        // visualMapcontinuous代表图形的宽度，即长条的宽度
+        itemWidth: 20,
+        // 指定组件中手柄和文字的摆放位置
+        align: 'auto',
+        // 两端的文本，如['High', 'Low']
+        text: undefined,
+        // 每项的色块与文本标签之间的距离
+        textGap: 10,
+        // 指定用数据的『哪个维度』，映射到视觉元素上
+        dimension: undefined,
+        // 鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
+        hoverLink: true,
+        // 定义 在选中范围中 的视觉元素
+        inRange: undefined,
+        // 定义 在选中范围外 的视觉元素
+        outOfRange: undefined,
+        left: 'auto',
+        top: 'auto',
+        right: 'auto',
+        bottom: 'auto',
+        // 放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
+        orient: 'vertical',
+        // visualMap内边距,默认各方向内边距为5
+        padding: 0,
+        // 以下三个属性暂时不考虑写出来，一般不会涉及，后续需要再调整
+        // backgroundColor: 'rgba(0,0,0,0)',
+        // borderColor: '#ccc',
+        // borderWidth: 0,
+        // visualMap 文字样式
+        textStyle: {
+            color: Token.config.visualMapTextColor,
+            fontSize: Token.config.visualMapTextFontSize
+        },
+        formatter: undefined,
+    }
+}
+
+function visualMap(type = 'piecewise') {
+    if (type === 'piecewise') {
+        return {
+            type: 'piecewise',
+            // 连续型数据，自动平均切分成几段
+            splitNumber: 5,
+            // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
+            pieces: undefined,
+            // 用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。
+            categories: undefined,
+            // 选择模式
+            selectedMode: 'multiple',
+            // 每个小块的高度
+            itemHeight: 14,
+            // 是否显示每项的文本标签
+            showLabel: true,
+            // 每两个图元之间的间隔距离
+            itemGap: 1,
+            // 默认的图形
+            itemSymbol: 'rect',
+            ...getCommonProperty()
+        }
+    }
+    return {
+        // 连续型
+        type: 'continuous',
+        // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
+        calculable: false,
+        // 拖拽时，是否实时更新
+        realtime: true,
+        itemHeight: 140,
+        ...getCommonProperty()
+    }
+}
+
+export default visualMap

package/src/components/charts/option/config/xAxis/axisLabel.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import equalLabel from '../../../feature/equalLabel'
+
+
+// 坐标轴刻度
+function axisLabel(xAxisUnit, xAxisItem, iChartOption) { 
+  // 自定义formatter 
+  xAxisUnit.axisLabel.formatter = xAxisItem.formatter || undefined;
+  // 显示间隔
+  xAxisUnit.axisLabel.interval = iChartOption.xAxisInterval || xAxisItem.interval;
+  // 旋转角度
+  xAxisUnit.axisLabel.rotate = iChartOption.xAxisLabelRotate || xAxisItem.labelRotate;
+  // 超出省略
+  if (iChartOption.xAxisEllipsis || xAxisItem.ellipsis) {
+    const xEllipsis = iChartOption.xAxisEllipsis || xAxisItem.ellipsis;
+    xAxisUnit.axisLabel.overflow = xEllipsis.overflow || 'none';
+    xAxisUnit.axisLabel.width = xEllipsis.labelWidth;
+  }
+  // X轴文本均分配置
+  if(xAxisItem.sharing) {
+    equalLabel(iChartOption, xAxisItem, xAxisUnit);
+  }
+}
+
+export default axisLabel;

package/src/components/charts/option/config/xAxis/axisLine.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+function axisLine(xAxisUnit, xAxisItem, iChartOption) { 
+  if (iChartOption.xAxisLine || xAxisItem.line) {
+    const xAxisLine = iChartOption.xAxisLine || xAxisItem.line;
+    if(xAxisLine.show === false){
+      xAxisUnit.axisLine.show = false;
+      xAxisUnit.axisTick.show = false;
+      xAxisUnit.axisLabel.show = false;
+    }
+    if (xAxisLine.lineStyle) {
+      Object.assign(xAxisUnit.axisLine.lineStyle, xAxisLine.lineStyle);
+    }
+    if (xAxisLine.textStyle) {
+      Object.assign(xAxisUnit.axisLabel, xAxisLine.textStyle);
+    }
+  }
+}
+
+export default axisLine;

package/src/components/charts/option/config/xAxis/axisMargin.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+function axisMargin(xAxisUnit, xAxisItem, iChartOption) {  
+    if (xAxisItem && xAxisItem.axisMargin) {
+        let axisMargin = xAxisItem.axisMargin;
+        let min = axisMargin.left;
+        let max = axisMargin.right;
+        if (min) {
+            xAxisUnit.min = function (value) {
+                return value.min - min;
+            }
+        }
+        if (max) {
+            xAxisUnit.max = function (value) {
+                return value.max + max;
+            }
+        }
+    }
+}
+
+export default axisMargin;
+

package/src/components/charts/option/config/xAxis/base.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../../feature/token';
+import { getBasicAnimationConfig } from '../animation';
+
+function base() {
+  return {
+    nameGap: Token.config.xAxisNameGap,
+    data: [],
+    // 坐标轴类型
+    type: 'category',
+    // 坐标轴两边留白策略
+    boundaryGap: true,
+    // 坐标轴在grid区域中分隔线
+    splitLine: {
+      show: false,
+      lineStyle: {
+        width: Token.config.xAxisSplitLineWidth,
+        color: Token.config.xAxisSplitLineColor,
+        type: Token.config.xAxisSplitLineType,
+      },
+    },
+    // 坐标轴名称样式配置
+    nameTextStyle: {
+      color: Token.config.xAxisNameColor,
+      fontSize: Token.config.xAxisNameFontSize,
+    },
+    // 坐标轴线配置
+    axisLine: {
+      lineStyle: {
+        width: Token.config.xAxisLineWidth,
+        color: Token.config.xAxisLineColor,
+        type: Token.config.xAxisLineType,
+      },
+    },
+    // 坐标轴刻度配置
+    axisTick: {
+      alignWithLabel: true,
+      lineStyle: {
+        width: Token.config.xAxisTickLineWidth,
+        color: Token.config.xAxisTickLineColor,
+        type: Token.config.xAxisTickLineType,
+      },
+    },
+    // 坐标轴刻度标签配置
+    axisLabel: {
+      color: Token.config.xAxisLabelColor,
+      fontSize: Token.config.xAxisLabelFontSize,
+    },
+    // 动画配置
+    ...getBasicAnimationConfig()
+  };
+}
+
+
+
+export default base;

package/src/components/charts/option/config/xAxis/boundaryGap.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+function boundaryGap(xAxisUnit, xAxisItem, iChartOption) {
+  let xAxisFullGrid = iChartOption.xAxisFullGrid || xAxisItem.fullGrid;
+  xAxisUnit.boundaryGap = xAxisFullGrid === true ? false : true;
+}
+
+export default boundaryGap;