vue使用tradingview第一步图表初始化（别的框架可以借鉴）

本教程比较长，分为2篇发，第一篇为完成图表初始化，第二篇为完成数据接入

第二篇：传送门

1. 先附上tradingview的文档：查看文档
2. 图表本身的文件请向官方发邮件申请（贼麻烦，感觉一部分公司审核通过不了）官方git仓库
3. 推荐一个大神的作品，一开始我也是这样使用的不过后来因为一些原因使用了api的接入方式：https://github.com/webdatavisualdev/vue-tradingview

接下来正式上教程：

1：有些教程是先在index.html中引入chart/charting_library.min.js文件，不过我对文件进行了一些处理（利用export将tradingview导出，不能在这里放出来了），所以只需要在使用的组件中引入即可（直接在index.html中引入charting_library.min.js也是可以达到效果的）

2：创建图表的容器，导入相关文件在生命周期函数mounted中对图表进行初始化（更多设置请查看官方api）

<div id="chart_container"></div>

//数据处理都在这里
import { DataFeeds } from "../../static/chart/datafeed.js";

import { TradingView } from "../../static/chart/charting_library.min.js";

data(){
   return{
      code:'BTC',
      study: [],
      table: null,
      widget: null
   }
},
methods:{
   init() {
      const FALL = "#e34c4c";
      const RAISE = "#00b38f";

      this.widget = new TradingView.widget({
        width: this.$refs.chart.clientWidth,//图的宽
        height: this.$refs.chart.clientHeight,//图的高
        //autosize:true//自动图表大小,经过使用发现没效果。。
        symbol: this.code,//商品名
        container_id: "chart_container",//显示位置
        //参数是数据地址和获取数据频率
        datafeed: new DataFeeds.UDFCompatibleDatafeed(base.market, 2000),
        timezone: "Asia/Hong_Kong",//时区
        interval: "1",//图的周期
        library_path: "../../static/chart/",//本地的图表文件
        locale: "zh",//语言
        preset: "mobile",
        charts_storage_url: "http://saveload.tradingview.com",
        charts_storage_api_version: "1.1",
        user_id: "jailecoeu",
        disabled_features: [//一些需要关闭的功能
          "use_localstorage_for_settings",
          "display_market_status",
          ....
        ],
        enabled_features: [
          "study_templates",
          "keep_left_toolbar_visible_on_small_screens",
          "side_toolbar_in_fullscreen_mode",
          "property_pages"
        ],
        studies_overrides: {
          //柱状颜色修改
          "volume.volume.color.0": FALL,
          "volume.volume.color.1": RAISE,
          "volume.volume.transparency": 30
        },
        overrides: {
          //覆盖操作
          // "paneProperties.background": "#20334d",背景色
          "paneProperties.vertGridProperties.color": "#f8f8f8",
          "paneProperties.horzGridProperties.color": "#f8f8f8",
          "paneProperties.legendProperties.showSeriesTitle": false,
          "paneProperties.legendProperties.showLegend": false,
          "mainSeriesProperties.candleStyle.upColor": RAISE,
          "mainSeriesProperties.candleStyle.downColor": FALL,
          "mainSeriesProperties.candleStyle.drawWick": true,
          "mainSeriesProperties.candleStyle.drawBorder": false,
          "mainSeriesProperties.candleStyle.borderUpColor": RAISE,
          "mainSeriesProperties.candleStyle.borderDownColor": FALL,
          "mainSeriesProperties.candleStyle.wickUpColor": RAISE,
          "mainSeriesProperties.candleStyle.wickDownColor": FALL,
          "mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,
          "mainSeriesProperties.areaStyle.color1": "#32577a",
          "mainSeriesProperties.areaStyle.color2": "#ffffff",
          "mainSeriesProperties.areaStyle.linecolor": "#32577a",
          "mainSeriesProperties.areaStyle.linestyle": 0,
          "mainSeriesProperties.areaStyle.linewidth": 2,
          "mainSeriesProperties.areaStyle.priceSource": "close",
          "symbolWatermarkProperties.color": "rgba(0, 0, 0, 0)"
        }
      });
      let widget = this.widget;
      widget.onChartReady(() => {
        if (this.widget === null) return;
        this.table = this.widget.chart();
        this.table.createStudy(//显示成交量
          "Volume",
          false,
          false,
          [],
          entityId => {
            this.study[0] = entityId;
          },
          {
            "volume ma.color": "rgba(132,170,213,0.7)"
          }
        );
        this.table.setChartType(3);//3为分时图，1为K线图
      });
    }
}

3：完成了上面这些，便完成了图表的初始化，接下来便是最关键的数据的接入