misp-ui-library-test 0.0.1

package/src/packages/chart/src/axis-chart.js

@@ -0,0 +1,700 @@
+/**
+ * @typedef {'bar' | 'line' | 'scatter' | 'custom'} SeriesType 图表系列类型
+ */
+/** @typedef {string} ImageUrl 图片地址, 形如 image://[url] */
+/** @typedef {string} SvgPath SvgPath, 形如 path://[path] */
+/**
+ * @typedef {'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | 'none' | ImageUrl | SvgPath } SymbolType 图例标记类型
+ */
+/**
+ * @typedef {[number | string, number | string]} DotData 点数据
+ */
+/**
+ * @typedef ChartItemProperty 图表图形原型
+ * @property {string} color 颜色
+ */
+/**
+ * @typedef DotDataProp 自定义点数据
+ * @property {DotData} value 点坐标
+ * @property {number} [symbolSize] 点大小
+ */
+/**
+ * @typedef MarklineDataProp
+ * @property {number} xAxis 横坐标
+ * @property {number} yAxis 纵坐标
+ */
+/**
+ * @typedef MarkLineItem 标记线元数据
+ * @property {Array<MarklineDataProp | Number> | null} data 标记线数据
+ * @property {ChartItemProperty} [lineStyle] 线条样式
+ * @property {ChartItemProperty} [label] 标签
+ * @property {SymbolType} [symbol] 图标样式
+ * @property {number | [number, number]} symbolSize 图标大小, 左右统一配置/分别配置
+ * @property {number} [zlevel] 标记线 Z 层级
+ */
+/**
+ * @typedef SeriesItem 系列元数据
+ * @property {SeriesType} type - 系列类型
+ * @property {string} name - 系列名称
+ * @property {string} [stack] - 堆叠名称
+ * @property {DotData[] | DotDataProp[]} data 图表类型
+ * @property {number} [symbolSize] 点大小
+ * @property {boolean} downArea 是否显示区域色块
+ * @property {MarkLineItem} [markLine] 元素样式
+ * @property {number} [zlevel] 系列数据 Z 层级
+ * @property {boolean} [onlyLabel] - 是否仅显示标签(柱状图用)
+ */
+/**
+ * @typedef TooltipBatchItem Tooltip 系列元数据
+ * @property {string} seriesName 系列名称
+ * @property {string} axisValueLabel 当前元素的轴标签
+ * @property {number} value 当前元素值
+ * @property {string} marker 系列标记图标
+ */
+/**
+ * @typedef AxisItem 坐标轴元数据
+ * @property {string} [type]
+ * @property {string} [name]
+ * @property {array} [data]
+ * @property {object} [axisLine]
+ * @property {object} [axisLabel]
+ * @property {object} [nameTextStyle]
+ * @property {object} [splitLine]
+ */
+/**
+ * @typedef EchartsOption 图表配置项
+ * @property {AxisItem | AxisItem[]} xAxis X 轴配置
+ * @property {AxisItem | AxisItem[]} yAxis Y 轴配置
+ * @property {SeriesItem[]} series 系列数据
+ */
+
+import { colorOpacityTrans } from '../../../utils/color'
+import { isEmpty, isNumber, isArray, merge } from '../../../utils/lodash'
+import { defaultColorCard } from './utils'
+
+// Bar / Line / Scatter
+const BARTYPECODE = 'bar' // 柱状图类型标识
+const LINETYPECODE = 'line' // 折线图类型标识
+const SCATTERTYPECODE = 'scatter' // 散点图类型标识
+// 图表 Tooltip
+const TOOLTIP_AXIS_POINTER_TYPE = 'cross' // Tooltip 轴标签样式
+const ZOOM_HANDLER_ICON = 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z'
+const ZOOM_ICON = 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzE4ODQ5MjI4NzQzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQyNDUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTAgMTgyLjg1NzE0M2MwIDI5LjI1NzE0MyAyMS45NDI4NTcgNTEuMiA1MS4yIDUxLjJoNzMuMTQyODU3djczLjE0Mjg1N2MwIDI5LjI1NzE0MyAyMS45NDI4NTcgNTEuMiA1MS4yIDUxLjJzNTEuMi0yMS45NDI4NTcgNTEuMi01MS4ydi03My4xNDI4NTdoNzMuMTQyODU3YzI5LjI1NzE0MyAwIDUxLjItMjEuOTQyODU3IDUxLjItNTEuMnMtMjEuOTQyODU3LTUxLjItNTEuMi01MS4yaC03My4xNDI4NTdWNTEuMmMwLTI5LjI1NzE0My0yMS45NDI4NTctNTEuMi01MS4yLTUxLjJzLTUxLjIgMjEuOTQyODU3LTUxLjIgNTEuMnY3My4xNDI4NTdoLTczLjE0Mjg1N2MtMjkuMjU3MTQzIDAtNTEuMiAyMS45NDI4NTctNTEuMiA1MS4yek0wIDk4MC4xMTQyODZWNjgwLjIyODU3MWMwLTIxLjk0Mjg1NyAyMS45NDI4NTctNDMuODg1NzE0IDQzLjg4NTcxNC00My44ODU3MTRzNDMuODg1NzE0IDIxLjk0Mjg1NyA0My44ODU3MTUgNDMuODg1NzE0djI1Nmg4NTUuNzcxNDI4Vjg3Ljc3MTQyOUg2ODcuNTQyODU3Yy0yMS45NDI4NTcgMC00My44ODU3MTQtMjEuOTQyODU3LTQzLjg4NTcxNC00My44ODU3MTVTNjU4LjI4NTcxNCAwIDY4MC4yMjg5NzEgMEgxMDAyLjA1NzE0M2M3LjMxNDI4NiA3LjMxNDI4NiAxNC42Mjg1NzEgMTQuNjI4NTcxIDE0LjYyODU3MSAyOS4yNTcxNDNWOTg3LjQyODU3MWMtNy4zMTQyODYgNy4zMTQyODYtMjEuOTQyODU3IDE0LjYyODU3MS0yOS4yNTcxNDMgMTQuNjI4NTcySDIxLjk0Mjg1N2MtMjEuOTQyODU3IDAtMjEuOTQyODU3LTcuMzE0Mjg2LTIxLjk0Mjg1Ny0yMS45NDI4NTd6IiBwLWlkPSI0MjQ2IiBmaWxsPSIjMDA2ZWRjIj48L3BhdGg+PC9zdmc+'
+
+const textStyle = {
+  overflow: 'truncate',
+  ellipsis: '...'
+}
+
+/**
+ * 给定一个二维数组，将其中的每个数组的长度规整为最长的一个数组的长度，使用各自数组中首个元素类型的空值进行填充，原有的元素保持不变
+ * 元素类型的空值，如string型的空值为''，number型的空值为0，boolean型的空值为false，object型的空值为{}，array型的空值为[]，等。
+ * @param {Array<Array>} arrays 输入二维数组
+ * @return {Array<Array>} 返回规整后的二维数组
+ */
+function arrayRound(arrays) {
+  if (!Array.isArray(arrays) || arrays.length === 0) {
+    return [];
+  }
+
+  // 统计最大长度
+  let maxLength = 0;
+  for (const arr of arrays) {
+    if (Array.isArray(arr) && arr.length > maxLength) {
+      maxLength = arr.length;
+    }
+  }
+
+  // 如果最大长度为0（例如所有子数组都是空的），直接返回原数组的副本或空处理
+  if (maxLength === 0) {
+    return arrays.map(arr => [...arr]);
+  }
+
+  // 获取值对应类型下的空值
+  const getEmptyValueByType = (value) => {
+    if (value === null || value === undefined) return null;
+
+    const type = typeof value;
+    switch (type) {
+      case 'string':
+        return '';
+      case 'number':
+        return 0;
+      case 'boolean':
+        return false;
+      case 'object':
+        // 区分 Array 和 Object 以及 null (null 上面已处理，但为了保险)
+        if (Array.isArray(value)) {
+          return [];
+        }
+        if (value instanceof Date) {
+            return new Date(0); // 或者 null，视具体业务而定，这里暂定为空对象逻辑之外的特殊处理，通常归为object
+        }
+        return {};
+      default:
+        return undefined;
+    }
+  };
+
+  // 开始遍历与填充
+  return arrays.map(subArray => {
+    // 如果不是数组，返回一个填充最大长度的数组
+    if (!Array.isArray(subArray)) {
+      return Array(maxLength).fill(null)
+    }
+
+    // 如果当前数组长度已经等于最大长度，无需填充（返回副本以防修改原数据）
+    const currentLength = subArray.length;
+    if (currentLength >= maxLength) {
+      return [...subArray];
+    }
+
+    // 确定填充用的模板值
+    let fillValue = null;
+    if (subArray.length > 0) {
+      fillValue = getEmptyValueByType(subArray[0]);
+    }
+    // 创建新数组并填充
+    const newArray = [...subArray, ...Array(maxLength - currentLength).fill(fillValue)];
+
+    return newArray;
+  });
+}
+
+/**
+ * X 轴配置整合
+ * @returns {object | Array<object>}
+ */
+export function xAxis() {
+  if (isArray(this.xAxisName) || (isArray(this.xAxisData) && this.xAxisData.some(isArray)) || isArray(this.xAxisValueMin) || isArray(this.xAxisValueMin)) {
+    // 检测到多个 X 轴配置
+    const nameList = isArray(this.xAxisName) ? this.xAxisName : [this.xAxisName]
+    const axisDataList = isArray(this.xAxisData) && this.xAxisData.some(isArray) ? this.xAxisData : [this.xAxisData]
+    const minList = isArray(this.xAxisValueMin) ? this.xAxisValueMin : [this.xAxisValueMin]
+    const maxList = isArray(this.xAxisValueMax) ? this.xAxisValueMax : [this.xAxisValueMax]
+
+    const [newNameList, newAxisDataList, newMinList, newMaxList] = arrayRound([nameList, axisDataList, minList, maxList])
+    return newNameList.map((name, index) => ({
+      ...xAxisItem.call(this),
+      name,
+      data: newAxisDataList[index] || undefined,
+      ...(!(this.xAxisType === 'category') && { min: newMinList[index] || undefined, max: newMaxList[index] || undefined })
+    }))
+  } else {
+    // 单一 X 轴
+    return {
+      ...xAxisItem.call(this),
+      name: this.xAxisName,
+      data: this.xAxisData || undefined,
+      ...(!(this.xAxisType === 'category') && { min: this.xAxisValueMin || undefined, max: this.xAxisValueMax || undefined })
+    }
+  }
+}
+/**
+ * 生成单个 X 轴配置
+ * @returns {object}
+ */
+function xAxisItem() {
+  const that = this
+  const axisData = isArray(this.xAxisData) && !isEmpty(this.xAxisData) ? this.xAxisData : []
+  return {
+    type: this.xAxisType,
+    data: axisData,
+    inverse: this.reverse,
+    splitLine: { lineStyle: { get color () { return colorOpacityTrans(that.xAxisSplitLineColor) }}}, // 标准化色值, 下同
+    axisLine: {
+      show: true,
+      lineStyle: { get color () { return colorOpacityTrans(that.xAxisLineColor) } }
+    },
+    axisLabel: {
+      width: this.xAxisLabelWidth,
+      ...textStyle,
+      get color () { return colorOpacityTrans(that.xAxisLabelColor) },
+      fontSize: this.xAxisLabelFontSize,
+      formatter: this.xAxisLabelFormatter,
+      tooltip: { show: true },
+      showMinLabel: this.xAxisShowMinLabel,
+      showMaxLabel: this.xAxisShowMaxLabel,
+    },
+    nameTextStyle: {
+      get color () { return colorOpacityTrans(that.xAxisNameColor) },
+      fontSize: this.xAxisNameFontSize,
+      padding: [8, 0, 0, 20],
+      verticalAlign: 'top',
+    }
+  }
+}
+
+/**
+ * Y 轴配置整合
+ * @return {object | Array<object>}
+ */
+export function yAxis() {
+  if (isArray(this.yAxisName) || isArray(this.yAxisValueMax)) {
+    // 检测到多个 Y 轴
+    const nameList = isArray(this.yAxisName) ? this.yAxisName : [this.yAxisName]
+    const minList = isArray(this.yAxisValueMin) ? this.yAxisValueMin : [this.yAxisValueMin]
+    const maxList = isArray(this.yAxisValueMax) ? this.yAxisValueMax : [this.yAxisValueMax]
+
+    const [newNameList, newMinList, newMaxList]  = arrayRound([nameList, minList, maxList])
+    return newNameList.map((name, index) => ({
+      ...yAxisItem.call(this),
+      name,
+      min: newMinList[index] || undefined,
+      max: newMaxList[index] || undefined
+    }))
+  } else {
+    // 单一 Y 轴
+    return {
+      ...yAxisItem.call(this),
+      name: this.yAxisName,
+      min: this.yAxisValueMin || undefined,
+      max: this.yAxisValueMax || undefined
+    }
+  }
+}
+/**
+ * 生成单个 Y 轴配置
+ * @returns {object}
+ */
+function yAxisItem() {
+  const that = this
+  return {
+    type: 'value',
+    alignTicks: true,
+    splitLine: { lineStyle: { get color () { return colorOpacityTrans(that.yAxisSplitLineColor) }}},
+    axisLine: {
+      show: true,
+      onZero: false,
+      lineStyle: { get color () { return colorOpacityTrans(that.yAxisLineColor) } }
+    },
+    axisLabel: {
+      get color () { return colorOpacityTrans(that.yAxisLabelColor) },
+      fontSize: this.yAxisLabelFontSize,
+      showMinLabel: this.yAxisShowMinLabel,
+      showMaxLabel: this.yAxisShowMaxLabel,
+    },
+    nameTextStyle: {
+      width: this.yAxisLabelWidth,
+      get color () { return colorOpacityTrans(that.yAxisNameColor) },
+      fontSize: this.yAxisNameFontSize
+    },
+  }
+}
+
+/**
+ * 图表系列数据配置
+ */
+export function series() {
+  return this.seriesData.map((s, i) => {
+    let dataWithTransposive = []
+    if (this.fastRender) {
+      // 快速加载模式下, 不进行数据预处理
+      dataWithTransposive = s.data
+    } else {
+      // 数组倒置
+      /** @type {DotData[] | DotDataProp[]} */
+      const dataWithReverse = s.data ?? []
+      // 数组二维化
+      /** @type {DotData[] | DotDataProp[]} */
+      const dataWithArrayly = dataWithReverse.map((v, i) => isArray(v) ? v :
+        typeof v === 'object' ?
+          { ...v, value: typeof v?.value === 'object' ?
+            v.value
+            : [labelDataBindHandler.call(this, i, this.xAxisData), v?.value] }
+          : [labelDataBindHandler.call(this, i, this.xAxisData), v]
+      )
+      // 数组转置
+      dataWithTransposive = this.transpose ? dataWithArrayly.map(v => [v[1], v[0]]) : dataWithArrayly
+    }
+
+    // 系列数据规整
+    s.type === BARTYPECODE && barExtend.call(this, s)
+    s.type === LINETYPECODE && lineExtend.call(this, s, i)
+    s.type === SCATTERTYPECODE && scatterExtend.call(this, s)
+
+    const markLine = s.markLine ? marklinkRender.call(this, s.markLine, i) : {}
+
+    return {
+      symbolSize: this.symbolSize,
+      ...s,
+      data: dataWithTransposive,
+      label: {
+        show: this.showValue,
+        position: this.valueLabelPosition
+      },
+      markLine
+    }
+  })
+}
+/**
+ * 数据标签绑定处理
+ * @param {number} index - 数据索引
+ * @param {array} labelSet - 数据标签集合
+ * @returns {string | number} 数据标签
+ */
+function labelDataBindHandler(index, labelSet = []) {
+  if (this.dataBindWithLabel || this.xAxisType === 'category') {
+    if (isArray(labelSet) && !isEmpty(labelSet)) {
+      return labelSet[index]
+    } else {
+      return index
+    }
+  } else {
+    return index
+  }
+}
+/**
+ * 柱状图配置
+ * @param {object} series 图表单系列数据
+ * @param {number} index 系列索引
+ */
+function barExtend(series, index) {
+  const that = this
+  merge(series, {
+    emphasis: { label: { show: that.showValue } }
+  })
+}
+/**
+ * 折线图配置
+ * @param {object} series 图表单系列数据
+ * @param {number} index 系列索引
+ */
+function lineExtend(series, index) {
+  const that = this
+  const itemColor = series?.color || color.call(this)[index] || ''
+  const areaStyleProp = (isArray(series.data) && !isEmpty(series.data)) && series.downArea && itemColor ? {
+    areaStyle: {
+      color: {
+        colorStops: [
+          { offset: 0, get color() { return colorOpacityTrans(itemColor) } },
+          { offset: 1, get color() { return colorOpacityTrans('base-bg', 0) } }
+        ],
+        x: 0, y: 0, x2: 0, y2: 1, type: 'linear', global: false
+      }
+    }
+  } : {}
+  merge(series, {
+    // 根据主题切换节点 Icon
+    get symbol () { return that.theme === 'dark' ? 'circle' : 'emptyCircle' },
+  }, areaStyleProp)
+}
+/**
+ * 散点图配置
+ * @param {object} series 图表单系列数据
+ * @param {number} index 系列索引
+ */
+function scatterExtend(series, index) {
+  const that = this
+  merge(series, {
+    // 根据主题切换节点 Icon
+    get symbol () { return that.theme === 'dark' ? 'circle' : 'emptyCircle' }
+  })
+}
+/**
+ * 标记线配置
+ * @param {MarkLineItem} marklineItem - 元素元数据
+ * @param {number} itemIndex - 元素索引
+ * @returns {MarkLineItem}
+ */
+function marklinkRender(marklineItem, itemIndex) {
+  const that = this
+  if (isArray(marklineItem.data)) {
+    let prop = merge({}, marklineItem, {
+      lineStyle: { get color() { return color.call(that)[itemIndex] } },
+      label: { get color() { return color.call(that)[itemIndex] } },
+      symbol: 'none'
+    })
+    if (marklineItem.data.every(isNumber)) {
+      // 如果标记线数据全为数字, 视作坐标标记线
+      // 转置处理
+      if (this.transpose) {
+        prop.data = marklineItem.data.map(xAxis => ({ xAxis }))
+      } else {
+        prop.data = marklineItem.data.map(yAxis => ({ yAxis }))
+      }
+    } else {
+      // 否则使用原配置
+      prop.data = marklineItem.data
+    }
+    return prop
+  } else {
+    return {}
+  }
+}
+
+/**
+ * 图表色卡配置
+ * @returns {Array<string>}
+ */
+export function color() {
+  const colorCard = [...new Set([...this.colorMap, ...defaultColorCard])] // 去重, 合并默认色卡
+  return colorCard.map(t => colorOpacityTrans(t)) // 色卡名称转色值
+}
+
+/**
+ * 生成数据缩放配置
+ * @returns {object}
+ */
+export function dataZoom() {
+  if (!this.isZoom) return null;
+
+  // 图例位置解析
+  const zoomBarPositionProp = () => {
+    const positionObj = { orient: ['top', 'bottom'].includes(this.zoomBarPosition) ? 'horizontal' : 'vertical' };
+    if (this.zoomBarPosition === 'top') positionObj.top = this.zoomBarGap;
+    if (this.zoomBarPosition === 'right') positionObj.right = this.zoomBarGap;
+    if (this.zoomBarPosition === 'bottom') positionObj.bottom = this.zoomBarGap;
+    if (this.zoomBarPosition === 'left') positionObj.left = this.zoomBarGap;
+    return positionObj;
+  }
+  const dataZoomBar = {
+    show: true,
+    type: 'slider',
+    height: this.zoomBarHeight,
+    ...zoomBarPositionProp(),
+    borderColor: 'transparent',
+    get backgroundColor() { return colorOpacityTrans('fifth-blue', 0.8) },
+    get fillerColor () { return colorOpacityTrans('blue-1', 0.1) },
+    handleIcon: ZOOM_HANDLER_ICON,
+    icon: { zoom: ZOOM_ICON, back: 'image://' },
+    handleSize: '110%',
+    handleStyle: { get color() { return colorOpacityTrans('blue-5') }},
+    textStyle: { get color () { return colorOpacityTrans('td-text') }},
+    labelFormatter: this.zoomBarLabelFormatter || undefined
+  }
+  if (isArray(this.displayRange) && this.displayRange[0] && this.displayRange[1]) {
+    // 如果配置了初始展示范围
+    return {
+      ...dataZoomBar,
+      startValue: this.displayRange[0],
+      endValue: this.displayRange[1]
+    }
+  } else {
+    return dataZoomBar
+  }
+}
+
+/**
+ * 生成 Tooltip 配置
+ * @returns {object}
+ */
+export function tooltip() {
+  if (!this.hasTooltip) return undefined
+
+  return {
+    trigger: this.tooltipTrigger,
+    ...(this.axisTooltip && {
+      axisPointer: {
+        type: TOOLTIP_AXIS_POINTER_TYPE,
+        label: { get backgroundColor () { return colorOpacityTrans('blue-4') } }
+      }
+    }),
+    formatter: this.tooltipFormatter ?? defaultTooltipFormatter.bind(this)
+  }
+}
+/**
+ * 默认 Tooltip 格式器
+ * @param {TooltipBatchItem[]} batch - 系列数据
+ */
+function defaultTooltipFormatter(batch) {
+  if (isArray(batch)) {
+    // 轴索引标签
+    const nameItem = `<div>${batch[0].axisValueLabel}</div>`
+    // 各系列数据数据描述
+    const itemRow = batch.map((prop, index) => {
+      const { marker, seriesName, value } = prop
+      if (!value || !isArray(value) || (isArray(value) && value.some(isEmpty)) || this.seriesData[index]?.onlyLabel) {
+        // 如果无数据或系列仅展示标签, Tooltip 不展示对应数据
+        return ''
+      } else {
+        // 否则拼装数据描述
+        let unit = this.tooltipWithUtil ? (this.yAxisUnit[index] ?? this.yAxisName[index] ?? '') : ''
+        const str = '<div style="width: 100%; min-width: 130px; display: flex; align-items: center; justify-content: flex-start">' +
+          `<div>${marker}</div>` + // 系列标记 Icon
+          `<div style="margin: 0 10px 0 5px">${seriesName}</div>` + // 系列名称
+          `<div style="margin-left: auto; font-weight: 700">${value[1]} ${unit}</div>` + // 数值
+          '</div>'
+        return str
+      }
+    })
+    return itemRow.filter(v => v).join('') ? `<div>${nameItem}${itemRow.filter(v => v).join('')}</div>` : ''
+  } else {
+    return ''
+  }
+}
+
+/**
+ * 生成图例配置
+ * @returns {object}
+ */
+export function legend() {
+  if (!this.displayLegend) return undefined;
+
+  // 图例列表
+  const legendList = isArray(this.seriesData) && !isEmpty(this.seriesData) ? this.seriesData.map(item => ({
+    name: item.name,
+    icon: item.legendIcon,
+    textStyle: { get color() { return colorOpacityTrans('sd-text') } },
+    itemStyle: seriesItemStyleRedner(item),
+    lineStyle: seriesLineStyleRender(item),
+  })) : []
+  // 图例位置
+  const legendPositionProp = () => {
+    const positionObj = {};
+    if (this.legendPosition.includes('top')) positionObj.top = this.legendBorderGap;
+    if (this.legendPosition.includes('right')) positionObj.right = this.legendBorderGap;
+    if (this.legendPosition.includes('bottom')) positionObj.bottom = this.legendBorderGap;
+    if (this.legendPosition.includes('left')) positionObj.left = this.legendBorderGap;
+    return positionObj;
+  }
+  return {
+    show: true,
+    selectedMode: this.selectedMode,
+    ...legendPositionProp(),
+    itemGap: this.legendItemGap,
+    itemWidth: this.legendItemWidth,
+    itemHeight: this.legendItemHeight,
+    textStyle: {
+      height: this.legendItemHeight,
+      padding: [2, 0, 0, 4],
+      lineHeight: this.legendItemHeight,
+      rich: { align: { verticalAlign: 'middle' } },
+    },
+    data: legendList,
+    pageButtonItemGap: this.legendPageButtonGap,
+    pageButtonGap: this.legendPageGap,
+    pageButtonPosition: this.legendPagePosition,
+    get pageIconColor() { return colorOpacityTrans('sd-text') },
+    get pageIconInactiveColor() { return colorOpacityTrans('td-text') },
+    pageTextStyle: { get color() { return colorOpacityTrans('primary-text') } },
+  }
+}
+/**
+ * 元素样式配置
+ * @param {SeriesItem} item - 元素元数据
+ * @returns {object | null} 元素样式
+ */
+function seriesItemStyleRedner(item) {
+  switch (item.type) {
+    case BARTYPECODE:
+      return {
+        borderWidth: 2
+      }
+    case LINETYPECODE:
+      if (isArray(item.markLine?.data)) {
+        return {
+          opacity: 0
+        }
+      } else {
+        return null
+      }
+    default:
+      return null
+  }
+}
+/**
+ * 元素线样式配置
+ * @param {SeriesItem} item - 元素元数据
+ * @returns {object | null} 元素线样式
+ */
+function seriesLineStyleRender(item) {
+  switch (item.type) {
+    case LINETYPECODE:
+      if (isArray(item.markLine?.data)) {
+        return {
+          width: 2,
+          type: 'solid',
+        }
+      } else {
+        return {
+          width: 2,
+          type: [3, 3],
+          dashOffset: [2, 5]
+        }
+      }
+    default:
+      return null
+  }
+}
+
+/**
+ * 生成图表布局配置
+ * @returns {object}
+ */
+export function grid() {
+  const gridProp =  {
+    top: this.gridTop,
+    bottom: this.gridBottom,
+    left: this.gridLeft,
+    right: this.gridRight,
+    containLabel: this.gridContainLabel,
+  }
+  // 展示图例时, 图表为图例预留空间
+  if (this.displayLegend) {
+    if (['top', 'bottom'].includes(this.legendPosition)) {
+      gridProp[this.legendPosition] += this.legendBorderGap + this.legendItemHeight
+    } else if (['left', 'right'].includes(this.legendPosition)) {
+      gridProp[this.legendPosition] += this.legendBorderGap + this.legendItemWidth
+    }
+  }
+  // 启用图表缩放时, 图表为缩放控件预留空间
+  if (this.isZoom) {
+    gridProp[this.zoomBarPosition] += this.zoomBarGap + this.zoomBarChartGap
+  }
+  return gridProp
+}
+
+/**
+ * 生成坐标系图表配置项
+ * @returns {object}
+ */
+export function options() {
+  const xAxisProp = xAxis.call(this)
+  const yAxisProp = yAxis.call(this)
+
+  const defaultOption = {
+    xAxis: this.transpose ? yAxisProp : xAxisProp,
+    yAxis: this.transpose ? xAxisProp : yAxisProp,
+    series: series.call(this),
+    darkMode: this.theme === 'dark',
+    color: color.call(this),
+    grid: grid.call(this),
+    legend: legend.call(this),
+    tooltip: tooltip.call(this),
+    dataZoom: dataZoom.call(this),
+    textStyle,
+  }
+
+  // 如果配置了 beforeRender 函数, 执行一次渲染前操作
+  if (this.beforeRender && this.beforeRender instanceof Function) {
+    this.beforeRender(defaultOption)
+  }
+
+  return defaultOption
+}
+
+/**
+ * 导出为 VueMixins 对象
+ */
+export default {
+  data: () => ({}),
+  computed: {
+    options() {
+      this.theme
+      return options.call(this)
+    }
+  },
+  watch: {
+    theme(theme) {
+      this.chartRender()
+    },
+    options: {
+      handler(opt) {
+        this.chartRender(opt)
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}