@zgfe/modules-interval 1.0.23-zhongyuan.7 → 1.0.23-zhongyuan.8

package/dist/esm/components/searchPanel/index.js

@@ -112,6 +112,7 @@ var SearchPanel = function SearchPanel(props) {
     includeToday: true,
     selectRange: envs && envs.timeRangeOpen ? envs.timeRangeOpen : 36,
     timeRangeOpen: envs && envs.timeRangeOpen ? envs.timeRangeOpen : 36,
+    selectRangeUnit: envs && envs.timeRangeOpen ? 'months' : 'days',
     onChange: onChangeTime
   }), /*#__PURE__*/React.createElement(BizSelect, {
     multiple: true,

package/dist/esm/modules/chart/customTooltip.js

@@ -3,6 +3,8 @@ import "./index.less";
 var CustomTooltip = function CustomTooltip(_ref) {
   var payload = _ref.payload,
     series = _ref.series;
+  console.log(payload, series, 'payload, series');
+
   // 初始化，判断showList是否有值，如果没值，取结果的前10条
   useEffect(function () {}, []);
   function convertToHMS(seconds) {
@@ -13,7 +15,7 @@ var CustomTooltip = function CustomTooltip(_ref) {
   }
   // 根据payload中的数据定义弹窗内容
   var marker = payload === null || payload === void 0 ? void 0 : payload.marker;
-  var value = payload === null || payload === void 0 ? void 0 : payload.value;
+  var value = payload === null || payload === void 0 ? void 0 : payload.data;
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-tooltip-chart"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/modules/chart/intervalChart copy.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { eventChartProps } from './types';
+declare const IntervalChart: React.FC<eventChartProps.Props>;
+export default IntervalChart;

package/dist/esm/modules/chart/intervalChart copy.js

@@ -0,0 +1,299 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState } from 'react';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { renderToString } from 'react-dom/server';
+import CustomTooltip from "./customTooltip";
+import { chartColors } from "../../constants";
+import { getRandomColor } from "../../constants/color";
+import { convertDateArray } from "../../utils/formData";
+var _currentAxisBreaks = [{
+  start: 5000,
+  end: 100000,
+  gap: '1.5%'
+}, {
+  start: 105000,
+  end: 3100000,
+  gap: '1.5%'
+}];
+var IntervalChart = function IntervalChart(props) {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    option = _useState2[0],
+    setOption = _useState2[1];
+  var chartRef = useRef(null);
+  useEffect(function () {
+    var _props$showList, _seriesData$series;
+    chartRef && chartRef.current.getEchartsInstance().clear();
+    var seriesData = props === null || props === void 0 ? void 0 : (_props$showList = props.showList) === null || _props$showList === void 0 ? void 0 : _props$showList.appData;
+    var params = props === null || props === void 0 ? void 0 : props.params;
+    var eCharts = {
+      tooltip: {
+        trigger: 'item',
+        // tooltip 跟随鼠标
+        position: function position(point, params, dom, rect, size) {
+          return [point[0] + 10, point[1] - 10];
+        },
+        axisPointer: {
+          type: 'line'
+        }
+        // formatter: (params: any) => {
+        //   let tooltipString = ``;
+        //   tooltipString += params.map((k) => {
+        //     const item = seriesData?.series.find((it: any) => it.names[0] === k.name);
+        //     return renderToString(<CustomTooltip series={item} payload={k} />);
+        //   });
+        //   return tooltipString;
+        // },
+        // formatter: (params: any) => {
+        //   return renderToString(<CustomTooltip1 series={seriesData?.series} payload={params} />);
+        // },
+      },
+
+      legend: {
+        bottom: 0,
+        icon: 'circle',
+        type: 'scroll',
+        itemWidth: 10,
+        // 设置图例的宽度为10px
+        itemHeight: 10 // 设置图例的高度为10px
+      },
+
+      grid: {
+        top: '10',
+        left: '0',
+        right: '0',
+        bottom: props.onlyChart ? '0' : '68px',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        nameGap: 30,
+        data: convertDateArray(params, seriesData === null || seriesData === void 0 ? void 0 : seriesData.xAxis),
+        splitArea: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#E6E7EA' // 设置线条颜色
+          }
+        },
+
+        axisLabel: {
+          color: '#67727F' // 设置文字颜色
+        },
+
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed' // 设置线条类型为虚线
+          }
+        },
+
+        axisLabel: {
+          color: '#67727F' // 设置文字颜色
+        },
+
+        breaks: _currentAxisBreaks,
+        breakArea: {
+          itemStyle: {
+            opacity: 1
+          },
+          zigzagZ: 200
+        }
+      },
+      dataZoom: [{
+        type: 'inside',
+        start: 0,
+        end: 20,
+        right: 3,
+        height: 20 // 设置内置的dataZoom的高度
+      }, {
+        show: props.onlyChart ? false : true,
+        type: 'slider',
+        bottom: '38px',
+        xAxisIndex: [0],
+        start: 0,
+        end: 20,
+        right: 3,
+        height: 20 // 设置滑动条的高度
+      }],
+
+      series: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series = seriesData.series) === null || _seriesData$series === void 0 ? void 0 : _seriesData$series.map(function (item, i) {
+        var _seriesData$series$i, _seriesData$series$i2;
+        // 生成随机颜色
+        var color = i < chartColors.length ? chartColors[i] : getRandomColor();
+        return {
+          type: 'boxplot',
+          datasetIndex: i,
+          name: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i = seriesData.series[i]) === null || _seriesData$series$i === void 0 ? void 0 : _seriesData$series$i.names[0],
+          data: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i2 = seriesData.series[i]) === null || _seriesData$series$i2 === void 0 ? void 0 : _seriesData$series$i2.values,
+          showBackground: true,
+          // 关键修改：背景改为透明
+          backgroundStyle: {
+            color: 'transparent'
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: item.type ? 'rgba(0,0,0,0.2)' : color // 设置盒子的颜色
+            },
+
+            tooltip: {
+              show: true,
+              // 单独配置series中的tooltip为显示
+              extraCssText: 'border: none;padding:0;border-radius:10px;background: rgba(250, 251, 253, 0.8)',
+              // 添加自定义的CSS样式，去掉边框
+              formatter: function formatter(params) {
+                var tooltipString = renderToString( /*#__PURE__*/React.createElement(CustomTooltip, {
+                  series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.series[i],
+                  payload: params
+                }));
+                return tooltipString;
+              }
+            }
+          },
+          itemStyle: {
+            borderColor: item.type ? 'rgba(0,0,0,0.2)' : color
+          }
+        };
+      })
+    };
+    setOption(eCharts);
+  }, [props === null || props === void 0 ? void 0 : props.showList]);
+  var updateCollapseButton = function updateCollapseButton(params) {
+    // If there is any axis break expanded, we need to show the collapse button.
+    var needReset = false;
+    for (var i = 0; i < params.breaks.length; i++) {
+      var changedBreakItem = params.breaks[i];
+      if (changedBreakItem.isExpanded) {
+        needReset = true;
+        break;
+      }
+    }
+    setOption({
+      // Draw the collapse button.
+      graphic: [{
+        elements: [{
+          type: 'rect',
+          ignore: !needReset,
+          name: 'collapseAxisBreakBtn',
+          top: 5,
+          left: 5,
+          shape: {
+            r: 3,
+            width: 140,
+            height: 24
+          },
+          style: {
+            fill: '#eee',
+            stroke: '#999',
+            lineWidth: 1
+          },
+          textContent: {
+            type: 'text',
+            style: {
+              text: 'Collapse Axis Breaks',
+              fontSize: 13,
+              fontWeight: 'bold'
+            }
+          },
+          textConfig: {
+            position: 'inside'
+          }
+        }]
+      }]
+    });
+  };
+
+  // 获取实例
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    echartsInstance = _useState4[0],
+    setEchartsInstance = _useState4[1];
+  useEffect(function () {
+    console.log(chartRef.current.getEchartsInstance(), 'chartRef.current.getEchartsInstance()');
+    setEchartsInstance(chartRef.current.getEchartsInstance());
+  }, []);
+  return /*#__PURE__*/React.createElement(ReactECharts, {
+    ref: chartRef,
+    style: {
+      height: '431px',
+      padding: 24
+    },
+    option: option,
+    onEvents: {
+      axisbreakchanged: function axisbreakchanged(params) {
+        return updateCollapseButton(params);
+      },
+      mousemove: function mousemove(params) {
+        console.log('鼠标进入');
+        var pointInPixel = [params.offsetX, params.offsetY];
+        console.log(echartsInstance, 'echartsInstanceechartsInstance');
+
+        // 检查是否在网格区域内
+        if (echartsInstance && echartsInstance.containPixel('grid', pointInPixel)) {
+          var pointInGrid = echartsInstance && echartsInstance.convertFromPixel({
+            seriesIndex: 0
+          }, pointInPixel);
+          if (pointInGrid) {
+            var xIndex = Math.round(pointInGrid[0]);
+            var option = echartsInstance && echartsInstance.getOption();
+            var series = option.series;
+            var seriesCount = series.length;
+
+            // 获取网格区域信息
+            var grid = echartsInstance && echartsInstance.getModel().getComponent('grid', 0);
+            var gridRect = grid.coordinateSystem.getRect();
+
+            // 计算每个类目的宽度
+            var categoryCount = option.xAxis[0].data.length;
+            var categoryWidth = gridRect.width / categoryCount;
+
+            // 计算当前类目内的相对位置
+            var categoryStartX = gridRect.x + xIndex * categoryWidth;
+            var relativeX = params.offsetX - categoryStartX;
+
+            // 计算每个柱子的宽度（考虑柱子间距）
+            var barWidth = categoryWidth / seriesCount;
+
+            // 计算鼠标悬停在哪个系列的柱子上
+            var seriesIndex = Math.floor(relativeX / barWidth);
+
+            // 确保索引有效
+            if (seriesIndex >= 0 && seriesIndex < seriesCount && xIndex >= 0 && xIndex < categoryCount) {
+              // 显示跟随鼠标的 tooltip
+              echartsInstance && echartsInstance.dispatchAction({
+                type: 'showTip',
+                seriesIndex: seriesIndex,
+                dataIndex: xIndex,
+                position: [params.offsetX + 10, params.offsetY - 10]
+              });
+            }
+          }
+        }
+      },
+      mouseout: function mouseout() {
+        echartsInstance && echartsInstance.dispatchAction({
+          type: 'hideTip'
+        });
+      }
+    },
+    echarts: echarts
+  });
+};
+export default IntervalChart;

