@ecan-bi/tools 1.0.62 → 1.0.64

package/src/utils/chartTransProps/line.ts

@@ -0,0 +1,249 @@
+import { computed, unref, ref } from 'vue'
+import useVariablesInText from '../../hooks/useVariablesInText'
+import useValueFormatter from '../../hooks/useValueFormatter'
+import { getLegendFormat } from '../util'
+function getMarkLineData(chartsOptions: any) {
+  if (chartsOptions.isShowMarkLine) {
+    return {
+      markLine: {
+        data: [{ type: chartsOptions.markLineType }]
+      }
+    }
+  } else {
+    return {}
+  }
+}
+export default function getLineTransformProps (props, chartData, fontSize){
+  const yAxisLabelFormatter = props.yAxisLabelFormatter
+  const xAxisLabelFormatter = props.xAxisLabelFormatter
+  const dataSource = ref(chartData.dataset)
+  const dimensions = ref(chartData.dimensions)
+  const dataset = chartData.dataset
+  const series = computed(() => {
+    const temp = [] as { [key: string]: any }[]
+    const len = dataset.length
+    for (let i = 0; i < len; i++) {
+      const shadowStyle: any = {}
+      if (props.shadowColor) {
+        shadowStyle.shadowColor = props.shadowColor
+        shadowStyle.shadowBlur = props.shadowBlur
+        shadowStyle.shadowOffsetY = props.shadowOffsetY
+        shadowStyle.shadowOffsetX = props.shadowOffsetX
+      }
+      temp.push({
+        type: 'line',
+        ...dataset[i],
+        symbolSize: props.symbolSize,
+        smooth: props.smooth,
+        areaStyle: {
+          color: props.areaGradientShow
+            ? {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: props.colors[i]
+                  },
+                  {
+                    offset: 1,
+                    color: props.areaGradientColor || 'transparent'
+                  }
+                ],
+                global: false
+              }
+            : props.colors[i],
+          opacity: props.areaStyleOpacity
+        },
+        lineStyle: {
+          width: props.lineStyleWidth,
+          ...shadowStyle
+        },
+        ...getMarkLineData(props)
+      })
+    }
+    return temp
+  })
+  return {
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: fontSize.value,
+        color: props.tooltipTextStyleColor
+      },
+      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: value || 0,
+                ...data
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      position: props.tooltipPosition || undefined
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: props.isBoundaryGap,
+      data: unref(dimensions).map((item) => {
+        let result = {}
+        if (item && typeof item === 'object') {
+          result = {
+            ...item
+          }
+        } else {
+          result = {
+            value: item
+          }
+        }
+        return result
+      }),
+      minInterval: props.xAxisMinInterval,
+      splitLine: {
+        show: props.xAxisSplitLineShow,
+        lineStyle: {
+          color: props.xAxisSplitLineStyleColor
+        },
+        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: 'value',
+      minInterval: props.yAxisMinInterval,
+      splitLine: {
+        show: props.yAxisSplitLineShow,
+        lineStyle: {
+          color: props.yAxisSplitLineStyleColor,
+          type: props.yAxisSplitLineType
+        }
+      },
+      splitArea: {
+        show: props.yAxisSplitAreaShow
+      },
+      axisLabel: {
+        show: props.yAxisLabelShow,
+        fontSize: props.yAxisLabelFontSize,
+        color: props.yAxisLabelColor,
+        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
+    },
+    // 图例
+    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: parseFloat(props.legendFontSize) + 8,
+        rich: {
+          text: {
+            width: props.legendTextWidth,
+            color: props.legendTextStyleColor,
+            fontSize: props.legendFontSize
+          }
+        }
+      },
+      itemHeight: props.legendItemHeight,
+      itemWidth: props.legendItemWidth,
+      itemGap: props.legendItemGap,
+      data: unref(dataSource).map((value) => {
+        return {
+          name: value.name,
+          icon: props.legendType
+        }
+      }),
+      formatter: (name: string) => {
+        return getLegendFormat(props.legendFormatter, {
+          name
+        })
+      }
+    },
+    series: unref(series)
+  }
+}

