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

【问题标题】：Best way to use lightweight-charts package in nuxt project?在 nuxt 项目中使用轻量级图表包的最佳方法？
【发布时间】：2021-11-15 05:34:49
【问题描述】：

我想在 Nuxt 项目中使用轻量级图表包。我找不到 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

【问题讨论】：

标签： nuxt.js lightweight-charts

【解决方案1】：

没有关于这个的例子，因为无论如何这与 Nuxt 无关，也与 Vue 无关，但更多的是一个通用的 JS vanilla 问题。

几点：

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

【讨论】：