vue2-client 1.17.45 → 1.17.47

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

@@ -1,493 +1,493 @@
-<template>
-  <div class="h-chart-configurable" :class="wrapperClassObject">
-    <x-title v-if="chartTitle" v-bind="xTitleAttrs" :title="chartTitle" />
-    <!-- 图表挂载容器 -->
-    <div ref="chartRef" class="chart-canvas" :style="chartStyle"></div>
-  </div>
-</template>
-
-<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 { 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])
-
-const props = defineProps({
-  // 配置名称（用于查询配置）
-  queryParamsName: {
-    type: String,
-    default: ''
-  },
-  // 服务名
-  serviceName: {
-    type: String,
-    default: 'af-his'
-  },
-  // 固定查询参数
-  fixedQueryForm: {
-    type: Object,
-    default: () => ({ condition: '1=1' })
-  },
-  config: {
-    type: Object,
-    default: null
-  }
-})
-
-const emit = defineEmits(['dataLoaded', 'error', 'update:fixedQueryForm'])
-
-const chartRef = ref(null)
-let chartInstance = null
-const chartConfig = ref(null)
-const chartData = ref([])
-const loading = ref(false)
-let resizeObserver = null
-
-// 记录上一次的 queryParamsName，用于比较变化
-const lastQueryParamsName = ref('')
-
-const chartTitle = computed(() => {
-  if (props.config?.xtitle) return props.config.xtitle
-  if (chartConfig.value?.xtitle) return chartConfig.value.xtitle
-  return ''
-})
-const xTitleAttrs = computed(() => {
-  if (props.config?.xtitleAttrs) return props.config.xtitleAttrs
-  if (chartConfig.value?.xtitleAttrs) return chartConfig.value.xtitleAttrs
-  return {}
-})
-const chartStyle = computed(() => {
-  const target = props.config ?? chartConfig.value ?? {}
-  if (target.style && typeof target.style === 'object') return target.style
-  return {}
-})
-
-const attrs = useAttrs()
-const wrapperClassObject = computed(() => {
-  const a = attrs
-  const classes = {}
-
-  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
-  const booleanStyleKeys = [
-    'show-border',
-    'border-hide-left',
-    'border-hide-right'
-  ]
-  for (const key of booleanStyleKeys) {
-    const val = a[key]
-    const truthy = val === true || val === '' || val === 'true'
-    if (truthy) classes[`h-chart-${key}`] = true
-  }
-
-  return classes
-})
-
-// 常用图表预设，统一处理 dataset → ECharts option 的映射
-const presetResolvers = {
-  bar: ({ dataset }) => ({
-    animationDuration: 420,
-    animationEasing: 'cubicOut',
-    animationDelay: (_, idx) => idx * 60,
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    xAxis: { type: 'category', data: dataset.map(item => item.label) },
-    yAxis: { type: 'value' },
-    series: [
-      {
-        type: 'bar',
-        data: dataset.map(item => item.value),
-        itemStyle: {
-          color: '#3362DA',
-          borderRadius: [4, 4, 0, 0]
-        },
-        emphasis: {
-          itemStyle: {
-            color: '#4C7CFF',
-            shadowBlur: 18,
-            shadowColor: 'rgba(76, 124, 255, 0.45)'
-          }
-        }
-      }
-    ]
-  }),
-  line: ({ dataset }) => ({
-    animationDuration: 420,
-    animationEasing: 'cubicOut',
-    animationDelay: (_, idx) => idx * 50,
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
-      }
-    },
-    xAxis: { type: 'category', data: dataset.map(item => item.label) },
-    yAxis: { type: 'value' },
-    series: [
-      {
-        type: 'line',
-        smooth: true,
-        data: dataset.map(item => item.value),
-        lineStyle: {
-          width: 3,
-          color: '#28C8B5'
-        },
-        itemStyle: {
-          color: '#28C8B5'
-        },
-        emphasis: {
-          itemStyle: {
-            color: '#4BE1CD',
-            borderColor: '#D8FFF6',
-            borderWidth: 6
-          },
-          lineStyle: {
-            width: 4
-          }
-        },
-        areaStyle: {
-          opacity: 0.1,
-          color: '#28C8B5'
-        }
-      }
-    ]
-  }),
-  pie: ({ dataset }) => ({
-    animationDuration: 420,
-    animationEasing: 'cubicOut',
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b}: {c} ({d}%)'
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: '55%',
-        data: dataset.map(item => ({ name: item.label, value: item.value })),
-        itemStyle: {
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        emphasis: {
-          scale: true,
-          scaleSize: 6,
-          itemStyle: {
-            shadowBlur: 16,
-            shadowColor: 'rgba(0, 0, 0, 0.25)'
-          },
-          label: {
-            show: true,
-            fontWeight: 'bold'
-          }
-        }
-      }
-    ]
-  })
-}
-
-// 数据转换：将后端返回的数据转换为图表需要的 dataset 格式
-const transformData = (rawData, dataMapping) => {
-  // 增强数据提取：支持从包装对象中提取数组
-  let dataArray = rawData
-
-  // 如果 rawData 是对象但不是数组，尝试提取数组数据
-  if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {
-    // 尝试常见的包装字段
-    dataArray = rawData.data || rawData.result || rawData.list || rawData.items || rawData.records
-
-    // 如果还是找不到数组，检查是否所有值都是数组
-    if (!Array.isArray(dataArray)) {
-      const arrayValues = Object.values(rawData).filter(val => Array.isArray(val))
-      if (arrayValues.length === 1) {
-        dataArray = arrayValues[0]
-      }
-    }
-  }
-
-  // 最终检查：必须是数组
-  if (!dataArray || !Array.isArray(dataArray)) {
-    console.warn('HChart: transformData 接收到的数据不是数组格式:', rawData)
-    return []
-  }
-
-  // 如果配置了数据映射规则，使用映射规则
-  if (dataMapping) {
-    const { labelField = 'label', valueField = 'value' } = dataMapping
-    return dataArray.map(item => ({
-      label: item[labelField] || item.name || item.label || '',
-      value: Number(item[valueField] || item.value || 0)
-    }))
-  }
-
-  // 默认处理：尝试自动识别
-  return dataArray.map(item => {
-    if (typeof item === 'object' && item !== null) {
-      return {
-        label: item.label || item.name || item.text || item.x || String(item[Object.keys(item)[0]] || ''),
-        value: Number(item.value || item.count || item.y || item[Object.keys(item)[1]] || 0)
-      }
-    }
-    return { label: String(item), value: 0 }
-  })
-}
-
-// 获取配置和数据
-const fetchConfigAndData = async () => {
-  if (!props.queryParamsName && !props.config) {
-    console.warn('HChart: queryParamsName 或 config 必须提供一个')
-    return
-  }
-
-  try {
-    loading.value = true
-
-    // 如果直接提供了 config，直接使用
-    if (props.config) {
-      chartConfig.value = props.config
-      console.log('44444444444444444444444444444444')
-      await loadChartData(props.config)
-      return
-    }
-
-    // 否则通过 queryParamsName 查询配置
-    getConfigByName(props.queryParamsName, props.serviceName, async (res) => {
-      if (!res) {
-        console.error('HChart: 未能获取到配置内容')
-        emit('error', new Error('未能获取到配置内容'))
-        return
-      }
-
-      chartConfig.value = res
-      console.log('3333333333333333333333333')
-      await loadChartData(res)
-    })
-  } catch (error) {
-    console.error('HChart: 获取配置或数据时发生错误:', error)
-    emit('error', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-// 加载图表数据
-const loadChartData = async (config) => {
-  if (!config) return
-
-  try {
-    // 如果配置中直接提供了 dataset，直接使用
-    if (config.dataset && Array.isArray(config.dataset)) {
-      chartData.value = config.dataset
-      renderChart()
-      console.log('1111111111111111111111111')
-      emit('dataLoaded', chartData.value)
-      return
-    }
-
-    // 如果配置中提供了 data（logicName），通过 runLogic 获取数据
-    if (config.data) {
-      const result = await runLogic(config.data, props.fixedQueryForm, props.serviceName)
-
-      // 转换数据格式
-      const transformedData = transformData(result, config.dataMapping)
-      if (transformedData.length === 0) {
-        console.warn('HChart: 数据转换后为空数组，原始数据:', result)
-      }
-      chartData.value = transformedData
-      renderChart()
-      console.log('22222222222222222222222222')
-      emit('dataLoaded', transformedData)
-    } else {
-      // 没有数据源，使用空数据
-      chartData.value = []
-      renderChart()
-    }
-  } catch (error) {
-    console.error('HChart: 加载数据时发生错误:', error)
-    emit('error', error)
-  }
-}
-
-// 渲染图表
-const renderChart = () => {
-  if (!chartRef.value) return
-  nextTick(() => {
-    if (!chartInstance) {
-      chartInstance = echarts.init(chartRef.value)
-      // 监听窗口大小变化
-      resizeObserver = new ResizeObserver(() => {
-        chartInstance?.resize()
-      })
-      resizeObserver.observe(chartRef.value)
-    }
-
-    const config = chartConfig.value || props.config
-    if (!config || !config.type) return
-
-    const resolver = presetResolvers[config.type]
-    if (!resolver) {
-      console.warn(`HChart: 不支持的图表类型 ${config.type}`)
-      return
-    }
-
-    const preset = resolver({ dataset: chartData.value })
-    // 深度合并 series 配置
-    let finalOptions = {
-      legend: config.legend || {},
-      grid: config.grid || {},
-      ...preset
-    }
-
-    // 如果 options 中有 series，进行深度合并
-    if (config.options?.series && preset.series) {
-      // 分离需要特殊处理的配置项
-      const { xAxis: customXAxis, yAxis: customYAxis, series: customSeries, ...restOptions } = config.options
-
-      finalOptions = {
-        ...finalOptions,
-        ...restOptions,
-        // 对于有 xAxis 的图表类型（bar, line），智能合并 xAxis
-        ...(preset.xAxis && {
-          xAxis: {
-            ...preset.xAxis,
-            ...customXAxis,
-            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
-            data: (customXAxis?.data && customXAxis.data.length > 0)
-              ? customXAxis.data
-              : preset.xAxis.data
-          }
-        }),
-        // 对于有 yAxis 的图表类型，合并 yAxis
-        ...(preset.yAxis && {
-          yAxis: {
-            ...preset.yAxis,
-            ...customYAxis
-          }
-        }),
-        series: [
-          {
-            ...preset.series[0],
-            ...customSeries[0],
-            // 确保 data 来自预设（从 logic 获取的数据）
-            data: preset.series[0].data
-          }
-        ]
-      }
-    } else {
-      // 没有自定义 series 的情况
-      const { xAxis: customXAxis, yAxis: customYAxis, ...restOptions } = config.options || {}
-
-      finalOptions = {
-        ...finalOptions,
-        ...restOptions,
-        // 对于有 xAxis 的图表类型，智能合并
-        ...(preset.xAxis && {
-          xAxis: {
-            ...preset.xAxis,
-            ...customXAxis,
-            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
-            data: (customXAxis?.data && customXAxis.data.length > 0)
-              ? customXAxis.data
-              : preset.xAxis.data
-          }
-        }),
-        // 对于有 yAxis 的图表类型，合并 yAxis
-        ...(preset.yAxis && {
-          yAxis: {
-            ...preset.yAxis,
-            ...customYAxis
-          }
-        })
-      }
-    }
-    chartInstance.setOption(finalOptions, true)
-  })
-}
-
-// 监听 queryParamsName 变化，只有在名称变化时才重新获取配置
-watch(
-  () => props.queryParamsName,
-  (newName, oldName) => {
-    if (newName !== oldName) {
-      console.log('99999999999999999999999999')
-      fetchConfigAndData()
-    }
-  }
-)
-
-// 暴露给外部的方法
-const refresh = () => {
-  console.log('88888888888888888888888888')
-  fetchConfigAndData()
-}
-
-const reload = (newQueryForm) => {
-  if (newQueryForm) {
-    emit('update:fixedQueryForm', { ...props.fixedQueryForm, ...newQueryForm })
-  } else {
-    console.log('7777777777777777777777777')
-    fetchConfigAndData()
-  }
-}
-
-defineExpose({
-  refresh,
-  reload,
-  chartInstance
-})
-
-onMounted(() => {
-  // 初始化时记录 queryParamsName
-  lastQueryParamsName.value = props.queryParamsName
-  console.log('66666666666666666666666666666')
-  fetchConfigAndData()
-})
-
-onBeforeUnmount(() => {
-  // 清理图表实例和观察器
-  if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
-  }
-  if (resizeObserver) {
-    resizeObserver.disconnect()
-    resizeObserver = null
-  }
-})
-</script>
-
-<style scoped lang="less">
-.h-chart-configurable {
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.22s ease, box-shadow 0.22s ease;
-
-  &.h-chart-show-border {
-    border: 1px solid #E5E9F0;
-  }
-  &.h-chart-border-hide-right {
-    border-right: 0px;
-  }
-  &.h-chart-border-hide-left {
-    border-left: 0px;
-  }
-}
-
-.h-chart-configurable.hoverable:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
-}
-
-.chart-canvas {
-  width: 100%;
-  margin-top: 10px;
-  min-height: 280px;
-}
-</style>
+<template>
+  <div class="h-chart-configurable" :class="wrapperClassObject">
+    <x-title v-if="chartTitle" v-bind="xTitleAttrs" :title="chartTitle" />
+    <!-- 图表挂载容器 -->
+    <div ref="chartRef" class="chart-canvas" :style="chartStyle"></div>
+  </div>
+</template>
+
+<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 { 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])
+
+const props = defineProps({
+  // 配置名称（用于查询配置）
+  queryParamsName: {
+    type: String,
+    default: ''
+  },
+  // 服务名
+  serviceName: {
+    type: String,
+    default: 'af-his'
+  },
+  // 固定查询参数
+  fixedQueryForm: {
+    type: Object,
+    default: () => ({ condition: '1=1' })
+  },
+  config: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['dataLoaded', 'error', 'update:fixedQueryForm'])
+
+const chartRef = ref(null)
+let chartInstance = null
+const chartConfig = ref(null)
+const chartData = ref([])
+const loading = ref(false)
+let resizeObserver = null
+
+// 记录上一次的 queryParamsName，用于比较变化
+const lastQueryParamsName = ref('')
+
+const chartTitle = computed(() => {
+  if (props.config?.xtitle) return props.config.xtitle
+  if (chartConfig.value?.xtitle) return chartConfig.value.xtitle
+  return ''
+})
+const xTitleAttrs = computed(() => {
+  if (props.config?.xtitleAttrs) return props.config.xtitleAttrs
+  if (chartConfig.value?.xtitleAttrs) return chartConfig.value.xtitleAttrs
+  return {}
+})
+const chartStyle = computed(() => {
+  const target = props.config ?? chartConfig.value ?? {}
+  if (target.style && typeof target.style === 'object') return target.style
+  return {}
+})
+
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const a = attrs
+  const classes = {}
+
+  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
+  const booleanStyleKeys = [
+    'show-border',
+    'border-hide-left',
+    'border-hide-right'
+  ]
+  for (const key of booleanStyleKeys) {
+    const val = a[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`h-chart-${key}`] = true
+  }
+
+  return classes
+})
+
+// 常用图表预设，统一处理 dataset → ECharts option 的映射
+const presetResolvers = {
+  bar: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    animationDelay: (_, idx) => idx * 60,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: { type: 'category', data: dataset.map(item => item.label) },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        type: 'bar',
+        data: dataset.map(item => item.value),
+        itemStyle: {
+          color: '#3362DA',
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#4C7CFF',
+            shadowBlur: 18,
+            shadowColor: 'rgba(76, 124, 255, 0.45)'
+          }
+        }
+      }
+    ]
+  }),
+  line: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    animationDelay: (_, idx) => idx * 50,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    xAxis: { type: 'category', data: dataset.map(item => item.label) },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        type: 'line',
+        smooth: true,
+        data: dataset.map(item => item.value),
+        lineStyle: {
+          width: 3,
+          color: '#28C8B5'
+        },
+        itemStyle: {
+          color: '#28C8B5'
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#4BE1CD',
+            borderColor: '#D8FFF6',
+            borderWidth: 6
+          },
+          lineStyle: {
+            width: 4
+          }
+        },
+        areaStyle: {
+          opacity: 0.1,
+          color: '#28C8B5'
+        }
+      }
+    ]
+  }),
+  pie: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '55%',
+        data: dataset.map(item => ({ name: item.label, value: item.value })),
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 6,
+          itemStyle: {
+            shadowBlur: 16,
+            shadowColor: 'rgba(0, 0, 0, 0.25)'
+          },
+          label: {
+            show: true,
+            fontWeight: 'bold'
+          }
+        }
+      }
+    ]
+  })
+}
+
+// 数据转换：将后端返回的数据转换为图表需要的 dataset 格式
+const transformData = (rawData, dataMapping) => {
+  // 增强数据提取：支持从包装对象中提取数组
+  let dataArray = rawData
+
+  // 如果 rawData 是对象但不是数组，尝试提取数组数据
+  if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {
+    // 尝试常见的包装字段
+    dataArray = rawData.data || rawData.result || rawData.list || rawData.items || rawData.records
+
+    // 如果还是找不到数组，检查是否所有值都是数组
+    if (!Array.isArray(dataArray)) {
+      const arrayValues = Object.values(rawData).filter(val => Array.isArray(val))
+      if (arrayValues.length === 1) {
+        dataArray = arrayValues[0]
+      }
+    }
+  }
+
+  // 最终检查：必须是数组
+  if (!dataArray || !Array.isArray(dataArray)) {
+    console.warn('HChart: transformData 接收到的数据不是数组格式:', rawData)
+    return []
+  }
+
+  // 如果配置了数据映射规则，使用映射规则
+  if (dataMapping) {
+    const { labelField = 'label', valueField = 'value' } = dataMapping
+    return dataArray.map(item => ({
+      label: item[labelField] || item.name || item.label || '',
+      value: Number(item[valueField] || item.value || 0)
+    }))
+  }
+
+  // 默认处理：尝试自动识别
+  return dataArray.map(item => {
+    if (typeof item === 'object' && item !== null) {
+      return {
+        label: item.label || item.name || item.text || item.x || String(item[Object.keys(item)[0]] || ''),
+        value: Number(item.value || item.count || item.y || item[Object.keys(item)[1]] || 0)
+      }
+    }
+    return { label: String(item), value: 0 }
+  })
+}
+
+// 获取配置和数据
+const fetchConfigAndData = async () => {
+  if (!props.queryParamsName && !props.config) {
+    console.warn('HChart: queryParamsName 或 config 必须提供一个')
+    return
+  }
+
+  try {
+    loading.value = true
+
+    // 如果直接提供了 config，直接使用
+    if (props.config) {
+      chartConfig.value = props.config
+      console.log('44444444444444444444444444444444')
+      await loadChartData(props.config)
+      return
+    }
+
+    // 否则通过 queryParamsName 查询配置
+    getConfigByName(props.queryParamsName, props.serviceName, async (res) => {
+      if (!res) {
+        console.error('HChart: 未能获取到配置内容')
+        emit('error', new Error('未能获取到配置内容'))
+        return
+      }
+
+      chartConfig.value = res
+      console.log('3333333333333333333333333')
+      await loadChartData(res)
+    })
+  } catch (error) {
+    console.error('HChart: 获取配置或数据时发生错误:', error)
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载图表数据
+const loadChartData = async (config) => {
+  if (!config) return
+
+  try {
+    // 如果配置中直接提供了 dataset，直接使用
+    if (config.dataset && Array.isArray(config.dataset)) {
+      chartData.value = config.dataset
+      renderChart()
+      console.log('1111111111111111111111111')
+      emit('dataLoaded', chartData.value)
+      return
+    }
+
+    // 如果配置中提供了 data（logicName），通过 runLogic 获取数据
+    if (config.data) {
+      const result = await runLogic(config.data, props.fixedQueryForm, props.serviceName)
+
+      // 转换数据格式
+      const transformedData = transformData(result, config.dataMapping)
+      if (transformedData.length === 0) {
+        console.warn('HChart: 数据转换后为空数组，原始数据:', result)
+      }
+      chartData.value = transformedData
+      renderChart()
+      console.log('22222222222222222222222222')
+      emit('dataLoaded', transformedData)
+    } else {
+      // 没有数据源，使用空数据
+      chartData.value = []
+      renderChart()
+    }
+  } catch (error) {
+    console.error('HChart: 加载数据时发生错误:', error)
+    emit('error', error)
+  }
+}
+
+// 渲染图表
+const renderChart = () => {
+  if (!chartRef.value) return
+  nextTick(() => {
+    if (!chartInstance) {
+      chartInstance = echarts.init(chartRef.value)
+      // 监听窗口大小变化
+      resizeObserver = new ResizeObserver(() => {
+        chartInstance?.resize()
+      })
+      resizeObserver.observe(chartRef.value)
+    }
+
+    const config = chartConfig.value || props.config
+    if (!config || !config.type) return
+
+    const resolver = presetResolvers[config.type]
+    if (!resolver) {
+      console.warn(`HChart: 不支持的图表类型 ${config.type}`)
+      return
+    }
+
+    const preset = resolver({ dataset: chartData.value })
+    // 深度合并 series 配置
+    let finalOptions = {
+      legend: config.legend || {},
+      grid: config.grid || {},
+      ...preset
+    }
+
+    // 如果 options 中有 series，进行深度合并
+    if (config.options?.series && preset.series) {
+      // 分离需要特殊处理的配置项
+      const { xAxis: customXAxis, yAxis: customYAxis, series: customSeries, ...restOptions } = config.options
+
+      finalOptions = {
+        ...finalOptions,
+        ...restOptions,
+        // 对于有 xAxis 的图表类型（bar, line），智能合并 xAxis
+        ...(preset.xAxis && {
+          xAxis: {
+            ...preset.xAxis,
+            ...customXAxis,
+            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
+            data: (customXAxis?.data && customXAxis.data.length > 0)
+              ? customXAxis.data
+              : preset.xAxis.data
+          }
+        }),
+        // 对于有 yAxis 的图表类型，合并 yAxis
+        ...(preset.yAxis && {
+          yAxis: {
+            ...preset.yAxis,
+            ...customYAxis
+          }
+        }),
+        series: [
+          {
+            ...preset.series[0],
+            ...customSeries[0],
+            // 确保 data 来自预设（从 logic 获取的数据）
+            data: preset.series[0].data
+          }
+        ]
+      }
+    } else {
+      // 没有自定义 series 的情况
+      const { xAxis: customXAxis, yAxis: customYAxis, ...restOptions } = config.options || {}
+
+      finalOptions = {
+        ...finalOptions,
+        ...restOptions,
+        // 对于有 xAxis 的图表类型，智能合并
+        ...(preset.xAxis && {
+          xAxis: {
+            ...preset.xAxis,
+            ...customXAxis,
+            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
+            data: (customXAxis?.data && customXAxis.data.length > 0)
+              ? customXAxis.data
+              : preset.xAxis.data
+          }
+        }),
+        // 对于有 yAxis 的图表类型，合并 yAxis
+        ...(preset.yAxis && {
+          yAxis: {
+            ...preset.yAxis,
+            ...customYAxis
+          }
+        })
+      }
+    }
+    chartInstance.setOption(finalOptions, true)
+  })
+}
+
+// 监听 queryParamsName 变化，只有在名称变化时才重新获取配置
+watch(
+  () => props.queryParamsName,
+  (newName, oldName) => {
+    if (newName !== oldName) {
+      console.log('99999999999999999999999999')
+      fetchConfigAndData()
+    }
+  }
+)
+
+// 暴露给外部的方法
+const refresh = () => {
+  console.log('88888888888888888888888888')
+  fetchConfigAndData()
+}
+
+const reload = (newQueryForm) => {
+  if (newQueryForm) {
+    emit('update:fixedQueryForm', { ...props.fixedQueryForm, ...newQueryForm })
+  } else {
+    console.log('7777777777777777777777777')
+    fetchConfigAndData()
+  }
+}
+
+defineExpose({
+  refresh,
+  reload,
+  chartInstance
+})
+
+onMounted(() => {
+  // 初始化时记录 queryParamsName
+  lastQueryParamsName.value = props.queryParamsName
+  console.log('66666666666666666666666666666')
+  fetchConfigAndData()
+})
+
+onBeforeUnmount(() => {
+  // 清理图表实例和观察器
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+})
+</script>
+
+<style scoped lang="less">
+.h-chart-configurable {
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+
+  &.h-chart-show-border {
+    border: 1px solid #E5E9F0;
+  }
+  &.h-chart-border-hide-right {
+    border-right: 0px;
+  }
+  &.h-chart-border-hide-left {
+    border-left: 0px;
+  }
+}
+
+.h-chart-configurable.hoverable:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+}
+
+.chart-canvas {
+  width: 100%;
+  margin-top: 10px;
+  min-height: 280px;
+}
+</style>