Nestjs Svelte - 在 Svelte 文件中导入 apexcharts答案

【问题标题】：Nestjs Svelte - import apexcharts in Svelte filesNestjs Svelte - 在 Svelte 文件中导入 apexcharts
【发布时间】：2021-10-25 13:28:29
【问题描述】：

我是 Nodejs 的新手。我创建了一个 Nestjs 项目，并且我使用的是苗条的模板。我正在尝试使用 apexcharts 创建图表，它的工作原理如下：

// Chart.svelte
<script>
    import Layout from './partials/Layout.svelte';
</script>
<svelte:head>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="/js/chart.js" defer></script>
</svelte:head>
<Layout>
    <div id="chart"></div>
</Layout>

脚本是这样的：

// chart.js
var 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]}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

但是当我尝试像这样在 svelte 文件中完成所有操作时：

// Chart.svelte
<script>
    import Layout from './partials/Layout.svelte';
    import { onMount } from 'svelte';

    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]}
    };
    let ApexCharts;
    let loaded = false;
    
    const machart = (node, options) => {
        if (!loaded) {
            return;
        }
        let myChart = new ApexCharts(node, options)
        myChart.render();

        return {
            update(options) {
                myChart.updateOptions(options);
            },
            destroy() {
                myChart.destroy();
            }
        }
    }

    onMount(async () => {
        console.log("before import");
        const module = await import('apexcharts');
        ApexCharts = module.default;
        window.ApexCharts = ApexCharts;
        loaded = true;
    });
</script>

<Layout>
    {#if loaded}
    <div use:machart={options}></div>
    {:else}
    <div class="spinner-border text-success" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    {/if}
</Layout>

onMount 根本没有触发，它一直显示正在加载的 div。
我的问题是如何在 svelte 文件中使用 import ApexCharts from 'apexcharts'; 导入 apexcharts 并将所有 js 脚本写入其中？

【问题讨论】：

标签： node.js nestjs svelte apexcharts

【解决方案1】：

如果你想在你的项目中使用 apexcharts，你首先需要 npm I Apexcharts，然后你可以使用这行代码：从“apexcharts”导入 ApexCharts；您可以在 npm 文档中查看 apexcharts https://www.npmjs.com/package/apexcharts ，我更喜欢使用 npm 而不是仅使用 cdn。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
我相信 OP 不是在问如何安装 ApexCharts，而是在问如何在使用 Svelte 时导入它。