Echarts

There are few options on how to include/import Echarts into your project.

Install from yarn

Install the Echarts Js library from command prompt from the root directory of the project:

yarn add echarts --save

Add the echart js file link.

<script src="assets/libs/echarts/echarts.js"></script>

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

import { getColorCodes } from "../helpers/helper.js";

Below the example how to use the package and make it working ApexTree on any page.

+page.svelte

import Echart from '$lib/components/common/Echart.svelte';

<Echart config={basicBarChartConfig} class="w-full h-80" />

Echart.svelte

<script lang="ts">
    import { onMount, onDestroy, afterUpdate } from 'svelte';
    import { browser } from '$app/environment';
    // @ts-ignore
    import * as echarts from 'echarts';

    // Accept a single full config object from the parent
    export let config: any;

    let chartContainer: HTMLElement | null = null;
    let chart: echarts.ECharts | null = null;
    let resizeObserver: ResizeObserver | null = null;

    // Render the chart with the provided config
    function renderChart() {
    if (!browser || !chartContainer) return;

    if (!chart) {
        chart = echarts.init(chartContainer);
    }

    chart.setOption(config);
    chart.resize();
    }

    // Resize chart when container size changes
    function handleResize() {
    if (!browser || !chart) return;
    chart.resize();
    }

    onMount(() => {
    if (!browser) return;

    renderChart();

    resizeObserver = new ResizeObserver(() => handleResize());
    if (chartContainer) {
        resizeObserver.observe(chartContainer);
    }

    window.addEventListener('resize', handleResize);
    });

    afterUpdate(() => {
    if (!browser) return;
    renderChart();
    });

    onDestroy(() => {
    if (!browser) return;

    chart?.dispose();
    chart = null;

    resizeObserver?.disconnect();
    window.removeEventListener('resize', handleResize);
    });
</script>


<div bind:this={chartContainer} class={$$props.class}></div>