feat: 优化文字样式

packages/extend-components/EC_HistoryView/src/demos/mobile.js

@@ -28,7 +28,7 @@ const Demo = () => {
     },[])
     return (
         <div>
-            <div style={{height: 400}}>
+            <div style={{height: 600}}>
                 <MobileHistoryChart deviceParams={deviceParams} date={date}/>
             </div>
         </div>

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

@@ -203,5 +203,5 @@
 .@{history-view}-item {
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 0.3rem;
 }

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

@@ -27,6 +27,11 @@ const MobileHistoryChart = (
         curveCenter: true,
         ignoreOutliers: true
     });
+    const checkboxStyle = {
+        '--icon-size': handlePx(18, 'px'),
+        '--font-size': handlePx(14, 'px'),
+        '--gap': handlePx(6, 'px'),
+    }
     const checkBoxOptions = useMemo(() => {
         return Object.keys(options).reduce((final, cur) => {
             if (options[cur]) final.push(cur);
@@ -128,59 +133,55 @@ const MobileHistoryChart = (
     useEffect(() => {
         getDataSource();
     }, [options.ignoreOutliers, date])
-    return deviceAlarmSchemes && chartDataSource ? <div style={{width: '100%'}}>
-        {
-            chartDataSource.length === 1 ? <div className={styles[`${prefixCls}-item`]}>
-                <span style={{fontSize: handlePx(14)}}>曲线形态：</span>
-                <Selector
-                    style={{display: 'inline-block', fontSize: handlePx(14)}}
-                    options={[
-                        {label: '线形图', value: 'lineChart'},
-                        {label: '箱线图', value: 'boxChart'}
-                    ]}
-                    defaultValue={lineType}
-                    onChange={(arr, extend) => {
-                        setLineType(arr)
+    return deviceAlarmSchemes && chartDataSource ?
+        <div style={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>
+            {
+                chartDataSource.length === 1 ? <div className={styles[`${prefixCls}-item`]}>
+                    <span style={{fontSize: handlePx(14)}}>曲线形态：</span>
+                    <Selector
+                        style={{display: 'inline-block', fontSize: handlePx(14)}}
+                        options={[
+                            {label: '线形图', value: 'lineChart'},
+                            {label: '箱线图', value: 'boxChart'}
+                        ]}
+                        defaultValue={lineType}
+                        onChange={(arr, extend) => {
+                            setLineType(arr)
+                        }}
+                    />
+                </div> : ''
+            }
+            <div className={styles[`${prefixCls}-item`]}>
+                <span style={{fontSize: handlePx(14)}}>曲线设置：</span>
+                <Checkbox.Group
+                    value={checkBoxOptions}
+                    onChange={val => {
+                        let _arr = Object.keys(options);
+                        let _options = _arr.reduce((final, cur) => {
+                            final[cur] = !!val.includes(cur);
+                            return final;
+                        }, {})
+                        setOptions(_options);
                     }}
+                >
+                    <Space direction='horizontal'>
+                        <Checkbox style={checkboxStyle} value='curveCenter'>曲线居中</Checkbox>
+                        <Checkbox style={checkboxStyle} value='ignoreOutliers'>滤波</Checkbox>
+                    </Space>
+                </Checkbox.Group>
+            </div>
+            <div style={{width: '100%', flex: 1}}>
+                <SimgleChart
+                    showBoxOption={showBoxOption}
+                    curveCenter={options.curveCenter}
+                    showGridLine={chartGrid}
+                    prefixCls={prefixCls}
+                    dataSource={chartDataSource}
+                    chartType={isBoxPlots ? lineType[0] : null}
+                    deviceAlarmSchemes={deviceAlarmSchemes}
                 />
-            </div> : ''
-        }
-        <div className={styles[`${prefixCls}-item`]}>
-            <span style={{fontSize: handlePx(14)}}>曲线设置：</span>
-            <Checkbox.Group
-                style={{
-                    '--icon-size': handlePx(18),
-                    '--font-size': handlePx(14),
-                    '--gap': handlePx(6),
-                }}
-                value={checkBoxOptions}
-                onChange={val => {
-                    let _arr = Object.keys(options);
-                    let _options = _arr.reduce((final, cur) => {
-                        final[cur] = !!val.includes(cur);
-                        return final;
-                    }, {})
-                    setOptions(_options);
-                }}
-            >
-                <Space direction='horizontal'>
-                    <Checkbox value='curveCenter'>曲线居中</Checkbox>
-                    <Checkbox value='ignoreOutliers'>滤波</Checkbox>
-                </Space>
-            </Checkbox.Group>
-        </div>
-        <div style={{height: rest.height || '10rem', width: rest.width || '100%'}}>
-            <SimgleChart
-                showBoxOption={showBoxOption}
-                curveCenter={options.curveCenter}
-                showGridLine={chartGrid}
-                prefixCls={prefixCls}
-                dataSource={chartDataSource}
-                chartType={isBoxPlots ? lineType[0] : null}
-                deviceAlarmSchemes={deviceAlarmSchemes}
-            />
-        </div>
-    </div> : null
+            </div>
+        </div> : null
 }
 export {
     MobileHistoryChart