zant-admin 1.0.4 → 2.0.1

package/src/utils/baseEcharts.js

@@ -1,661 +1,661 @@
-import * as echarts from 'echarts'
-// 定义柱状图颜色调色板
-export const barColorPalette = [
-  '#025DF4',
-  '#DB6BCF',
-  '#2498D1',
-  '#BBBDE6',
-  '#4045B2',
-  '#21A97A',
-  '#FF745A',
-  '#007E99',
-  '#FFA8A8',
-  '#2391FF',
-]
-const createNoDataGraphic = (text = '暂无数据') => ({
-  graphic: {
-    type: 'text',
-    left: 'center',
-    top: 'center',
-    z: 100, // 确保在最上层
-    silent: true,
-    invisible: true, // 默认隐藏
-    style: {
-      text,
-      fontSize: 20,
-      fontWeight: 'normal',
-      fill: '#999',
-      align: 'center',
-    },
-  },
-})
-/**
- * 初始化饼图
- * @param {HTMLElement} chartRef 图表DOM元素引用
- * @returns {echarts.ECharts} 图表实例
- */
-export const initPieChart = (chartRef, seriesName = '标题') => {
-  if (!chartRef) return null
-  const chartInstance = echarts.init(chartRef)
-  const defaultOptions = {
-    ...createNoDataGraphic(), // 添加暂无数据图形
-    tooltip: {
-      trigger: 'item',
-      formatter: function (params) {
-        return `<span style="display:inline-block;margin-right:5px;
-                            border-radius:50%;width:10px;height:10px;
-                            background-color:${params.color}"></span>
-                            ${params.seriesName}<br/>${params.name}: ${params.value} (${params.percent}%)`
-      },
-    },
-    legend: {
-      top: 0,
-      left: 'center',
-      type: 'scroll', // 改为滚动式图例
-      pageTextStyle: {
-        color: '#333',
-      },
-    },
-    color: barColorPalette,
-    series: [
-      {
-        name: seriesName,
-        type: 'pie',
-        radius: '55%',
-        center: ['50%', '60%'],
-        avoidLabelOverlap: true,
-        itemStyle: {
-          borderRadius: 3,
-          borderColor: '#fff',
-          borderWidth: 2,
-        },
-        label: {
-          show: true, // 显示标签
-          formatter: function (params) {
-            // 自定义格式化函数，实现多行显示
-            return [`${params.name}`, `${params.percent}%`].join('\n')
-          },
-          fontSize: 12, // 调整字体大小
-          color: '#333', // 标签颜色
-          lineHeight: 14, // 行高
-        },
-        emphasis: {},
-        labelLine: {
-          show: true,
-        },
-        data: [],
-      },
-    ],
-  }
-
-  chartInstance.setOption(defaultOptions)
-  return chartInstance
-}
-/**
- * 更新饼图数据
- * @param {echarts.ECharts} chartInstance 图表实例
- * @param {Array} data 图表数据
- */
-export const updatePieChart = ({ chartInstance, data }) => {
-  hideChartLoading(chartInstance)
-  if (!chartInstance) return
-  const isEmpty = !data || data.length === 0
-  // 更新配置
-  const updateOptions = {
-    tooltip: {
-      show: !isEmpty,
-    },
-    legend: {
-      show: !isEmpty,
-    },
-    series: [
-      {
-        data: isEmpty
-          ? []
-          : data.map(item => ({
-              ...item,
-              name: `${item.name} (${item.value})`,
-            })),
-        silent: isEmpty,
-      },
-    ],
-    graphic: {
-      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
-    },
-  }
-  // 合并自定义配置
-  chartInstance.setOption(updateOptions)
-}
-/**
- * 初始化柱状图
- * @param {HTMLElement} chartRef 图表DOM元素引用
- * @returns {echarts.ECharts} 图表实例
- */
-export const initBarChart = (chartRef, yAxisName = '单位') => {
-  if (!chartRef) return null
-  const chartInstance = echarts.init(chartRef)
-  const defaultOptions = {
-    ...createNoDataGraphic(), // 添加暂无数据图形
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-      },
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '1%', // 增加底部间距为滑动条留出空间
-      top: '15%',
-      containLabel: true,
-    },
-    legend: {
-      top: 'top', // 设置图例位于顶部
-      data: [],
-    },
-    xAxis: {
-      type: 'category',
-      data: [],
-      axisLabel: {
-        rotate: 0, // 保持水平
-        interval: 0,
-      },
-      axisTick: {
-        show: false,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      name: yAxisName,
-      axisLabel: {
-        formatter: function (value) {
-          // 只显示整数值
-          return value % 1 === 0 ? value : ''
-        },
-      },
-      nameTextStyle: {
-        padding: [0, 30, 15, 0],
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-        },
-      },
-    },
-    // 默认启用内置滑动条，但隐藏（超过12列时显示）
-    dataZoom: [
-      {
-        type: 'inside', // 内置型数据区域缩放
-        start: 0,
-        end: 100,
-        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
-        moveOnMouseMove: true, // 允许拖拽滑动
-        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
-      },
-      {
-        type: 'slider', // 滑动条型数据区域缩放
-        show: false, // 默认隐藏
-        start: 0,
-        end: 100,
-        bottom: '0%',
-        height: 15,
-        handleSize: '100%',
-        handleStyle: {
-          color: '#025DF4',
-        },
-        fillerColor: 'rgba(2, 93, 244, 0.2)',
-        borderColor: '#ddd',
-        backgroundColor: '#f5f5f5',
-        showDetail: false,
-      },
-    ],
-    series: [],
-  }
-  chartInstance.setOption(defaultOptions)
-  return chartInstance
-}
-/**
- * 更新柱状图数据
- * @param {echarts.ECharts} chartInstance 图表实例
- * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
- */
-export const updateBarChart = ({
-  chartInstance,
-  data,
-  shouldShowSlider = false,
-  shouldShowSliderNumber = 12,
-}) => {
-  hideChartLoading(chartInstance)
-  if (!chartInstance) return
-
-  const isEmpty =
-    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
-  const dataLength = isEmpty ? 0 : data.xAxis.data.length
-
-  // 提取图例数据（公司名称）
-  const legendData = isEmpty ? [] : data.series.map(item => item.name)
-
-  // 构建系列配置
-  const series = isEmpty
-    ? []
-    : data.series.map((companyData, index) => {
-        // 获取当前线条的颜色
-        const baseColor = barColorPalette[index % barColorPalette.length]
-        return {
-          name: companyData.name,
-          type: 'bar',
-          barMaxWidth: 40,
-          barCategoryGap: shouldShowSlider ? '15%' : '30%', // 有滑动条时减小间距
-          data: companyData.data,
-          itemStyle: {
-            color: {
-              // 线性渐变，方向从底部到顶部
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: baseColor, // 0% 处的颜色 - 原始颜色
-                },
-                {
-                  offset: 1,
-                  color: getLighterColor(baseColor, 0.7), // 100% 处的颜色 - 更浅的颜色
-                },
-              ],
-              global: false, // 全局使用默认值
-            },
-            borderRadius: [5, 5, 0, 0],
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-            shadowBlur: 5,
-            shadowOffsetY: 3,
-          },
-          label: {
-            show: true,
-            position: 'top',
-            formatter: '{c}',
-            color: '#333',
-            fontSize: 12,
-          },
-          emphasis: {
-            itemStyle: {
-              shadowColor: 'rgba(0, 0, 0, 0.3)',
-              shadowBlur: 10,
-              shadowOffsetY: 5,
-            },
-          },
-        }
-      })
-
-  // x轴配置 - 保持水平显示，不旋转
-  const xAxisConfig = {
-    data: isEmpty ? [] : data.xAxis.data,
-    axisLabel: {
-      rotate: 0, // 保持水平，不旋转
-      interval: 0,
-      margin: 8,
-      fontSize: 12, // 统一字体大小
-      // 如果文字过长可以自动换行
-      formatter: function (value) {
-        if (value.length > 6) {
-          // 超过6个字符换行
-          return value.substring(0, 6) + '\n' + value.substring(6)
-        }
-        return value
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-  }
-
-  // 滑动条配置
-  const dataZoomConfig = [
-    {
-      type: 'inside',
-      start: 0,
-      end: shouldShowSlider
-        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
-        : 100, // 初始显示12列
-      zoomOnMouseWheel: false,
-      moveOnMouseMove: true,
-      moveOnMouseWheel: true,
-    },
-    {
-      type: 'slider',
-      show: shouldShowSlider, // 根据数据长度决定是否显示
-      start: 0,
-      end: shouldShowSlider
-        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
-        : 100,
-      bottom: '0%',
-      height: 15,
-      handleSize: '100%',
-      handleStyle: {
-        color: '#025DF4',
-      },
-      fillerColor: 'rgba(2, 93, 244, 0.2)',
-      borderColor: '#ddd',
-      backgroundColor: '#f5f5f5',
-      showDetail: false,
-    },
-  ]
-
-  // 构建最终配置
-  const defaultOptions = {
-    tooltip: {
-      show: !isEmpty,
-    },
-    grid: {
-      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
-    },
-    xAxis: xAxisConfig,
-    legend: {
-      data: legendData,
-    },
-    series: series,
-    dataZoom: dataZoomConfig,
-    graphic: {
-      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
-    },
-  }
-
-  // 更新图表配置
-  chartInstance.setOption(defaultOptions, {
-    replaceMerge: ['series'], // 关键修改：替换而非合并
-  })
-}
-
-/**
- * 初始化折线图
- * @param {HTMLElement} chartRef 图表DOM元素引用
- * @returns {echarts.ECharts} 图表实例
- */
-export const initLineChart = (chartRef, yAxisName = '单位') => {
-  if (!chartRef) return null
-  const chartInstance = echarts.init(chartRef)
-  const defaultOptions = {
-    ...createNoDataGraphic(), // 添加暂无数据图形
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-      },
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '1%', // 增加底部间距为滑动条留出空间
-      top: '15%',
-      containLabel: true,
-    },
-    legend: {
-      top: 'top', // 设置图例位于顶部
-      data: [],
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: [],
-      axisLabel: {
-        rotate: 0, // 保持水平
-        interval: 0,
-      },
-      axisTick: {
-        show: false,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      name: yAxisName,
-      axisLabel: {
-        formatter: function (value) {
-          // 只显示整数值
-          return value % 1 === 0 ? value : ''
-        },
-      },
-      nameTextStyle: {
-        padding: [0, 30, 15, 0],
-      },
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-        },
-      },
-    },
-    // 默认启用内置滑动条，但隐藏（超过12列时显示）
-    dataZoom: [
-      {
-        type: 'inside', // 内置型数据区域缩放
-        start: 0,
-        end: 100,
-        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
-        moveOnMouseMove: true, // 允许拖拽滑动
-        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
-      },
-      {
-        type: 'slider', // 滑动条型数据区域缩放
-        show: false, // 默认隐藏
-        start: 0,
-        end: 100,
-        bottom: '5%', // 滑动条位置
-        height: 15,
-        handleSize: '100%',
-        handleStyle: {
-          color: '#025DF4',
-        },
-        fillerColor: 'rgba(2, 93, 244, 0.2)',
-        borderColor: '#ddd',
-        backgroundColor: '#f5f5f5',
-        showDetail: false,
-      },
-    ],
-    series: [],
-  }
-
-  chartInstance.setOption(defaultOptions)
-  return chartInstance
-}
-
-/**
- * 更新折线图数据
- * @param {echarts.ECharts} chartInstance 图表实例
- * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
- */
-export const updateLineChart = ({
-  chartInstance,
-  data,
-  shouldShowSlider = false,
-  shouldShowSliderNumber = 12,
-}) => {
-  hideChartLoading(chartInstance)
-  if (!chartInstance) return
-
-  const isEmpty =
-    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
-  const dataLength = isEmpty ? 0 : data.xAxis.data.length
-
-  // 提取图例数据
-  const legendData = isEmpty ? [] : data.series.map(item => item.name)
-
-  // 构建系列配置
-  const series = isEmpty
-    ? []
-    : data.series.map((lineData, index) => {
-        // 获取当前线条的颜色
-        const baseColor = barColorPalette[index % barColorPalette.length]
-
-        return {
-          name: lineData.name,
-          type: 'line',
-          smooth: true, // 平滑曲线
-          symbol: 'circle',
-          symbolSize: 5,
-          data: lineData.data,
-          itemStyle: {
-            color: baseColor,
-          },
-          lineStyle: {
-            width: 2,
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-            shadowBlur: 5,
-            shadowOffsetY: 3,
-          },
-          areaStyle: {
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: getLighterColor(baseColor, 0.1), // 区域顶部颜色，较浅
-                },
-                {
-                  offset: 1,
-                  color: getLighterColor(baseColor, 0.9), // 区域底部颜色，更浅
-                },
-              ],
-              global: false,
-            },
-            opacity: 0.3, // 轻微区域填充
-          },
-          label: {
-            show: true,
-            position: 'top',
-            formatter: '{c}',
-            color: '#333',
-            fontSize: 12,
-          },
-          emphasis: {
-            focus: 'series',
-          },
-        }
-      })
-
-  // x轴配置 - 保持水平显示，不旋转
-  const xAxisConfig = {
-    data: isEmpty ? [] : data.xAxis.data,
-    axisLabel: {
-      rotate: 0, // 保持水平，不旋转
-      interval: 0,
-      margin: 8,
-      fontSize: 12, // 统一字体大小
-      // 如果文字过长可以自动换行
-      formatter: function (value) {
-        if (value.length > 6) {
-          // 超过6个字符换行
-          return value.substring(0, 6) + '\n' + value.substring(6)
-        }
-        return value
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-  }
-
-  // 滑动条配置
-  const dataZoomConfig = [
-    {
-      type: 'inside',
-      start: 0,
-      end: shouldShowSlider
-        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
-        : 100, // 初始显示12列
-      zoomOnMouseWheel: false,
-      moveOnMouseMove: true,
-      moveOnMouseWheel: true,
-    },
-    {
-      type: 'slider',
-      show: shouldShowSlider, // 根据数据长度决定是否显示
-      start: 0,
-      end: shouldShowSlider
-        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
-        : 100,
-      bottom: '0%',
-      height: 15,
-      handleSize: '100%',
-      handleStyle: {
-        color: '#025DF4',
-      },
-      fillerColor: 'rgba(2, 93, 244, 0.2)',
-      borderColor: '#ddd',
-      backgroundColor: '#f5f5f5',
-      showDetail: false,
-    },
-  ]
-
-  // 构建最终配置
-  const defaultOptions = {
-    tooltip: {
-      show: !isEmpty,
-    },
-    grid: {
-      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
-    },
-    xAxis: xAxisConfig,
-    legend: {
-      data: legendData,
-    },
-    series: series,
-    dataZoom: dataZoomConfig,
-    graphic: {
-      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
-    },
-  }
-
-  // 更新图表配置
-  chartInstance.setOption(defaultOptions, {
-    replaceMerge: ['series'], // 关键修改：替换而非合并
-  })
-}
-
-/**
- * 显示图表加载状态
- * @param {echarts.ECharts} chartInstance 图表实例
- */
-export const showChartLoading = chartInstance => {
-  if (!chartInstance) return
-
-  chartInstance.showLoading({
-    text: '数据加载中...',
-    color: '#1677ff',
-    maskColor: 'rgba(255, 255, 255, 0.8)',
-    textColor: '#000',
-    zlevel: 0,
-  })
-}
-/**
- * 隐藏图表加载状态
- * @param {echarts.ECharts} chartInstance 图表实例
- */
-export const hideChartLoading = chartInstance => {
-  if (!chartInstance) return
-  chartInstance.hideLoading()
-}
-
-/**
- * 获取更亮颜色的函数
- * @param {string} color - 基础颜色
- * @param {number} lum - 亮度系数 (0 <= lum <= 1)
- */
-function getLighterColor(color, lum) {
-  // 将十六进制颜色转换为RGB
-  let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color)
-  let r = parseInt(rgb[1], 16)
-  let g = parseInt(rgb[2], 16)
-  let b = parseInt(rgb[3], 16)
-
-  // 调整亮度
-  r = Math.floor(Math.min(255, Math.max(0, r + (255 - r) * lum)))
-  g = Math.floor(Math.min(255, Math.max(0, g + (255 - g) * lum)))
-  b = Math.floor(Math.min(255, Math.max(0, b + (255 - b) * lum)))
-
-  return `rgb(${r},${g},${b})`
-}
+import * as echarts from 'echarts'
+// 定义柱状图颜色调色板
+export const barColorPalette = [
+  '#025DF4',
+  '#DB6BCF',
+  '#2498D1',
+  '#BBBDE6',
+  '#4045B2',
+  '#21A97A',
+  '#FF745A',
+  '#007E99',
+  '#FFA8A8',
+  '#2391FF',
+]
+const createNoDataGraphic = (text = '暂无数据') => ({
+  graphic: {
+    type: 'text',
+    left: 'center',
+    top: 'center',
+    z: 100, // 确保在最上层
+    silent: true,
+    invisible: true, // 默认隐藏
+    style: {
+      text,
+      fontSize: 20,
+      fontWeight: 'normal',
+      fill: '#999',
+      align: 'center',
+    },
+  },
+})
+/**
+ * 初始化饼图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initPieChart = (chartRef, seriesName = '标题') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        return `<span style="display:inline-block;margin-right:5px;
+                            border-radius:50%;width:10px;height:10px;
+                            background-color:${params.color}"></span>
+                            ${params.seriesName}<br/>${params.name}: ${params.value} (${params.percent}%)`
+      },
+    },
+    legend: {
+      top: 0,
+      left: 'center',
+      type: 'scroll', // 改为滚动式图例
+      pageTextStyle: {
+        color: '#333',
+      },
+    },
+    color: barColorPalette,
+    series: [
+      {
+        name: seriesName,
+        type: 'pie',
+        radius: '55%',
+        center: ['50%', '60%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 3,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: true, // 显示标签
+          formatter: function (params) {
+            // 自定义格式化函数，实现多行显示
+            return [`${params.name}`, `${params.percent}%`].join('\n')
+          },
+          fontSize: 12, // 调整字体大小
+          color: '#333', // 标签颜色
+          lineHeight: 14, // 行高
+        },
+        emphasis: {},
+        labelLine: {
+          show: true,
+        },
+        data: [],
+      },
+    ],
+  }
+
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+/**
+ * 更新饼图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Array} data 图表数据
+ */
+export const updatePieChart = ({ chartInstance, data }) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+  const isEmpty = !data || data.length === 0
+  // 更新配置
+  const updateOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    legend: {
+      show: !isEmpty,
+    },
+    series: [
+      {
+        data: isEmpty
+          ? []
+          : data.map(item => ({
+              ...item,
+              name: `${item.name} (${item.value})`,
+            })),
+        silent: isEmpty,
+      },
+    ],
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+  // 合并自定义配置
+  chartInstance.setOption(updateOptions)
+}
+/**
+ * 初始化柱状图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initBarChart = (chartRef, yAxisName = '单位') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '1%', // 增加底部间距为滑动条留出空间
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      top: 'top', // 设置图例位于顶部
+      data: [],
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLabel: {
+        rotate: 0, // 保持水平
+        interval: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      axisLabel: {
+        formatter: function (value) {
+          // 只显示整数值
+          return value % 1 === 0 ? value : ''
+        },
+      },
+      nameTextStyle: {
+        padding: [0, 30, 15, 0],
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    // 默认启用内置滑动条，但隐藏（超过12列时显示）
+    dataZoom: [
+      {
+        type: 'inside', // 内置型数据区域缩放
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
+        moveOnMouseMove: true, // 允许拖拽滑动
+        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
+      },
+      {
+        type: 'slider', // 滑动条型数据区域缩放
+        show: false, // 默认隐藏
+        start: 0,
+        end: 100,
+        bottom: '0%',
+        height: 15,
+        handleSize: '100%',
+        handleStyle: {
+          color: '#025DF4',
+        },
+        fillerColor: 'rgba(2, 93, 244, 0.2)',
+        borderColor: '#ddd',
+        backgroundColor: '#f5f5f5',
+        showDetail: false,
+      },
+    ],
+    series: [],
+  }
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+/**
+ * 更新柱状图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
+ */
+export const updateBarChart = ({
+  chartInstance,
+  data,
+  shouldShowSlider = false,
+  shouldShowSliderNumber = 12,
+}) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+
+  const isEmpty =
+    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
+  const dataLength = isEmpty ? 0 : data.xAxis.data.length
+
+  // 提取图例数据（公司名称）
+  const legendData = isEmpty ? [] : data.series.map(item => item.name)
+
+  // 构建系列配置
+  const series = isEmpty
+    ? []
+    : data.series.map((companyData, index) => {
+        // 获取当前线条的颜色
+        const baseColor = barColorPalette[index % barColorPalette.length]
+        return {
+          name: companyData.name,
+          type: 'bar',
+          barMaxWidth: 40,
+          barCategoryGap: shouldShowSlider ? '15%' : '30%', // 有滑动条时减小间距
+          data: companyData.data,
+          itemStyle: {
+            color: {
+              // 线性渐变，方向从底部到顶部
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: baseColor, // 0% 处的颜色 - 原始颜色
+                },
+                {
+                  offset: 1,
+                  color: getLighterColor(baseColor, 0.7), // 100% 处的颜色 - 更浅的颜色
+                },
+              ],
+              global: false, // 全局使用默认值
+            },
+            borderRadius: [5, 5, 0, 0],
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 5,
+            shadowOffsetY: 3,
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}',
+            color: '#333',
+            fontSize: 12,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowColor: 'rgba(0, 0, 0, 0.3)',
+              shadowBlur: 10,
+              shadowOffsetY: 5,
+            },
+          },
+        }
+      })
+
+  // x轴配置 - 保持水平显示，不旋转
+  const xAxisConfig = {
+    data: isEmpty ? [] : data.xAxis.data,
+    axisLabel: {
+      rotate: 0, // 保持水平，不旋转
+      interval: 0,
+      margin: 8,
+      fontSize: 12, // 统一字体大小
+      // 如果文字过长可以自动换行
+      formatter: function (value) {
+        if (value.length > 6) {
+          // 超过6个字符换行
+          return value.substring(0, 6) + '\n' + value.substring(6)
+        }
+        return value
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  }
+
+  // 滑动条配置
+  const dataZoomConfig = [
+    {
+      type: 'inside',
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100, // 初始显示12列
+      zoomOnMouseWheel: false,
+      moveOnMouseMove: true,
+      moveOnMouseWheel: true,
+    },
+    {
+      type: 'slider',
+      show: shouldShowSlider, // 根据数据长度决定是否显示
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100,
+      bottom: '0%',
+      height: 15,
+      handleSize: '100%',
+      handleStyle: {
+        color: '#025DF4',
+      },
+      fillerColor: 'rgba(2, 93, 244, 0.2)',
+      borderColor: '#ddd',
+      backgroundColor: '#f5f5f5',
+      showDetail: false,
+    },
+  ]
+
+  // 构建最终配置
+  const defaultOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    grid: {
+      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
+    },
+    xAxis: xAxisConfig,
+    legend: {
+      data: legendData,
+    },
+    series: series,
+    dataZoom: dataZoomConfig,
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+
+  // 更新图表配置
+  chartInstance.setOption(defaultOptions, {
+    replaceMerge: ['series'], // 关键修改：替换而非合并
+  })
+}
+
+/**
+ * 初始化折线图
+ * @param {HTMLElement} chartRef 图表DOM元素引用
+ * @returns {echarts.ECharts} 图表实例
+ */
+export const initLineChart = (chartRef, yAxisName = '单位') => {
+  if (!chartRef) return null
+  const chartInstance = echarts.init(chartRef)
+  const defaultOptions = {
+    ...createNoDataGraphic(), // 添加暂无数据图形
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '1%', // 增加底部间距为滑动条留出空间
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      top: 'top', // 设置图例位于顶部
+      data: [],
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [],
+      axisLabel: {
+        rotate: 0, // 保持水平
+        interval: 0,
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: yAxisName,
+      axisLabel: {
+        formatter: function (value) {
+          // 只显示整数值
+          return value % 1 === 0 ? value : ''
+        },
+      },
+      nameTextStyle: {
+        padding: [0, 30, 15, 0],
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    // 默认启用内置滑动条，但隐藏（超过12列时显示）
+    dataZoom: [
+      {
+        type: 'inside', // 内置型数据区域缩放
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: false, // 禁用鼠标滚轮缩放
+        moveOnMouseMove: true, // 允许拖拽滑动
+        moveOnMouseWheel: true, // 允许鼠标滚轮滑动
+      },
+      {
+        type: 'slider', // 滑动条型数据区域缩放
+        show: false, // 默认隐藏
+        start: 0,
+        end: 100,
+        bottom: '5%', // 滑动条位置
+        height: 15,
+        handleSize: '100%',
+        handleStyle: {
+          color: '#025DF4',
+        },
+        fillerColor: 'rgba(2, 93, 244, 0.2)',
+        borderColor: '#ddd',
+        backgroundColor: '#f5f5f5',
+        showDetail: false,
+      },
+    ],
+    series: [],
+  }
+
+  chartInstance.setOption(defaultOptions)
+  return chartInstance
+}
+
+/**
+ * 更新折线图数据
+ * @param {echarts.ECharts} chartInstance 图表实例
+ * @param {Object} data 图表数据 {xAxis: {data: []}, series: []}
+ */
+export const updateLineChart = ({
+  chartInstance,
+  data,
+  shouldShowSlider = false,
+  shouldShowSliderNumber = 12,
+}) => {
+  hideChartLoading(chartInstance)
+  if (!chartInstance) return
+
+  const isEmpty =
+    !data || !data.xAxis || !data.xAxis.data || data.xAxis.data.length === 0
+  const dataLength = isEmpty ? 0 : data.xAxis.data.length
+
+  // 提取图例数据
+  const legendData = isEmpty ? [] : data.series.map(item => item.name)
+
+  // 构建系列配置
+  const series = isEmpty
+    ? []
+    : data.series.map((lineData, index) => {
+        // 获取当前线条的颜色
+        const baseColor = barColorPalette[index % barColorPalette.length]
+
+        return {
+          name: lineData.name,
+          type: 'line',
+          smooth: true, // 平滑曲线
+          symbol: 'circle',
+          symbolSize: 5,
+          data: lineData.data,
+          itemStyle: {
+            color: baseColor,
+          },
+          lineStyle: {
+            width: 2,
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 5,
+            shadowOffsetY: 3,
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: getLighterColor(baseColor, 0.1), // 区域顶部颜色，较浅
+                },
+                {
+                  offset: 1,
+                  color: getLighterColor(baseColor, 0.9), // 区域底部颜色，更浅
+                },
+              ],
+              global: false,
+            },
+            opacity: 0.3, // 轻微区域填充
+          },
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}',
+            color: '#333',
+            fontSize: 12,
+          },
+          emphasis: {
+            focus: 'series',
+          },
+        }
+      })
+
+  // x轴配置 - 保持水平显示，不旋转
+  const xAxisConfig = {
+    data: isEmpty ? [] : data.xAxis.data,
+    axisLabel: {
+      rotate: 0, // 保持水平，不旋转
+      interval: 0,
+      margin: 8,
+      fontSize: 12, // 统一字体大小
+      // 如果文字过长可以自动换行
+      formatter: function (value) {
+        if (value.length > 6) {
+          // 超过6个字符换行
+          return value.substring(0, 6) + '\n' + value.substring(6)
+        }
+        return value
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+  }
+
+  // 滑动条配置
+  const dataZoomConfig = [
+    {
+      type: 'inside',
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100, // 初始显示12列
+      zoomOnMouseWheel: false,
+      moveOnMouseMove: true,
+      moveOnMouseWheel: true,
+    },
+    {
+      type: 'slider',
+      show: shouldShowSlider, // 根据数据长度决定是否显示
+      start: 0,
+      end: shouldShowSlider
+        ? Math.min(100, (shouldShowSliderNumber / dataLength) * 100)
+        : 100,
+      bottom: '0%',
+      height: 15,
+      handleSize: '100%',
+      handleStyle: {
+        color: '#025DF4',
+      },
+      fillerColor: 'rgba(2, 93, 244, 0.2)',
+      borderColor: '#ddd',
+      backgroundColor: '#f5f5f5',
+      showDetail: false,
+    },
+  ]
+
+  // 构建最终配置
+  const defaultOptions = {
+    tooltip: {
+      show: !isEmpty,
+    },
+    grid: {
+      bottom: shouldShowSlider ? '6%' : '1%', // 增加底部间距为滑动条留出空间
+    },
+    xAxis: xAxisConfig,
+    legend: {
+      data: legendData,
+    },
+    series: series,
+    dataZoom: dataZoomConfig,
+    graphic: {
+      invisible: !isEmpty, // 有数据时隐藏，无数据时显示
+    },
+  }
+
+  // 更新图表配置
+  chartInstance.setOption(defaultOptions, {
+    replaceMerge: ['series'], // 关键修改：替换而非合并
+  })
+}
+
+/**
+ * 显示图表加载状态
+ * @param {echarts.ECharts} chartInstance 图表实例
+ */
+export const showChartLoading = chartInstance => {
+  if (!chartInstance) return
+
+  chartInstance.showLoading({
+    text: '数据加载中...',
+    color: '#1677ff',
+    maskColor: 'rgba(255, 255, 255, 0.8)',
+    textColor: '#000',
+    zlevel: 0,
+  })
+}
+/**
+ * 隐藏图表加载状态
+ * @param {echarts.ECharts} chartInstance 图表实例
+ */
+export const hideChartLoading = chartInstance => {
+  if (!chartInstance) return
+  chartInstance.hideLoading()
+}
+
+/**
+ * 获取更亮颜色的函数
+ * @param {string} color - 基础颜色
+ * @param {number} lum - 亮度系数 (0 <= lum <= 1)
+ */
+function getLighterColor(color, lum) {
+  // 将十六进制颜色转换为RGB
+  let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color)
+  let r = parseInt(rgb[1], 16)
+  let g = parseInt(rgb[2], 16)
+  let b = parseInt(rgb[3], 16)
+
+  // 调整亮度
+  r = Math.floor(Math.min(255, Math.max(0, r + (255 - r) * lum)))
+  g = Math.floor(Math.min(255, Math.max(0, g + (255 - g) * lum)))
+  b = Math.floor(Math.min(255, Math.max(0, b + (255 - b) * lum)))
+
+  return `rgb(${r},${g},${b})`
+}