Merge pull request #751 from thundersdata-frontend/lego-doc-issue

fix: 修复文档里弹窗时图表无法正常显示的问题
thundersdata-frontend · Oct 19, 2023 · 3c544e0 · 3c544e0
2 parents a1b8403 + 6c1de12
commit 3c544e0
Show file tree

Hide file tree

Showing 17 changed files with 23 additions and 8 deletions.
diff --git a/packages/lego/example/BarLineDemo/demo8.tsx b/packages/lego/example/BarLineDemo/demo8.tsx
@@ -13,14 +13,15 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <BarLine
           inModal
           xAxisData={['03月', '04月']}
           yAxis={[{ name: '万元' }, { name: '%' }]}
           lineData={{ name: '同比增长率', data: [12, 11] }}
           barData={{ name: '运费', data: [500, 584] }}
-          style={{ height: 500 }}
+          style={{ height: 500, width: '100%' }}
         />
       </Modal>
     </>

diff --git a/packages/lego/example/CircularSolidPieDemo/demo3.tsx b/packages/lego/example/CircularSolidPieDemo/demo3.tsx
@@ -21,6 +21,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <CircularSolidPie
           data={data}

diff --git a/packages/lego/example/CuboidBarDemo/demo6.tsx b/packages/lego/example/CuboidBarDemo/demo6.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <CuboidBar
           inModal

diff --git a/packages/lego/example/CylinderBarDemo/demo5.tsx b/packages/lego/example/CylinderBarDemo/demo5.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <CylinderBar
           inModal

diff --git a/packages/lego/example/CylinderShadowBarDemo/demo6.tsx b/packages/lego/example/CylinderShadowBarDemo/demo6.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <CylinderShadowBar
           inModal

diff --git a/packages/lego/example/HorizontalBarDemo/demo5.tsx b/packages/lego/example/HorizontalBarDemo/demo5.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <HorizontalBar
           unit="万元"

diff --git a/packages/lego/example/ImgLineDemo/demo4.tsx b/packages/lego/example/ImgLineDemo/demo4.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <ImgLine
           inModal

diff --git a/packages/lego/example/ModalDemo/demo1.tsx b/packages/lego/example/ModalDemo/demo1.tsx
@@ -9,7 +9,7 @@ export default () => {
   return (
     <>
       <Button onClick={() => setVisible(true)}>显示弹窗</Button>
-      <Modal open={visible} onClose={() => setVisible(false)} >
+      <Modal visible={visible} onClose={() => setVisible(false)} >
       </Modal>
     </>
   );

diff --git a/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx b/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <MultiHorizontalBar
           unit={['万元', '万元']}

diff --git a/packages/lego/example/MultiLineDemo/demo8.tsx b/packages/lego/example/MultiLineDemo/demo8.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <MultiLine
           inModal

diff --git a/packages/lego/example/PictorialBarDemo/demo6.tsx b/packages/lego/example/PictorialBarDemo/demo6.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <PictorialBar
           xAxisData={['2019年', '2020年', '2021年']}

diff --git a/packages/lego/example/ProgressDemo/demo2.tsx b/packages/lego/example/ProgressDemo/demo2.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <Progress
           name="进度"

diff --git a/packages/lego/example/RadarDemo/demo2.tsx b/packages/lego/example/RadarDemo/demo2.tsx
@@ -17,11 +17,11 @@ export default () => {
   ];
 
   const indicatorData = [
-    { name: '占地面积', max: 100, unit: '亩' },
-    { name: '高标库面积', max: 100, unit: '万平方米' },
-    { name: '充电桩数量', max: 100, unit: '个' },
-    { name: '车辆进出数量', max: 500, unit: '辆' },
-    { name: '平均停留时长', max: 100, unit: '分钟' },
+    { name: '占地面积', max: '100', unit: '亩' },
+    { name: '高标库面积', max: '100', unit: '万平方米' },
+    { name: '充电桩数量', max: '100', unit: '个' },
+    { name: '车辆进出数量', max: '500', unit: '辆' },
+    { name: '平均停留时长', max: '100', unit: '分钟' },
   ];
 
   return (
@@ -33,6 +33,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <Radar
           inModal

diff --git a/packages/lego/example/ScatterDemo/demo4.tsx b/packages/lego/example/ScatterDemo/demo4.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <Scatter
           unit="AQI指数"

diff --git a/packages/lego/example/SliceBarDemo/demo5.tsx b/packages/lego/example/SliceBarDemo/demo5.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <SliceBar
           max={1000}

diff --git a/packages/lego/example/StackBarDemo/demo5.tsx b/packages/lego/example/StackBarDemo/demo5.tsx
@@ -13,6 +13,7 @@ export default () => {
         footer={null}
         width={650}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <StackBar
           inModal

diff --git a/packages/lego/example/ThreeDimensionalPieDemo/demo3.tsx b/packages/lego/example/ThreeDimensionalPieDemo/demo3.tsx
@@ -20,13 +20,13 @@ export default () => {
         footer={null}
         width={750}
         bodyStyle={{ backgroundColor: '#040727' }}
+        getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染
       >
         <ThreeDimensionalPie
           seriesData={data}
           autoLoop
           inModal
           style={{ width: 720, height: 308 }}
-          imgStyle={{ top: 85, left: 168, width: 380, height: 260 }}
           barConfig={{ legend: { top: 50 } }}
         />
       </Modal>