-2

我想在 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

4

1 回答 1

1

这个没有例子，因为无论如何这与 Nuxt 无关，也不是真正与 Vue 相关，而是更多的通用 JS vanilla 问题。

几点：

  • 仅在您的组件中需要它时才导入您的组件非常棒（而不是使用Nuxt 插件在全球范围内导入），对此表示赞赏！
  • 通常，如果你想调用一个外部函数，你可以这样mounted()做，这当然取决于你在那里做什么
  • 同时，您可能应该使用$refs而不是document.body因为我们在这里处于基于状态的框架中
  • lineSeries.setData之后可能会被移到data并注入
于 2021-09-22T08:12:50.880 回答