apache / echarts

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

[Bug] echarts import map bug(empty canvas, but hover can see tips) #19414

Open CHENJIAMIAN opened 10 months ago

CHENJIAMIAN commented 10 months ago

Version

5.4.3

Link to Minimal Reproduction

https://codepen.io/571574085/pen/rNPXPZg

Steps to Reproduce

Open It, Wait Loaded. Hover Charts.

Current Behavior

https://codepen.io/571574085/pen/rNPXPZg

image

Expected Behavior

empty

Environment

No response

Any additional comments?

No response

helgasoft commented 10 months ago

not-a-bug Works as expected without three.js added - Demo Code

CHENJIAMIAN commented 10 months ago

Even after removing the code related to Three.js, the charts still don't appear.'

helgasoft commented 10 months ago

put all imported .js files in Settings, put your code in JS section Demo 📌 please close issue if problem solved

CHENJIAMIAN commented 10 months ago

put all imported .js files in Settings, put your code in JS section Demo 📌 please close issue if problem solved

Why does this solve the problem? I don't understand the principle behind it. Can you explain it to me?

BerndAmend commented 10 months ago

I have the same issue, I'm unable to get the example (https://echarts.apache.org/handbook/en/get-started/#) working if I use esm. (I only see the tooltip) import * as echarts from 'https://esm.run/echarts'; or https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.js It works fine if I use <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.js"></script>

I think something is wrong with the esm files.

JimmyAx commented 5 months ago

Here is a minimal sample that will reproduce the bug. The canvas is empty but the tooltip shows up when hovered. ECharts must be imported using importmap for the bug to appear. Using a script tag to include it will work as expected. JSFiddle: https://jsfiddle.net/saltyprogrammer/ovLq8cd3/1/

For reference the HTML is also provided here, should it no longer reproduce in JSFiddle: echarts-importmap.html.txt

JimmyAx commented 3 months ago

Can still be reproduced with Apache ECharts 5.5.1.

markbaydoun commented 3 months ago

We are having the same bug in our frontend. I've tried downgrading echarts to 5.4.1 and vue-echarts to 6.6.9, because we recently updated the lockfile in the project and that's the only place where the change could have happened, but the bug still happens. The chart ends up rendering when the page is resized, so I think it's got something to do with how it detects changes and re-renders.

The only way we have been able to "fix" it is by rendering the chart only when a loading state is "false", and show a placeholder otherwise, but this is not ideal, as the loading state of the chart looks much better.