Vue中引入TradingView制作K线图

前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 

一、修改datafeed.js为export导出,并在vue文件引入TradingView内部代码charting_library.min.js和datafeed.js.

datafeed.js

// 导出核心函数,提供vue组件调用初始化k线图

export default{

    UDFCompatibleDatafeed: Datafeeds.UDFCompatibleDatafeed,

}

vue 组件

// 这是我的路径,请根据自己的路径去配置

import"../../../static/charting_library/charting_library.min.js";

importDatafeedsfrom"../../../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简单介绍

普遍主要通过修改这几个函数实现预期效果

1. Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品信息结构

(文档:https://zlq4863947.gitbooks.io/tradingview/content/book/Symbology.html)

2.Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通过日期范围获取历史K线数据。图表库希望通过onHistoryCallback仅一次调用，接收所有的请求历史。而不是被多次调用。

3.Datafeeds.DataPulseUpdater - 更新后台返回k线最新的数据

emmm: 网上比较少关于TradingView引入Vue的文章,小弟不才,粗略的分享一下我的实现方法.