fix: 修复历史曲线图表尺寸显示

packages/extend-components/EC_HistoryView/src/SingleChart.js

-
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { BasicChart } from '@wisdom-components/basicchart';
 import optionGenerator from './utils';
 
-
 const SimgleChart = memo((props) => {
   const { dataSource, contrast = false, contrastOption = 'day', smooth = true } = props;
+  const chartRef = useRef();
 
   const option = useMemo(() => {
     const config = {
@@ -14,7 +13,13 @@ const SimgleChart = memo((props) => {
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
   }, [dataSource, smooth]);
 
-  return <BasicChart option={option} notMerge style={{ width: '100%', height: '100%' }}/>
+  useEffect(() => {
+    chartRef.current?.resize?.();
+  }, []);
+
+  return (
+    <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
+  );
 });
 
 export default SimgleChart;

packages/extend-components/EC_HistoryView/src/index.js

@@ -312,7 +312,7 @@ const HistoryView = (props) => {
   const renderTimeOption = () => {
     return (
       <div className={classNames(`${prefixCls}-date`)}>
-        <div className={classNames(`${prefixCls}-label`)}>时间</div>
+        <div className={classNames(`${prefixCls}-label`)}>时间选择</div>
         <Radio.Group value={timeValue} onChange={onTimeSetChange}>
           <Radio.Button value="customer">自定义</Radio.Button>
           <Radio.Button value="contrast">同期对比</Radio.Button>

packages/extend-components/EC_HistoryView/src/index.less

@@ -4,6 +4,7 @@
 
 .@{history-view} {
   height: 100%;
+  padding: @padding-md;
 
   &-label {
     position: relative;
@@ -40,14 +41,6 @@
   align-items: center;
   white-space: nowrap;
 
-  .@{history-view}-label {
-    letter-spacing: 27px;
-
-    &::after {
-      right: -20px;
-    }
-  }
-
   .@{ant-prefix}-radio-group,
   .@{ant-prefix}-select {
     margin-right: 16px;
@@ -59,8 +52,6 @@
     font-size: 16px;
     cursor: pointer;
   }
-
-
 }
 
 .@{history-view}-contrast {
@@ -99,11 +90,11 @@
 
 .@{history-view}-options {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
+  align-items: center;
+  padding-bottom: 10px;
   column-gap: 20px;
   row-gap: 10px;
-  padding-bottom: 10px;
 }
 
 .@{history-view}-cover {
@@ -118,21 +109,22 @@
 }
 
 .@{history-view}-grid {
-  height: 100%;
-  overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background-color: #F0F2F5;
+  height: 100%;
   padding: 4px;
+  overflow-y: auto;
+  background-color: #f0f2f5;
 
   &-item {
     width: 50%;
+    height: 50%;
     padding: 4px;
   }
 
   &-item-wrap {
-    height: 350px;
-    background-color: #FFF;
+    height: 100%;
+    background-color: #fff;
     border-radius: 4px;
   }
 }