手把手教你vue中如何使用TradingView

1、去官方仓库（地址）下载代码到本地

2、进到项目文件夹 => 可用node启动项目 => npm install http-server -g => http-server -p 9090

3、通过index.html文件，知道以下三个文件是必须要引入的文件和文件库

<script type="text/javascript" src="charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/bundle.js"></script>

即

charting_library      /*文件夹*/
polyfills.js        /*js文件*/
bundle.js       /*js文件*/

把以上三个js文件与文件库放到vue根目录下的static文件夹下
把tradingview中在index.html中引入的三个文件，通过vue根目录下面的入口文件index.html引入
在对应的组件引入tradingview---这里的构造器 widget 配置可查看官方文档（地址）

<template><div id="tv_chart_container" style="width: 652px;height: 350px;margin:auto"></div>
</template><script>export default {name:'...',data(){return{}},mounted(){var widget = window.tvWidget = new TradingView.widget({fullscreen: true,symbol: '164',  //商品标识interval: '1D',  //初始化显示的时间范围container_id: "tv_chart_container",datafeed: new Datafeeds.UDFCompatibleDatafeed("...",10000), library_path: "../../static/charting_library/",locale: "zh",autosize: true,timezone:"Asia/Shanghai",toolbar_bg:"#121c31",custom_css_url:'style/black.css',drawings_access: { type: 'black', tools: [ { name: "Regression Trend" } ] },disabled_features: [ //禁用功能（隐藏图标按钮）数组"use_localstorage_for_settings"...],overrides:{//覆盖操作"mainSeriesProperties.style": 8,'paneProperties.background': "#121c31",'paneProperties.vertGridProperties.color': "#1C2843",'paneProperties.horzGridProperties.color': "#1C2843",'paneProperties.crossHairProperties.color': "#bcc4d0",'mainSeriesProperties.haStyle.upColor': "#09BB07",'mainSeriesProperties.haStyle.downColor': "#F03869",'scalesProperties.fontSize': 11,},studies_overrides: {//柱状颜色修改"volume.volume.color.0": "#F03869","volume.volume.color.1": "#09BB07"}});}}
</script>
<style>iframe{height: 350px !important;}
</style>

4、相信用vue的你一定有node环境，用node启动你的项目 => 如果有报错，就根据错误提示修改

常见错误，可能会有跨域错误和数据引入错误，这里可自行搜索解决方案，这样的解决方案网上很多

5、最后迭代知识（上面几步做好之后，基本快速入门了，然后想对tradingview更加熟悉，不推荐直接看文档，而是先看教程）

最后，感谢你的阅读。。。如果对你有帮助，或者你在此基础上学到了一点东西，或是自己在此基础上摸索出来一些东西，希望你能本着开源精神分享你的知识

手把手教你vue中如何使用TradingView相关推荐

手把手教你solidworks中的齿轮配合
手把手教你solidworks中的齿轮配合 1.建立装配图,在装配体中导入两个齿轮. 2.把齿轮1固定改为浮动 3.如下图所示选中隐藏/显示主要基准面. 4.选中上视基准面和右视基准面,点击参考面之下 ...
手把手教你pyqt中.qrc图片文件的编写和使用
pyqt.qrc图片文件的编写和使用 pyqt图片资源文件的引用 0x00说明: 可以通过qrc文件将我们要用的图片转化成py代码, 然后引入到需要用到的地方. 这将有利于将程序打包成exe后图片的正 ...
手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...
手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
base64 能放数组里面么_手把手教你Vue解析pdf(base64)转图片【实践】
作者:yeyan1996 转发链接:https://juejin.im/post/5bc97ab6e51d450e5d0b7dcb 公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示 ...
vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~
1.安装配置 - 安装 $ npm install vue-i18n 或者: <script src="https://unpkg.com/vue/dist/vue.js"& ...
手把手教你Vue从零撸一个迷你版MVVM框架
这段时间在工作之余的休息时间,学习了解Vue ,学习Vue的设计思想,通过Vue官网学习Vue的语法,通过Vue前端技术,搭建构建了一个简单的项目,在项目学习完之后,发现Vue是一个很有意思的前端技 ...
手把手教你Vue项目实现本地Docker部署
近几年来,Docker 技术的应用已经越来越流行,目前已经产生前端工程Docker 化,身为前端开发的我,花了几天时间研究了下 Docker 的知识点,并实现了 Docker 本地部署 Vue 项目. ...
局域网中搜计算机无法访问,怎么找不到共享电脑,手把手教你局域网中共享电脑找不到怎么办...
在日常的工作或生活中,很多的用户会直接将文件共享给同事或朋友.但是很多刚接触电脑的朋友说,在电脑接入局域网的时候发现看不到其他电脑.那么局域网中看不到其他电脑怎么办呢?下面,小编就来跟大家分享局域网中 ...
腾讯T2大牛手把手教你！中软国际java培训视频
前言疫情过去,真正的春暖花开又回来了,时不时的可以和朋友约个饭,感慨今年的工作竞争压力很大,工作很不好找.作为一个开发人员,你是否面上了理想的公司,拿到了理想中的薪资? 作为程序员,跳槽就是最好的涨 ...

手把手教你vue中如何使用TradingView

手把手教你vue中如何使用TradingView相关推荐

最新文章

热门文章