@zgfe/modules-interval 1.0.23-zhongyuan.1 → 1.0.23-zhongyuan.11

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

@@ -18,7 +18,8 @@ import _ from 'lodash';
 var classPrefix = 'interval-box';
 var EventFilter = function EventFilter(props) {
   var _useContext = useContext(BizGlobalDataContext),
-    eventIdMap = _useContext.eventIdMap;
+    eventIdMap = _useContext.eventIdMap,
+    envs = _useContext.envs;
   // 筛选条件个数
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -95,8 +96,8 @@ var EventFilter = function EventFilter(props) {
       return;
     }
     // 最多可添加10条属性筛选
-    if (count >= 10) {
-      message.error('最多可添加 10 条属性筛选');
+    if (count >= ((envs === null || envs === void 0 ? void 0 : envs.propertyNum) || 10)) {
+      message.error("\u6700\u591A\u53EF\u6DFB\u52A0 ".concat((envs === null || envs === void 0 ? void 0 : envs.propertyNum) || 10, " \u6761\u5C5E\u6027\u7B5B\u9009"));
       return;
     }
     setIsAdd(true);
@@ -169,9 +170,9 @@ var EventFilter = function EventFilter(props) {
     placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
   }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
-    title: !eventOverview ? '请先选择目标事件' : count < 10 ? '添加属性筛选' : '最多可添加 10 条属性筛选'
+    title: !eventOverview ? '请先选择目标事件' : count < ((envs === null || envs === void 0 ? void 0 : envs.propertyNum) || 10) ? '添加属性筛选' : "\u6700\u591A\u53EF\u6DFB\u52A0 ".concat((envs === null || envs === void 0 ? void 0 : envs.propertyNum) || 10, " \u6761\u5C5E\u6027\u7B5B\u9009")
   }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "".concat(count >= 10 || event.id === -1 || !eventOverview ? 'disable' : ''),
+    className: "".concat(count >= ((envs === null || envs === void 0 ? void 0 : envs.propertyNum) || 10) || event.id === -1 || !eventOverview ? 'disable' : ''),
     type: "shaixuan",
     onClick: function onClick() {
       return onAdd();

package/dist/esm/components/renderContent/styles/index.css

@@ -0,0 +1,32 @@
+.render-content-interval-chart-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+.render-content-interval-chart-container .echarts-for-react {
+  width: 100%;
+  background: #fff;
+  border: 1px solid var(--unnamed, #ecedf0);
+  border-radius: 8px;
+}
+.render-content-interval-MiNone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 368px;
+  padding: 24px 16px;
+  border: 1px solid #ecedf0;
+  border-radius: 8px;
+}
+.render-content-interval-spin-container {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+.render-content-interval-spin-container .biz-loading-wrapper {
+  width: 100%;
+}

package/dist/esm/components/renderContent/styles/index.less

@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    min-height: 300px;
 
     .echarts-for-react {
       width: 100%;

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

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { BizSelect, IconFont, BizDatePickerV2 } from '@zgfe/business-lib';
+import { BizSelect, IconFont, BizDatePickerV2, BizGlobalDataContext } from '@zgfe/business-lib';
 import { DatePickerTypes } from '@zgfe/business-lib/es/datePickerV2/types';
 import React, { useContext, useEffect, useState } from 'react';
 import { chartTypeOptions, getInitDate } from "../../constants";
@@ -24,6 +24,8 @@ var SearchPanel = function SearchPanel(props) {
     includeToday = _useContext.includeToday,
     searchData = _useContext.searchData,
     refreshLoading = _useContext.refreshLoading;
+  var _useContext2 = useContext(BizGlobalDataContext),
+    envs = _useContext2.envs;
   // 当前时间段
   var _useState = useState(props.time || getInitDate(includeToday)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,6 +110,9 @@ var SearchPanel = function SearchPanel(props) {
     dateTypeList: [DatePickerTypes.Unit.day, DatePickerTypes.Unit.week, DatePickerTypes.Unit.month, DatePickerTypes.Unit.custom],
     value: time,
     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/components/table/index.js

@@ -35,7 +35,8 @@ var EventTable = function EventTable(props) {
     eventGroupList = _useContext$eventGrou === void 0 ? [] : _useContext$eventGrou,
     eventEnvList = _useContext.eventEnvList,
     userPropList = _useContext.userPropList,
-    authority = _useContext.authority;
+    authority = _useContext.authority,
+    showProdDownload = _useContext.showProdDownload;
   var _useContext2 = useContext(IntervalContext),
     panelName = _useContext2.panelName,
     onUserDrill = _useContext2.onUserDrill;
@@ -107,7 +108,7 @@ var EventTable = function EventTable(props) {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-table-header")
-  }, /*#__PURE__*/React.createElement("span", null, "\u6307\u6807\u8BE6\u60C5"), authority[100059] && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, "\u6307\u6807\u8BE6\u60C5"), authority[100059] && showProdDownload && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     onClick: download
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "xiazai1"

package/dist/esm/constants/code.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 异常状态码
+ */
+export declare const ERROR_RESPONESE_CODE: {
+    /**
+     * @description 刷新失败
+     */
+    REFRESH_FAIL: string;
+    /**
+     * @description 用户群或标签查询异常
+     */
+    EXCEPTION: string;
+};

package/dist/esm/constants/code.js

@@ -0,0 +1,13 @@
+/**
+ * @description 异常状态码
+ */
+export var ERROR_RESPONESE_CODE = {
+  /**
+   * @description 刷新失败
+   */
+  REFRESH_FAIL: '100080',
+  /**
+   * @description 用户群或标签查询异常
+   */
+  EXCEPTION: '100081'
+};

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

@@ -13,14 +13,14 @@ 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", {
     className: "custom-tooltip-name"
   }, payload.name, " "), /*#__PURE__*/React.createElement("div", {
     className: "custom-tooltip-div"
-  }, (series === null || series === void 0 ? void 0 : series.names[0]) && /*#__PURE__*/React.createElement("div", {
+  }, payload.seriesName && /*#__PURE__*/React.createElement("div", {
     className: "tooltip-marker"
   }, /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
@@ -28,7 +28,7 @@ var CustomTooltip = function CustomTooltip(_ref) {
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "tooltip-span"
-  }, series.names[0])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+  }, payload.seriesName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     className: "tooltip-span"
   }, "\u6700\u5927\u503C\uFF1A"), /*#__PURE__*/React.createElement("div", null, convertToHMS(value[5]))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     className: "tooltip-span"

package/dist/esm/modules/chart/customTooltip1.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.less';
+declare const CustomTooltip: React.FC<{
+    payload: any[];
+    series: any[];
+}>;
+export default CustomTooltip;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import "./index.less";
+var CustomTooltip = function CustomTooltip(_ref) {
+  var payload = _ref.payload,
+    series = _ref.series;
+  // 初始化，判断showList是否有值，如果没值，取结果的前10条
+  function convertToHMS(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor(seconds % 3600 / 60);
+    var remainingSeconds = seconds % 60;
+    return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + remainingSeconds).slice(-2);
+  }
+  // 根据payload中的数据定义弹窗内容
+  // const marker = payload?.marker;
+
+  // const value = payload?.value;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, payload.map(function (o, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-chart",
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-name"
+    }, o.name, " "), /*#__PURE__*/React.createElement("div", {
+      className: "custom-tooltip-div"
+    }, o.seriesName && /*#__PURE__*/React.createElement("div", {
+      className: "tooltip-marker"
+    }, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: o === null || o === void 0 ? void 0 : o.marker
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "tooltip-span"
+    }, o.seriesName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u6700\u5927\u503C\uFF1A"), /*#__PURE__*/React.createElement("div", null, convertToHMS(o.value[5]))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E0A\u56DB\u5206\u4F4D\uFF1A"), convertToHMS(o.value[2])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E2D\u4F4D\u6570\uFF1A"), convertToHMS(o.value[3])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u4E0B\u56DB\u5206\u4F4D\uFF1A"), convertToHMS(o.value[4])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: "tooltip-span"
+    }, "\u6700\u5C0F\u503C\uFF1A"), convertToHMS(o.value[1]))));
+  }));
+};
+export default CustomTooltip;

