TradingView - K线

文章目录

TradingView - K线
- 1 前言
- 2 如何使用
- - 2.1 项目引入 Tradingview 静态资源包
  - - [强制] 静态资源包 `charting_library-master` 放在目录 `static` 里。
  - 2.2 项目添加 Tradingview 核心库 charting_library.min.js
  - - [建议] 在项目的运行入口 `index.html` 里添加
  - 2.3 挂载 Tradingview 到 Vue 组件
  - - [建议] 预挂载，提升K线渲染效率。
  - 2.4 获取 TradingView 数据并渲染
  - - [建议] 批量获取历史数据，依次叠加。
  - 2.5 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() {// 初始化 TradingViewTradingView.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) {// 初始化TradingviewTradingView.onready(this.initData())} else {if (symbolInfo.tmId !== this.oldSymbolInfo.tmId) {// 关闭K线订阅this.closeKline();this.historyData = [];this.oldSymbolInfo = symbolInfothis.initData();}}
});

解释：

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