Nestjs+Svelte项目中如何在Svelte文件内直接导入Apexcharts实现图表

首先完成以下前置操作和代码调整即可实现单文件整合Apexcharts逻辑：

• 先在项目根目录执行npm install apexcharts安装本地依赖，你之前使用CDN引入无需安装，现在通过ES模块导入必须先安装该依赖。
• 去掉不必要的动态import逻辑和loaded状态判断，你之前的写法会出现两个问题：一是动态import如果在SSR环境执行报错会阻断客户端hydration，导致onMount完全不触发；二是loaded状态更新后，绑定的use动作因为入参没有变化不会重新执行，导致图表无法初始化。
• 直接在script顶部静态导入Apexcharts，简化逻辑同时避免异步加载导致的各种问题。

// Chart.svelte
<script>
    import Layout from './partials/Layout.svelte';
    import ApexCharts from 'apexcharts';

    let options = {
        chart: {type: 'bar'},
        series: [{name: 'sales', data: [30,40,45,50,49,60,70,91,125]}],
        xaxis: {categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]}
    };
    
    const machart = (node, options) => {
        // 若项目开启SSR，可加上这行判断避免服务端执行报错
        // if (typeof window === 'undefined') return;
        const myChart = new ApexCharts(node, options);
        myChart.render();

        return {
            update(options) {
                myChart.updateOptions(options);
            },
            destroy() {
                myChart.destroy();
            }
        }
    }
</script>

<Layout>
    <div use:machart={options}></div>
</Layout>

如果你的项目开启了SSR，只要放开代码中注释的那行客户端环境判断即可正常运行。

内容的提问来源于stack exchange，提问作者eta32carinae