Vue中引入TradingView制作K線圖

**前言: 本文使用的是1.10版本 , 可通過TradingView.version()查看當前版本.
附上開發文檔地址:https://zlq4863947.gitbooks.i...**

一、修改datafeed.js為export導出,並在vue文件引入TradingView內部代碼charting_library.min.js和datafeed.js.

前端開發者常用的 9 個 JavaScript 圖表庫

datafeed.js

// 導出核心函數,提供vue組件調用初始化k線圖
export default {
    UDFCompatibleDatafeed: Datafeeds.UDFCompatibleDatafeed,
}

vue 組件

// 這是我的路徑,請根據自己的路徑去配置
import "../../../static/charting_library/charting_library.min.js";
import Datafeeds from "../../../static/charting_library/datafeed/udf/datafeed.js";

二、初始化k線圖函數

data(){
    return{
         widget: null,
    }
}
,
methods:{
    createWidget() {
       var _this = this;
      this.$nextTick(function() {
        let widget = new TradingView.widget({
          symbol: 'BTC-USDT',//商品名稱
          interval: "15",//默認顯示時間分辨率15分鍾
          container_id: "tv_chart_container",//k線div容器id
          //調用datafeed初始化函數
          datafeed: new Datafeeds.UDFCompatibleDatafeed(
            'https://demo_feed.tradingview.com',//后台地址
            10000, //輪詢時間(毫秒)
          ),
          library_path: "/static/charting_library/", //static文件夾的路徑
          locale: 'zh', //語言
          fullscreen: true, //顯示圖表是否占用窗口中所有可用的空間
          //禁用圖表某個功能,參考:https://tradingview.gitee.io/featuresets/
          disabled_features: [
            "use_localstorage_for_settings",
            "left_toolbar", //隱藏左邊工具欄
            "header_saveload",
            "header_symbol_search", //隱藏搜索框
            "header_interval_dialog_button", //隱藏設置周期按鈕
            "timeframes_toolbar", //隱藏底部刻度欄
            "header_chart_type", //隱藏k線樣式選擇
            // "header_indicators", //隱藏指標按鈕
            "header_fullscreen_button",
            "header_undo_redo", //隱藏撤銷重做按鈕
            "header_compare", //隱藏比較/增加商品按鈕
            "header_screenshot", //隱藏截屏按鈕
            "header_resolutions",
            "edit_buttons_in_legend",
            "pane_context_menu",
            "legend_context_menu",
            "adaptive_logo",
            "display_market_status",
            "volume_force_overlay"
          ],
          //啟用圖表某個功能
          enabled_features: ["study_templates", "move_logo_to_main_pane"],
          charts_storage_url: "https://saveload.tradingview.com",
          charts_storage_api_version: "1.1",//版本
          timezone: "Asia/Shanghai",//時區
          user_id: "public_user_id",
        });
        _this.widget = widget; //保存圖表對象
      });
    },
    // 更新圖表
    updateWidget(item) {
      this.removeWidget();
      this.createWidget();
    },
    //銷毀圖表
    removeWidget() {
      if (this.widget) {
        this.widget = null;
      }
    },
    destroyed() {
        this.removeWidget();
    }
},
mounted(){
    this.$nextTick(()=>{
        this.updateWidget();
    })
    
}

三、Datafeed.js簡單介紹

普遍主要通過修改這幾個函數實現預期效果

• Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品信息結構 (文檔:https://zlq4863947.gitbooks.i...
• Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通過日期范圍獲取歷史K線數據。圖表庫希望通過onHistoryCallback僅一次調用，接收所有的請求歷史。而不是被多次調用。
• Datafeeds.DataPulseUpdater - 更新后台返回k線最新的數據

emmm: 網上比較少關於TradingView引入Vue的文章,小弟不才,粗略的分享一下我的實現方法.

原文地址：https://segmentfault.com/a/1190000016879057