Nestjs Svelte -在Svelte文件中导入apex图表

Question

我是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();

但是当我尝试在苗条文件中这样做时:

// 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

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