vue中如何使用TradingView （正文）

去官网下载完文件包之后（详见上一篇），通过index.html文件，知道以下三个文件是必须要引入的文件和文件库

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

现在要做的就是把html文件转成vue组件

把以上三个js文件与文件库放到vue根目录下的static文件夹下
把Tv中在index.html中引入的三个文件，通过vue根目录下面的入口文件index.html引入（在组件中引入很产生错误）
如果要自定义css,最好在charting_library文件下面的static目录下新建自定义css文件
上代码，方法参数可以参照API

注意：此demo 是UDF，
什么是UDF？UDF是基于HTTP协议的旨在以简单有效的方式向图表库提供数据。
该怎么使用它? 您应该创建小型的HTTP服务，让它从您的数据库中获取数据并响应图表库请求

说白了就是通过http 请求获取数据，另一种是websocket通过后台推送获取数据（websocket参照文档JS API）

中文API链接

<template>
    <div id="tv_chart_container" style="width: 652px;height: 350px;margin:auto"></div>
</template>

<script>
  export default {
    name:'tv',
    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("http://kline.tunnel.qydev.com",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>

vue中如何使用TradingView （正文）

猜你喜欢