apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.48k stars 19.62k forks source link

在vue的keep-alive的activated周期内,通过echartsInstance. appendData方法增量渲染地图散点图,提示Dom has no width or height #15228

Closed lixiaomei0921 closed 1 year ago

lixiaomei0921 commented 3 years ago

Version

4.9.0

Steps to reproduce

在vue项目中,使用地图加echarts渲染差不多200万量级的数据,使用了分片来获取数据,前端使用echartsInstance.appendData 方法来增量渲染页面,因为数据量巨大,所以想通过vue的keep-live来缓存数据,然后在keep-live的生命周期activated中,再次使用echartsInstance.appendData来增量渲染数据,结果会有告警信息"Dom has no width or height",导致图表渲染不出来。

What is expected?

大数据量缓存的情况下,图表能够正常加载出来

What is actually happening?

图表未能正常加载出来 image image

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

@lixiaomei0921 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** In vue's keep-aliveactivated cycle, pass echartsInstance. The appendData method incrementally renders the map scatterplot, prompting Dom has no width or height **BODY** ### Version 4.9.0 ### Steps to reproduce In the vue project, the map and echarts are used to render almost 2 million data, and the sharding is used to obtain the data. The front end uses the echartsInstance.appendData method to incrementally render the page. Because of the huge amount of data, I want to use vue's keep- live to cache the data, and then use echartsInstance.appendData to incrementally render the data again in the life cycle of keep-live activated. As a result, there will be an alarm message "Dom has no width or height", which causes the chart to be rendered unavailable. ### What is expected? In the case of a large amount of data cache, the chart can be loaded normally ### What is actually happening? The chart failed to load normally ![image](https://user-images.githubusercontent.com/9361042/123251841-39c6d800-d51e-11eb-8d07-42257c79cbe5.png) ![image](https://user-images.githubusercontent.com/9361042/123251930-4ea36b80-d51e-11eb-9545-fe8ec1e18f8e.png)
echarts-bot[bot] commented 3 years ago

@lixiaomei0921 Please provide a minimum reproducible demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 1 year ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!