@ecan-bi/tools 1.0.62 → 1.0.64

package/src/utils/chartTransProps/scatter.ts

@@ -0,0 +1,472 @@
+import { unref } from 'vue'
+import useVariablesInText from '../../hooks/useVariablesInText'
+import useValueFormatter from '../../hooks/useValueFormatter'
+import runCode from '../runCode'
+export const getFieldConfig = (props, graphicConfig) => {
+  let dataFieldNames = props.dataFieldNames
+  if (graphicConfig) {
+    const { formFields = {} } = graphicConfig
+    if (formFields?.labelField && formFields?.valueField) {
+      dataFieldNames = {
+        name: formFields.labelField,
+        value: formFields.valueField
+      }
+    }
+  }
+  return dataFieldNames
+}
+// 设置坐标轴最大最小值
+export const setAxisExtremum = (echartRef) => {
+  const _yExtent = echartRef.chart.getModel().getComponent('yAxis').axis.scale._extent
+  const _xExtent = echartRef.chart.getModel().getComponent('xAxis').axis.scale._extent
+  let obj = {}
+  if (_xExtent && _yExtent) {
+    obj = {
+      xAxisMinValue: _xExtent[0],
+      xAxisMaxValue: _xExtent[1],
+      yAxisMinValue: _yExtent[0],
+      yAxisMaxValue: _yExtent[1]
+    }
+  }
+  return obj
+}
+// 获取平均数
+function getAverage(arr: any) {
+  if (!Array.isArray(arr) || arr.length === 0) return 0
+  const sum = arr.reduce((total, num) => total + num, 0)
+  return sum / arr.length
+}
+// 获取中位数
+function getMedian(arr: any) {
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return 0
+  }
+  const sortedArr = [...arr].sort((a, b) => a - b)
+  const len = sortedArr.length
+  const mid = Math.floor(len / 2)
+  if (len % 2 !== 0) {
+    return sortedArr[mid]
+  }
+  return (sortedArr[mid - 1] + sortedArr[mid]) / 2
+}
+function setCoord(unit: any, key: string, value: string | number) {
+  switch (key) {
+    case 'startX':
+      unit[0].coord[0] = +value
+      break
+    case 'startY':
+      unit[0].coord[1] = +value
+      break
+    case 'endX':
+      unit[1].coord[0] = +value
+      break
+    case 'endY':
+      unit[1].coord[1] = +value
+      break
+    default:
+      break
+  }
+}
+export const getParamValue = (type: string, axisItem: any, dataset: any) => {
+  let result = 0
+  let values = []
+  if (axisItem.x) {
+    values = unref(dataset).map((v: any) => v.value[0])
+  } else if (axisItem.y) {
+    values = unref(dataset).map((v: any) => v.value[1])
+  }
+  switch (type) {
+    case 'max':
+      result = Math.max(...values)
+      break
+    case 'min':
+      result = Math.min(...values)
+      break
+    case 'average':
+      result = getAverage(values)
+      break
+    case 'median':
+      result = getMedian(values)
+      break
+    default:
+      break
+  }
+  return result
+}
+const areaValueMap: any = {
+  最大值: '{max}',
+  最小值: '{min}',
+  平均值: '{average}',
+  中位数: '{median}'
+}
+// 图表标线
+const markLineData = (props, maxValueObj, dataset, componentValues) => {
+  const { xAxisMarkLineValue = [], yAxisMarkLineValue = [] } = props
+  const { xAxisMinValue, xAxisMaxValue, yAxisMinValue, yAxisMaxValue } = maxValueObj
+  const xList: { [key: string]: any }[] = xAxisMarkLineValue.map((v) => ({ ...v, x: true }))
+  const yList: { [key: string]: any }[] = yAxisMarkLineValue.map((v) => ({ ...v, y: true }))
+  const axisList = xList.concat(yList)
+  if (axisList?.length) {
+    const result = []
+    for (const item of axisList) {
+      const commonParams: any = {
+        label: {
+          show: true,
+          formatter: '',
+          rich: {
+            ft: {}
+          }
+        }
+      }
+      const lineStyle: any = {}
+      let expressStr = item.value
+      const variables = expressStr?.match(/\{(.+?)\}/g)
+      let axisStr = ''
+      // 文本
+      commonParams.label.formatter = item.label ? `{ft|${item.label}}` : ''
+      // 偏移量
+      if (item.offsetHorizontal || item.offsetVertical) {
+        if (item.x) {
+          commonParams.label.rich.ft.padding = [0, item.offsetHorizontal || 0, item.offsetVertical || 0, 0]
+        } else if (item.y) {
+          commonParams.label.rich.ft.padding = [item.offsetVertical || 0, 0, 0, item.offsetHorizontal || 0]
+        }
+      }
+      // 文本颜色
+      if (item.labelColor) {
+        commonParams.label.rich.ft.color = item.labelColor
+      }
+      // 线条颜色
+      if (item.lineColor) {
+        lineStyle.color = item.lineColor
+      }
+      // 线条类型
+      if (item.lineType) {
+        lineStyle.type = item.lineType
+      }
+      if (item.x) {
+        axisStr = 'xAxis'
+      } else if (item.y) {
+        axisStr = 'yAxis'
+      }
+      if (variables?.length) {
+        for (const variable of variables) {
+          expressStr = expressStr.replace(variable, variable.slice(1, -1))
+        }
+        if (expressStr) {
+          let resultValue: any
+          if (componentValues && componentValues.value[expressStr]) {
+            // 组件值
+            resultValue = unref(componentValues)[expressStr]
+          } else {
+            // 坐标轴最大最小值
+            console.log('0000000', expressStr)
+            resultValue = runCode(expressStr, {
+              axisMax: item.x ? unref(xAxisMaxValue) : item.y ? unref(yAxisMaxValue) : 0,
+              axisMin: item.x ? unref(xAxisMinValue) : item.y ? unref(yAxisMinValue) : 0,
+              max: getParamValue('max', item, dataset),
+              min: getParamValue('min', item, dataset),
+              average: getParamValue('average', item, dataset),
+              median: getParamValue('median', item, dataset)
+            })
+          }
+          if (!isNaN(+resultValue)) {
+            result.push({
+              [axisStr]: +resultValue,
+              lineStyle,
+              ...commonParams
+            })
+          }
+        }
+      } else if (!isNaN(+item.value)) {
+        result.push({
+          [axisStr]: item.value,
+          lineStyle,
+          ...commonParams
+        })
+      }
+    }
+    return {
+      symbol: ['none', 'none'],
+      data: result
+    }
+  } else {
+    return {
+      data: []
+    }
+  }
+}
+const markAreaData = (props, maxValueObj, dataset) => {
+  const { axisMarkArea = [] } = props
+  const { xAxisMinValue, xAxisMaxValue, yAxisMinValue, yAxisMaxValue } = maxValueObj
+  if (axisMarkArea?.length) {
+    const result = []
+    for (const item of axisMarkArea) {
+      const unit = [
+        {
+          name: item.label || '',
+          coord: [],
+          itemStyle: {
+            color: item.color || 'transparent'
+          },
+          label: {
+            show: !!item.label,
+            position: 'inside',
+            fontSize: 16,
+            color: '#000'
+          }
+        },
+        {
+          coord: []
+        }
+      ]
+      for (const key in item) {
+        if (['startX', 'startY', 'endX', 'endY'].includes(key)) {
+          let expressStr = areaValueMap[item[key]] || item[key]
+          const variables = expressStr?.match(/\{(.+?)\}/g)
+          if (variables?.length) {
+            for (const variable of variables) {
+              expressStr = expressStr.replace(variable, variable.slice(1, -1))
+            }
+            if (expressStr) {
+              const xyFlag = {
+                x: key.includes('X'),
+                y: key.includes('Y')
+              }
+              const usedVariable = runCode(expressStr, {
+                xMax: unref(xAxisMaxValue),
+                xMin: unref(xAxisMinValue),
+                yMax: unref(yAxisMaxValue),
+                yMin: unref(yAxisMinValue),
+                max: getParamValue('max', xyFlag, dataset),
+                min: getParamValue('min', xyFlag, dataset),
+                average: getParamValue('average', xyFlag, dataset),
+                median: getParamValue('median', xyFlag, dataset)
+              })
+              if (!isNaN(+usedVariable)) {
+                setCoord(unit, key, usedVariable)
+              }
+            }
+          } else if (!isNaN(+item[key])) {
+            setCoord(unit, key, item[key])
+          }
+        }
+      }
+      if (unit.every((v) => v.coord?.length)) {
+        result.push(unit)
+      }
+    }
+    return {
+      data: result
+    }
+  } else {
+    return {
+      data: []
+    }
+  }
+}
+
+export default function getScatterTransformProps(props, dataset, fontSize, graphicConfig, maxValueObj, fontFamily, componentValues) {
+  console.log(fontFamily)
+  const fieldConfig = getFieldConfig(props, graphicConfig)
+  // 这样写为了触发响应式
+  // 返回函数中使用无法触发
+  const xAxisLabelFormatter = props.xAxisLabelFormatter
+  const yAxisLabelFormatter = props.yAxisLabelFormatter
+  const markLine = maxValueObj ? markLineData(props, maxValueObj, dataset, componentValues) : undefined
+  const markArea = maxValueObj ? markAreaData(props, maxValueObj, dataset) : undefined
+  return {
+    xAxis: {
+      z: 5,
+      // type: 'value'
+      splitLine: {
+        show: props.xAxisSplitLineShow,
+        lineStyle: {
+          color: props.xAxisSplitLineStyleColor
+        },
+        interval: props.xAxisSplitLineInterval
+      },
+      splitArea: {
+        show: props.xAxisSplitAreaShow
+      },
+      axisLabel: {
+        show: props.xAxisLabelShow,
+        fontSize: props.xAxisLabelFontSize,
+        color: props.xAxisLabelColor,
+        interval: props.xAxisLabelInterval || 0,
+        rotate: props.xAxisLabelRotate,
+        width: props.xAxisLabelWidth,
+        overflow: props.xAxisLabelOverflow,
+        formatter(value: string) {
+          if (typeof value === 'string' && value[0] === '0' && !isNaN(+value)) {
+            value = (+value).toString()
+          }
+          return useValueFormatter(xAxisLabelFormatter, value)
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: props.xAxisLineStyleColor
+        },
+        symbol: ['none', props.showXAxisLineArrow ? 'arrow' : 'none'],
+        symbolSize: [8, 12],
+        onZero: false
+      },
+      axisTick: {
+        show: props.xAxisTickShow
+      },
+      name: props.xAxisName,
+      nameLocation: props.xAxisLineInverse ? 'start' : 'end',
+      nameTextStyle: {
+        fontSize: props.xAxisLabelFontSize,
+        color: props.xAxisLabelColor,
+        align: 'left'
+      },
+      inverse: props.xAxisLineInverse,
+      max: props.xAxisMax,
+      min: props.xAxisMin
+    },
+    yAxis: {
+      z: 5,
+      splitLine: {
+        show: props.yAxisSplitLineShow,
+        lineStyle: {
+          color: props.yAxisSplitLineStyleColor,
+          type: props.yAxisSplitLineType
+        }
+      },
+      axisTick: {
+        show: props.yAxisTickShow
+      },
+      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
+        },
+        symbol: ['none', props.showYAxisLineArrow ? 'arrow' : 'none'],
+        symbolSize: [8, 12],
+        onZero: false
+      },
+      name: props.yAxisName,
+      nameLocation: props.yAxisLineInverse ? 'start' : 'end',
+      nameTextStyle: {
+        fontSize: props.yAxisLabelFontSize,
+        color: props.yAxisLabelColor,
+        align: 'right'
+      },
+      inverse: props.yAxisLineInverse,
+      max: props.yAxisMax,
+      min: props.yAxisMin
+    },
+    // 提示
+    tooltip: {
+      show: props.tooltipShow,
+      trigger: props.tooltipTrigger,
+      formatter(params) {
+        const { marker, seriesName, componentType } = params
+        const record = params?.data?.record ?? {}
+        const name = record[fieldConfig.name]
+        const value = record[fieldConfig.value]
+        if (['markLine', 'markArea'].includes(componentType)) {
+          return ''
+        } else {
+          return useVariablesInText(
+            props.tooltipFormatter,
+            {
+              textData: {
+                marker,
+                seriesName,
+                a: seriesName,
+                b: name,
+                c: value,
+                ...record
+              }
+            },
+            {
+              useNewline: true,
+              useSpace: true
+            }
+          )
+        }
+      },
+      axisPointer: {
+        type: props.crossShow || props.crossShow === undefined ? 'cross' : ''
+      },
+      textStyle: {
+        fontSize: unref(fontSize)
+      },
+      position: props.tooltipPosition || undefined
+    },
+    // 图例
+    legend: {
+      show: props.legendShow,
+      orient: props.legendOrient,
+      top: props.legendTop,
+      left: props.legendLeft,
+      textStyle: {
+        color: props.legendTextStyleColor,
+        fontSize
+      }
+    },
+    series: [
+      {
+        data: unref(dataset),
+        type: 'scatter',
+        symbolSize: props.symbolSize,
+        itemStyle: {
+          color: props.symbolColor
+        },
+        label: {
+          show: props.labelShow,
+          fontSize: props.labelFontSize,
+          position: props.labelPosition,
+          color: props.labelColor,
+          width: props.labelWidth,
+          overflow: props.labelOverflow,
+          formatter: (params: any) => {
+            let formatter = ''
+            let labelFormatter = props.labelFormatter
+            if (labelFormatter === '') {
+              labelFormatter = '{c}'
+            }
+            const { seriesName, data } = params || {}
+            const record = data?.record ?? {}
+            const name = record[fieldConfig.name]
+            const value = record[fieldConfig.value]
+            formatter += useVariablesInText(
+              labelFormatter,
+              {
+                textData: {
+                  name,
+                  value,
+                  a: seriesName,
+                  b: name,
+                  c: value || 0,
+                  ...record
+                }
+              },
+              {
+                useNewline: true,
+                useSpace: true
+              }
+            )
+            return formatter
+          }
+        },
+        markLine,
+        markArea
+      }
+    ]
+  }
+}