Implement reference of echartsInstance

DrStrangeloovee commented 1 year ago

It would be nice to have a reference to the echartsInstance in the parent component. I am currently trying to use the echartsInstance.on api to react to a click event registered on one instance. I thought about storing each instance in a separate store and reference it from there. As I am still learning Svelte I would like to start a discussion on what would be the best solution here.

DrStrangeloovee commented 1 year ago

I played around a little longer and came up with an idea. Using the svelte compiler options with the accessors true and binding the element with bind:this so the Charts.svelte looks something like this:

<svelte:options accessors={true} />

<script lang="ts" context="module">
...
</script>

<script lang="ts">
    export let options: echarts.EChartsOption;
    export let { theme, renderer, width, height } = DEFAULT_OPTIONS;

    export let chart: HTMLElement = null;
</script>

<div
    data-test="my-chart-element"
    bind:clientWidth={width}
    bind:clientHeight={height}
>
    <div
        bind:this={chart}
        use:chartable={{ renderer, theme, options, width, height }}
    />
</div>

In my parent component where I would like to hook into and add some functionality to the instance I would just need

App.svelte

<script lang="ts">
import * as echarts from "echarts"; // this could probably just import the getInstanceByDom function

    onMount(async () => {
        let echartsInstance = echarts.getInstanceByDom(myChart.chart);
        // do something with insance e.g. onClick, ...
    });
</script>

<Chart bind:this={myChart} {options} />

Unsure if this is a viable way of doing this as I haven't tested it if there are issues down the road.

bherbruck commented 1 year ago

Well that's cool, I haven't really used svelte:options before. If you want to take a crack at it in a PR, that is welcome.

I think this whole project needs to be updated to a more recent version of sveltekit for the build process (or vite if it supports svelte library mode). The functionality shouldn't change but sveltekit has matured a lot since this project's inception.

EDIT: echarts should also be a peer dependency in a future release

DrStrangeloovee commented 1 year ago

I am still unsure if that's a good way to implement it. In my eyes it still kind of feels wrong importing echarts at every component I would like to access the API exposed by it. So maybe there is still a better way...

I should hopefully find some time to give it another try and find a solution I am happy with and doesn't feel 'wrong'.

bherbruck commented 6 months ago

implemented in v1.0.0-rc1

chart variable is exported

https://github.com/bherbruck/svelte-echarts/blob/4eb59a8d90a9cd01a6f799be1773da38def81581/src/lib/components/Chart.svelte#L14

so you should be able to do:

<script lang="ts">
  let chart: echarts.EChartsType // now we can do whatever we want with the chart
</script>

<Chart bind:chart />

bherbruck / svelte-echarts

Implement reference of echartsInstance #1