@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/ProcessChart/handleOption.js

@@ -0,0 +1,212 @@
+/**
+ * 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 { BASICUNIT, CHARTTYPENAME, SERIES_NAME, getDoubleYaxis, getDoubleGrid, getDoubleXaxis } from './BaseOption';
+import merge from '../../util/merge';
+import { isString, isArray } from '../../util/type';
+import { getBarColor } from './handleSeries';
+import getTooltipContentHtmlStr, { getDataHtmlStr } from '../../option/config/tooltip/formatter'
+
+function handleGridWidth(baseOpt, padding, chartInstance) {
+  const right = padding[1];
+  const left = padding[3];
+  const containerWidth = chartInstance.getWidth();
+  const isStrR = isString(right);
+  const isStrL = isString(left);
+  const isPtR = isStrR && right.includes('%');
+  const isPtL = isStrL && left.includes('%');
+  baseOpt.grid[0].left = left;
+  baseOpt.grid[1].right = right;
+  // 左右都是百分比
+  if (isPtR && isPtL) {
+    const width = (100 - parseInt(left) - parseInt(right)) / 2;
+    baseOpt.grid[0].width = `${width}%`;
+    baseOpt.grid[1].width = `${width}%`;
+    return;
+  }
+  const leftPadding = isPtL ? (containerWidth * parseInt(left)) / 100 : parseInt(left);
+  const rightPadding = isPtR ? (containerWidth * parseInt(right)) / 100 : parseInt(right);
+  const horizontalPadding = leftPadding + rightPadding;
+  const gridWidth = (containerWidth - horizontalPadding) / 2;
+  baseOpt.grid[0].width = gridWidth;
+  baseOpt.grid[1].width = gridWidth;
+}
+
+function handleDoubleGrid(baseOpt, iChartOpt, chartInstance) {
+  const { padding } = iChartOpt;
+  baseOpt.grid[0].top = padding[0];
+  baseOpt.grid[0].bottom = padding[2];
+  baseOpt.grid[1].top = padding[0];
+  baseOpt.grid[1].bottom = padding[2];
+  handleGridWidth(baseOpt, padding, chartInstance);
+}
+
+function handleMergeOption(target, source) {
+  target.forEach((item, index) => {
+    merge(item, isArray(source) ? source[index] : source);
+  });
+}
+
+function handleGrid(baseOpt, iChartOpt, doubleSide, chartInstance) {
+  if (doubleSide) {
+    baseOpt.grid = getDoubleGrid()
+    handleDoubleGrid(baseOpt, iChartOpt, chartInstance);
+  } else {
+    baseOpt.grid[0].containLabel = false;
+  }
+  if (iChartOpt.grid) {
+    handleMergeOption(baseOpt.grid, iChartOpt.grid);
+  }
+}
+
+function handleYaxis(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (doubleSide) {
+    baseOpt.yAxis = getDoubleYaxis()
+    baseOpt.yAxis[0].data = dataSet.barName[0];
+    baseOpt.yAxis[1].data = dataSet.barName[1];
+  } else {
+    baseOpt.yAxis[0].inverse = true;
+    baseOpt.yAxis[0].show = false;
+    baseOpt.yAxis[0].data = iChartOpt.name === CHARTTYPENAME.ProcessBarChart ? dataSet.barName : dataSet.seriesName;
+    baseOpt.yAxis[0].type = 'category';
+  }
+  if (iChartOpt.yAxis) {
+    handleMergeOption(baseOpt.yAxis, iChartOpt.yAxis);
+  }
+}
+
+function handleXaxis(baseOpt, doubleSide, iChartOpt) {
+  if (doubleSide) {
+    baseOpt.xAxis = getDoubleXaxis()
+  } else {
+    baseOpt.xAxis[0].show = false;
+    baseOpt.xAxis[0].type = 'value';
+    // 保证图表能横向撑满容器
+    baseOpt.xAxis[0].max = 'dataMax';
+  }
+  if (iChartOpt.xAxis) {
+    handleMergeOption(baseOpt.xAxis, iChartOpt.xAxis);
+  }
+}
+
+function handleDataZoom(baseOpt, initIchartOption) {
+  if (initIchartOption.dataZoom) {
+    handleMergeOption(baseOpt.dataZoom, initIchartOption.dataZoom);
+  }
+}
+
+function handleLegend(baseOpt, dataSet, doubleSide, initIchartOption) {
+  if (doubleSide) {
+    baseOpt.legend.data = dataSet.seriesName.map(item => {
+      return {
+        name: item,
+      };
+    });
+  } else {
+    baseOpt.legend.show = false;
+  }
+  if (initIchartOption.legend) {
+    merge(baseOpt.legend, initIchartOption.legend);
+  }
+}
+
+function getTipValue(params, dataSet, doubleSide) {
+  const index = doubleSide ? Math.floor(params.seriesIndex / 2) : params.dataIndex
+  const data = doubleSide ? dataSet.barData[index][params.dataIndex] : dataSet.barData[index]
+  return data._initValue ?? data.value
+}
+
+
+
+function handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide) {
+  const { unit, tipHtml } = iChartOpt;
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml;
+    return;
+  }
+  const innerUnit = unit || unit === '' ? unit : BASICUNIT;
+  const isItemTooltip = baseOpt.tooltip.trigger === 'item';
+  const ichartTooltipFormatter = iChartOpt?.tooltip?.formatter;
+  baseOpt.tooltip.formatter = echartsParams => {
+    const params = isItemTooltip ? echartsParams : echartsParams[0];
+    const name = params.name;
+    const seriesName = params.seriesName;
+    const value = getTipValue(params, dataSet, doubleSide);
+    const index = doubleSide ? Math.floor(params.seriesIndex / 2) : params.dataIndex
+    const color =
+      seriesName === SERIES_NAME.background
+        ? getBarColor(value, iChartOpt, index)
+        : params.color;
+    if (ichartTooltipFormatter) {
+      const customParams = { ...params, value, color, data: value, unit: innerUnit };
+      return ichartTooltipFormatter(customParams);
+    }
+    if (name === 'null') return;
+
+    const config = {
+      name,
+      value,
+      iconColor: color,
+      unit: innerUnit
+    }
+    return getDataHtmlStr(config)
+  };
+}
+
+function handleStackTipFormatter(baseOpt, iChartOpt) {
+  baseOpt.tooltip.trigger = 'axis';
+  const { tipHtml } = iChartOpt;
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml;
+    return;
+  }
+  baseOpt.tooltip.formatter = params => {
+    const name = params[0].name
+    if (name === 'null') return
+    const config = {
+      title: name,
+      children: []
+    }
+    params.forEach((param, index) => {
+      if (index > 1) {
+        const value = param.data._initValue || param.data.value;
+        const dataItem = {
+          name: param.seriesName,
+          value,
+          iconColor: param.color,
+          unit: iChartOpt.unit
+        }
+        config.children.push(dataItem)
+      }
+    });
+    return getTooltipContentHtmlStr(config)
+  };
+}
+
+function handleTooltip(baseOpt, iChartOpt, dataSet, doubleSide) {
+  baseOpt.tooltip.axisPointer.type = 'none';
+  baseOpt.tooltip.trigger = 'item';
+  if (iChartOpt.tooltip) {
+    merge(baseOpt.tooltip, iChartOpt.tooltip);
+    // 当不显示tip的时候鼠标移动上去没有小手效果
+    if (iChartOpt.tooltip.show === false) {
+      baseOpt.series.forEach(item => {
+        item.cursor = 'auto';
+      });
+    }
+  }
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide);
+  } else {
+    handleStackTipFormatter(baseOpt, iChartOpt);
+  }
+}
+export { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip };

package/src/components/charts/components/ProcessChart/handleSeries.js

@@ -0,0 +1,369 @@
+/**
+ * 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 {
+  CHARTTYPENAME,
+  BASICUNIT,
+  getDataNameSeries,
+  getBackgroundSeries,
+  getDataSeries,
+  getDoubleBackgroundSeries,
+  getDoubleDataNameSeries
+} from './BaseOption';
+import { getColor } from '../../util/color';
+import merge from '../../util/merge';
+import { getTextWidth } from '../../util/dom';
+import chartToken from './chartToken';
+import Token from '../../feature/token';
+import { getMarkLineSeries, SERIES_NAME } from './BaseOption'
+import { isString } from '../../util/type';
+import { percentToDecimal } from '../../util/math';
+
+
+function setStateBarColor(data, stateList) {
+  const min = stateList[0];
+  const max = stateList[stateList.length - 1];
+  const stateColorGroup = getThemeStateColorGroup()
+  const successColor = stateColorGroup.success
+  // 最大值和最小值相等代表就一个值
+  if (min.value === max.value) {
+    const resState = min.state;
+    return data < min.value ? successColor : stateColorGroup[resState];
+  } else {
+    if (data < min.value) {
+      return successColor;
+    }
+    if (data > max.value) {
+      const resState = max.state;
+      return stateColorGroup[resState];
+    }
+    const len = stateList.length;
+    let color;
+    for (let i = 0; i < len; i++) {
+      if (stateList[i].value >= data) {
+        const index = i > 0 ? i - 1 : 0;
+        const resState = stateList[index].state;
+        color = stateColorGroup[resState];
+        break;
+      }
+    }
+    return color;
+  }
+}
+
+function getStateList(state) {
+  // 值与状态对应数组
+  const stateList = [];
+  for (const k in state) {
+    if (Object.hasOwnProperty.call(state, k)) {
+      const stateItem = {
+        state: k,
+        value: state[k],
+      };
+      stateList.push(stateItem);
+    }
+  }
+  stateList.sort((a, b) => a.value - b.value);
+  return stateList
+}
+
+function getBarColor(data, iChartOpt, index) {
+  // dataGroup暂不对外放，使用之后常规进度图的柱子颜色应用一个颜色
+  const { state, color, dataGroup = false } = iChartOpt;
+  if (state) {
+    const stateList = getStateList(state)
+    return setStateBarColor(data, stateList);
+  } else {
+    return getColor(color, dataGroup ? 0 : index)
+  }
+}
+
+function getMarkValue(value, dataSet) {
+  if (!value) return dataSet.maxValue / 2
+  if (isString(value)) {
+    return value.endsWith('%') ? dataSet.maxValue * percentToDecimal(value) : parseInt(value)
+  }
+  return value
+}
+
+function getThemeStateColorGroup() {
+  const { colorState: { colorError, colorAlert, colorWarning, colorSuccess } } = Token.config
+  const stateColorGroup = {
+    error: colorError,
+    warning: colorAlert,
+    subwarning: colorWarning,
+    success: colorSuccess,
+  }
+  return stateColorGroup
+}
+
+function getThemeStatusColor(status = 'success') {
+  const stateColorGroup = getThemeStateColorGroup()
+  return stateColorGroup[status]
+}
+
+function getMarkColor(dataItem, markVal, markLine) {
+  const { status = 'success', color } = markLine
+  const data = dataItem._initValue ?? dataItem.value
+  if (data && data > markVal) {
+    return '#FFFFFF'
+  }
+  if (color) return color
+  const statusColor = getThemeStatusColor(status)
+  return statusColor
+}
+
+function setMarkLine(series, iChartOpt, dataSet, stack) {
+  if (stack) return
+  const { markLine, barWidth } = iChartOpt
+  if (!markLine) return
+  const markSeries = getMarkLineSeries()
+  const markValue = getMarkValue(markLine.value, dataSet)
+  const data = dataSet.barData.map(item => {
+    const markColor = getMarkColor(item, markValue, markLine)
+    return {
+      name: item.name,
+      value: markValue,
+      itemStyle: {
+        color: markColor
+      }
+    }
+  })
+  if (barWidth) {
+    markSeries.symbolSize = [2, barWidth / 2,]
+  }
+  markSeries.data = data
+  series.push(markSeries)
+}
+
+function createPlaceholderArray(length, fillVal) {
+  return new Array(length).fill(fillVal);
+}
+
+function setStackBgLabelFormatter(params, dataSet, iChartOpt) {
+  // 系列名称为null不显示文本(数据缺省功能)
+  const name = dataSet.seriesName[params.dataIndex]
+  if (name === null || name === undefined) return ''
+  // 兼容之前暴露的自定义右侧文本显示的功能，计划后期去除
+  if (iChartOpt.text && iChartOpt.text.labelText) return iChartOpt.text.labelText[params.dataIndex];
+  if (iChartOpt.unit) return `${dataSet.sumValue[params.dataIndex]}${iChartOpt.unit}`;
+  return `${dataSet.sumValue[params.dataIndex]}`;
+}
+
+function setBgLabelFormatter(params, dataSet, iChartOpt, stack) {
+  if (stack) return setStackBgLabelFormatter(params, dataSet, iChartOpt)
+  const innerVal = dataSet.barData[params.dataIndex]._initValue ?? dataSet.barData[params.dataIndex].value;
+  if (innerVal === null || innerVal === undefined) return '';
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT;
+  return `${innerVal}${innerUnit}`;
+}
+
+function setText(bgSeries, dataSet, iChartOpt, stack) {
+  if (iChartOpt.text) {
+    merge(bgSeries.label, iChartOpt.text);
+    const { formatter } = iChartOpt.text;
+    if (stack) return
+    // 右侧为背景的lable为了让用户自定义的formatter获取的params获得中间数据的value去做了内部覆盖处理
+    if (formatter) {
+      bgSeries.label.formatter = params => {
+        const { dataIndex } = params;
+        const value = dataSet.barData[dataIndex]._initValue ?? dataSet.barData[dataIndex].value;
+        const inerParams = {
+          ...params,
+          value,
+          data: value,
+        };
+        return formatter(inerParams);
+      };
+    }
+  }
+}
+
+// 设置占位用的数据名称和背景series
+function setPlaceholderSeries(series, dataSet, iChartOpt, stack) {
+  const dataNumber = stack ? dataSet.seriesName.length : dataSet.barData.length
+  const nameSeries = getDataNameSeries(stack)
+  nameSeries.data = createPlaceholderArray(dataNumber, 0)
+  // 标题文本显示省略
+  if (iChartOpt.title) merge(nameSeries.label, iChartOpt.title);
+  const bgSeries = getBackgroundSeries(stack)
+  bgSeries.data = createPlaceholderArray(dataNumber, dataSet.maxValue)
+  bgSeries.label.formatter = params => setBgLabelFormatter(params, dataSet, iChartOpt, stack)
+  setText(bgSeries, dataSet, iChartOpt, stack)
+  series.push(nameSeries)
+  series.push(bgSeries)
+}
+
+function setDataSeries(series, dataSet, iChartOpt, stack) {
+  if (stack) {
+    // 处理堆叠情况下图表的两端圆角情况,在数据项中加入圆角的配置
+    setStackBordRadius(dataSet);
+    dataSet.barData.forEach((item, index) => {
+      const unitSeries = getDataSeries(stack)
+      unitSeries.data = item;
+      unitSeries.itemStyle.borderRadius = undefined;
+      unitSeries.itemStyle.borderWidth = chartToken.borderWidth;
+      unitSeries.itemStyle.borderColor = chartToken.borderColor;
+      unitSeries.itemStyle.color = getColor(iChartOpt.color, index)
+      //堆叠柱状图需要重新赋值name
+      unitSeries.name = dataSet.barName[index];
+      unitSeries.stack = 'total';
+      unitSeries.label.formatter = params => {
+        const value = params.data._initValue ?? params.data.value;
+        return value || '';
+      };
+      unitSeries.label.show = true;
+      // 中间的图元的文本样式
+      if (iChartOpt.label) merge(unitSeries.label, iChartOpt.label);
+      series.push(unitSeries);
+    });
+    return
+  }
+  const dataSeries = getDataSeries()
+  dataSeries.data = dataSet.barData;
+  dataSeries.itemStyle.color = params => {
+    const dataItem = dataSet.barData[params.dataIndex]
+    const data = dataItem._initValue ?? dataItem.value
+    return getBarColor(data, iChartOpt, params.dataIndex)
+  };
+  series.push(dataSeries)
+}
+
+function setStackBordRadius(dataSet) {
+  const { barData, seriesName } = dataSet
+  const borderRadius = chartToken.borderRadius
+  // 每行的总数据
+  const total = [];
+  for (let row = 0; row < seriesName.length; row++) {
+    const rowData = [];
+    barData.forEach((item, col) => {
+      if (item[row].value) {
+        const dataInfo = {
+          col,
+          row,
+          value: item[row].value,
+        };
+        rowData.push(dataInfo);
+      }
+    });
+    total.push(rowData);
+  }
+  total.forEach(to => {
+    const tolen = to.length;
+    if (tolen !== 0) {
+      // 每行只有一个有效数据
+      if (tolen === 1) {
+        barData[to[0].col][to[0].row] = {
+          ...barData[to[0].col][to[0].row],
+          value: barData[to[0].col][to[0].row].value,
+          itemStyle: {
+            borderRadius,
+          },
+        };
+      } else {
+        barData[to[0].col][to[0].row] = {
+          ...barData[to[0].col][to[0].row],
+          value: barData[to[0].col][to[0].row].value,
+          itemStyle: {
+            borderRadius: [borderRadius, 0, 0, borderRadius],
+          },
+        };
+        barData[to[to.length - 1].col][to[to.length - 1].row] = {
+          ...barData[to[to.length - 1].col][to[to.length - 1].row],
+          value: barData[to[to.length - 1].col][to[to.length - 1].row].value,
+          itemStyle: {
+            borderRadius: [0, borderRadius, borderRadius, 0],
+          },
+        };
+      }
+    }
+  });
+}
+
+
+
+function handleDoubleLabel(params, iChartOpt, dataSet, index) {
+  const { name, dataIndex } = params;
+  const innerVal = dataSet.barData[index][dataIndex]._initValue || dataSet.barData[index][dataIndex].value;
+  if (innerVal === null || innerVal === undefined) return '';
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT;
+  const val = `${innerVal}${innerUnit}`;
+  return `{name|${name}}\n{value|${val}}`;
+}
+
+function getMaxValLength(dataSet, iChartOpt, index) {
+  let maxLength = 0;
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT;
+  dataSet.barData[index].forEach(item => {
+    const val = `${item._initValue || item.value}${innerUnit}`;
+    const len = getTextWidth(val, 14);
+    if (len >= maxLength) maxLength = len;
+  });
+  return maxLength;
+}
+
+
+function setBarWidth(baseOpt, iChartOpt) {
+  const { barWidth } = iChartOpt;
+  if (barWidth) {
+    baseOpt.series.forEach(serie => {
+      if (serie.name === SERIES_NAME.markLine) {
+        serie.symbolSize = [2, barWidth / 2]
+      } else {
+        serie.barWidth = barWidth;
+      }
+    });
+  }
+
+}
+
+function setDoublePlaceholderSeries(series, dataSet, iChartOpt, left, index) {
+  const bgSeries = getDoubleBackgroundSeries(left)
+  bgSeries.data = createPlaceholderArray(dataSet.barData[index].length, dataSet.maxValue)
+  bgSeries.label.formatter = params => handleDoubleLabel(params, iChartOpt, dataSet, index);
+  const coefficent = left ? -1 : 1
+  const valWidth = getMaxValLength(dataSet, iChartOpt, index) * coefficent
+  const offsetX = valWidth + 10 * coefficent
+  bgSeries.label.offset = [offsetX, 9];
+  series.push(bgSeries)
+}
+
+function setDoubleDataSeries(series, dataSet, iChartOpt, left, index) {
+  const dataSeries = getDoubleDataNameSeries(left)
+  dataSeries.data = dataSet.barData[index];
+  dataSeries.name = dataSet.seriesName[index];
+  dataSeries.itemStyle.color = getColor(iChartOpt.color, index);
+  series.push(dataSeries)
+}
+
+function setDoubleSideSeries(series, iChartOpt, dataSet) {
+  dataSet.seriesName.forEach((item, itemIndex) => {
+    const left = itemIndex % 2 === 0
+    setDoublePlaceholderSeries(series, dataSet, iChartOpt, left, itemIndex)
+    setDoubleDataSeries(series, dataSet, iChartOpt, left, itemIndex)
+  })
+}
+
+function setCommonSeries(series, iChartOpt, dataSet) {
+  const stack = iChartOpt.name === CHARTTYPENAME.StackProcessBarChart
+  setPlaceholderSeries(series, dataSet, iChartOpt, stack)
+  setDataSeries(series, dataSet, iChartOpt, stack)
+  setMarkLine(series, iChartOpt, dataSet, stack)
+}
+
+function handleSeries(baseOpt, iChartOpt, dataSet, doubleSide) {
+  const series = []
+  doubleSide ? setDoubleSideSeries(series, iChartOpt, dataSet) : setCommonSeries(series, iChartOpt, dataSet)
+  baseOpt.series = series
+  setBarWidth(baseOpt, iChartOpt);
+}
+export { setStateBarColor, getStateList, getBarColor };
+export default handleSeries;

package/src/components/charts/components/ProcessChart/index.js

@@ -0,0 +1,76 @@
+/**
+ * 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 init from '../../option/init';
+import mini from '../../feature/mini/miniProcessChart';
+import RectCoordSys from '../../option/RectSys';
+import { PROCESSBARTYPE, CHARTTYPENAME } from './BaseOption';
+import handleData from './handleData';
+import { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip } from './handleOption';
+import handleSeries from './handleSeries';
+import cloneDeep from '../../util/cloneDeep';
+import { CHART_TYPE } from '../../util/constants';
+
+class ProcessChart {
+
+  static name = CHART_TYPE.PROCESS
+
+  constructor(iChartOption, chartInstance) {
+    // 保存初始的iChartOption
+    this.initIchartOption = cloneDeep(iChartOption);
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.chartInstance = chartInstance;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    if (!iChartOption.name) {
+      throw new Error('ProcessChart must have a name');
+    }
+    // 加载默认的直角坐标系
+    RectCoordSys(this.baseOption, iChartOption, iChartOption.name);
+    // 是否是基础双向进度图
+    const doubleSide = iChartOption.name === CHARTTYPENAME.ProcessBarChart && iChartOption.type && iChartOption.type === PROCESSBARTYPE;
+    const dataSet = handleData(iChartOption, doubleSide);
+    if (!dataSet) return;
+
+    handleGrid(this.baseOption, iChartOption, doubleSide, this.chartInstance);
+
+    handleYaxis(this.baseOption, iChartOption, dataSet, doubleSide);
+
+    handleXaxis(this.baseOption, doubleSide, iChartOption);
+    // datazoom和legend会在init配置默认值做特殊处理手动用初始值做混合
+    handleDataZoom(this.baseOption, this.initIchartOption);
+
+    handleLegend(this.baseOption, dataSet, doubleSide, this.initIchartOption);
+
+    handleSeries(this.baseOption, iChartOption, dataSet, doubleSide);
+
+    handleTooltip(this.baseOption, iChartOption, dataSet, doubleSide);
+    // 处理特性
+    mini(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption(option) {
+    this.baseOption = option;
+  }
+}
+
+export default ProcessChart;