@ecan-bi/tools 1.0.20 → 1.0.21

package/src/utils/transformProps.ts

@@ -0,0 +1,901 @@
+import { computed, unref } from 'vue'
+import useVariablesInText from '../hooks/useVariablesInText'
+import useValueFormatter from '../hooks/useValueFormatter'
+import { handleFormatter, getLegendFormat, formatQfw } from './util'
+function getMarkLineData (chartsOptions: any) {
+  if (chartsOptions.isShowMarkLine) {
+    return {
+      markLine: {
+        data: [{ type: chartsOptions.markLineType }]
+      }
+    }
+  } else {
+    return {}
+  }
+}
+const getTransformProps = (chartsOptions, chartData, fontSize) => {
+  switch (chartsOptions.type) {
+    case 'bar':
+      return getBarTransformProps(chartsOptions, chartData, fontSize)
+    case 'line':
+      return getLineTransformProps(chartsOptions, chartData, fontSize)
+    case 'pie':
+      return getPieTransformProps(chartsOptions, chartData, fontSize)
+    case 'comboGraph':
+      return getComboGraphTransformProps(chartsOptions, chartData, fontSize)
+    default:
+      return {}
+  }
+}
+
+const getBarTransformProps = (chartsOptions, chartData, fontSize) => {
+  const yAxisLabelFormatter = chartsOptions.yAxisLabelFormatter
+  const xAxisLabelFormatter = chartsOptions.xAxisLabelFormatter
+  const { dimensions = [], dataset = [] } = chartData
+  const series = computed(() => {
+    const { gradientShow, gradientColors, gradientOffset, barBorderRadius } = chartsOptions
+    const ds = dataset
+    const len = ds.length
+    const series: any = []
+    for (let i = 0; i < len; i++) {
+      const item = {
+        ...ds[i],
+        type: 'bar',
+        barWidth: chartsOptions.barWidth,
+        showBackground: chartsOptions.showBarBackground
+      } as { [key: string]: any }
+      const { isStack, stackColumns } = chartsOptions
+      if (isStack && (stackColumns.includes(ds[i].name || !stackColumns))) {
+        item.stack = 'stack'
+      }
+      item.label = {
+        show: chartsOptions.labelShow,
+        fontSize: chartsOptions.labelFontSize,
+        position: chartsOptions.labelPosition,
+        color: chartsOptions.labelColor,
+        width: chartsOptions.labelWidth,
+        overflow: chartsOptions.labelOverflow,
+        formatter: (params) => {
+          let formatter = ''
+          let labelFormatter = chartsOptions.labelFormatter
+          if (labelFormatter === '') {
+            labelFormatter = '{c}'
+          }
+          const { seriesName, name, value, data } = params || {}
+          formatter += useVariablesInText(
+            labelFormatter,
+            {
+              textData: {
+                name,
+                value,
+                a: seriesName,
+                b: name,
+                c: value || 0,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            })
+          return formatter
+        }
+      }
+      item.itemStyle = {}
+      if (gradientShow) {
+        item.itemStyle = {
+          color: {
+            x: chartsOptions.isUseHorizontalAxis ? 1 : 0,
+            y: 0,
+            x2: 0,
+            y2: chartsOptions.isUseHorizontalAxis ? 0 : 1,
+            colorStops: [{
+              offset: 0,
+              color: chartsOptions.colors[i]
+            }, {
+              offset: gradientOffset,
+              color: gradientColors[i]
+            }, {
+              offset: 1,
+              color: gradientColors[i]
+            }]
+          }
+        }
+      }
+      if (barBorderRadius) {
+        const radius = barBorderRadius.split(',')
+        if (radius?.length) {
+          const radiusItems: any = []
+          for (const rs of radius) {
+            const value = parseFloat(rs)
+            if (!isNaN(value)) {
+              radiusItems.push(value)
+            }
+          }
+          // item.itemStyle.borderRadius = radiusItems
+          // echart4.4版本圆角属性名变更
+          item.itemStyle.barBorderRadius = radiusItems
+        }
+      }
+      if (chartsOptions.isShowMarkLine) {
+        item.markLine = {
+          data: [{ type: chartsOptions.markLineType }]
+        }
+      }
+      series.push(item)
+    }
+    return series
+  })
+  const xAxisData = computed(() => {
+    return dimensions.map((item) => {
+      let result = {}
+      if (item && typeof item === 'object') {
+        result = {
+          ...item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      } else {
+        result = {
+          value: item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      }
+      return result
+    })
+  })
+  return {
+    tooltip: {
+      trigger: 'axis',
+      show: chartsOptions.tooltipShow,
+      formatter: (params) => {
+        const len = params.length
+        let formatter = ''
+        let tooltipFormatter = chartsOptions.tooltipFormatter
+        // currentData = params[0]?.data
+        if (tooltipFormatter === '') {
+          tooltipFormatter = '{marker} {a}    {c}'
+        }
+        for (let i = 0; i < len; i++) {
+          const { marker, seriesName, name, value, data } = params[i] || {}
+          if (i === 0) {
+            let formatName = name
+            if (typeof name === 'string' && name[0] === '0' && !isNaN(+name)) {
+              formatName = (+name).toString()
+            }
+            formatter += `${useValueFormatter(xAxisLabelFormatter, formatName)}<br/>`
+          }
+          formatter += useVariablesInText(
+            tooltipFormatter,
+            {
+              textData: {
+                marker,
+                name,
+                value,
+                Qfw: formatQfw,
+                a: seriesName,
+                b: name,
+                c: value || 0,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      // valueFormatter: (value) => {
+      //   return useVariablesInText(chartsOptions.tooltipValueFormatter as string, { value })
+      // },
+      textStyle: {
+        color: chartsOptions.tooltipTextStyleColor,
+        fontSize: fontSize
+      },
+      position: chartsOptions.tooltipPosition || undefined,
+      backgroundColor: chartsOptions.tooltipBackgroundColor || '#fff'
+    },
+    legend: {
+      type: chartsOptions.legendScroll ? 'scroll' : 'plain',
+      width: chartsOptions.legendWidth,
+      height: chartsOptions.legendHeight,
+      show: chartsOptions.legendShow,
+      orient: chartsOptions.legendOrient,
+      top: chartsOptions.legendTop,
+      left: chartsOptions.legendLeft,
+      textStyle: {
+        // lineHeight: parseFloat(chartsOptions.legendFontSize) + 8,
+        rich: {
+          text: {
+            width: chartsOptions.legendTextWidth,
+            color: chartsOptions.legendTextStyleColor,
+            fontSize: chartsOptions.legendFontSize
+          }
+        }
+      },
+      itemHeight: chartsOptions.legendItemHeight,
+      itemWidth: chartsOptions.legendItemWidth,
+      itemGap: chartsOptions.legendItemGap,
+      data: dataset.map((value, index) => {
+        return {
+          name: value.name,
+          itemStyle: {
+            color: chartsOptions.colors[index]
+          },
+          icon: chartsOptions.legendType
+        }
+      }),
+      formatter: (name: string) => {
+        return getLegendFormat(chartsOptions.legendFormatter, {
+          name
+        })
+      }
+    },
+    xAxis: {
+      type: chartsOptions.isUseHorizontalAxis ? 'value' : 'category',
+      data: chartsOptions.isUseHorizontalAxis ? null : unref(xAxisData),
+      inverse: chartsOptions.isUseHorizontalAxis ? chartsOptions.xAxisInverse : chartsOptions.axisInverse,
+      minInterval: chartsOptions.xAxisMinInterval,
+      splitLine: {
+        show: chartsOptions.xAxisSplitLineShow,
+        lineStyle: {
+          color: chartsOptions.xAxisSplitLineStyleColor,
+          type: chartsOptions.xAxisSplitLineType
+        },
+        interval: chartsOptions.xAxisSplitLineInterval
+      },
+      splitArea: {
+        show: chartsOptions.xAxisSplitAreaShow
+      },
+      axisLabel: {
+        color: chartsOptions.xAxisLabelColor,
+        interval: chartsOptions.xAxisLabelInterval || 0,
+        rotate: chartsOptions.xAxisLabelRotate,
+        width: chartsOptions.xAxisLabelWidth,
+        overflow: chartsOptions.xAxisLabelOverflow,
+        fontSize: chartsOptions.xAxisLabelFontSize,
+        formatter (value: string) {
+          if (typeof value === 'string' && value[0] === '0' && !isNaN(+value)) {
+            value = (+value).toString()
+          }
+          return useValueFormatter(xAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        show: chartsOptions.xAxisLineShow,
+        lineStyle: {
+          color: chartsOptions.xAxisLineStyleColor
+        }
+      },
+      axisTick: {
+        show: chartsOptions.xAxisTickShow
+      },
+      name: chartsOptions.xAxisName,
+      nameTextStyle: {
+        fontSize: chartsOptions.xAxisLabelFontSize,
+        color: chartsOptions.xAxisLabelColor,
+        align: 'left'
+      },
+      max: chartsOptions.xAxisMaxValue || null
+    },
+    yAxis: {
+      type: chartsOptions.isUseHorizontalAxis ? 'category' : 'value',
+      data: chartsOptions.isUseHorizontalAxis ? unref(dimensions) : null,
+      inverse: chartsOptions.isUseHorizontalAxis ? chartsOptions.axisInverse : chartsOptions.yAxisInverse,
+      minInterval: chartsOptions.yAxisMinInterval,
+      splitLine: {
+        show: chartsOptions.yAxisSplitLineShow,
+        lineStyle: {
+          color: chartsOptions.yAxisSplitLineStyleColor,
+          type: chartsOptions.yAxisSplitLineType
+        }
+      },
+      splitArea: {
+        show: chartsOptions.yAxisSplitAreaShow
+      },
+      axisLabel: {
+        show: chartsOptions.yAxisLabelShow,
+        fontSize: chartsOptions.yAxisLabelFontSize,
+        color: chartsOptions.yAxisLabelColor,
+        rotate: chartsOptions.yAxisLabelRotate,
+        width: chartsOptions.yAxisLabelWidth,
+        overflow: chartsOptions.yAxisLabelOverflow,
+        formatter (value: string) {
+          return useValueFormatter(yAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        show: chartsOptions.yAxisLineAlwaysDisplay,
+        lineStyle: {
+          color: chartsOptions.yAxisLineStyleColor
+        }
+      },
+      name: chartsOptions.yAxisName,
+      nameTextStyle: {
+        fontSize: chartsOptions.yAxisLabelFontSize,
+        color: chartsOptions.yAxisLabelColor,
+        align: 'right'
+      },
+      max: chartsOptions.yAxisMaxValue || null
+    },
+    series: unref(series)
+  }
+}
+
+const getLineTransformProps = (chartsOptions, chartData, fontSize) => {
+  // console.log('xAxisName', chartsOptions, chartsOptions.xAxisName)
+  const yAxisLabelFormatter = chartsOptions.yAxisLabelFormatter
+  const xAxisLabelFormatter = chartsOptions.xAxisLabelFormatter
+  const { dimensions = [], dataset = [] } = chartData
+  const xAxisData = computed(() => {
+    return dimensions.map((item) => {
+      let result = {}
+      if (item && typeof item === 'object') {
+        result = {
+          ...item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      } else {
+        result = {
+          value: item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      }
+      return result
+    })
+  })
+  const series = computed(() => {
+    const temp = [] as { [key: string]: any }[]
+    const len = dataset.length
+    for (let i = 0; i < len; i++) {
+      const shadowStyle: any = {}
+      if (chartsOptions.shadowColor) {
+        shadowStyle.shadowColor = chartsOptions.shadowColor
+        shadowStyle.shadowBlur = chartsOptions.shadowBlur
+        shadowStyle.shadowOffsetY = chartsOptions.shadowOffsetY
+        shadowStyle.shadowOffsetX = chartsOptions.shadowOffsetX
+      }
+      temp.push({
+        type: 'line',
+        ...dataset[i],
+        symbolSize: chartsOptions.symbolSize,
+        smooth: chartsOptions.smooth,
+        areaStyle: {
+          color: chartsOptions.areaGradientShow
+            ? {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0,
+                  color: chartsOptions.colors[i]
+                }, {
+                  offset: 1,
+                  color: chartsOptions.areaGradientColor || 'transparent'
+                }],
+                global: false
+              }
+            : chartsOptions.colors[i],
+          opacity: chartsOptions.areaStyleOpacity
+        },
+        lineStyle: {
+          width: chartsOptions.lineStyleWidth,
+          ...shadowStyle
+        },
+        ...getMarkLineData(chartsOptions)
+      })
+    }
+    return temp
+  })
+  return {
+    tooltip: {
+      trigger: 'axis',
+      show: chartsOptions.tooltipShow,
+      formatter: (params) => {
+        const len = params.length
+        let formatter = ''
+        let tooltipFormatter = chartsOptions.tooltipFormatter
+        if (tooltipFormatter === '') {
+          tooltipFormatter = '{marker} {a}    {c}'
+        }
+        for (let i = 0; i < len; i++) {
+          const { marker, seriesName, name, value, data } = params[i] || {}
+          if (i === 0) {
+            formatter += `${name}<br/>`
+          }
+          formatter += useVariablesInText(
+            tooltipFormatter,
+            {
+              textData: {
+                marker,
+                name,
+                value,
+                a: seriesName,
+                b: name,
+                c: value,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      textStyle: {
+        color: chartsOptions.tooltipTextStyleColor,
+        fontSize: fontSize.value
+      },
+      position: chartsOptions.tooltipPosition || undefined,
+      backgroundColor: chartsOptions.tooltipBackgroundColor || '#fff'
+    },
+    xAxis: {
+      name: chartsOptions.xAxisName,
+      type: 'category',
+      data: unref(xAxisData),
+      minInterval: chartsOptions.xAxisMinInterval,
+      splitLine: {
+        show: chartsOptions.xAxisSplitLineShow,
+        lineStyle: {
+          color: chartsOptions.xAxisSplitLineStyleColor
+        }
+      },
+      axisLabel: {
+        color: chartsOptions.xAxisLabelColor,
+        interval: chartsOptions.xAxisLabelInterval || 0,
+        rotate: chartsOptions.xAxisLabelRotate,
+        width: chartsOptions.xAxisLabelWidth,
+        overflow: chartsOptions.xAxisLabelOverflow,
+        formatter (value: string) {
+          return useValueFormatter(xAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: chartsOptions.xAxisLineStyleColor
+        }
+      },
+      axisTick: {
+        show: chartsOptions.xAxisTickShow
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: chartsOptions.yAxisName,
+      minInterval: chartsOptions.yAxisMinInterval,
+      splitLine: {
+        show: chartsOptions.yAxisSplitLineShow,
+        lineStyle: {
+          color: chartsOptions.yAxisSplitLineStyleColor
+        }
+      },
+      axisLabel: {
+        fontSize: fontSize,
+        color: chartsOptions.yAxisLabelColor,
+        formatter (value: string) {
+          return useValueFormatter(yAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        show: chartsOptions.yAxisLineAlwaysDisplay,
+        lineStyle: {
+          color: chartsOptions.yAxisLineStyleColor
+        }
+      }
+    },
+    // 图例
+    legend: {
+      show: chartsOptions.legendShow,
+      orient: chartsOptions.legendOrient,
+      top: chartsOptions.legendTop,
+      left: chartsOptions.legendLeft,
+      textStyle: {
+        fontSize: fontSize
+      }
+    },
+    series: unref(series)
+  }
+}
+
+const getPieTransformProps = (chartsOptions, chartData, fontSize) => {
+  const { dataset = [] } = chartData
+  let { data = [] } = dataset[0] || {}
+  if (Array.isArray(chartsOptions.colors)) {
+    const isUseLabelColors = chartsOptions.isUseLabelColors
+    const colors = chartsOptions.colors
+    data = data.map((item, index) => ({
+      label: isUseLabelColors ? { color: colors[index] } : {},
+      ...item
+    }))
+  }
+  return {
+    title: {
+      text: chartsOptions.titleText,
+      subtext: chartsOptions.titleSubtext,
+      textStyle: {
+        fontSize: chartsOptions.titleFontSize,
+        fontWeight: chartsOptions.fontWeight,
+        color: chartsOptions.titleColor
+      },
+      left: chartsOptions.textAlign || 'center'
+    },
+    // 提示
+    tooltip: {
+      show: chartsOptions.tooltipShow,
+      trigger: chartsOptions.tooltipTrigger,
+      formatter: (params) => {
+        const { marker, seriesName, name, value, percent, data } = params || {}
+        return useVariablesInText(
+          chartsOptions.tooltipFormatter,
+          {
+            textData: {
+              marker,
+              name,
+              value,
+              percent,
+              a: seriesName,
+              b: name,
+              c: value,
+              d: percent,
+              ...data
+            }
+          },
+          {
+            useNewline: true,
+            useSpace: true
+          }
+        )
+      },
+      textStyle: {
+        color: chartsOptions.tooltipTextStyleColor || '#333'
+      },
+      backgroundColor: chartsOptions.tooltipBackgroundColor || '#fff',
+      borderColor: chartsOptions.tooltipBorderColor || '#eee'
+    },
+    // 图例
+    legend: {
+      show: chartsOptions.legendShow,
+      orient: chartsOptions.legendOrient,
+      top: chartsOptions.legendTop,
+      left: chartsOptions.legendLeft,
+      textStyle: {
+        color: chartsOptions.legendTextStyleColor,
+        fontSize: fontSize === 18 ? fontSize : chartsOptions.labelFontSize
+      }
+    },
+    series: [
+      {
+        data,
+        type: 'pie',
+        radius: [chartsOptions.innerRadius, chartsOptions.outerRadius],
+        center: [chartsOptions.centerLeft, chartsOptions.centerTop],
+        roseType: chartsOptions.roseType,
+        avoidLabelOverlap: false,
+        minAngle: chartsOptions.minAngle,
+        label: {
+          show: chartsOptions.labelPosition !== 'center' && chartsOptions.labelShow,
+          color: chartsOptions.labelColor,
+          fontSize: fontSize === 18 ? fontSize : chartsOptions.labelFontSize,
+          position: chartsOptions.labelPosition,
+          formatter: handleFormatter(chartsOptions.labelFormatter)
+        },
+        labelLine: {
+          show: chartsOptions.labelLineShow,
+          length: chartsOptions.labelLineLength,
+          length2: chartsOptions.labelLineLength2
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
+          label: {}
+        }
+      }
+    ]
+  }
+}
+
+const getComboGraphTransformProps = (chartsOptions, chartData, fontSize) => {
+  const { dimensions = [], dataset = [] } = chartData
+  const xAxisData = computed(() => {
+    return dimensions.map((item) => {
+      let result = {}
+      if (item && typeof item === 'object') {
+        result = {
+          ...item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      } else {
+        result = {
+          value: item,
+          textStyle: {
+            fontSize: fontSize
+          }
+        }
+      }
+      return result
+    })
+  })
+  const series = computed(() => {
+    const temp = [] as { [key: string]: any }[]
+    const len = dataset.length
+    const seriesTypes = chartsOptions.seriesTypes
+    for (let i = 0; i < len; i++) {
+      const seriesType = seriesTypes[i]
+      const { type, axisIndex } = seriesType || {}
+      let series = {
+        type: type,
+        yAxisIndex: axisIndex,
+        ...dataset[i]
+      } as { [key: string]: any }
+      if (type === 'line') {
+        const shadowStyle: any = {}
+        if (chartsOptions.shadowColor) {
+          shadowStyle.shadowColor = chartsOptions.shadowColor
+          shadowStyle.shadowBlur = chartsOptions.shadowBlur
+          shadowStyle.shadowOffsetY = chartsOptions.shadowOffsetY
+          shadowStyle.shadowOffsetX = chartsOptions.shadowOffsetX
+        }
+        series = {
+          ...series,
+          symbolSize: chartsOptions.symbolSize,
+          smooth: chartsOptions.smooth,
+          itemStyle: {
+            color: chartsOptions.colors[i]
+          },
+          areaStyle: {
+            color: chartsOptions.areaGradientShow
+              ? {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [{
+                    offset: 0,
+                    color: chartsOptions.colors[i]
+                  }, {
+                    offset: 1,
+                    color: chartsOptions.areaGradientColor || 'transparent'
+                  }],
+                  global: false
+                }
+              : chartsOptions.colors[i],
+            opacity: chartsOptions.areaStyleOpacity
+          },
+          lineStyle: {
+            width: chartsOptions.lineStyleWidth,
+            ...shadowStyle
+          }
+        }
+      }
+      if (type === 'bar') {
+        const { gradientShow, gradientColors, gradientOffset } = chartsOptions
+        const itemStyle: any = {}
+        if (chartsOptions.barBorderRadius) {
+          const radius = chartsOptions.barBorderRadius.split(',')
+          if (radius?.length) {
+            const radiusItems: any = []
+            for (const rs of radius) {
+              const value = parseFloat(rs)
+              if (!isNaN(value)) {
+                radiusItems.push(value)
+              }
+            }
+            itemStyle.borderRadius = radiusItems
+          }
+        }
+        if (gradientShow) {
+          itemStyle.color = {
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: chartsOptions.colors[i]
+            }, {
+              offset: gradientOffset,
+              color: gradientColors[i]
+            }, {
+              offset: 1,
+              color: gradientColors[i]
+            }]
+          }
+        }
+        series = {
+          ...series,
+          barWidth: chartsOptions.barWidth,
+          itemStyle
+        }
+      }
+      if (chartsOptions.isShowMarkLine) {
+        series.markLine = {
+          data: [{ type: chartsOptions.markLineType }]
+        }
+      }
+      temp.push(series)
+    }
+    return temp
+  })
+  const yAxis = computed(() => {
+    const yAxis = chartsOptions.yAxis
+    return yAxis?.map((axis, index) => {
+      return {
+        type: 'value',
+        minInterval: chartsOptions.yAxisMinInterval,
+        splitLine: {
+          show: index === 0 ? chartsOptions.yAxisLeftSplitLineShow : chartsOptions.yAxisRightSplitLineShow,
+          lineStyle: {
+            color: chartsOptions.yAxisSplitLineStyleColor,
+            type: index === 0 ? chartsOptions.yAxisLeftSplitLineType : chartsOptions.yAxisRightSplitLineType
+          }
+        },
+        splitArea: {
+          show: chartsOptions.yAxisSplitAreaShow
+        },
+        axisLabel: {
+          fontSize: fontSize,
+          show: chartsOptions.yAxisLabelShow,
+          color: chartsOptions.yAxisLabelColor,
+          formatter (value: string) {
+            return useValueFormatter(axis.axisLabelFormatter, value)
+          }
+        },
+        axisLine: {
+          show: chartsOptions.yAxisLineAlwaysDisplay,
+          lineStyle: {
+            color: chartsOptions.yAxisLineStyleColor
+          }
+        },
+        name: index === 0 ? chartsOptions.yAxisLeftName : chartsOptions.yAxisRightName,
+        nameTextStyle: {
+          fontSize: chartsOptions.yAxisLabelFontSize,
+          color: chartsOptions.yAxisLabelColor,
+          align: index === 0 ? 'right' : 'left'
+        },
+        max: chartsOptions.yAxisMaxValue || null
+      }
+    })
+  })
+  return {
+    legend: {
+      show: chartsOptions.legendShow,
+      orient: chartsOptions.legendOrient,
+      top: chartsOptions.legendTop,
+      left: chartsOptions.legendLeft,
+      textStyle: {
+        color: chartsOptions.legendTextStyleColor,
+        fontSize: fontSize
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      show: chartsOptions.tooltipShow,
+      formatter: (params) => {
+        const len = params.length
+        let formatter = ''
+        let tooltipFormatter = chartsOptions.tooltipFormatter
+        if (tooltipFormatter === '') {
+          tooltipFormatter = '{marker} {a}    {c}'
+        }
+        const seriesTypes = chartsOptions.seriesTypes
+        for (let i = 0; i < len; i++) {
+          const seriesType = seriesTypes[i]
+          const { tooltipFormatter: _tooltipFormatter } = seriesType || {}
+          const { marker, seriesName, name, value, data } = params[i] || {}
+          if (i === 0) {
+            formatter += `${name}<br/>`
+          }
+          formatter += useVariablesInText(
+            // 如果系列有提示框组件就使用自定义，没有就用默认的
+            _tooltipFormatter || tooltipFormatter,
+            {
+              textData: {
+                marker,
+                name,
+                value,
+                seriesName,
+                a: seriesName,
+                b: name,
+                c: value,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      textStyle: {
+        color: chartsOptions.tooltipTextStyleColor || '#333',
+        fontSize: fontSize
+      },
+      backgroundColor: chartsOptions.tooltipBackgroundColor || '#fff',
+      borderColor: chartsOptions.tooltipBorderColor || '#eee'
+    },
+    xAxis: {
+      name: chartsOptions.xAxisName,
+      minInterval: chartsOptions.xAxisMinInterval,
+      type: 'category',
+      data: unref(xAxisData),
+      splitLine: {
+        show: chartsOptions.xAxisSplitLineShow,
+        lineStyle: {
+          color: chartsOptions.xAxisSplitLineStyleColor
+        }
+      },
+      axisLabel: {
+        color: chartsOptions.xAxisLabelColor,
+        interval: chartsOptions.xAxisLabelInterval || 0,
+        rotate: chartsOptions.xAxisLabelRotate,
+        width: chartsOptions.xAxisLabelWidth,
+        overflow: chartsOptions.xAxisLabelOverflow
+      },
+      axisLine: {
+        lineStyle: {
+          color: chartsOptions.xAxisLineStyleColor
+        }
+      },
+      axisTick: {
+        show: chartsOptions.xAxisTickShow
+      }
+    },
+    yAxis: unref(yAxis),
+    series: unref(series)
+  }
+}
+
+const getCommonTransformProps = (chartsOptions) => {
+  return {
+    title: {
+      text: chartsOptions.titleText,
+      subtext: chartsOptions.titleSubtext,
+      textStyle: {
+        fontSize: chartsOptions.titleFontSize,
+        fontWeight: chartsOptions.fontWeight,
+        color: chartsOptions.titleColor
+      },
+      left: chartsOptions.textAlign || 'center'
+    },
+    grid: {
+      top: chartsOptions.gridTop,
+      bottom: chartsOptions.gridBottom,
+      left: chartsOptions.gridLeft,
+      right: chartsOptions.gridRight,
+      containLabel: chartsOptions.gridContainLabel
+    },
+    color: chartsOptions.colors
+  }
+}
+
+const transformProps = (chartsOptions, chartData, fontSize = 12) => {
+  return {
+    ...getCommonTransformProps(chartsOptions),
+    ...getTransformProps(chartsOptions, chartData, fontSize)
+  }
+}
+export default transformProps