TradingView - K线

1 前言

Tradingview是一个价格图表和分析软件，提供免费和付费选项，由一群交易员和软件开发商在2011年9月推出。投资者可以通过Tradingview查看各种不同金融市场和资产类别的价格图表，包括股票、货币对、债券、期货以及加密货币。

2 如何使用

2.1 项目引入 Tradingview 静态资源包

[强制] 静态资源包 charting_library-master 放在目录 static 里。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqlU8rBz-1616988134216)(./images/tradingview-1.png)]

解释：

static 目录下的文件不会被 webpack 处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

2.2 项目添加 Tradingview 核心库 charting_library.min.js

[建议] 在项目的运行入口 index.html 里添加

<script src="<%= process.env.ASSETS_BASE_URL %><%= process.env.assetsSubDirectory %>/charting_library-master/charting_library/charting_library.min.js"></script>

解释：

charting_library.min.js 是 Tradingview 核心库，提前缓存到浏览器，提升K线渲染效率。

2.3 挂载 Tradingview 到 Vue 组件

[建议] 预挂载，提升K线渲染效率。

// tradingview_chart_container 挂载Id
<template>
  <div class="kline">
    <div id="tradingview_chart_container" class="chart_container"></div>
  </div>
</template>

<script>
export default {
    name: "kline",
    data() {
        return {
            tvWidget: null,          // K线实例
            historyData: [],         // K线历史数据
            readyed: false,          // K线是否成功初始化
            limit: 100,              // K线单次获取历史数据数量
            timeStamp: 0,            // 最后一个数据的时间戳
            local: "zh",             // K线国际化
            interval: 'D',           // K线时段
            subscribeKlineData: {},  // 实时数据
            webSocketUrl: 'spot/candle-1m:btc-usdt',       // K线实时数据接口
            onRealtimeCallback2: function () {},          // 实时数据
            tvTimeList: {}           // K线周期按钮数据
        }
    },
    beforeMount() {
        // 初始化 TradingView
        TradingView.onready(this.initData())
    },
    methods: {
         // 初始化K线
         initData() {
             let _this = this;
             let ossPath = '/' // 本地 或者 线上路径
             if (process.env.NODE_ENV == "production") {
                 ossPath = 'https://btc018.oss-cn-shenzhen.aliyuncs.com/front/'
             }
             this.tvWidget = window.tvWidget = new TradingView.widget({
                 locale: _this.local, // K线国际化
                 symbol: 'BTC/USDT', // 交易对
                 interval: _this.interval, // K线数据时段
                 datafeed: _this.createFeed(), // 数据源
                 library_path : ossPath + "webStatic/charting_library-master/charting_library/", // K线静态资源路径
                 custom_css_url: ossPath + "webStatic/charting_library-master/charting_library/static/pro-night.css", // K线主题文件
                 container_id: "tradingview_chart_container", // 挂载ID
                 // 使用项
                 enabled_features: [
                     ...
                 ],
                 // 禁用项
                 disabled_features: [
                     ...
                 ],
                 ... // 其它配置项
             });
             // 监听K线加载，执行自定义事件
             this.tvWidget.onChartReady(function () {
                 // 自定义事件
                 ...
             });
         },   
    }
</script>

2.4 获取 TradingView 数据并渲染

[建议] 批量获取历史数据，依次叠加。

// ... TradingView Api

// 获取历史数据
this.historyData = response.data.concat(this.historyData)

// 渲染历史数据
onDataCallback(_this.historyData, {
    noData: false,
});

// 没有更多历史数据时，停止查询
onDataCallback([], {
    noData: true,
});

// 订阅实时数据
this.webSocketUrl = `spot/candle-5m:BTC-USDT`
this.wsOn(this.webSocketUrl, {}, this.subKlineCallback);

// 渲染实时数据
subKlineCallback (data) {
    this.onRealtimeCallback2({
        time: Number(data[0]) || 0,
        open: Number(data[1]) || 0,
        close: Number(data[2]) || 0,
        high: Number(data[3]) || 0,
        low: Number(data[4]) || 0,
        volume: Number(data[5]) || 0,
    });
}

解释：

批量获取历史数据，接口压力小，响应速度快，提升K线渲染效率。

2.5 TradingView 时段和交易对变化

[建议] 时段变化：切换对应时段接口；交易对变化：重新初始化K线

// 监听交易对
this.$bus.on("symbolChange", symbolInfo => {
    if (!this.tvWidget) {
        // 初始化Tradingview
        TradingView.onready(this.initData())
    } else {
        if (symbolInfo.tmId !== this.oldSymbolInfo.tmId) {
            // 关闭K线订阅
            this.closeKline();
            this.historyData = [];
            this.oldSymbolInfo = symbolInfo
            this.initData();
        }
    }
});

解释：

交易对变化后，清除缓存数据，关闭数据推送，避免K线报错。# TradingView - K线