在 nuxt 项目中使用轻量级图表包的最佳方式？

Question

我想在 Nuxt 项目中使用 lightweight-charts 包。我找不到 Nuxt 项目中包含的任何示例。我用一些方法做到了，但我不知道什么是最好的方法。在 nuxt 上运行它的正确方法是什么？

本站包的使用方法如下

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

https://github.com/tradingview/lightweight-charts

Answer 1

没有关于这个的示例，因为无论如何这与 Nuxt 无关，既不真正与 Vue 相关，更像是一个通用的 JS 香草问题。

几点：

仅在您的组件中需要时才导入您的组件（而不是全局使用 Nuxt plugins），这很棒！
通常，如果你想调用外部函数，你会在 mounted() 中执行此操作，当然这取决于你在那里做什么
同时，您可能应该使用 $refs 而不是 document.body，因为我们这里是基于状态的框架
lineSeries.setData 可以移动到 data 并在之后注入

在 nuxt 项目中使用轻量级图表包的最佳方式？

Best way to use lightweight-charts package in nuxt project?

nuxt.js

lightweight-charts