vue 中 使用 tradingview
加载页面时初始化方法： mounted
可以在 mounted 方法中调用 methods 的中的方法
使用 data 中的数据时，在每个方法的开始推荐先定义 var that = this
现在还不明白开始时为什么执行两次 resolveSymbol 方法
不要纠结页面的数据怎么获取到某个方法中的，它自己就获取了。例如 resolveSymbol 方法，根据商品名称解析商品信息。你在输入框中输入某个商品时，值自动被 resolveSymbol 方法获取。
在 gerBar 方法中，执行回调函数的时候，eg： settimeout（callback， 1000）让其 1 秒后执行，因为 若去后台获取数据采用 axios.post() 是异步的。
开始时 执行顺序：
createChartData -> subscribeSymbol -> unsubscribeSymbol -> TradingView.onready -> onChartReady -> onReady(图表雏形) -> resolveSymbol -> getBar
切换商品时顺序：
searchSymbols -> resolveSymbol -> getBar
<!-- TradingView Widget BEGIN -->
<html>
<head>
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
<script type="text/javascript" src="/static/charting_library-master/charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/bundle.js"></script>
</head> <body>
<div id="app">
<el-button type="primary" @click="getVal('M1905')">M1905</el-button>
<el-button type="primary" @click="getVal('C1905')">C1905</el-button>
<el-button type="primary" @click="getVal('RB1905')">RB1905</el-button>
<el-button type="primary" @click="getVal('A1905')">A1905</el-button>
</div>
<div id="tv_chart_container"></div> </body>
<!-- 先引入 Vue -->
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="/static/js/index.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
<script type="text/javascript"> var host = window.location; var vm = new Vue({
el: 'tv_chart_container',
mounted: function () {
var that = this;
that.chart_data = that.createChartData();
TradingView.onready(function () {
that.chart = window.tvWidget = new TradingView.widget({
symbol: 'M1905',
height: '900',
width: '1500',
interval: that.interval,
toolbar_bg: '#c5c5c8',
timezone: 'Asia/Shanghai',
time_frames: [
{text: "1h", resolution: "1"},
{text: "6h", resolution: "15"},
{text: "1d", resolution: "30"},
{text: "3d", resolution: "30"},
{text: "1w", resolution: "30"},
{text: "1m", resolution: "1D"},
{text: "3m", resolution: "1D"},
{text: "6m", resolution: "3D"},
{text: "1y", resolution: "1W"},
{text: "100y", resolution: "W", description: "All", title: "All"},
],
container_id: 'tv_chart_container',
library_path: '/static/charting_library-master/charting_library/',
locale: 'zh',
//datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
datafeed: that.chart_data,
disabled_features: [
'volume_force_overlay',// 成交量与k线分离
//'header_symbol_search',// 允许搜索商品
],
overrides: {
//'volumePaneSize': 'small', //成交量高度设置，可选值 large, medium, small, tiny
//'mainSeriesProperties.priceAxisProperties.autoScale':false,
//'mainSeriesProperties.priceLineColor': '#001bff',
//'mainSeriesProperties.priceLineWidth': 5,
}
});
that.chart.onChartReady(function () {
//that.chart.chart().createStudy('MA Cross', false, false); // K线图添加初始化曲线
});
}); },
data: function () {
return {
chart_data: null,
chart: null,
symbol:null,
symbolAndInterval: null,
dataBar: [],
interval: 'D',
inDayResolutions: ['1', '5', '15', '30'],
symInfo: [
{
"name": 'M1905',
"timezone": "Asia/Shanghai",
"pricescale": 500,
"minmov": 1,
"ticker": 'M1905',
"description": "DIdontKnow",
"session": "0900-1630",
"type": "stock",
"has_intraday": true,
"intraday_multipliers": this.inDayResolutions,
"has_weekly_and_monthly": false,
},
{
"name": 'C1905',
"timezone": "Asia/Shanghai",
"pricescale": 100,
"exchange": "NYSE",
"point": 2,
"minmov": 1,
"ticker": 'C1905',
"description": "BOEIGN CO",
"session": "24x7",
"type": "bitcoin",
"has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
"intraday_multipliers": this.inDayResolutions,
"has_weekly_and_monthly": false,
"has_no_volume": false,
"regular_session": "24x7"
},
{
"name": 'A1905',
"timezone": "Asia/Shanghai",
"pricescale": 100,
"exchange": "NYSE",
"point": 2,
"minmov": 1,
"ticker": 'A1905',
"description": "BOEIGN CO",
"session": "24x7",
"type": "bitcoin",
"has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
"intraday_multipliers": this.inDayResolutions,
"has_weekly_and_monthly": false,
"has_no_volume": false,
"regular_session": "24x7"
},
{
"name": 'RB1905',
"timezone": "Asia/Shanghai",
"pricescale": 100,
"exchange": "NYSE",
"point": 2,
"minmov": 1,
"ticker": 'RB1905',
"description": "BOEIGN CO",
"session": "24x7",
"type": "bitcoin",
"has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
"intraday_multipliers": this.inDayResolutions,
"has_weekly_and_monthly": false,
"has_no_volume": false,
"regular_session": "24x7"
},
],
searchList: [
{
"symbol": "M1905",
"full_name": "NYSE:M1905",
"description": "BOEING CO",
"exchange": "Cboe BZX",
"ticker": "M1905",
"type": "stock"
},
{
"symbol": "C1905",
"full_name": "NYSE:C1905",
"description": "THE CHEMOURS COMPANY LLC",
"exchange": "Cboe BZX",
"ticker": "C1905",
"type": "stock"
},
{
"symbol": "RB1905",
"full_name": "NYSE:RB1905",
"description": "DOMINION ENERGY INC",
"exchange": "Cboe BZX",
"ticker": "RB1905",
"type": "stock"
},
{
"symbol": "A1905",
"full_name": "NYSE:A1905",
"description": "EL PASO ELECTRIC CO",
"exchange": "Cboe BZX",
"ticker": "A1905",
"type": "stock"
},
],
supported_resolutions: ['1', '5', '15', '30', 'D', 'W', 'M'],
}
},
methods: {
createChartData: function () {
var that = this;
Datafeeds.Container = function () {
//this._configuration=configurationData
that._configuration = {
supports_search: false,
supports_group_request: false,
exchanges: [{value: 'DV', name: 'NYSE', desc: 'DeVry Education Group Inc.'}],
supported_resolutions: that.supported_resolutions,
supports_marks: false,
supports_time: false,
supports_timescale_marks: false,
symbols_types: [{name: 'Ny', value: 'dv'}],
}
}
Datafeeds.Container.prototype.onReady = function (callback) {
if (that._configuration) {
setTimeout(function () {
callback(that._configuration);
}, 1000);
}
}
Datafeeds.Container.prototype.resolveSymbol = function (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
var symInfoTemp = null;
if (symbolName == 'M1905')
symInfoTemp = that.symInfo[0]
else if (symbolName == 'C1905')
symInfoTemp = that.symInfo[1];
else if (symbolName == 'A1905')
symInfoTemp = that.symInfo[2];
else symInfoTemp = that.symInfo[3];
setTimeout(function () {
onSymbolResolvedCallback(symInfoTemp);//商品信息
}, 0);
}
Datafeeds.Container.prototype.searchSymbols = function (userInput, exchange, symbolType, onResultReadyCallback) {
setTimeout(function () {
onResultReadyCallback(that.searchList);
}, 0)
}
Datafeeds.Container.prototype.getBars = function (symbolInfo, resolution, timeFrom, timeTo, onDataCallback) {
console.log("resolution: "+resolution);
console.log("timeFrom: "+timeFrom);
console.log("timeTo: "+timeTo);
that.interval = resolution;
that.symbol = symbolInfo.name;
that.changeSearch(that.symbol, that.interval, timeFrom, timeTo);
setTimeout(function () {
onDataCallback(that.dataBar);//商品数据
},1500);
}
Datafeeds.Container.prototype.subscribeBars = function (symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) {
}
Datafeeds.Container.prototype.unsubscribeBars = function (subscribeUID) {
}
return new Datafeeds.Container;
},
changeSearch: function (symbolName, resolution, timeFrom, timeTo) {
var that = this;
axios.post(host+'getChartData', {
symbolName: symbolName,
resolution: resolution,
timeFrom: timeFrom,
timeTo: timeTo,
}).then(res => {
if(res.data.result_code == "success"){
var chartData = res.data.data;
that.dataBar.splice(0, that.dataBar.length);
for (var i = 0; i < chartData.chartDataTime.length; i++) {
var time = chartData.chartDataTime[i];
var high = chartData.chartDataHigh[i];
var low = chartData.chartDataLow[i];
var close = chartData.chartDataClose[i];
var open = chartData.chartDataOpen[i];
var volume = chartData.chartDataVolume[i];
that.dataBar.push({
time: time,
close: close,
open: open,
high: high,
low: low,
volume: volume
})
}
}
}); }, },
watch: {
symbol: function(val){
var that = this;
that.chart.setSymbol(that.symbol, that.interval, function () { });
}
}
});
var ap = {
data: function () {
return { }
},
methods: {
getVal: function (symbol) {
vm.symbol = symbol;
}
}
};
var Ctor = Vue.extend(ap);
new Ctor().$mount('#app'); </script>
<style>
#app{
float: right;
margin-right: 10%;
}
</style>
</html>
TradingView
工作需要，点击按钮进行切换商品： 如图
vue 中 使用 tradingview的更多相关文章
- Vue中引入TradingView制作K线图
**前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
随机推荐
- Java入门系列（四）内部类
为什么需要内部类? 真正的原因是这样的,java中的内部类和接口加在一起,可以的解决常被C++程序员抱怨java中存在的一个问题没有多继承.实际上,C++的多继承设计起来很复杂,而java通过内部类加 ...
- Asp.Net使用加密cookie代替session验证用户登录状态 源码分享
首先 session 和 cache 拥有各自的优势而存在. 他们的优劣就不在这里讨论了. 本实例仅存储用户id于用户名,对于多级权限的架构,可以自行修改增加权限字段 本实例采用vs2010编写 ...
- POJ 1128 Frame Stacking (拓扑排序)
题目链接 Description Consider the following 5 picture frames placed on an 9 x 8 array. ........ ........ ...
- 关于禁用"请停用以开发者模式运行的扩展程序"提示
有兴趣研究谷歌浏览器扩展开发,但每次开启高版本chrome都会有烦人的提示 因为我用的360急速,目前还有提示,但使用原生chrome连插件都给删了,无语
- 《廖雪峰Git教程》学习笔记
原文链接 一.创建版本库 ①初始化一个Git仓库:git init ②添加文件到Git仓库:1.git add<file> ; 2.git commit 二.时光机穿梭 ①查看工作区状态 ...
- 利用rundll32执行程序的函数执行程序
1.前言 无意间发现hexacorn这个国外大佬,给出了很多通过rundll32执行DLL中的函数执行程序的方法,思路很灵巧. 2.原理 rundll32加载dll 用法: rundll32 < ...
- 25 个常用的 Linux iptables 规则【转】
转自 25 个常用的 Linux iptables 规则 - 文章 - 伯乐在线http://blog.jobbole.com/108468/ # 1. 删除所有现有规则 iptables -F # ...
- 最详细的block底层
主要讲述的要点: block 干什么用的 block 语法 block 底层实现 block 变量捕捉 block 的种类.在存储空间中的存储位置 block 循环引用 __block 在ARC 中 ...
- DOS命令大全（一）
#1 一: net use \\ip\ipc$ " " /user:" " 建立IPC空链接 net use \\ip\ipc$ "密码" ...
- 16/11/22_plsql
1.数据类型: char 固定长度,varchar 字符长度按照实际长度, varchar2 字符均存储2个字节, nvarchar 按照Unicode存储.number(m,n)总长度m,小数 n. ...