feat: 优化样式

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

@@ -82,29 +82,29 @@ const ChartWidthRef = (props) => {
         // 6. 确定使用的图形
         // 默认图形，居中
         let maxIconPath = `path://M1233.329493 195.75466633h-1112.064c-34.128213 0-61.781333 27.661653-61.781333 61.781334v473.658026c0 34.117973 27.65312 61.781333 61.781333 61.781334h472.80128l83.23072 144.155306 83.23072-144.155306h472.80128c34.128213 0 61.781333-27.66336 61.781334-61.781334V257.53600033c0-34.117973-27.65312-61.781333-61.781334-61.781334z`;
-        let maxSymbolOffset = [0, -20];
+        let maxSymbolOffset = [0, -14];
         if (maxOutEdge) {
             if (maxOutSide === 'left') {
                 // 左边界超出，使用朝右的图表
-                maxSymbolOffset = ['50%', -20];
+                maxSymbolOffset = ['50%', -14];
                 maxIconPath = 'path://M48.677,6.151v10c0,1.7-1.3,3-3,3h-35.5l-6.7,4c0,0,0.2-5.3,0.2-7v-10c0-1.7,1.3-3,3-3h39C47.277,3.151,48.677,4.551,48.677,6.151z';
             } else if (maxOutSide === 'right') {
                 // 右边界超出，使用朝左的图表
-                maxSymbolOffset = ['-50%', -20];
+                maxSymbolOffset = ['-50%', -14];
                 maxIconPath = 'path://M6.477,3.151h39c1.7,0,3,1.3,3,3v10c0,1.7,0.2,7,0.2,7l-6.7-4h-35.5c-1.7,0-3-1.3-3-3v-10C3.477,4.551,4.877,3.151,6.477,3.151z'
             }
         }
         // 默认图形
         let minIconPath = 'path://M131.999 849.579h1112.064c34.128 0 61.781-27.662 61.781-61.781v-473.658c0-34.118-27.653-61.781-61.781-61.781h-472.801l-83.231-144.155-83.231 144.155h-472.801c-34.128 0-61.781 27.663-61.781 61.781v473.658c0 34.118 27.653 61.781 61.781 61.781z';
-        let minSymbolOffset = [0, 20];
+        let minSymbolOffset = [0, 14];
         if (minOutEdge) {
             if (minOutSide === 'left') {
                 // 左边界超出，使用朝右的图表
-                minSymbolOffset = ['50%', 20];
+                minSymbolOffset = ['50%', 14];
                 minIconPath = 'path://M45.677,23.151h-39c-1.7,0-3-1.3-3-3v-10c0-1.7-0.2-7-0.2-7l6.7,4h35.5c1.7,0,3,1.3,3,3v10C48.677,21.751,47.277,23.151,45.677,23.151z';
             } else if (minOutSide === 'right') {
                 // 右边界超出，使用朝左的图表
-                minSymbolOffset = ['-50%', 20];
+                minSymbolOffset = ['-50%', 14];
                 minIconPath = 'path://M3.477,20.151v-10c0-1.7,1.3-3,3-3h35.5l6.7-4c0,0-0.2,5.3-0.2,7v10c0,1.7-1.3,3-3,3h-39C4.877,23.151,3.477,21.751,3.477,20.151z'
             }
         }
@@ -118,15 +118,15 @@ const ChartWidthRef = (props) => {
                 symbol: minIconPath,
                 symbolSize: (e) => {
                     let str = ![undefined, null].includes(e) ? String(e) : '';
-                    let length = 60 + str.length * 6
-                    return [length, 32]
+                    let length = 40 + str.length * 6
+                    return [length, 20]
                 },
                 label: {
                     show: true,
                     color: '#fff',
                     formatter: '最小: {c}',
-                    fontSize: 14,
-                    fontWeight: 'bold',
+                    fontSize: 12,
+                    fontWeight: 'normal',
                     verticalAlign: 'top',
                     offset: [0, -2]
                 },
@@ -142,19 +142,19 @@ const ChartWidthRef = (props) => {
                 symbolOffset: maxSymbolOffset,
                 symbolSize: (e) => {
                     let str = ![undefined, null].includes(e) ? String(e) : '';
-                    let length = 60 + str.length * 6
-                    return [length, 32]
+                    let length = 40 + str.length * 6
+                    return [length, 20]
                 },
                 itemStyle: {
                     // color: "#1980ff",
                 },
                 label: {
                     color: '#fff',
-                    fontSize: 14,
-                    fontWeight: 'bold',
+                    fontSize: 12,
+                    fontWeight: 'normal',
                     show: true,
                     formatter: '最大: {c}',
-                    offset: [0, -2]
+                    offset: [0, -1]
                 }
             },
             {
@@ -193,8 +193,19 @@ const ChartWidthRef = (props) => {
             })
         }, 200)
     };
+    // 将opt修改一下
+    const cur_opt = useMemo(() => {
+        return {
+            ...props.option, grid: {
+                ...props.option,
+                top: 45,
+                bottom: 65,
+            }
+        }
+    }, [props.option]);
 
     useEffect(() => {
+        console.log('props.opt: ', props.option);
         if (props.data.list?.length !== 1) return;
         const chart = ref.current?.getEchartsInstance?.();
         chart.setOption({
@@ -231,7 +242,7 @@ const ChartWidthRef = (props) => {
             chart.off('legendselectchanged', renderMarkPoint);
             chart.off('datazoom', dataZoomFn);
         }
-    }, [props.option]);
+    }, [cur_opt]);
     useEffect(() => {
         if (props.data.list?.length !== 1) return;
         renderMarkPoint(false)
@@ -239,6 +250,7 @@ const ChartWidthRef = (props) => {
     return <BasicChart
         ref={ref}
         {...props}
+        option={cur_opt}
     />
 }
 const GridChart = memo((props) => {

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

@@ -94,13 +94,13 @@ import HistoryView from '../index';
     }*!/
 ];*/
 const deviceParams = [
-    {
+/*    {
         "deviceCode": "DYSC00000001",
-        // "sensors": "出水压力,出水瞬时流量,今日供水量,出厂水浊度",
-        "sensors": "出水压力,出水瞬时流量",
+        "sensors": "出水压力,出水瞬时流量,今日供水量,出厂水浊度",
+        // "sensors": "出水压力,出水瞬时流量",
         "deviceType": "大邑生产数据"
     },
-/*    {
+    {
         "deviceCode": "DYSC00000006",
         "sensors": "出水压力,出水瞬时流量,今日供水量,出厂水浊度",
         "deviceType": "大邑生产数据"
@@ -110,6 +110,11 @@ const deviceParams = [
         "sensors": "出水压力,出水瞬时流量,今日供水量,出厂水浊度",
         "deviceType": "大邑生产数据"
     }*/
+    {
+        "deviceCode": "NT00000001",
+        "sensors": "环境温度,出口瞬时流量,管路温度,预测循环水量",
+        "deviceType": "暖通"
+    }
 ]
 const Demo = () => {
     return <div>