vue使用tradingview生成k线图（第一天）

特斯比特 2021-11-17 10:48:37

网上很多项目运行的时候没有问题;但是拷贝到自己的vue最新版里面去，就要报很多错误;一般情况都是因为创建k线图的时候配置有问题;这里我已经处理兼容新版vue的资源;需要的可以下载。


下载后的目录结构如图;

步骤一、引入js。

“custom_scripts”是k线图相关的js文件;vue项目需要放在“public”文件夹下;然后在public下的index.html文件中引入js。相关代码;

<!DOCTYPE html>
<html lang&#61;&#34;&#34;>
<head>
    <meta charset&#61;&#34;utf-8&#34;>
    <meta http-equiv&#61;&#34;X-UA-Compatible&#34; content&#61;&#34;IE&#61;edge&#34;>
    <meta name&#61;&#34;viewport&#34; content&#61;&#34;width&#61;device-width,initial-scale&#61;1.0&#34;>
    <link rel&#61;&#34;icon&#34; href&#61;&#34;<%&#61; BASE_URL %>favicon.ico&#34;>
    <title><%&#61; htmlWebpackPlugin.options.title %></title>
    <script type&#61;&#34;text/javascript&#34; src&#61;'<%&#61; BASE_URL %>/custom_scripts/chart_main/charting_library.min.js'></script><!--核心代码-->
</head>
<body>
    <div id&#61;&#34;app&#34;></div>
</body>
</html>

 步骤二、使用组件。

“tradingview”文件是一个组件;可以放在“components”目录下;其他地方引入后直接就可以使用了。参考目录;

步骤三、最后效果;

 其他版本常见错误

1.contentWindow.widgetReady is not function。//配置有问题。

2.如果没有报错但是k线图也没有线图多半是“charting_library.min.js”下的如下代码

window.addEventListener(&#34;DOMContentLoaded&#34;, t, !1)

vue最新版项目兼听不到“DOMContentLoaded”dom加载的这个事件也就不会触发onReady回调了需要将其事件改为“load”。

window.addEventListener(&#34;load&#34;, t, !1)
声明：本文内容不代表斑马投诉网站观点，内容仅供参考，不构成投资建议。投资有风险，选择需谨慎！ 如涉及内容、版权等问题，请联系我们，我们会在第一时间作出调整！
上一篇: tradingview 交易量和k线分离且变小交易量区域

相关文章