<template>
    <div id="app">
        <!--把子组件放到想放的位置-->
        <Vue-kline></Vue-kline>
    </div>
    </template>
    <script>
    import VueKline from "vue-kline"; //当前页引入vue-kline
    export default {
      components: {
          VueKline,                   //以子组件形式注册到当前页面中
      },
    };
    </script>

  <template>
    <div id="app">
        <!--把子组件放到想放的位置-->
        <Vue-kline></Vue-kline>
    </div>
    </template>
    <script>
    import VueKline from "./src/kline/kline"; //当前页引入vue-kline(引入方式不同,其他方式相同,注意要改你自己的路径)
    export default {
      components: {
          VueKline,                   //以子组件形式注册到当前页面中
      },
    };
    </script>
  

    <template>
      <div class="container">
        <!-- :klineParams="klineParams" :klineData="klineData" 绑定下面data数据 用于自定制数据传输到vue-kline, ref="callMethods"绑定一个DOM事件 用于调用接口  --->
        <Vue-kline :klineParams="klineParams" :klineData="klineData" ref="callMethods" @refreshKlineData="refreshKlineData"></Vue-kline>
      </div>
    </template>
    <script>
    import VueKline from "vue-kline";
    import axios from "axios"
    export default {
      components: {
        ...
        VueKline
      },
      data() {
        return {
          klineParams: {
            width: 600,               // k线窗口宽
            height: 400,              // k线窗口高
            theme: "dark",            // 主题颜色
            language: "zh-cn",        //语言
            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],  // 聚合选项
            symbol: "BTC",            // 交易代号
            symbolName: "BTC/USD",    // 交易名称
            intervalTime: 5000,       // k线更新周期 毫秒
            depthWidth: 50,           // 深度图宽度
            count: 2                  //显示指标数量 默认两个  
          },
          klineData: {};              // 数据
      }},
      mounted(){
        this.refreshKlineData(900000);// 进入页面时执行,默认聚合时间900000毫秒(15分钟)     
      },
      methods:{                       
          requestData(){              //方法名任意取 
            this.$axios.request({
            url: "xxxxx",             //请求地址  
            method: "POST"
          })
          .then(ret => {
            this.klineData = ret.data      // 把返回数据赋值到上面的 klineData, 
            this.$refs.callMethods.kline.chartMgr.getChart().updateDataAndDisplay(ret.data.data.lines); //强制更改缓存中的lines值,防止显示不同步
          });
          },  
          refreshKlineData(option){
              if (option===900000){ //如果时间等于15分钟
                    this.requestData();  
              }
          },                  
        // 以下可根据使用场景调用内部自定制方法(如果不需要就不写)
        this.$refs.callMethods.resize(int width, int height);
        this.$refs.callMethods.setSymbol(string symbol, string symbolName)
        this.$refs.callMethods.setTheme(string style);
        this.$refs.callMethods.setLanguage(string lang);
        this.$refs.callMethods.setIntervalTime(int intervalTime);
        this.$refs.callMethods.setDepthWidth(int width);
        this.$refs.callMethods.onRangeChange();
        this.$refs.callMethods.redraw();
      }
    };
    </script>

    <div id="kline_container"></div>
    <script src="html/lib/jquery.js"></script>
    <script src="html/lib/jquery.mousewheel.js"></script>
    <script src="html/dist/kline.js"></script>
    <script>
        kline = new Kline({
            element: "#kline_container",
            symbol: "BTC",
            symbolName: "比特币",
            height: 650,
            width: 1200,
            theme: 'dark',
            language: 'zh-cn',
            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
            limit: 1000,
            intervalTime: 1000,
            depthWidth: 100,
        });

        params = "";
        kline.onRequestData = function onRequestData(params, callback) {
            let data = "这里是你的数据"
            callback(data)
        }
        kline.draw();
    </script>