package/dist/esm/modules/chart/intervalChart.js

@@ -5,45 +5,105 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { renderToString } from 'react-dom/server';
-import CustomTooltip1 from "./customTooltip1";
+import CustomTooltip from "./customTooltip";
 import { chartColors } from "../../constants";
 import { getRandomColor } from "../../constants/color";
 import { convertDateArray } from "../../utils/formData";
+var _currentAxisBreaks = [{
+  start: 5000,
+  end: 100000,
+  gap: '1.5%'
+}, {
+  start: 105000,
+  end: 3100000,
+  gap: '1.5%'
+}];
 var IntervalChart = function IntervalChart(props) {
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
-    option = _useState2[0],
-    setOption = _useState2[1];
+    optionECharts = _useState2[0],
+    setOptionECharts = _useState2[1];
+  // 获取实例
   var chartRef = useRef(null);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    chartInstance = _useState4[0],
+    setChartInstance = _useState4[1]; // echart实列
+  useEffect(function () {
+    var aDom = echarts.init(chartRef.current);
+    setChartInstance(aDom);
+  }, []);
   useEffect(function () {
     var _props$showList, _seriesData$series;
-    chartRef && chartRef.current.getEchartsInstance().clear();
+    // chartRef && chartRef.current.getEchartsInstance().clear();
     var seriesData = props === null || props === void 0 ? void 0 : (_props$showList = props.showList) === null || _props$showList === void 0 ? void 0 : _props$showList.appData;
     var params = props === null || props === void 0 ? void 0 : props.params;
     var eCharts = {
       tooltip: {
-        trigger: 'axis',
+        trigger: 'item',
+        // tooltip 跟随鼠标
+        // position: function (point, params, dom, rect, size) {
+        //   return [point[0] + 10, point[1] - 10];
+        // },
+        // ========== 核心：重写position函数，防止tooltip溢出屏幕 ==========
+        position: function position(point, params, dom, rect, size) {
+          // 获取tooltip DOM元素的实际宽高（自定义HTML的尺寸）
+          var tooltipWidth = dom.offsetWidth || 200; // 默认宽度200px
+          var tooltipHeight = dom.offsetHeight || 150; // 默认高度150px
+
+          // 获取屏幕可视区域的宽高
+          var screenWidth = document.documentElement.clientWidth;
+          var screenHeight = document.documentElement.clientHeight;
+
+          // 鼠标当前坐标
+          var mouseX = point[0];
+          var mouseY = point[1];
+
+          // 计算tooltip的候选位置（初始：鼠标右侧+10px，鼠标上方-10px）
+          var targetX = mouseX + 10;
+          var targetY = mouseY - 10;
+
+          // 1. 右边界检测：如果tooltip超出屏幕右侧，显示在鼠标左侧
+          if (targetX + tooltipWidth > screenWidth) {
+            targetX = mouseX - tooltipWidth - 10;
+          }
+
+          // 2. 左边界检测：如果tooltip超出屏幕左侧，强制显示在屏幕左侧
+          if (targetX < 0) {
+            targetX = 10;
+          }
+
+          // 3. 下边界检测：如果tooltip超出屏幕下方，显示在鼠标下方
+          if (targetY + tooltipHeight > screenHeight) {
+            targetY = mouseY + 10;
+          }
+
+          // 4. 上边界检测：如果tooltip超出屏幕上方，强制显示在屏幕上方
+          if (targetY < 0) {
+            targetY = 10;
+          }
+
+          // 返回最终调整后的位置
+          return [targetX, targetY];
+        },
         axisPointer: {
           type: 'shadow'
         },
-        // formatter: (params: any) => {
-        //   let tooltipString = ``;
-        //   tooltipString += params.map((k) => {
-        //     const item = seriesData?.series.find((it: any) => it.names[0] === k.name);
-        //     return renderToString(<CustomTooltip series={item} payload={k} />);
-        //   });
-        //   return tooltipString;
-        // },
+        confine: true,
+        // 开启边界限制（ECharts内置，配合自定义position双重保障）
         formatter: function formatter(params) {
-          return renderToString( /*#__PURE__*/React.createElement(CustomTooltip1, {
-            series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.series,
+          return renderToString( /*#__PURE__*/React.createElement(CustomTooltip, {
+            series: undefined,
             payload: params
           }));
         }
+        // formatter: (params: any) => {
+        //   return renderToString(<CustomTooltip1 series={seriesData?.series} payload={params} />);
+        // },
       },
+
       legend: {
         bottom: 0,
         icon: 'circle',
@@ -79,23 +139,40 @@ var IntervalChart = function IntervalChart(props) {
 
         axisLabel: {
           color: '#67727F' // 设置文字颜色
+        },
+
+        axisPointer: {
+          type: 'shadow'
         }
       },
-
       yAxis: {
-        type: 'value',
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed' // 设置线条类型为虚线
-          }
-        },
+        // type: 'value',
+        // splitLine: {
+        //   show: true,
+        //   lineStyle: {
+        //     type: 'dashed', // 设置线条类型为虚线
+        //   },
+        // },
+        // axisLabel: {
+        //   color: '#67727F', // 设置文字颜色
+        // },
+        // breaks: _currentAxisBreaks,
+        // breakArea: {
+        //   itemStyle: {
+        //     opacity: 1,
+        //   },
+        //   zigzagZ: 200,
+        // },
 
-        axisLabel: {
-          color: '#67727F' // 设置文字颜色
+        type: 'value',
+        breaks: _currentAxisBreaks,
+        breakArea: {
+          itemStyle: {
+            opacity: 1
+          },
+          zigzagZ: 200
         }
       },
-
       dataZoom: [{
         type: 'inside',
         start: 0,
@@ -122,10 +199,29 @@ var IntervalChart = function IntervalChart(props) {
           datasetIndex: 1,
           name: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i = seriesData.series[i]) === null || _seriesData$series$i === void 0 ? void 0 : _seriesData$series$i.names[0],
           data: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i2 = seriesData.series[i]) === null || _seriesData$series$i2 === void 0 ? void 0 : _seriesData$series$i2.values,
+          showBackground: true,
+          // 关键修改：背景改为透明
+          backgroundStyle: {
+            color: 'rgba(0,0,0,0.2)'
+          },
           emphasis: {
+            focus: 'series',
+            blurScope: 'coordinateSystem',
             itemStyle: {
               borderColor: color // 设置盒子的颜色
             }
+
+            // tooltip: {
+            //   show: true, // 单独配置series中的tooltip为显示
+            //   extraCssText:
+            //     'border: none;padding:0;border-radius:10px;background: rgba(250, 251, 253, 0.8)', // 添加自定义的CSS样式，去掉边框
+            //   formatter: (params: any) => {
+            //     const tooltipString = renderToString(
+            //       <CustomTooltip series={seriesData?.series[i]} payload={params} />,
+            //     );
+            //     return tooltipString;
+            //   },
+            // },
           },
 
           itemStyle: {
@@ -134,16 +230,202 @@ var IntervalChart = function IntervalChart(props) {
         };
       })
     };
-    setOption(eCharts);
+    setOptionECharts(eCharts);
   }, [props === null || props === void 0 ? void 0 : props.showList]);
-  return /*#__PURE__*/React.createElement(ReactECharts, {
+  useEffect(function () {
+    chartInstance && chartInstance.setOption(optionECharts);
+  }, [optionECharts]);
+  useEffect(function () {
+    setTimeout(function () {
+      chartInstance && chartInstance.on('axisbreakchanged', function (params) {
+        updateCollapseButton(params);
+      });
+      // =========================
+      // 关键修改：结合 dataZoom 的可见索引范围
+      // =========================
+
+      // 当前 x 轴可见的起止 dataIndex（受 dataZoom 控制）
+      var baseOption = chartInstance && chartInstance.getOption();
+      var totalCategoryCount = baseOption && baseOption.xAxis[0].data.length;
+      var visibleStartIndex = 0;
+      var visibleEndIndex = totalCategoryCount - 1;
+
+      // 根据 dataZoom 的 start / end 百分比更新可见索引范围[web:28]
+      function updateVisibleRangeFromDataZoom(params) {
+        var startPercent;
+        var endPercent;
+        if (params && params.batch && params.batch.length) {
+          // 事件中 batch 数组形式
+          startPercent = params.batch[0].start;
+          endPercent = params.batch[0].end;
+        } else if (params) {
+          startPercent = params.start;
+          endPercent = params.end;
+        }
+        if (startPercent == null || endPercent == null) {
+          return;
+        }
+        var optionNow = chartInstance && chartInstance.getOption();
+        var axisData = optionNow.xAxis[0].data || [];
+        var total = axisData.length || 1;
+        visibleStartIndex = Math.round(startPercent / 100 * (total - 1));
+        visibleEndIndex = Math.round(endPercent / 100 * (total - 1));
+        if (visibleStartIndex < 0) visibleStartIndex = 0;
+        if (visibleEndIndex > total - 1) visibleEndIndex = total - 1;
+      }
+
+      // 初始化一次可见范围（用当前 option 中 dataZoom 的配置）
+      if (baseOption && baseOption.dataZoom && baseOption && baseOption.dataZoom.length) {
+        updateVisibleRangeFromDataZoom(baseOption.dataZoom[0]);
+      }
+
+      // 监听 dataZoom 事件，更新可见范围
+      chartInstance && chartInstance.on('dataZoom', function (params) {
+        updateVisibleRangeFromDataZoom(params);
+      });
+
+      // 封装鼠标移动时的计算逻辑
+      function handleMouseMove(params) {
+        var pointInPixel = [params.offsetX, params.offsetY];
+
+        // 检查是否在网格区域内
+        if (!chartInstance && chartInstance.containPixel('grid', pointInPixel)) {
+          chartInstance && chartInstance.dispatchAction({
+            type: 'hideTip'
+          });
+          return;
+        }
+
+        // 使用当前坐标系（考虑 dataZoom / axisBreak）将像素坐标转为数据坐标[web:19]
+        var pointInGrid = chartInstance && chartInstance.convertFromPixel({
+          xAxisIndex: 0,
+          yAxisIndex: 0
+        }, pointInPixel);
+        if (!pointInGrid) {
+          chartInstance && chartInstance.dispatchAction({
+            type: 'hideTip'
+          });
+          return;
+        }
+        var xIndex = Math.round(pointInGrid[0]);
+        var optionNow = chartInstance && chartInstance.getOption();
+        var series = optionNow.series || [];
+        var seriesCount = series.length;
+
+        // 如果当前 xIndex 不在 dataZoom 可见范围内，直接不显示 tooltip
+        if (xIndex < visibleStartIndex || xIndex > visibleEndIndex) {
+          chartInstance && chartInstance.dispatchAction({
+            type: 'hideTip'
+          });
+          return;
+        }
+
+        // 获取当前网格区域信息（会随 dataZoom / resize 变化）
+        var gridModel = chartInstance && chartInstance.getModel().getComponent('grid', 0);
+        var gridRect = gridModel.coordinateSystem.getRect();
+
+        // 当前可见类目数量（只按 dataZoom 可见区计算宽度）
+        var visibleCategoryCount = visibleEndIndex - visibleStartIndex + 1;
+        if (visibleCategoryCount <= 0) {
+          chartInstance && chartInstance.dispatchAction({
+            type: 'hideTip'
+          });
+          return;
+        }
+
+        // 每个可见类目在当前网格中的宽度
+        var categoryWidth = gridRect.width / visibleCategoryCount;
+
+        // 当前类目的起点 = grid 起点 + (xIndex - visibleStartIndex) * 每类宽度
+        var categoryStartX = gridRect.x + (xIndex - visibleStartIndex) * categoryWidth;
+
+        // 鼠标在当前类目内的相对 X 位置
+        var relativeX = params.offsetX - categoryStartX;
+
+        // 计算每个 series 对应的“柱子”宽度（背景区域同样分配）
+        var barWidth = categoryWidth / seriesCount;
+
+        // 鼠标当前所在的系列下标（按背景区域来划分）
+        var seriesIndex = Math.floor(relativeX / barWidth);
+
+        // 索引有效性判断
+        var categoryTotal = optionNow.xAxis[0].data.length;
+        if (seriesIndex >= 0 && seriesIndex < seriesCount && xIndex >= 0 && xIndex < categoryTotal) {
+          // 显示跟随鼠标的 tooltip（包括柱子上方的背景区域）
+          chartInstance && chartInstance.dispatchAction({
+            type: 'showTip',
+            seriesIndex: seriesIndex,
+            dataIndex: xIndex,
+            position: [params.offsetX + 10, params.offsetY - 10]
+          });
+        } else {
+          chartInstance && chartInstance.dispatchAction({
+            type: 'hideTip'
+          });
+        }
+      }
+
+      // 添加鼠标移动监听，计算鼠标位置对应的具体柱子（考虑 dataZoom 后的新显示）
+      chartInstance && chartInstance.getZr().on('mousemove', function (params) {
+        handleMouseMove(params);
+      });
+      chartInstance && chartInstance.getZr().on('mouseout', function () {
+        chartInstance && chartInstance.dispatchAction({
+          type: 'hideTip'
+        });
+      });
+    }, 0);
+  }, [chartInstance]);
+  function updateCollapseButton(params) {
+    // If there is any axis break expanded, we need to show the collapse button.
+    var needReset = false;
+    for (var i = 0; i < params.breaks.length; i++) {
+      var changedBreakItem = params.breaks[i];
+      if (changedBreakItem.isExpanded) {
+        needReset = true;
+        break;
+      }
+    }
+    setOptionECharts({
+      // Draw the collapse button.
+      graphic: [{
+        elements: [{
+          type: 'rect',
+          ignore: !needReset,
+          name: 'collapseAxisBreakBtn',
+          top: 5,
+          left: 5,
+          shape: {
+            r: 3,
+            width: 140,
+            height: 24
+          },
+          style: {
+            fill: '#eee',
+            stroke: '#999',
+            lineWidth: 1
+          },
+          textContent: {
+            type: 'text',
+            style: {
+              text: 'Collapse Axis Breaks',
+              fontSize: 13,
+              fontWeight: 'bold'
+            }
+          },
+          textConfig: {
+            position: 'inside'
+          }
+        }]
+      }]
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
     ref: chartRef,
     style: {
-      height: '431px',
-      padding: 24
-    },
-    option: option,
-    echarts: echarts
+      width: '100%',
+      height: '400px'
+    }
   });
 };
 export default IntervalChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zgfe/modules-interval",
-  "version": "1.0.23-zhongyuan.7",
+  "version": "1.0.23-zhongyuan.8",
   "private": false,
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -42,7 +42,7 @@
     "@types/uuid": "^9.0.2",
     "@umijs/fabric": "^2.8.1",
     "@umijs/test": "^3.0.5",
-    "@zgfe/business-lib": "1.2.70-hxd.31",
+    "@zgfe/business-lib": "1.2.70-hxd.1",
     "antd": "^4.22.6",
     "dumi": "^1.1.0",
     "echarts": "^5.3.2",
@@ -59,7 +59,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a87d5d2364b644df413e5fc3aa2092302252be5a",
+  "gitHead": "780c85ab01f850993b44a85e7714ed33224040ac",
   "gitHooks": {
     "pre-commit": "lint-staged"
   }