为 Vuejs 创建 TradingView 终端

Question

我目前正在开发一个项目，该项目创建一个带有交易视图平台 udf 数据源等的交易视图终端...

我在创建小部件时遇到问题。

这是我的 TradingView 组件：

<template>
  <div id="tv_chart_container"></div>
</template>

<script>
import {UDFCompatibleDatafeed} from '../datafeeds/udf/dist/bundle';
import TradingView from '../TradingView/tradingViewWrapper.js';
export default {
  name: 'TradingViewChart',
  mounted() {
    this.initTradingView();
  },
  methods: {
    initTradingView() {
      const widget = new TradingView.widget({
        library_path: "https://charting-library.tradingview-widget.com/charting_library/",
        fullscreen: true,
        symbol: 'AAPL',
        interval: '1D',
        container: "tv_chart_container",
        datafeed: new UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
        locale: "en",
        disabled_features: [],
        enabled_features: [],
      });

      // If you need to access the widget later, you can store it in the component's data
      this.tvWidget = widget;
    }
  },
  // Optional: if you stored the widget in the component's data, you might want to clean it up when the component is destroyed
  beforeDestroy() {
    if (this.tvWidget) {
      this.tvWidget.remove();
      this.tvWidget = null;
    }
  }
};
</script>

这是我的交易ViewWrapper.js

window.TradingView = require('../charting_library/charting_library.cjs.js');
window.Datafeeds = require('../datafeeds/udf/dist/bundle.js');

export const TradingView = window.TradingView;
export const Datafeeds = window.Datafeeds;

目前我遇到错误

cjs.js？！./node_modules/babel-loader/lib/index.js！./node_modules/cache-loader/dist/cjs.js？！./node_modules/vue-loader-v16/dist/index.js ?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:16 未捕获（承诺中）类型错误：无法读取未定义的属性 （阅读“小部件”） 在 Proxy.initTradingView (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist /index.js?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:16:101) 在 Proxy.mounted (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist /index.js?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:11:10) 在评估（runtime-core.esm-bundler.js：3047：88） 在 callWithErrorHandling (runtime-core.esm-bundler.js:369:19) 在 callWithAsyncErrorHandling (runtime-core.esm-bundler.js:376:17) 在 hook.__weh.hook.__weh (runtime-core.esm-bundler.js:3027:19) 在flushPostFlushCbs（runtime-core.esm-bundler.js：542：41） 在flushJobs（runtime-core.esm-bundler.js：580：5）

有人知道如何解决这个问题吗？我的目标是创建一个全尺寸的交易视图终端，就像在交易视图平台中一样

Answer 1

您在 TradingView 组件中遇到的错误是由于您尝试创建小部件时未定义 TradingView 对象。这可能是因为 TradingViewWrapper.js 文件未正确导出 TradingView 对象。

// tradingViewWrapper.js

import TradingView from '../charting_library/charting_library.cjs.js';
import Datafeeds from '../datafeeds/udf/dist/bundle.js';

export { TradingView, Datafeeds };