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

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;