vueでのTradingViewの使用方法(本文)

公式サイトに行ってファイルパッケージをダウンロードした後(詳しくは前編を参照)、indexを通じて.htmlファイル、以下の3つのファイルが導入しなければならないファイルとファイルライブラリであることを知っています

charting_library      /*   */
polyfills.js        /*js  */
bundle.js       /*js  */

htmlファイルをvueコンポーネントに変換することです

以上の3つのjsファイルとライブラリをvueルートディレクトリのstaticフォルダの下

に置く.

Tvをindexに入れます.htmlに導入する3つのファイルは、vueルートディレクトリの下のエントリファイルindexを通過する.html導入(コンポーネントに導入するとエラーが発生する)

cssをカスタマイズするにはcharting_libraryファイルの下のstaticディレクトリの下でカスタムcssファイル

を新規作成

上のコード、方法パラメータはAPI

を参照することができる
注意:このdemoはUDFで、UDFとは何ですか?UDFは、HTTPプロトコルに基づく単純かつ効率的な方法でグラフライブラリにデータを提供することを目的としている.どうやって使うの?データベースからデータを取得し、グラフ・ライブラリのリクエストに応答できるように、小型のHTTPサービスを作成する必要があります.
はっきり言ってhttpリクエストでデータを取得し、もう1つは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>