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修饰符做父子组件数据双向 ...
随机推荐
- AT1983 BBQ Hard
洛谷题目链接:BBQ Hard 题意翻译 有 n 个数对 \((A_i; B_i)\),求出 \[\sum_{i=1}^{n}\sum_{j=i + 1}^{n}{a_i+b_i+a_j+b_j ...
- 【实操笔记】MySQL主从同步功能实现
写在前边: 这两天来了个需求,配置部署两台服务器的MySQL数据同步,折腾了两天查了很多相关资料,一直连不上,后来发现其实是数据库授权的ip有问题,我们用的服务器是机房中的虚拟机加上反向代理出来的,坑 ...
- 20155227 2016-2017-2 《Java程序设计》第四周学习总结
20155227 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承 继承 继承是Java程序设计语言面向对象的又一重要体现,允许子类继承父类,避免重复的行 ...
- Hibernate5笔记9--Hibernate注解式开发
Hibernate注解式开发: (1)注解式开发的注意点: Hibernate中使用注解,主要是为了替代映射文件,完成“类到表,属性到字段”的映射. JPA提供了一套功能强大的注解.Hibernat ...
- perl6 Net::HTTP 发送任意 url 请求例子
只做个笔记, 用 HTTP::UserAgent 的话, url 中有特殊点的符号会请求不了, 用 Net::HTTP 能很好的发送请求. use Net::HTTP::GET; my $url = ...
- 生成Word/ATU报表提示 font family not found
1.先从你本机 C:\Windows\Fonts 拷贝或者网络上下载你想要安装的字体文件(*.ttf文件)到 /usr/share/fonts/chinese/TrueType 目录下(如果系统中没有 ...
- 25 The Go image/draw package go图片/描绘包：图片/描绘包的基本原理
The Go image/draw package go图片/描绘包:图片/描绘包的基本原理 29 September 2011 Introduction Package image/draw de ...
- 排序与相关性(Sorting and Relevance)
本文翻译自Elasticsearch官方指南的Sorting and Relevance一章的第一节. 原文地址:http://www.elastic.co/guide/en/elasticsearc ...
- Java与redis交互、Jedis连接池JedisPool
Java与redis交互比较常用的是Jedis. 先导入jar包: commons-pool2-2.3.jar jedis-2.7.0.jar 基本使用: public class RedisTest ...
- 【[国家集训队]小Z的袜子】
对于L,R的询问.设其中颜色为x,y,z的袜子的个数为a,b,c...那么答案即为(a*(a-1)/2+b*(b-1)/2+c*(c-1)/2....)/((R-L+1)*(R-L)/2)化简得:(a ...