@ecan-bi/tools 1.0.7 → 1.0.9

package/src/utils/transformProps.ts

@@ -1,901 +0,0 @@
-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