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

本教程比较长分为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完成了上面这些便完成了图表的初始化接下来便是最关键的数据的接入