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是一个价格图表和分析软件，提供免费和付费选项，由一群交易员和软件开发商在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-/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线
