vue 中 使用 tradingview

特斯比特 2021-11-22 10:40:57

加载页面时初始化方法 mounted

可以在 mounted 方法中调用 methods 的中的方法

使用 data 中的数据时在每个方法的开始推荐先定义 var that = this

现在还不明白开始时为什么执行两次 resolveSymbol 方法

不要纠结页面的数据怎么获取到某个方法中的它自己就获取了。例如 resolveSymbol 方法根据商品名称解析商品信息。你在输入框中输入某个商品时值自动被 resolveSymbol 方法获取。

 在 gerBar 方法中执行回调函数的时候eg settimeoutcallback 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&#61;&#34;icon&#34; href&#61;&#34;https://static.jianshukeji.com/highcharts/images/favicon.ico&#34;>  5     <meta name&#61;&#34;viewport&#34; content&#61;&#34;width&#61;device-width, initial-scale&#61;1&#34;>  6     <script src&#61;&#34;https://cdn.staticfile.org/vue/2.2.2/vue.min.js&#34;></script>  7     <script src&#61;&#34;//unpkg.com/vue/dist/vue.js&#34;></script>  8     <script src&#61;&#34;//unpkg.com/element-ui&#64;2.4.11/lib/index.js&#34;></script>  9     <script src&#61;&#34;https://img.hcharts.cn/highcharts/highcharts.js&#34;></script> 10     <script src&#61;&#34;https://img.hcharts.cn/highcharts/modules/exporting.js&#34;></script> 11     <script src&#61;&#34;https://img.hcharts.cn/highcharts/modules/series-label.js&#34;></script> 12     <script src&#61;&#34;https://img.hcharts.cn/highcharts/modules/oldie.js&#34;></script> 13     <script src&#61;&#34;https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js&#34;></script> 14     <link rel&#61;&#34;stylesheet&#34; type&#61;&#34;text/css&#34; href&#61;&#34;//unpkg.com/element-ui&#64;2.4.11/lib/theme-chalk/index.css&#34;> 15     <script type&#61;&#34;text/javascript&#34; src&#61;&#34;/static/charting_library-master/charting_library/charting_library.min.js&#34;></script> 16     <script type&#61;&#34;text/javascript&#34; src&#61;&#34;/static/charting_library-master/datafeeds/udf/dist/polyfills.js&#34;></script> 17     <script type&#61;&#34;text/javascript&#34; src&#61;&#34;/static/charting_library-master/datafeeds/udf/dist/bundle.js&#34;></script> 18 </head> 19  20 <body> 21 <div id&#61;&#34;app&#34;> 22 <el-button type&#61;&#34;primary&#34; &#64;click&#61;&#34;getVal('M1905')&#34;>M1905</el-button> 23 <el-button type&#61;&#34;primary&#34; &#64;click&#61;&#34;getVal('C1905')&#34;>C1905</el-button> 24 <el-button type&#61;&#34;primary&#34; &#64;click&#61;&#34;getVal('RB1905')&#34;>RB1905</el-button> 25 <el-button type&#61;&#34;primary&#34; &#64;click&#61;&#34;getVal('A1905')&#34;>A1905</el-button> 26 </div> 27 <div id&#61;&#34;tv_chart_container&#34;></div> 28  29 </body> 30 <!-- 先引入 Vue --> 31 <script src&#61;&#34;/static/js/vue.min.js&#34;></script> 32 <script src&#61;&#34;/static/js/axios.min.js&#34;></script> 33 <!-- 引入组件库 --> 34 <script src&#61;&#34;/static/js/index.js&#34;></script> 35 <script src&#61;&#34;http://cdn.hcharts.cn/highcharts/modules/data.js&#34;></script> 36 <script type&#61;&#34;text/javascript&#34;> 37  38     var host &#61; window.location; 39  40     var vm &#61; new Vue({ 41         el: 'tv_chart_container', 42         mounted: function () { 43             var that &#61; this; 44             that.chart_data &#61; that.createChartData(); 45             TradingView.onready(function () { 46                 that.chart &#61; window.tvWidget &#61; new TradingView.widget({ 47                     symbol: 'M1905', 48                     height: '900', 49                     width: '1500', 50                     interval: that.interval, 51                     toolbar_bg: '#c5c5c8', 52                     timezone: 'Asia/Shanghai', 53                     time_frames: [ 54                         {text: &#34;1h&#34;, resolution: &#34;1&#34;}, 55                         {text: &#34;6h&#34;, resolution: &#34;15&#34;}, 56                         {text: &#34;1d&#34;, resolution: &#34;30&#34;}, 57                         {text: &#34;3d&#34;, resolution: &#34;30&#34;}, 58                         {text: &#34;1w&#34;, resolution: &#34;30&#34;}, 59                         {text: &#34;1m&#34;, resolution: &#34;1D&#34;}, 60                         {text: &#34;3m&#34;, resolution: &#34;1D&#34;}, 61                         {text: &#34;6m&#34;, resolution: &#34;3D&#34;}, 62                         {text: &#34;1y&#34;, resolution: &#34;1W&#34;}, 63                         {text: &#34;100y&#34;, resolution: &#34;W&#34;, description: &#34;All&#34;, title: &#34;All&#34;}, 64                     ], 65                     container_id: 'tv_chart_container', 66                     library_path: '/static/charting_library-master/charting_library/', 67                     locale: 'zh', 68                     //datafeed: new Datafeeds.UDFCompatibleDatafeed(&#34;https://demo_feed.tradingview.com&#34;), 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                         &#34;name&#34;: 'M1905', 99                         &#34;timezone&#34;: &#34;Asia/Shanghai&#34;,100                         &#34;pricescale&#34;: 500,101                         &#34;minmov&#34;: 1,102                         &#34;ticker&#34;: 'M1905',103                         &#34;description&#34;: &#34;DIdontKnow&#34;,104                         &#34;session&#34;: &#34;0900-1630&#34;,105                         &#34;type&#34;: &#34;stock&#34;,106                         &#34;has_intraday&#34;: true,107                         &#34;intraday_multipliers&#34;: this.inDayResolutions,108                         &#34;has_weekly_and_monthly&#34;: false,109                     },110                     {111                         &#34;name&#34;: 'C1905',112                         &#34;timezone&#34;: &#34;Asia/Shanghai&#34;,113                         &#34;pricescale&#34;: 100,114                         &#34;exchange&#34;: &#34;NYSE&#34;,115                         &#34;point&#34;: 2,116                         &#34;minmov&#34;: 1,117                         &#34;ticker&#34;: 'C1905',118                         &#34;description&#34;: &#34;BOEIGN CO&#34;,119                         &#34;session&#34;: &#34;24x7&#34;,120                         &#34;type&#34;: &#34;bitcoin&#34;,121                         &#34;has_intraday&#34;: true,//是否具有日内分钟数据为true 则所在周期在intraday_multipliers数组中提供122                         &#34;intraday_multipliers&#34;: this.inDayResolutions,123                         &#34;has_weekly_and_monthly&#34;: false,124                         &#34;has_no_volume&#34;: false,125                         &#34;regular_session&#34;: &#34;24x7&#34;126                     },127                     {128                         &#34;name&#34;: 'A1905',129                         &#34;timezone&#34;: &#34;Asia/Shanghai&#34;,130                         &#34;pricescale&#34;: 100,131                         &#34;exchange&#34;: &#34;NYSE&#34;,132                         &#34;point&#34;: 2,133                         &#34;minmov&#34;: 1,134                         &#34;ticker&#34;: 'A1905',135                         &#34;description&#34;: &#34;BOEIGN CO&#34;,136                         &#34;session&#34;: &#34;24x7&#34;,137                         &#34;type&#34;: &#34;bitcoin&#34;,138                         &#34;has_intraday&#34;: true,//是否具有日内分钟数据为true 则所在周期在intraday_multipliers数组中提供139                         &#34;intraday_multipliers&#34;: this.inDayResolutions,140                         &#34;has_weekly_and_monthly&#34;: false,141                         &#34;has_no_volume&#34;: false,142                         &#34;regular_session&#34;: &#34;24x7&#34;143                     },144                     {145                         &#34;name&#34;: 'RB1905',146                         &#34;timezone&#34;: &#34;Asia/Shanghai&#34;,147                         &#34;pricescale&#34;: 100,148                         &#34;exchange&#34;: &#34;NYSE&#34;,149                         &#34;point&#34;: 2,150                         &#34;minmov&#34;: 1,151                         &#34;ticker&#34;: 'RB1905',152                         &#34;description&#34;: &#34;BOEIGN CO&#34;,153                         &#34;session&#34;: &#34;24x7&#34;,154                         &#34;type&#34;: &#34;bitcoin&#34;,155                         &#34;has_intraday&#34;: true,//是否具有日内分钟数据为true 则所在周期在intraday_multipliers数组中提供156                         &#34;intraday_multipliers&#34;: this.inDayResolutions,157                         &#34;has_weekly_and_monthly&#34;: false,158                         &#34;has_no_volume&#34;: false,159                         &#34;regular_session&#34;: &#34;24x7&#34;160                     },161                 ],162                 searchList: [163                     {164                         &#34;symbol&#34;: &#34;M1905&#34;,165                         &#34;full_name&#34;: &#34;NYSE:M1905&#34;,166                         &#34;description&#34;: &#34;BOEING CO&#34;,167                         &#34;exchange&#34;: &#34;Cboe BZX&#34;,168                         &#34;ticker&#34;: &#34;M1905&#34;,169                         &#34;type&#34;: &#34;stock&#34;170                     },171                     {172                         &#34;symbol&#34;: &#34;C1905&#34;,173                         &#34;full_name&#34;: &#34;NYSE:C1905&#34;,174                         &#34;description&#34;: &#34;THE CHEMOURS COMPANY LLC&#34;,175                         &#34;exchange&#34;: &#34;Cboe BZX&#34;,176                         &#34;ticker&#34;: &#34;C1905&#34;,177                         &#34;type&#34;: &#34;stock&#34;178                     },179                     {180                         &#34;symbol&#34;: &#34;RB1905&#34;,181                         &#34;full_name&#34;: &#34;NYSE:RB1905&#34;,182                         &#34;description&#34;: &#34;DOMINION ENERGY INC&#34;,183                         &#34;exchange&#34;: &#34;Cboe BZX&#34;,184                         &#34;ticker&#34;: &#34;RB1905&#34;,185                         &#34;type&#34;: &#34;stock&#34;186                     },187                     {188                         &#34;symbol&#34;: &#34;A1905&#34;,189                         &#34;full_name&#34;: &#34;NYSE:A1905&#34;,190                         &#34;description&#34;: &#34;EL PASO ELECTRIC CO&#34;,191                         &#34;exchange&#34;: &#34;Cboe BZX&#34;,192                         &#34;ticker&#34;: &#34;A1905&#34;,193                         &#34;type&#34;: &#34;stock&#34;194                     },195                 ],196                 supported_resolutions: ['1', '5', '15', '30', 'D', 'W', 'M'],197             }198         },199         methods: {200             createChartData: function () {201                 var that &#61; this;202                 Datafeeds.Container &#61; function () {203                     //this._configuration&#61;configurationData204                     that._configuration &#61; {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 &#61; function (callback) {216                     if (that._configuration) {217                         setTimeout(function () {218                             callback(that._configuration);219                         }, 1000);220                     }221                 }222                 Datafeeds.Container.prototype.resolveSymbol &#61; function (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {223                     var symInfoTemp &#61; null;224                         if (symbolName &#61;&#61; 'M1905')225                             symInfoTemp &#61; that.symInfo[0]226                         else if (symbolName &#61;&#61; 'C1905')227                             symInfoTemp &#61; that.symInfo[1];228                         else if (symbolName &#61;&#61; 'A1905')229                             symInfoTemp &#61; that.symInfo[2];230                         else symInfoTemp &#61; that.symInfo[3];231                         setTimeout(function () {232                             onSymbolResolvedCallback(symInfoTemp);//商品信息233                         }, 0);234                 }235                 Datafeeds.Container.prototype.searchSymbols &#61; function (userInput, exchange, symbolType, onResultReadyCallback) {236                     setTimeout(function () {237                         onResultReadyCallback(that.searchList);238                     }, 0)239                 }240                 Datafeeds.Container.prototype.getBars &#61; function (symbolInfo, resolution, timeFrom, timeTo, onDataCallback) {241                     console.log(&#34;resolution: &#34;&#43;resolution);242                     console.log(&#34;timeFrom: &#34;&#43;timeFrom);243                     console.log(&#34;timeTo: &#34;&#43;timeTo);244                     that.interval &#61; resolution;245                        that.symbol &#61; 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 &#61; function (symbolInfo, resolution, onRealtimeCallback, subscriberUID, onResetCacheNeededCallback) {252                 }253                 Datafeeds.Container.prototype.unsubscribeBars &#61; function (subscribeUID) {254                 }255                 return new Datafeeds.Container;256             },257             changeSearch: function (symbolName, resolution, timeFrom, timeTo) {258                 var that &#61; this;259                 axios.post(host&#43;'getChartData', {260                     symbolName: symbolName,261                     resolution: resolution,262                     timeFrom: timeFrom,263                     timeTo: timeTo,264                 }).then(res &#61;> {265                      if(res.data.result_code &#61;&#61; &#34;success&#34;){266                          var chartData &#61; res.data.data;267                          that.dataBar.splice(0, that.dataBar.length);268                          for (var i &#61; 0; i < chartData.chartDataTime.length; i&#43;&#43;) {269                              var time &#61; chartData.chartDataTime[i];270                               var high &#61; chartData.chartDataHigh[i];271                               var low &#61; chartData.chartDataLow[i];272                               var close &#61; chartData.chartDataClose[i];273                               var open &#61; chartData.chartDataOpen[i];274                               var volume &#61; chartData.chartDataVolume[i];275                               that.dataBar.push({276                                   time: time,277                                   close: close,278                                   open: open,279                                   high: high,280                                   low: low,281                                   volume: volume282                               })283                           }284                     }285                 });286 287             },288 289         },290         watch: {291             symbol: function(val){292                 var that &#61; this;293                 that.chart.setSymbol(that.symbol, that.interval, function () {294 295                 });296             }297         }298     });299     var ap &#61; {300         data: function () {301             return {302 303             }304         },305         methods: {306             getVal: function (symbol) {307                 vm.symbol &#61; symbol;308             }309         }310     };311     var Ctor &#61; 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  

 工作需要点击按钮进行切换商品 如图

声明：本文内容不代表斑马投诉网站观点，内容仅供参考，不构成投资建议。投资有风险，选择需谨慎！ 如涉及内容、版权等问题，请联系我们，我们会在第一时间作出调整！
上一篇: TradingView Demo (火币数据)

相关文章