Nestjs Svelte -在Svelte文件中导入顶点

Question

我是Nodejs的新手。我已经创建了一个Nestjs项目，我正在使用svelte模板。我试图使用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();

但当我试着用这样的苗条文件做这件事时：

// 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脚本？

Answer 1

如果您想在您的项目中使用apex曲线图，那么首先需要使用npm i应用程序图表，然后您可以使用这一行代码:从‘Apexcharts’导入apexcharts；您可以在npm文档中签出它以获取ApexCharts https://www.npmjs.com/package/apexcharts，我更喜欢使用npm而不是仅仅使用cdn。