package/src/utils/chartTransProps/pie.ts

@@ -0,0 +1,106 @@
+import { unref, ref } from 'vue'
+import { getLegendFormat, handleFormatter } from '../util'
+export default function getPieTransformProps(props, chartData, fontSize) {
+  const dataset = ref(chartData.dataset)
+  let { data = [] } = unref(dataset)[0] || {}
+  if (Array.isArray(props.colors)) {
+    const isUseLabelColors = props.isUseLabelColors
+    const colors = props.colors
+    data = data.map((item, index) => ({
+      label: isUseLabelColors ? { color: colors[index] } : {},
+      ...item
+    }))
+  }
+  return {
+    // 图例
+    legend: {
+      type: props.legendScroll ? 'scroll' : 'plain',
+      width: props.legendWidth,
+      height: props.legendHeight,
+      show: props.legendShow,
+      orient: props.legendOrient,
+      top: props.legendTop,
+      left: props.legendLeft,
+      align: 'left',
+      textStyle: {
+        lineHeight: fontSize + 8,
+        rich: {
+          text: {
+            width: props.legendTextWidth,
+            color: props.legendTextStyleColor,
+            fontSize
+          }
+        }
+      },
+      itemHeight: props.legendItemHeight,
+      itemWidth: props.legendItemWidth,
+      itemGap: props.legendItemGap,
+      data: unref(dataset)[0]?.data?.map((value: any) => {
+        return {
+          name: value.name,
+          icon: props.legendType
+        }
+      }),
+      formatter: (name: string) => {
+        const { data } = dataset.value[0] || {}
+        let total = 0
+        let value: number
+        let percent = '0%'
+        if (data) {
+          for (const item of data) {
+            if (item.name === name) {
+              value = +item.value
+            }
+            total += +item.value
+          }
+        }
+        if (total) {
+          percent = `${((value / total) * 100).toFixed(2)}%`
+        }
+        return getLegendFormat(props.legendFormatter, {
+          name,
+          value,
+          percent
+        })
+      }
+    },
+    series: [
+      {
+        data,
+        type: 'pie',
+        radius: [props.innerRadius, props.outerRadius],
+        center: [props.centerLeft, props.centerTop],
+        roseType: props.roseType,
+        avoidLabelOverlap: true,
+        minAngle: props.minAngle,
+        // data: data.value,
+        // data: props.data,
+        // dimensions: ['name', 'count'],
+        label: {
+          show: props.labelPosition !== 'center' && props.labelShow,
+          color: props.labelColor,
+          fontSize: props.labelFontSize,
+          position: props.labelPosition,
+          formatter: handleFormatter(props.labelFormatter),
+          width: props.labelWidth,
+          overflow: props.labelOverflow
+        },
+        labelLine: {
+          show: props.labelLineShow,
+          length: props.labelLineLength,
+          length2: props.labelLineLength2
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          },
+          label: {
+            // show: props.labelPosition === 'center'
+          }
+        }
+      }
+    ]
+  }
+}

package/src/utils/chartTransProps/radar.ts

