vue2-client 1.18.26 → 1.18.27

package/src/base-client/components/his/HChart/HChart.vue

@@ -78,13 +78,13 @@
 <script setup>
 import { ref, watch, onMounted, computed, useAttrs, onBeforeUnmount, nextTick } from 'vue'
 import * as echarts from 'echarts/core'
-import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { BarChart, LineChart, PieChart, CustomChart } from 'echarts/charts'
 import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
 import XTitle from '../XTitle/XTitle.vue'
 // 注册常用图表类型，避免每次重复导入
-echarts.use([BarChart, LineChart, PieChart, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer])
+echarts.use([BarChart, LineChart, PieChart, CustomChart, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer])
 
 const props = defineProps({
   // 配置名称（用于查询配置）
@@ -712,7 +712,223 @@ const presetResolvers = {
         }
       }
     ]
-  })
+  }),
+  // 范围折线图：显示高低两条线及差值连线
+  'range-line': ({ dataset = [], config = {} }) => {
+    if (!dataset.length) {
+      return {
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: []
+      }
+    }
+
+    // 配置项
+    const highField = config.highField || 'high'
+    const lowField = config.lowField || 'low'
+    const highName = config.highName || '流入'
+    const lowName = config.lowName || '流出'
+    const highColor = config.highColor || '#1F66FF'
+    const lowColor = config.lowColor || '#A8C4FF'
+    const rangeLineColor = config.rangeLineColor || '#1F66FF'
+    const rangeLineType = config.rangeLineType || 'solid'
+    const valueSuffix = config.valueSuffix || ''
+    const showRangeLines = config.showRangeLines !== false
+    const isSmoothLine = typeof config.smooth === 'boolean' ? config.smooth : false
+    const baseSymbolSize = Number(config.symbolSize) || 10
+    const pointBorderWidth = Number(config.pointBorderWidth) || 3
+
+    // 提取数据
+    const labels = dataset.map(item => item.label)
+    const highData = dataset.map(item => Number(item[highField] || item.high || 0))
+    const lowData = dataset.map(item => Number(item[lowField] || item.low || 0))
+
+    // 构建系列
+    const series = [
+      // 高值折线
+      {
+        name: highName,
+        type: 'line',
+        smooth: isSmoothLine,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: baseSymbolSize,
+        z: 10,
+        data: highData,
+        lineStyle: {
+          width: 2,
+          color: highColor
+        },
+        itemStyle: {
+          color: '#fff',
+          borderColor: highColor,
+          borderWidth: pointBorderWidth
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: highColor,
+          fontWeight: 500,
+          formatter: params => `${params.value}${valueSuffix}`
+        },
+        emphasis: {
+          scale: true,
+          itemStyle: {
+            color: highColor,
+            borderColor: highColor
+          }
+        }
+      },
+      // 低值折线
+      {
+        name: lowName,
+        type: 'line',
+        smooth: isSmoothLine,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: baseSymbolSize,
+        z: 10,
+        data: lowData,
+        lineStyle: {
+          width: 2,
+          color: lowColor
+        },
+        itemStyle: {
+          color: '#fff',
+          borderColor: lowColor,
+          borderWidth: pointBorderWidth
+        },
+        label: {
+          show: true,
+          position: 'bottom',
+          color: lowColor,
+          fontWeight: 500,
+          formatter: params => `${params.value}${valueSuffix}`
+        },
+        emphasis: {
+          scale: true,
+          itemStyle: {
+            color: lowColor,
+            borderColor: lowColor
+          }
+        }
+      }
+    ]
+
+    // 添加差值连线（使用 custom series）
+    if (showRangeLines) {
+      series.push({
+        name: '差值连线',
+        type: 'custom',
+        z: 5,
+        renderItem: (params, api) => {
+          const xValue = api.value(0)
+          const highValue = api.value(1)
+          const lowValue = api.value(2)
+
+          const highPoint = api.coord([xValue, highValue])
+          const lowPoint = api.coord([xValue, lowValue])
+
+          return {
+            type: 'line',
+            shape: {
+              x1: highPoint[0],
+              y1: highPoint[1],
+              x2: lowPoint[0],
+              y2: lowPoint[1]
+            },
+            style: {
+              stroke: rangeLineColor,
+              lineWidth: 1,
+              lineDash: rangeLineType === 'dashed' ? [4, 4] : null
+            }
+          }
+        },
+        encode: {
+          x: 0,
+          y: [1, 2]
+        },
+        data: dataset.map((item, idx) => [idx, highData[idx], lowData[idx]])
+      })
+    }
+
+    return {
+      animationDuration: 420,
+      animationEasing: 'cubicOut',
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255, 255, 255, 0.96)',
+        borderColor: '#E5E9F0',
+        borderWidth: 1,
+        textStyle: { color: '#333' },
+        axisPointer: {
+          type: 'line',
+          lineStyle: {
+            color: rangeLineColor,
+            width: 1,
+            type: 'dashed'
+          }
+        },
+        formatter: (params = []) => {
+          if (!params.length) return ''
+          const label = params[0].axisValue
+          let html = `<div style="font-weight:600;margin-bottom:6px">${label}</div>`
+          params.forEach(p => {
+            if (p.seriesName === '差值连线') return
+            const marker = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:6px"></span>`
+            html += `<div>${marker}${p.seriesName}: ${p.value}${valueSuffix}</div>`
+          })
+          // 计算差值
+          const highVal = params.find(p => p.seriesName === highName)?.value || 0
+          const lowVal = params.find(p => p.seriesName === lowName)?.value || 0
+          const diff = highVal - lowVal
+          html += `<div style="margin-top:4px;padding-top:4px;border-top:1px dashed #E5E9F0;color:#666">净额: ${diff}${valueSuffix}</div>`
+          return html
+        }
+      },
+      legend: {
+        show: true,
+        top: 0,
+        right: 20,
+        itemWidth: 16,
+        itemHeight: 8,
+        textStyle: { color: '#5C6C8C' },
+        data: [highName, lowName]
+      },
+      grid: {
+        top: 60,
+        left: 60,
+        right: 40,
+        bottom: 40,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: labels,
+        axisLine: { lineStyle: { color: '#C8D2E8' } },
+        axisLabel: { color: '#5C6C8C', fontWeight: 500 },
+        axisTick: { show: false },
+        splitLine: { show: false }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          color: '#5C6C8C',
+          fontWeight: 500,
+          formatter: value => `${value}${valueSuffix}`
+        },
+        splitLine: {
+          show: true,
+          lineStyle: { type: 'dashed', color: '#E0E6F1' }
+        }
+      },
+      series
+    }
+  }
 }
 
 // 颜色工具函数：将十六进制颜色转换为 RGB