package/dist/esm/modules/chart/index.css

@@ -0,0 +1,52 @@
+.custom-tooltip-chart {
+  display: inline-block;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 4px;
+  align-items: flex-start;
+  width: 146px;
+  height: 100%;
+  padding: 8px;
+  color: var(--io-n, #021429);
+  font-weight: 500;
+  font-size: 12px;
+  font-style: normal;
+  border-radius: 10px;
+  box-shadow: 0px 4px 10px 0px #0000001a;
+}
+.custom-tooltip-chart .custom-tooltip-name {
+  color: var(--io-n, #021429);
+  font-weight: 500;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-style: normal;
+  line-height: normal;
+}
+.custom-tooltip-chart .custom-tooltip-div {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+  padding: 0px 8px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
+}
+.custom-tooltip-chart .custom-tooltip-div .tooltip-span {
+  display: block;
+  color: var(--3, #5f6085);
+  font-weight: 400;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-style: normal;
+  line-height: normal;
+}
+.custom-tooltip-chart .custom-tooltip-div > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.custom-tooltip-chart .custom-tooltip-div .tooltip-marker {
+  justify-content: flex-start;
+}

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

@@ -11,15 +11,18 @@ 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, { useContext, useEffect, useState } from 'react';
-import { BizEmpty, BizGlobalDataContext, BizLoading, ajax } from '@zgfe/business-lib';
+import { BizEmpty, BizGlobalDataContext, ajax } from '@zgfe/business-lib';
 import { EventTable, MiNone } from "../../components";
 import { extractNames, getDefaultShow } from "../../utils/formData";
 import { Apis } from "../../constants";
 import IntervalChart from "./intervalChart";
 import { searchDataParams } from "../content/utils";
+import { ERROR_RESPONESE_CODE } from "../../constants/code";
+import { Spin } from 'antd';
 var IntervalEventChart = function IntervalEventChart(props) {
   var _dataSource$appData2;
-  var params = props.params;
+  var params = props.params,
+    onChangeException = props.onChangeException;
   // 显示内容
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49,6 +52,7 @@ var IntervalEventChart = function IntervalEventChart(props) {
   // 初始化，判断showList是否有值，如果没值，取结果的前10条
   useEffect(function () {
     var _dataSource$appData, _dataSource$appData$s;
+    var dataSource = props.dataSource;
     if ((dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$appData = dataSource.appData) === null || _dataSource$appData === void 0 ? void 0 : (_dataSource$appData$s = _dataSource$appData.series) === null || _dataSource$appData$s === void 0 ? void 0 : _dataSource$appData$s.length) > 0) {
       var _extractNames;
       var arr = params !== null && params !== void 0 && params.displaySetup ? params === null || params === void 0 ? void 0 : params.displaySetup : (_extractNames = extractNames(dataSource)) === null || _extractNames === void 0 ? void 0 : _extractNames.splice(0, 4);
@@ -56,7 +60,8 @@ var IntervalEventChart = function IntervalEventChart(props) {
       setShowList(app);
       setDataSourceList(arr);
     }
-  }, [params === null || params === void 0 ? void 0 : params.displaySetup, dataSource]);
+    setDataSource(dataSource);
+  }, [params === null || params === void 0 ? void 0 : params.displaySetup, props.dataSource]);
   var fetchResult = function fetchResult() {
     var _obj$start, _obj$end, _params$start, _params$end;
     var obj = searchDataParams(params);
@@ -66,12 +71,17 @@ var IntervalEventChart = function IntervalEventChart(props) {
         method: 'post',
         data: _objectSpread(_objectSpread({
           appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
-        }, params), obj)
+        }, params), obj),
+        intercept: false
       }).then(function (res) {
+        setLoading(false);
         if (!res) {
           return;
         }
-        setLoading(false);
+        if (res.code == ERROR_RESPONESE_CODE.EXCEPTION) {
+          onChangeException === null || onChangeException === void 0 ? void 0 : onChangeException();
+          return;
+        }
         setDataSource(res.data);
       }).catch(function () {
         setLoading(false);
@@ -84,9 +94,10 @@ var IntervalEventChart = function IntervalEventChart(props) {
     if (props.onChangeShow) props.onChangeShow(names);
   };
   if (loading) {
-    return /*#__PURE__*/React.createElement(BizLoading, {
-      className: "mi-common-interval-content"
-    }, /*#__PURE__*/React.createElement("div", null));
+    return /*#__PURE__*/React.createElement(Spin, {
+      tip: "",
+      size: "default"
+    }, "\u6570\u636E\u6B63\u5728\u52AA\u529B\u52A0\u8F7D\u4E2D\uFF0C\u8BF7\u7A0D\u7B49~");
   }
   if (dataSource !== null && dataSource !== void 0 && dataSource.appData.delEvent) {
     return /*#__PURE__*/React.createElement("div", {

package/dist/esm/modules/chart/index.less

@@ -1,5 +1,5 @@
 .custom-tooltip-chart {
-  display: flex;
+  display: inline-block;
   flex-direction: column;
   flex-shrink: 0;
   gap: 4px;

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,295 @@
+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 () {
+    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) {
+        var pointInPixel = [params.offsetX, params.offsetY];
+        // 检查是否在网格区域内
+        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;