zoukankan html css js c++ java
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
  1 <!-- TradingView Widget BEGIN -->
  2 <html>
  3 <head>
  4     <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
  5     <meta name="viewport" content="width=device-width, initial-scale=1">
  6     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7     <script src="//unpkg.com/vue/dist/vue.js"></script>
  8     <script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
  9     <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
 10     <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
 11     <script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script>
 12     <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
 13     <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
 14     <link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
 15     <script type="text/javascript" src="/static/charting_library-master/charting_library/charting_library.min.js"></script>
 16     <script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/polyfills.js"></script>
 17     <script type="text/javascript" src="/static/charting_library-master/datafeeds/udf/dist/bundle.js"></script>
 18 </head>
 19 
 20 <body>
 21 <div id="app">
 22 <el-button type="primary" @click="getVal('M1905')">M1905</el-button>
 23 <el-button type="primary" @click="getVal('C1905')">C1905</el-button>
 24 <el-button type="primary" @click="getVal('RB1905')">RB1905</el-button>
 25 <el-button type="primary" @click="getVal('A1905')">A1905</el-button>
 26 </div>
 27 <div id="tv_chart_container"></div>
 28 
 29 </body>
 30 <!-- 先引入 Vue -->
 31 <script src="/static/js/vue.min.js"></script>
 32 <script src="/static/js/axios.min.js"></script>
 33 <!-- 引入组件库 -->
 34 <script src="/static/js/index.js"></script>
 35 <script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
 36 <script type="text/javascript">
 37 
 38     var host = window.location;
 39 
 40     var vm = new Vue({
 41         el: 'tv_chart_container',
 42         mounted: function () {
 43             var that = this;
 44             that.chart_data = that.createChartData();
 45             TradingView.onready(function () {
 46                 that.chart = window.tvWidget = new TradingView.widget({
 47                     symbol: 'M1905',
 48                     height: '900',
 49                      '1500',
 50                     interval: that.interval,
 51                     toolbar_bg: '#c5c5c8',
 52                     timezone: 'Asia/Shanghai',
 53                     time_frames: [
 54                         {text: "1h", resolution: "1"},
 55                         {text: "6h", resolution: "15"},
 56                         {text: "1d", resolution: "30"},
 57                         {text: "3d", resolution: "30"},
 58                         {text: "1w", resolution: "30"},
 59                         {text: "1m", resolution: "1D"},
 60                         {text: "3m", resolution: "1D"},
 61                         {text: "6m", resolution: "3D"},
 62                         {text: "1y", resolution: "1W"},
 63                         {text: "100y", resolution: "W", description: "All", title: "All"},
 64                     ],
 65                     container_id: 'tv_chart_container',
 66                     library_path: '/static/charting_library-master/charting_library/',
 67                     locale: 'zh',
 68                     //datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
 69                     datafeed: that.chart_data,
 70                     disabled_features: [
 71                         'volume_force_overlay',// 成交量与k线分离
 72                         //'header_symbol_search',// 允许搜索商品
 73                     ],
 74                     overrides: {
 75                         //'volumePaneSize': 'small', //成交量高度设置，可选值 large, medium, small, tiny
 76                         //'mainSeriesProperties.priceAxisProperties.autoScale':false,
 77                         //'mainSeriesProperties.priceLineColor': '#001bff',
 78                         //'mainSeriesProperties.priceLineWidth': 5,
 79                     }
 80                 });
 81                 that.chart.onChartReady(function () {
 82                     //that.chart.chart().createStudy('MA Cross', false, false); // K线图添加初始化曲线
 83                 });
 84             });
 85 
 86         },
 87         data: function () {
 88             return {
 89                 chart_data: null,
 90                 chart: null,
 91                 symbol:null,
 92                 symbolAndInterval: null,
 93                 dataBar: [],
 94                 interval: 'D',
 95                 inDayResolutions: ['1', '5', '15', '30'],
 96                 symInfo: [
 97                     {
 98                         "name": 'M1905',
 99                         "timezone": "Asia/Shanghai",
100                         "pricescale": 500,
101                         "minmov": 1,
102                         "ticker": 'M1905',
103                         "description": "DIdontKnow",
104                         "session": "0900-1630",
105                         "type": "stock",
106                         "has_intraday": true,
107                         "intraday_multipliers": this.inDayResolutions,
108                         "has_weekly_and_monthly": false,
109                     },
110                     {
111                         "name": 'C1905',
112                         "timezone": "Asia/Shanghai",
113                         "pricescale": 100,
114                         "exchange": "NYSE",
115                         "point": 2,
116                         "minmov": 1,
117                         "ticker": 'C1905',
118                         "description": "BOEIGN CO",
119                         "session": "24x7",
120                         "type": "bitcoin",
121                         "has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
122                         "intraday_multipliers": this.inDayResolutions,
123                         "has_weekly_and_monthly": false,
124                         "has_no_volume": false,
125                         "regular_session": "24x7"
126                     },
127                     {
128                         "name": 'A1905',
129                         "timezone": "Asia/Shanghai",
130                         "pricescale": 100,
131                         "exchange": "NYSE",
132                         "point": 2,
133                         "minmov": 1,
134                         "ticker": 'A1905',
135                         "description": "BOEIGN CO",
136                         "session": "24x7",
137                         "type": "bitcoin",
138                         "has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
139                         "intraday_multipliers": this.inDayResolutions,
140                         "has_weekly_and_monthly": false,
141                         "has_no_volume": false,
142                         "regular_session": "24x7"
143                     },
144                     {
145                         "name": 'RB1905',
146                         "timezone": "Asia/Shanghai",
147                         "pricescale": 100,
148                         "exchange": "NYSE",
149                         "point": 2,
150                         "minmov": 1,
151                         "ticker": 'RB1905',
152                         "description": "BOEIGN CO",
153                         "session": "24x7",
154                         "type": "bitcoin",
155                         "has_intraday": true,//是否具有日内分钟数据，为true 则所在周期在intraday_multipliers数组中提供
156                         "intraday_multipliers": this.inDayResolutions,
157                         "has_weekly_and_monthly": false,
158                         "has_no_volume": false,
159                         "regular_session": "24x7"
160                     },
161                 ],
162                 searchList: [
163                     {
164                         "symbol": "M1905",
165                         "full_name": "NYSE:M1905",
166                         "description": "BOEING CO",
167                         "exchange": "Cboe BZX",
168                         "ticker": "M1905",
169                         "type": "stock"
170                     },
171                     {
172                         "symbol": "C1905",
173                         "full_name": "NYSE:C1905",
174                         "description": "THE CHEMOURS COMPANY LLC",
175                         "exchange": "Cboe BZX",
176                         "ticker": "C1905",
177                         "type": "stock"
178                     },
179                     {
180                         "symbol": "RB1905",
181                         "full_name": "NYSE:RB1905",
182                         "description": "DOMINION ENERGY INC",
183                         "exchange": "Cboe BZX",
184                         "ticker": "RB1905",
185                         "type": "stock"
186                     },
187                     {
188                         "symbol": "A1905",
189                         "full_name": "NYSE:A1905",
190                         "description": "EL PASO ELECTRIC CO",
191                         "exchange": "Cboe BZX",
192                         "ticker": "A1905",
193                         "type": "stock"
194                     },
195                 ],
196                 supported_resolutions: ['1', '5', '15', '30', 'D', 'W', 'M'],
197             }
198         },
199         methods: {
200             createChartData: function () {
201                 var that = this;
202                 Datafeeds.Container = function () {
203                     //this._configuration=configurationData
204                     that._configuration = {
205                         supports_search: false,
206                         supports_group_request: false,
207                         exchanges: [{value: 'DV', name: 'NYSE', desc: 'DeVry Education Group Inc.'}],
208                         supported_resolutions: that.supported_resolutions,
209                         supports_marks: false,
210                         supports_time: false,
211                         supports_timescale_marks: false,
212                         symbols_types: [{name: 'Ny', value: 'dv'}],
213                     }
214                 }
215                 Datafeeds.Container.prototype.onReady = function (callback) {
216                     if (that._configuration) {
217                         setTimeout(function () {
218                             callback(that._configuration);
219                         }, 1000);
220                     }
221                 }
222                 Datafeeds.Container.prototype.resolveSymbol = function (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
223                     var symInfoTemp = null;
224                         if (symbolName == 'M1905')
225                             symInfoTemp = that.symInfo[0]
226                         else if (symbolName == 'C1905')
227                             symInfoTemp = that.symInfo[1];
228                         else if (symbolName == 'A1905')
229                             symInfoTemp = that.symInfo[2];
230                         else symInfoTemp = that.symInfo[3];
231                         setTimeout(function () {
232                             onSymbolResolvedCallback(symInfoTemp);//商品信息
233                         }, 0);
234                 }
235                 Datafeeds.Container.prototype.searchSymbols = function (userInput, exchange, symbolType, onResultReadyCallback) {
236                     setTimeout(function () {
237                         onResultReadyCallback(that.searchList);
238                     }, 0)
239                 }
240                 Datafeeds.Container.prototype.getBars = function (symbolInfo, resolution, timeFrom, timeTo, onDataCallback) {
241                     console.log("resolution: "+resolution);
242                     console.log("timeFrom: "+timeFrom);
243                     console.log("timeTo: "+timeTo);
244                     that.interval = resolution;
245                        that.symbol = symbolInfo.name;
246                     that.changeSearch(that.symbol, that.interval, timeFrom, timeTo);
247                     setTimeout(function () {
248                             onDataCallback(that.dataBar);//商品数据
249                     },1500);
250                 }
251                 Datafeeds.Container.prototype.subscribeBars = function (symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) {
252                 }
253                 Datafeeds.Container.prototype.unsubscribeBars = function (subscribeUID) {
254                 }
255                 return new Datafeeds.Container;
256             },
257             changeSearch: function (symbolName, resolution, timeFrom, timeTo) {
258                 var that = this;
259                 axios.post(host+'getChartData', {
260                     symbolName: symbolName,
261                     resolution: resolution,
262                     timeFrom: timeFrom,
263                     timeTo: timeTo,
264                 }).then(res => {
265                      if(res.data.result_code == "success"){
266                          var chartData = res.data.data;
267                          that.dataBar.splice(0, that.dataBar.length);
268                          for (var i = 0; i < chartData.chartDataTime.length; i++) {
269                              var time = chartData.chartDataTime[i];
270                               var high = chartData.chartDataHigh[i];
271                               var low = chartData.chartDataLow[i];
272                               var close = chartData.chartDataClose[i];
273                               var open = chartData.chartDataOpen[i];
274                               var volume = chartData.chartDataVolume[i];
275                               that.dataBar.push({
276                                   time: time,
277                                   close: close,
278                                   open: open,
279                                   high: high,
280                                   low: low,
281                                   volume: volume
282                               })
283                           }
284                     }
285                 });
286 
287             },
288 
289         },
290         watch: {
291             symbol: function(val){
292                 var that = this;
293                 that.chart.setSymbol(that.symbol, that.interval, function () {
294 
295                 });
296             }
297         }
298     });
299     var ap = {
300         data: function () {
301             return {
302 
303             }
304         },
305         methods: {
306             getVal: function (symbol) {
307                 vm.symbol = symbol;
308             }
309         }
310     };
311     var Ctor = Vue.extend(ap);
312     new Ctor().$mount('#app');
313 
314 </script>
315 <style>
316     #app{
317         float: right;
318         margin-right: 10%;
319     }
320 </style>
321 </html>
TradingView
工作需要，点击按钮进行切换商品：如图
查看全文
相关阅读:
Android Studio 活动启动模式
 Android Studio 活动的生命周期
 OA表单制作（致远）
打开excel打印时报“不能使用对象链接和嵌入”
C#面对对象之封装、继承、多态的简单理解
 C#上手练习7（构造方法语句）
C#上手练习7（方法语句2）
C#上手练习6（方法语句1）
C#上手练习5（GOTO语句）
C#上手练习4（Break、CONITINUE语句）
原文地址：https://www.cnblogs.com/xsmile/p/10537637.html
vue 中 使用 tradingview

vue 中使用 tradingview
