fix(#518): make sure charts fit the container after next browser UI render

This commit is contained in:
Justineo
2021-03-05 01:06:45 +08:00
parent 37cf20df05
commit 6526e2e43c
5 changed files with 18 additions and 8 deletions

View File

@ -288,7 +288,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.7"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.7"></script>
```
<!-- vue3Scripts:end -->
@ -301,7 +301,7 @@ app.component('v-chart', VueECharts)
<!-- vue3Demo:start -->
[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwnHAB2HP9xyY6xiamK2bzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACszxwACYPgE_j9fF9_jM5gsCEsVmsNltdvtDsdTudLtdbgVkSVyuiAGzYpwFCKnZQ4Hn4klEmQSggKABqtxwExUtAAgsYABRmVAWdDKAjKdUASlM5gswnqBCqpW1WrNZr6XVQ9ltdrNtCwBAAytpYM7Ta6zWBqAQAGLKIjQLT2ADkAEkaDBSgAaYQZAAS0ISpwg5GUwgAcjBbhkUyrJsooCm4MpUHACnBExAwNH_a6vEnW3bOgRfSbtQG3dgCPYMtxSsowJByMJPZQreR4CXO67YGBh6mQAuE6UMsuLO298JapQoJ1DH7-wOj5NrNZEyOQBBaEQl5eB0HSkQ9bRSg_gMovGERgIlKIZgAiQDnXIQDNXQLwAFJDV3N87QPFCzVgO8MAvK8LDqCA6HXDIs3KHMK1fXDhFXIiQGoijcN1fV7AAbUPO0MlYCB6nIAh6MojJBC_aA-NwjIVXQAtTgAdzqABrOARKvDJZRSGBKGEcSFJADt0IDDJPRUOY8GEQRUGsNBFxANjhAAXUPNCrwbSZ4BY6yXUo1BwxgB8xwnKcZznOZLJ0yiLG0QxvI3QwCMUgdx3iKoVg3DEMXg2KAy3H9XJADEnDS7SNx5PKMhskLQsY5RXN0gdgGEBIK1uewHgeDEU08ohIo4rjkV4kBhAc0KLFq-qoEa4QHgARicNqvIfQTlGEvqBsG4aGsinEHgcGaOofcTJIIGTSnkjJ-rKla6rW-wJpa7bOpAFTMHUzSTuW0LVtGyKJoxBwAA5bofAyymKEyzIsrT-usixSsh4QYCIQwSjgCAkvc0Knzh70ghwwazTgEp0EoKSACFRt_YQprOnG8dUQn2EnBsCAADXsaaYbtamCakzgTzqB9SmsCIDWm4RhdFnAMSQqzqoDHxpbNWXKIVgc7PQpX908ftZa8JD-0VSh4eoQj1WIoouV6lN5RgQRODNuAdYsHAiDnGhjZAAxjAyQ0Nc-QkZV8PwohiEI5HEEAvHDoA)
[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwnHAB2HP9xyY6xiamK2bzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACszxwACYPgE_j9fF9_jM5gsCEsVmsNltdvtDsdTudLtdbgVkSVyuiAGzYpwFCKnZRvfEkokycUEBQANVuOAmKloAEFjAAKMyoCzoZQEZRqgCUpnMFmE9QIVVKWs1ptNfS6qHsNttptoWAIAGVtLAnSaXaawNQCAAxZREaBaewAcgAkjQYKUADTCDIACWhCVOEHIymEADkYLcMsnlZNlFBk3BlKg4AU4AmIGAo36XV5Ey3bZ0CD7jVr_a7sAR7BluKVlGBIORhB7KJbyPBix2XbAwEOUyB5_HShklxY27vhLVKFBOoZfX3-4fJtZrAnhyAILQiIuL_3A6UiLraKV78BlF5hEYCJSiGYAIgAp1yAAjV0C8ABSA0d1fW192Q01YFvDBz0vCw6ggOg1wyTNymzcsXxw4QV0IkAqPInCdT1ewAG0D1tDJWAgepyAIOiKIyQRP2gXicIyZV0HzU4AHc6gAazgYTLwyGUUhgShhDE-SQHbND_QyD0VDmPBhEEVBrDQBcQFY4QAF0D1Qy960meBmKs50KNQMMYHvUdx0nadZzmCztIoixtEMLz10MfCFP7Md4iqFZ1wxDE4Ji_1N2_FyQAxJxUq09ceVyjJrOCkKGOUFydP7YBhASctbnsB4HgxZMPKICL2M45EeJAYR7JCiwarqqAGuEB4AEYnFazz7wE5QhN6_qBqG-qIpxB4HGm9r7zEiSCGk0o5IyPrSuW2rVvscbmq2jqQGUzA1I046lpClaRoi8aMQcAAOG7730spimM0zzM0vqrIsEqIeEGAiEMEo4AgRK3JCx9Ya9IJsIG004BKdBKEkgAhEaf2ESbTux3HVAJ9gJ3rAgAA17Cm6HbSp_HJM4Y86nvUprAifUpuEIWRZwDFEMsqr_R8KXTRlij5f7Wy0MVvdPD7GWvEQvsFUoOHqAItUiKKLkeuTOUYEEThTbgbWLBwIhZxoI2QAMYwMgNdXPkJaVfD8KIYhCORxBALww6AA)
<!-- vue3Demo:end -->
@ -315,7 +315,7 @@ app.component('v-chart', VueECharts)
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.3"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.6"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.7"></script>
```
<!-- vue2Scripts:end -->
@ -326,7 +326,7 @@ Vue.component("v-chart", VueECharts);
<!-- vue2Demo:start -->
[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwANhwARgec_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XO43GDrShEQyUOAQfqoApGCB3N44JxkgpzHAAZi-AQBf18P0BMzmCwISxWaw2W12-0Ox1O50ufhgxTKBDgdwArGScJ8QOJvgyCP9fkC2aCOeDuVC-bCBYjhVc0QUxSVylLXuSnAUIqdlC86czGTIXarpAA1W44KhY6h0AgACgyhXF5QyABphN6YIJOBbJQBKTyoaQnADuMduQbMqAssPsGQMxij5mE6GUBGUQaTpnLFnqBCqpXzeYsHeEfS6qHs7c7HdoWAIAGVtLA-w2BxYwNQCAAxZREaBaewAcgAkjQYKVoxkABKwhKnCDkZTCAByMFuUeEAEFJsooNG4MpUHACnAdxAwGup52vEjf9BzxCd63zadB2wAgixAbhSmUMBIHIYQR0oFtyHgMsIMg4RYDAGDhAyTDt1KDJgIsQCKOEWpKCgTpDEnHDIIISZrGsHdYLxGAiGw3CZzqIgq1oUpYOAZQvGERgIlKIZgAiSS-3ISTc3QLwAFIk3I5iAKAnSO1gDiMCY_iu0mQNYOPcpTyfPj-PwwiMgcuzcMrat7AAbWozsMlYCB6nIAgXP4jJBCE6BgtwjI73QS9TgzOoAGs4EiyCMk9FIYEoe90BSkA9NMiwMhHFQ5jwYRBFQaw0CwkBvOEABdaiqP0iwv3MlZhC81qO37UzUCXGBYPgxDkNQ9C5lqgrCu0QwhqIkBDAgGBUunBD4iqTqMmlaV1NWgcSJEzztqcPb8oW55ToyBrptMtzlGOnrp2AYQEifW57GpalpWjAaiHm3z_LFIKQGEFrCt6173vm6k3icX7BtgsLlAi0HwYh0woagD7hAeakHAR_7YJiuKCAS0pkoyMHbsKl63ux-a3m-wmAZADLMGymK8up-rOzp6H7DeaUHAADhZ2CSrKYoKqqmruZ8J6Oxu3nhB4wwSlxTq-sK7iiDHIITIxtqSnQSgMwAIWx0ThDhmmIbgE2zfYJCvwIAANex4ZVzsHdUM3ODoupYNKawIhreHhAjqOcGlLS6sVgCVYV0zk8gpr9NTyjU0o7wU18el1RCKIYhCORxBALxK6AA)
[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwANhwARgec_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XO43GDrShEQyUOAQfqoApGCB3N44JxkgpzHAAZi-AQBf18P0BMzmCwISxWaw2W12-0Ox1O50ufhgxTKBDgdwArGScJ8QOJvgyCP9fkC2aCOeDuVC-bCBYjhVc0QUxSVylLXuSnAUIqdlDgAOx05mMmRu1XSABqtxwVCx1DoBAAFBlCuLyhkADTCX0wQScC2SgCUnlQ0hOAHc47cQ2ZUBZYfYMgZjDHzMJ0MoCMoQynTJWLPUCFVSoWCxYu8I-l1UPZO92u7QsAQAMraWADptDixgagEABiyiI0C09gA5ABJGgwUqxjIACVhCVOEHIymEADkYLcY8IAIKTZRQWNwZSoOAFOB7iBgDczt2XjRoBw54lOjaFrOw7YAQJYgNwpTKGAkDkMIY6UG25DwBWUHQcIsBgHBwgZNhu6lBkoEWMBVHCLUlBQJ0hjTnh0EEJM1jWHu8F4jARC4fhc51EQNa0KU8HAMoXjCIwESlEMwARNJA7kNJ-boF4ACkKaUaxQEgXpXawFxGAsYJPaTMG8GnuU54vgJgmEcRGROQ5-HVrW9gANq0d2GSsBA9TkAQbmCRkggidAoX4RkD7oNepxZnUADWcDRdBGTeikMCUI-6BpSABnmRYGRjiocx4MIgioNYaA4SAvnCAAurRNGGRYP6WSswg-e1XaDuZqArjA8GIchqHoZhcz1UVxXaIYI0kSAhgQDA6Wzkh8RVN1GTStKmnrUOZFid5u1OAdhVLc850ZE1s3mR5yinX1s7AMICQvrc9jUtS0qxkNRCLf5gViiFIDCG1xX9e9n2LdSbxOP9w3wRFyhReDkNQ6YMNQF9wgPNSDhI4D8FxQlBBJaUqUZBD93FW9H244tby_cTQMgFlmC5XFBW0413YM7D9hvNKDgABxs_BZVlMUVU1XVvM-C9XZ3fzwh8YYJS4t1A3FbxRATkEZlYx1JToJQWYAEK4-JwgI3TUNwGbFvsChP4EAAGvYiNq92TuqBbnAMXU8GlNYER1ojwhRzHODSjpDXK0BatK-ZqfQS1hnp9R6bUd4aa-PS6ohFEMQhHI4ggF41dAA)
<!-- vue2Demo:end -->