用vue.js實現的期貨,股票的實時k線

項目地址: https://github.com/zhengquantao/vue-Kline

vue-kline

效果圖

Build Setup

本項目基於Vue的k線圖.某K線插件作了一些封裝和二次開發,使其更加便於使用和修改,方便後來的開發者. 修改主要涉及如下幾個點:css

使用 webpack 打包 js/css/images/*.vue
使用 vue.js 對原有代碼進行了拆分和封裝支持全部vue版本
刪除了一些沒必要要的邏輯
把源碼中經常使用可配置的部分抽出來
增長對外接口及事件回調
超級簡單的組件引入方式,不用在乎其背後的實現原理,真正作到快速上手,快速開發

演示地址

簡單效果Demo

Requirements

jquery
jquery.mousewheel

安裝和使用

安裝html

$ npm install vue-kline 
    OR
  only download src （不推薦,要改變import引入路徑和本身安裝依賴,對新人不友好）

使用組件方式引入, 放在想添加的頁面上

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

OR 僅僅下載src文件

<template>
    <div id="app">
        <!--把子組件放到想放的位置-->
        <Vue-kline></Vue-kline>
    </div>
    </template>
    <script>
 import VueKline from "./src/kline"; //當前頁引入vue-kline(引入方式不一樣,其餘方式相同,注意要改你本身的路徑)
 export default {
 components: {
 VueKline, //以子組件形式註冊到當前頁面中
 },
 };
</script>

自定製(沒有使用Vuex做爲組件數據轉輸方式,而是用:xxxx數據綁定方式, 因此vue-kline很輕便、簡單)

<template>
      <div class="container">
        <!-- :klineParams="klineParams" :klineData="klineData" 綁定下面data數據 用於自定製數據傳輸到vue-kline, ref="callMethods"綁定一個DOM事件 用於調用接口 --->
        <Vue-kline :klineParams="klineParams" :klineData="klineData" ref="callMethods"></Vue-kline>
      </div>
    </template>
    <script>
 import VueKline from "vue-kline";
 improt 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 // 深度圖寬度
 },
 klineData: {}; // 數據
 },
 computed: { // 固然你能夠寫在methods中, 我這裏寫到computed中
 requestData(){ //方法名任意取 
 this.$axios.request({
 url: "xxxxx", //請求地址 
 method: "POST"
 })
 .then(ret => {
 this.klineData = ret // 把返回數據賦值到上面的 klineData, 
 });
 }, 
 },
 mounted(){
 this.requestData; // 進入頁面時執行 requestData()
 },
 methods:{ // 可根據使用場景調用內部自定製方法(若是不須要就不寫)
 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>

參數

klineParams:{}  // K線圖參數(具體參數看 構建選項)
klineData:{}    // 數據(只需把指定數據放到這裏便可渲染出K線)

構建選項

參數名稱	參數說明	默認值
`width`	寬度 (px)	600
`height`	高度度 (px)	400
`theme`	主題 dark(暗色)/light(亮色)	dark
`language`	語言 zh-cn(簡體中文)/en-us(英文)/zh-tw(繁體中文)	zh-cn
`ranges`	聚合選項 1w/1d/12h/6h/4h/2h/1h/30m/15m/5m/3m/1m/line (w:周, d:天, h:小時, m:分鐘, line:分時數據)	["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"]
`symbol`	交易代號
`symbolName`	交易名稱
`intervalTime`	請求間隔時間(ms)	3000
`depthWidth`	深度圖寬度	最小50，小於50則取50，默認50

方法

redraw()vue

從新繪製線條node

this.$refs.callMethods.redraw();

resize(int width, int height)jquery

設置畫布大小webpack

this.$refs.callMethods.resize(1200, 550);

setSymbol(string symbol, string symbolName)ios

設置交易品種git

this.$refs.callMethods.setSymbol('usd/btc', 'USD/BTC');

setTheme(string style)程序員

設置主題github

this.$refs.callMethods.setTheme('dark');  // dark/light

setLanguage(string lang)

設置語言

this.$refs.callMethods.setLanguage('en-us');  // en-us/zh-ch/zh-tw

setIntervalTime(int intervalTime)

設置請求間隔時間(ms)

this.$refs.callMethods.setIntervalTime(5000);

setDepthWidth(int width)

設置深度圖寬度

this.$refs.callMethods.setDepthWidth(100);

onRangeChange: function ()

聚合時間改變時觸發

this.$refs.callMethods.onRangeChange();

事件

事件函數	說明
`onResize: function(width, height)`	畫布尺寸改變時觸發
`onLangChange: function(lang)`	語言改變時觸發
`onSymbolChange: function(symbol, symbolName)`	交易品種改變時觸發
`onThemeChange: function(theme)`	主題改變時觸發
`onRangeChange: function(range)`	聚合時間改變時觸發

回調函數res格式

數據請求成功

當success爲true，請求成功。

{
  "success": true,
  "data": {
    "lines": [
      [
        1.50790476E12,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        66.9905449283
      ]
    ],
    "depths": {
      "asks": [
        [
          500654.27,
          0.5
        ]
      ],
      "bids": [
        [
          5798.79,
          0.013
        ]
      ]
    }
  }
}

數據請求失敗

當res爲空，或者success爲false，請求失敗。

{
  "success": false,
  "data": null,	        // success爲false，則忽略data
}

res參數說明:
lines: K線圖, 依次是: 時間(ms), 開盤價, 最高價, 最低價, 收盤價, 成交量
depths深度圖數據,asks: 必定比例的賣單列表, bids:必定比例的買單列表, 其中每項的值依次是 : 成交價, 成交量

特別說明

固然細心的你可能會發現我npm包名(vue-kline)和github上的名字(vue-Kline)會不同,對你形成必定誤解,對此我十分抱歉。緣由是當我先把vue-kline發佈到npm上,再回到github上是發現名字十天前已經被人使用了。沒有辦法github上只能硬着頭皮用K大寫 vue-Kline。

vue-kline起源與ctpbee發展計劃

vue-kline原由是咱們內部開源ctpbee量化項目,須要將數據直觀展現給用戶,而網上又沒有關於vue的實現。在此背景下vue-kline孕育而生。

ctpbee是一個可供使用的交易微框架, 主要面對開發者, 但願能獲得各位大佬的支持. 策略以及指標等工具都以ctpbee_** 形式發佈. ctpbee只提供最小的內核. 本人崇尚開源, 不管你是交易者仍是程序員, 只要你有新的想法以及對開源感興趣, 歡迎基於ctpbee 開發出新的可用工具. 我會維護一個工具列表, 指引用戶前往使用.

最後一句

若是這個能幫助到你, 請點擊star來支持我噢. ^_^

若是你但願貢獻代碼, 歡迎加羣一塊兒討論和或者提交PR QQ羣號(: 756319143) 點進加入羣聊以瞭解更多

最後一句 ----> 祝各位大佬都能賺錢！

若是對你有用或者你喜歡,但願能在github上給我點顆星星,給我支持吧！github地址>>>

用vue.js實現的期貨,股票的實時K線