search

bherbruck / svelte-echarts

Apache ECharts wrapper for Svelte
https://bherbruck.github.io/svelte-echarts/
MIT License
91 stars 6 forks source link

Charts are sporadically rendering blank #25

Open hbcondo opened 3 months ago

hbcondo commented 3 months ago

This library has been working well for various chart types (bars, waterfall, scatter) but every now and then, the chart doesn't render. This occurs for both canvas and svg renderers as shown below. I'm not sure if this is specific to the code echarts library and / sveltekit. There are no console errors / warnings either. Occurs in both Safari and Chrome. Any insights on this is appreciated. Thanks!

<svg>

<div _echarts_instance_="ec_1724023873799" style="width: 100%; height: 100%;">
  <div style="position: relative; overflow: hidden; width: 1359px; height: 450px; cursor: default;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="1359" height="450" style="position: absolute; left: 0px; top: 0px; user-select: none;">
      <rect width="1359" height="450" x="0" y="0" fill="none"></rect>
      <g>
        <path d="M40.77 380.5L1318.23 380.5" fill="transparent" stroke="#6E7079" stroke-linecap="round"></path>
      </g>
    </svg>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;"></div>
  </div>
</div>

<canvas>

<div _echarts_instance_="ec_1724023873800" style="width: 100%; height: 100%;">
  <div style="position: relative; width: 1359px; height: 450px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
    <canvas data-zr-dom-id="zr_0" width="1359" height="450" style="position: absolute; left: 0px; top: 0px; width: 1359px; height: 450px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px auto auto 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: 0px 0px auto auto !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto auto 0px 0px !important;"></div>
    <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; user-select: none !important; width: 0px !important; height: 0px !important; inset: auto 0px 0px auto !important;"></div>
  </div>
</div>
bherbruck commented 3 months ago

Can you give an example of the svelte code and version you are on? It sounds like some reactivity stuff and we'll need to pinpoint where that is happening.

hbcondo commented 3 months ago

Thank you for your quick reply. I was on echarts 5.5.0 and svelte-echarts 1.0.0-rc1 but have since upgraded to 5.5.1 and 1.0.0-rc3. I'm actually using the example on this repo's readme. Have you by chance encountered this issue before?

bherbruck commented 3 months ago

I haven't seen this yet in my testing. What browser are you using and do you have any motion preferences? I think the demo has some animations when the data updates every second which could be causing the issues you're seeing, this is the default behavior of echarts. Maybe try disabling animation on the chart.

hbcondo commented 3 months ago

Thanks, it's the same issue unfortunately in that even with animation set to false, the graph only renders sometimes. This is occurring on the latest versions of Safari and Chrome with and without Incognito / Private modes. All client side libraries are loading too. I do see a warning in the console sporadically now stating: [ECharts] Instance ec_1724027982161 has been disposed but that returns even when the chart does render successfully.

image

alfredringstad commented 3 days ago

I had a similar issue, but discovered that it was due to how I was binding the echarts instance. I have no idea if that's relevant for you as well, but figured it might be worth explaining what was wrong in my case. My code looked something like this:

<script lang="ts">
  import { Chart } from 'svelte-echarts';
  import type { EChartsType } from 'echarts';

  export let showChart: boolean;

  let instance: EChartsType;
</script>

{#if showChart}
  <Chart {init} {options} bind:chart={instance} />
{/if}

Now, when we first render everything goes well - the chart is initialized and the echarts instance is bound to the instance prop. The problem shows when we hide the chart (showChart = false) and then show it again. This time, since instance is already set, and since we're using a two-way binding, we are actually providing the Chart component an echarts instance that has already been disposed, meaning it won't render.

My solution was to avoid the two-way binding. If the svelte-echarts component emitted an event on init, providing the chart instance, it would be even easier to do so. Or perhaps also resetting the chart instance after the dispose call.