@@ -0,0 +1,229 @@
+import { unref, ref, computed } from 'vue'
+import useVariablesInText from '../../hooks/useVariablesInText'
+import { getLegendFormat } from '../util'
+
+export default function getRadarTransformProps(props, chartData, fontSize) {
+
+  const dimensions = ref(chartData.dimensions)
+  const dataSource = ref(chartData.dataset)
+  
+  const radarIndicator = computed(() => {
+    const result = []
+    // const map = {}
+    const valList = []
+    const ds = unref(dataSource)
+    const len = ds.length
+    for (let i = 0; i < len; i++) {
+      const { data = [] } = ds[i]
+      // if (data?.length) {
+      //   for (let j = 0; j < data.length; j++) {
+      //     if (map[data[j][fieldName.value]]) {
+      //       map[data[j][fieldName.value]].push(data[j].value)
+      //     } else {
+      //       map[data[j][fieldName.value]] = [data[j].value]
+      //     }
+      //   }
+      // }
+      for (let j = 0; j < data.length; j++) {
+        valList.push(data[j].value)
+      }
+    }
+    if (dimensions.value?.length) {
+      const maxValue = valList?.length ? Math.max(...valList) * 1.2 : 0
+      for (const item of dimensions.value) {
+        result.push({
+          name: item,
+          max: maxValue
+        })
+      }
+    }
+    return result
+  })
+  const series = computed(() => {
+    const ds = unref(dataSource)
+    const len = ds.length
+    const series = []
+    for (let i = 0; i < len; i++) {
+      const { name, data = [] } = ds[i]
+      const radarData = [
+        {
+          name,
+          value: data.map((v: any) => v.value)
+        }
+      ]
+      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'
+      }
+      let color: any = gcolor
+      if (props.gradientShow) {
+        const { gradientOffset, gradientColors } = props
+        color = {
+          x: 0.7,
+          y: 0,
+          x2: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: gcolor
+            },
+            {
+              offset: gradientOffset,
+              color: gradientColors[i]
+            },
+            {
+              offset: 1,
+              color: gradientColors[i]
+            }
+          ]
+        }
+      }
+      const item = {
+        type: 'radar',
+        name,
+        data: radarData,
+        areaStyle: {
+          color,
+          opacity: props.areaStyleOpacity
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        symbolSize: props.symbolSize,
+        lineStyle: {
+          width: props.lineStyleWidth
+        },
+        label: {
+          show: props.labelShow,
+          fontSize: props.labelFontSize,
+          position: props.labelPosition,
+          color: props.labelColor,
+          width: props.labelWidth,
+          overflow: props.labelOverflow,
+          formatter: (params: any) => {
+            const { data, value } = params
+            let total = 0
+            let percent = '0%'
+            if (data) {
+              for (const item of data.value) {
+                total += +item
+              }
+            }
+            if (total) {
+              percent = `${((value / total) * 100).toFixed(2)}%`
+            }
+            return useVariablesInText(
+              props.labelFormatter,
+              {
+                textData: {
+                  value,
+                  percent
+                }
+              },
+              {
+                useNewline: false,
+                useSpace: false
+              }
+            )
+          }
+        }
+      } as { [key: string]: any }
+      series.push(item)
+    }
+    return series
+  })
+  const options = computed(() => ({
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: fontSize.value
+      },
+      show: props.tooltipShow,
+      formatter: (params) => {
+        let formatter = ''
+        let tooltipFormatter = props.tooltipFormatter
+        if (tooltipFormatter === '') {
+          tooltipFormatter = '{marker} {a}    {c}'
+        }
+        for (let i = 0; i < unref(radarIndicator).length; i++) {
+          const item = unref(radarIndicator)[i]
+          const { marker, seriesName, value } = params || {}
+          if (i === 0 && seriesName) {
+            formatter += `${seriesName}<br/>`
+          }
+          formatter += useVariablesInText(
+            tooltipFormatter,
+            {
+              textData: {
+                marker,
+                name: item.name,
+                value: value[i],
+                a: item.name,
+                b: item.name,
+                c: value[i] || 0,
+                type: seriesName
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+          formatter += '<br/>'
+        }
+        return formatter
+      },
+      position: props.tooltipPosition || undefined
+    },
+    radar: {
+      indicator: unref(radarIndicator),
+      axisName: {
+        color: props.axisNameColor
+      }
+    },
+    // 图例
+    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,
+        lineHeight: parseFloat(props.legendFontSize) + 8,
+
+        rich: {
+          text: {
+            width: props.legendTextWidth,
+            color: props.legendTextStyleColor,
+            // fontSize: visible.value ? ZOOM_FONT_SIZE : props.legendFontSize
+            fontSize: props.legendFontSize
+          }
+        }
+      },
+      itemHeight: props.legendItemHeight,
+      itemWidth: props.legendItemWidth,
+      itemGap: props.legendItemGap,
+      data: unref(dataSource).map((value) => {
+        return {
+          name: value.name,
+          icon: props.legendType
+        }
+      }),
+      formatter: (name: string) => {
+        return getLegendFormat(props.legendFormatter, {
+          name
+        })
+      }
+    },
+    series: unref(series)
+  }))
+  return unref(options)
+}