Merge pull request #763 from thundersdata-frontend/horizontal-bar

fix: 修复条形图和条形对比图的显示 bug
thundersdata-frontend · Nov 13, 2023 · 22a925f · 22a925f
2 parents e945dc9 + d0d5db2
commit 22a925f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 28 deletions.
diff --git a/.changeset/tricky-zebras-beam.md b/.changeset/tricky-zebras-beam.md
@@ -0,0 +1,5 @@
+---
+'@td-design/lego': patch
+---
+
+fix: 修复条形图和条形对比图的显示 bug
diff --git a/packages/lego/src/horizontal-bar/index.tsx b/packages/lego/src/horizontal-bar/index.tsx
@@ -166,17 +166,16 @@ export default forwardRef<ReactEcharts, HorizontalBarProps>(
               color: theme.colors.gray100,
               formatter: '{b}',
               position: 'left',
-              distance: 10, // 向右偏移位置
+              distance: 20, // 向右偏移位置
               show: true,
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
             symbolSize: [3, 8],
-            symbolOffset: [18, 0],
             symbolPosition: 'start',
-            symbolBoundingData: max * 0.92,
+            symbolBoundingData: max * 0.96,
             data: seriesData.data,
             z: 3,
             animationEasing: 'elasticOut',
@@ -192,13 +191,12 @@ export default forwardRef<ReactEcharts, HorizontalBarProps>(
               opacity: 0.2,
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
-            symbolOffset: [18, 0],
             symbolSize: [3, 8],
             symbolPosition: 'start',
-            symbolBoundingData: max * 0.92,
+            symbolBoundingData: max * 0.96,
             data: seriesData.data.map(() => max),
             z: 2,
             animationEasing: 'elasticOut',
@@ -210,7 +208,8 @@ export default forwardRef<ReactEcharts, HorizontalBarProps>(
               color: 'rgba(9, 63, 160, 0.57)',
             },
             symbol: 'path://M 0 0 L 8 0 C 8 0 8 1 7.5 1 L -1 1 C -1 1 -1 0 -0.5 0',
-            symbolSize: ['100%', 24],
+            symbolSize: ['102%', 24],
+            symbolOffset: ['-3%', 0],
             symbolBoundingData: max,
             data: seriesData.data.map(() => max),
             z: 1,

diff --git a/packages/lego/src/multi-horizontal-bar/index.tsx b/packages/lego/src/multi-horizontal-bar/index.tsx
@@ -65,10 +65,10 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
         grid: [
           {
             show: false,
-            left: '7%',
+            left: '4%',
             top: '5%',
             bottom: '10%',
-            width: '40%',
+            width: '42%',
           },
           {
             show: false,
@@ -79,10 +79,10 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
           },
           {
             show: false,
-            right: '7%',
+            right: '4%',
             top: '5%',
             bottom: '10%',
-            width: '40%',
+            width: '42%',
           },
         ],
         tooltip: {
@@ -199,6 +199,7 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               show: false,
             },
           },
+          // 控制 Y 轴
           {
             gridIndex: 1,
             type: 'category',
@@ -250,13 +251,12 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               color: createLinearGradient(theme.colors.primary300, false),
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
             symbolSize: [3, 8],
-            symbolOffset: [-18, 0],
             symbolPosition: 'start',
-            symbolBoundingData: leftMax * 0.85,
+            symbolBoundingData: leftMax * 0.92,
             data: leftData.data.map(item => ({ ...item, unit: leftUnit })),
             z: 3,
             animationEasing: 'elasticOut',
@@ -272,13 +272,12 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               opacity: 0.2,
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
             symbolSize: [3, 8],
-            symbolOffset: [-18, 0],
             symbolPosition: 'start',
-            symbolBoundingData: leftMax * 0.85,
+            symbolBoundingData: leftMax * 0.92,
             data: leftData.data.map(() => leftMax),
             z: 2,
             animationEasing: 'elasticOut',
@@ -293,9 +292,8 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
             yAxisIndex: 0,
             gridIndex: 0,
             symbol: 'path://M 0 0 L 8 0 C 8 0 8 1 7.5 1 L -1 1 C -1 1 -1 0 -0.5 0',
-            symbolOffset: [0, 0],
             symbolSize: ['100%', 24],
-            symbolClip: true,
+            symbolOffset: ['3%', 0],
             symbolBoundingData: leftMax,
             data: leftData.data.map(() => leftMax),
             z: 1,
@@ -314,13 +312,12 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               color: createLinearGradient(theme.colors.primary50, false),
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
             symbolSize: [3, 8],
-            symbolOffset: [18, 0],
             symbolPosition: 'start',
-            symbolBoundingData: rightMax * 0.85,
+            symbolBoundingData: rightMax * 0.92,
             data: rightData.data.map(item => ({
               ...item,
               unit: rightUnit,
@@ -339,13 +336,12 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               opacity: 0.2,
             },
             symbolRepeat: 'fixed',
-            symbolMargin: 2,
+            symbolMargin: 1,
             symbol: 'rect',
             symbolClip: true,
-            symbolOffset: [18, 0],
             symbolSize: [3, 8],
             symbolPosition: 'start',
-            symbolBoundingData: rightMax * 0.85,
+            symbolBoundingData: rightMax * 0.92,
             data: rightData.data.map(() => rightMax),
             z: 2,
             animationEasing: 'elasticOut',
@@ -360,9 +356,8 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               color: 'rgba(9, 63, 160, 0.57)',
             },
             symbol: 'path://M 0 0 L 8 0 C 8 0 8 1 7.5 1 L -1 1 C -1 1 -1 0 -0.5 0',
-            symbolOffset: [0, 0],
             symbolSize: ['100%', 24],
-            symbolClip: true,
+            symbolOffset: ['-3%', 0],
             symbolBoundingData: rightMax,
             data: rightData.data.map(() => rightMax),
             z: 1,