@ecan-bi/tools 1.0.62 → 1.0.64

package/src/utils/chartTransProps/bar.ts

@@ -0,0 +1,378 @@
+import { computed, unref, ref } from 'vue'
+import useVariablesInText from '../../hooks/useVariablesInText'
+import useValueFormatter from '../../hooks/useValueFormatter'
+import { getLegendFormat } from '../util'
+export default function getBarTransformProps(props, chartData, fontSize, fontFamily = null, callBackMethodMap:any = {}) {
+  const yAxisLabelFormatter = props.yAxisLabelFormatter
+  const xAxisLabelFormatter = props.xAxisLabelFormatter
+  const dataSource = ref(chartData.dataset)
+  const dimensions = ref(chartData.dimensions)
+  const series = computed(() => {
+    const { gradientShow, gradientColors, gradientOffset, barBorderRadius } = props
+    const ds = unref(dataSource)
+    const len = ds.length
+    const series = []
+    for (let i = 0; i < len; i++) {
+      const item = {
+        ...ds[i],
+        type: 'bar',
+        barWidth: props.barWidth.value + props.barWidth.suffix,
+        showBackground: props.showBarBackground
+      } as { [key: string]: any }
+      if (props.isStack) {
+        item.stack = 'stack'
+      }
+      item.label = {
+        show: props.labelShow,
+        fontSize: props.labelFontSize,
+        position: props.labelPosition,
+        color: props.labelColor,
+        width: props.labelWidth,
+        overflow: props.labelOverflow,
+        formatter: (params) => {
+          let formatter = ''
+          let labelFormatter = props.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) {
+        let gcolor = props.colors[i]
+        if (!gcolor && props.colors.length) {
+          const colorIndex = ((i + 1) % props.colors.length) - 1
+          gcolor = colorIndex > 0 ? props.colors[colorIndex] : props.colors[0]
+        }
+        if (!gcolor) {
+          gcolor = '#5470C6'
+        }
+        item.itemStyle = {
+          color: {
+            x: props.isUseHorizontalAxis ? 1 : 0,
+            y: 0,
+            x2: 0,
+            y2: props.isUseHorizontalAxis ? 0 : 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: gcolor
+              },
+              {
+                offset: gradientOffset,
+                color: gradientColors[i]
+              },
+              {
+                offset: 1,
+                color: gradientColors[i]
+              }
+            ]
+          }
+        }
+      }
+      if (barBorderRadius) {
+        const radius = barBorderRadius.split(',')
+        if (radius?.length) {
+          const radiusItems = []
+          for (const rs of radius) {
+            const value = parseFloat(rs)
+            if (!isNaN(value)) {
+              radiusItems.push(value)
+            }
+          }
+          item.itemStyle.borderRadius = radiusItems
+        }
+      }
+      if (props.isShowMarkLine) {
+        item.markLine = {
+          data: [{ type: props.markLineType }]
+        }
+      }
+      series.push(item)
+    }
+    return series
+  })
+  const xAxisData = computed(() => {
+    return unref(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 {
+    textStyle: {
+      fontFamily: unref(fontFamily)
+    },
+    toolbox: {
+      show: props.toolboxShow,
+      left: props.toolboxLeft,
+      top: props.toolboxTop,
+      itemSize: props.toolboxItemSize,
+      itemGap: props.toolboxItemGap,
+      feature: {
+        myLocation: {
+          show: props.toolboxLocation,
+          title: '快速定位',
+          icon: 'path://M512 512m-80 0a80 80 0 1 0 160 0 80 80 0 1 0-160 0Z,  M960 480h-33.632C910.752 276.16 747.84 113.248 544 97.632V64a32 32 0 1 0-64 0v33.632C276.16 113.248 113.248 276.16 97.632 480H64a32 32 0 0 0 0 64h33.632C113.248 747.84 276.16 910.752 480 926.368V960a32 32 0 1 0 64 0v-33.632C747.84 910.752 910.752 747.84 926.368 544H960a32 32 0 1 0 0-64zM544 862.368V800a32 32 0 1 0-64 0v62.368C311.424 847.104 176.896 712.576 161.632 544H224a32 32 0 1 0 0-64H161.632C176.896 311.424 311.424 176.896 480 161.632V224a32 32 0 0 0 64 0V161.632c168.576 15.296 303.104 149.792 318.368 318.368H800a32 32 0 1 0 0 64h62.368c-15.264 168.576-149.792 303.104-318.368 318.368z',
+          onclick() {
+            callBackMethodMap.toolboxLocationFun && callBackMethodMap.toolboxLocationFun(props)
+          }
+        },
+        myDownload: {
+          show: props.toolboxDownloadShow,
+          title: '数据下载',
+          icon: 'path://M502.010485 765.939573c3.773953 3.719718 8.686846 5.573949 13.596669 5.573949 0.075725 0 0.151449-0.010233 0.227174-0.011256 0.329505 0.016373 0.654916 0.050142 0.988514 0.050142 0.706081 0 1.400906-0.042979 2.087545-0.116657 4.352121-0.366344 8.607028-2.190899 11.961426-5.496178l335.053985-330.166675c7.619538-7.509021 7.709589-19.773346 0.200568-27.393907s-19.774369-7.711636-27.39493-0.201591L536.193005 706.304358 536.193005 50.019207c0-10.698666-8.67252-19.371186-19.371186-19.371186s-19.371186 8.67252-19.371186 19.371186l0 657.032164-306.881342-302.44838c-7.618515-7.509021-19.883863-7.419993-27.393907 0.199545-7.509021 7.619538-7.419993 19.884886 0.199545 27.393907L502.010485 765.939573z,             M867.170139 711.020776c-10.698666 0-19.371186 8.67252-19.371186 19.371186l0 165.419494c0 13.054317-10.620895 23.675212-23.676236 23.675212L205.182103 919.486668c-13.054317 0-23.676236-10.620895-23.676236-23.675212L181.505867 730.391962c0-10.698666-8.67252-19.371186-19.371186-19.371186s-19.371186 8.67252-19.371186 19.371186l0 165.419494c0 34.416857 28.000728 62.416562 62.417585 62.416562l618.941638 0c34.417881 0 62.417585-27.999704 62.417585-62.416562L886.540302 730.391962C886.541325 719.693296 877.868805 711.020776 867.170139 711.020776z',
+          onclick() {
+            callBackMethodMap.toolboxDownloadShowFun && callBackMethodMap.toolboxDownloadShowFun(props)
+          }
+        },
+        myDataZoom: {
+          show: props.toolboxDataZoomShow,
+          title: '放大',
+          icon: 'path://M932.42 902.246667L792 761.793333A403.84 403.84 0 0 0 896 490.666667c0-223.86-181.473333-405.333333-405.333333-405.333334S85.333333 266.806667 85.333333 490.666667s181.473333 405.333333 405.333334 405.333333a403.84 403.84 0 0 0 271.126666-104l140.453334 140.453333a21.333333 21.333333 0 0 0 30.173333-30.173333zM128 490.666667c0-200.293333 162.373333-362.666667 362.666667-362.666667s362.666667 162.373333 362.666666 362.666667-162.373333 362.666667-362.666666 362.666666-362.666667-162.373333-362.666667-362.666666z m512 0a21.333333 21.333333 0 0 1-21.333333 21.333333H512v106.666667a21.333333 21.333333 0 0 1-42.666667 0V512H362.666667a21.333333 21.333333 0 0 1 0-42.666667h106.666666V362.666667a21.333333 21.333333 0 0 1 42.666667 0v106.666666h106.666667a21.333333 21.333333 0 0 1 21.333333 21.333334z',
+          onclick() {
+            callBackMethodMap.toolboxDataZoomShowFun && callBackMethodMap.toolboxDataZoomShowFun(props)
+          }
+        },
+        myInfo: {
+          show: props.toolboxInfoShow,
+          title: '详情',
+          icon: 'path://M512.50142 958.397886c-119.320573 0-231.499491-46.465265-315.871087-130.837884C112.258737 743.188406 65.792449 631.010511 65.792449 511.688915c0-119.319549 46.466288-231.499491 130.837884-315.871087C281.002952 111.445208 393.180847 64.979944 512.50142 64.979944s231.499491 46.465265 315.871087 130.837884c84.372619 84.372619 130.837884 196.551538 130.837884 315.871087 0 119.321596-46.465265 231.499491-130.837884 315.871087C744.000911 911.932622 631.821993 958.397886 512.50142 958.397886zM512.50142 105.962334c-223.718271 0-405.726581 182.00831-405.726581 405.726581s182.00831 405.726581 405.726581 405.726581c223.718271 0 405.727605-182.00831 405.727605-405.726581S736.220714 105.962334 512.50142 105.962334z M510.150886 775.953647c-18.107403 0-32.745798-14.678304-32.745798-32.785707L477.405087 452.191846c0-18.108426 14.638395-32.785707 32.745798-32.785707 18.107403 0 32.745798 14.678304 32.745798 32.785707l0 290.976094C542.896684 761.275343 528.258289 775.953647 510.150886 775.953647z M511.357364 296.458969m-45.080731 0a44.054 44.054 0 1 0 90.161463 0 44.054 44.054 0 1 0-90.161463 0Z',
+          onclick() {
+            callBackMethodMap.toolboxInfoShowFun && callBackMethodMap.toolboxInfoShowFun(props)
+          }
+        }
+      }
+    },
+    title: {
+      text: props.titleText,
+      subtext: props.titleSubtext,
+      textStyle: {
+        fontSize: props.titleFontSize,
+        fontWeight: props.fontWeight,
+        color: props.titleColor
+      },
+      left: props.textAlign
+    },
+    grid: {
+      top: props.gridTop,
+      bottom: props.gridBottom,
+      left: props.gridLeft,
+      right: props.gridRight,
+      containLabel: props.gridContainLabel
+    },
+    color: props.colors,
+    tooltip: {
+      trigger: 'axis',
+      show: props.tooltipShow,
+      formatter: (params) => {
+        const len = params.length
+        let formatter = ''
+        let tooltipFormatter = props.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,
+                a: seriesName,
+                b: name,
+                c: data.sourceValue || value || 0,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      // valueFormatter: (value) => {
+      //   return useVariablesInText(props.tooltipValueFormatter as string, { value })
+      // },
+      textStyle: {
+        color: props.tooltipTextStyleColor,
+        fontSize: fontSize.value
+      },
+      position: props.tooltipPosition || undefined
+    },
+    legend: {
+      type: props.legendScroll ? 'scroll' : 'plain',
+      width: props.legendWidth,
+      height: props.legendHeight,
+      show: props.legendShow,
+      orient: props.legendOrient,
+      top: props.legendTop,
+      left: props.legendLeft,
+      textStyle: {
+        // lineHeight: (visible.value ? ZOOM_FONT_SIZE : parseFloat(props.legendFontSize)) + 8,
+        rich: {
+          text: {
+            width: props.legendTextWidth,
+            color: props.legendTextStyleColor
+            // fontSize: visible.value ? ZOOM_FONT_SIZE : props.legendFontSize
+          }
+        }
+      },
+      itemHeight: props.legendItemHeight,
+      itemWidth: props.legendItemWidth,
+      itemGap: props.legendItemGap,
+      data: unref(dataSource).map((value, index) => {
+        return {
+          name: value.name,
+          itemStyle: {
+            color: props.colors[index]
+          },
+          icon: props.legendType
+        }
+      }),
+      formatter: (name: string) => {
+        return getLegendFormat(props.legendFormatter, {
+          name
+        })
+      }
+    },
+    xAxis: {
+      type: props.isUseHorizontalAxis ? 'value' : 'category',
+      data: props.isUseHorizontalAxis ? null : unref(xAxisData),
+      inverse: props.isUseHorizontalAxis ? props.xAxisInverse : props.axisInverse,
+      minInterval: props.xAxisMinInterval,
+      splitLine: {
+        show: props.xAxisSplitLineShow,
+        lineStyle: {
+          color: props.xAxisSplitLineStyleColor,
+          type: props.xAxisSplitLineType
+        },
+        interval: props.xAxisSplitLineInterval
+      },
+      splitArea: {
+        show: props.xAxisSplitAreaShow
+      },
+      axisLabel: {
+        show: props.xAxisLabelShow,
+        color: props.xAxisLabelColor,
+        interval: props.xAxisLabelInterval || 0,
+        rotate: props.xAxisLabelRotate,
+        width: props.xAxisLabelWidth,
+        overflow: props.xAxisLabelOverflow,
+        fontSize: props.xAxisLabelFontSize,
+        formatter(value: string) {
+          if (typeof value === 'string' && value[0] === '0' && !isNaN(+value)) {
+            value = (+value).toString()
+          }
+          return useValueFormatter(xAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        show: props.xAxisLineShow,
+        lineStyle: {
+          color: props.xAxisLineStyleColor
+        }
+      },
+      axisTick: {
+        show: props.xAxisTickShow
+      },
+      name: props.xAxisName,
+      nameTextStyle: {
+        fontSize: props.xAxisLabelFontSize,
+        color: props.xAxisLabelColor,
+        align: 'left'
+      },
+      max: props.xAxisMaxValue || null
+    },
+    yAxis: {
+      type: props.isUseHorizontalAxis ? 'category' : 'value',
+      data: props.isUseHorizontalAxis ? unref(dimensions) : null,
+      inverse: props.isUseHorizontalAxis ? props.axisInverse : props.yAxisInverse,
+      minInterval: props.yAxisMinInterval,
+      splitLine: {
+        show: props.yAxisSplitLineShow,
+        lineStyle: {
+          color: props.yAxisSplitLineStyleColor,
+          type: props.yAxisSplitLineType
+        }
+      },
+      splitArea: {
+        show: props.yAxisSplitAreaShow
+      },
+      axisTick: {
+        show: props.yAxisTickShow
+      },
+      axisLabel: {
+        show: props.yAxisLabelShow,
+        fontSize: props.yAxisLabelFontSize,
+        color: props.yAxisLabelColor,
+        rotate: props.yAxisLabelRotate,
+        width: props.yAxisLabelWidth,
+        overflow: props.yAxisLabelOverflow,
+        formatter(value: string) {
+          return useValueFormatter(yAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        show: props.yAxisLineAlwaysDisplay,
+        lineStyle: {
+          color: props.yAxisLineStyleColor
+        }
+      },
+      name: props.yAxisName,
+      nameTextStyle: {
+        fontSize: props.yAxisLabelFontSize,
+        color: props.yAxisLabelColor,
+        align: 'right'
+      },
+      max: props.yAxisMaxValue || null
+    },
+    series: unref(series)
+  }
+}