vue-exchange-depth

0.1.2 • Public • Published

vue-exchange-depth npm npm downloads

交易所深度组件/挂单信息组件
这个目前仅用于vue2.x

DEMO

https://isluo.com/work/vue-exchange-depth

安装

npm install vue-exchange-depth -S

代码示例

  <template>
    <!-- 需要一个容器来包裹 -->
    <div style="width: 300px; height: 500px">
      <VueExchangeDepth
        :marketInfo="marketInfo"
        :options="options"
        :sourceData="sourceData"
        :lastPrice="lastPrice"
        :lastFormatFial="lastFormatFial"
        @onAccuracyChange="onAccuracyChange"
        @onRowClick="onRowClick"
        @choseChange="choseChange"
      />
    </div>
  </template>
  <script>
    import VueExchangeDepth from 'vue-exchange-depth';
    export default {
      components:{
        VueExchangeDepth
      }
      data(){
        return {
          marketInfo: {
            zi: 'BTC',
            mu; 'USDT',
            ziPoint: 8,
            muPoint: 4,
          },
          options: {
            isFlash: false,
            isHoverInfo: true,
            hoverType: 'left'
          },
          lastPrice: 50000,
          lastFormatFial: '≈ 300000 RMB',
          sourceData: {
            askData:[
              {ticks: '50000.1234', lots: '1.23456789'}
            ],
            bidData:[
              {ticks: '49999.1234', lots: '1.23456789'}
            ]
          }
        }
      },
      methods:{
        onAccuracyChange(p){
          // 深度变化
          // p: {"label":"0.01","value":"100"}
        },
        onRowClick(p, q){
          // 点击了某一行数据
          // p: {"ticks":47900,"lots":3.23456789,"count":29,"total":9.458553034044943}
          // q: {"zi":"BTC","mu":"USDT","ziPoint":8,"muPoint":4}
        },
        choseChange(p){
          // 选择了左上角的按钮
          // p: 'center'/'bid'/'ask'
        }
      }
    }
  </script>

参数

字段名 类型 默认值 是否必填
marketInfo Object undefined

说明:这个参数用于说明交易对的信息,你应该传入一个类似这样的对象:

{
  zi: 'BTC', // 子币名称
  mu: 'USDT', // 母币名称
  ziPoint: 8, // 子币小数点精度
  muPoint: 4, // 母币小数点精度
}
字段名 类型 是否必填
options Object

说明:自定义设置,你应该传入一个类似这样的对象:

{
  isFlash: false, // 当某个价位(ticks)的数量(lots)变化时,是否高亮闪烁一下;默认false
  isHoverInfo: true, // 当鼠标放在价位上时,是否显示均价浮窗;默认true
  hoverType: 'left' // 均价浮窗显示在左边(left)还是右边(right), 默认"left"
}
字段名 类型 默认值 是否必填
lastPrice String/Number ''

说明:你可以传入一个最终成交的价格,这会显示在组件中间那个位置
比如这样:50000.1234

字段名 类型 默认值 是否必填
lastFormatFial String ''

说明:你可以传入一个字符串,这会显示在组件中间那个位置,跟在lastPrice的后面
比如这样:"≈ 300000 RMB"

字段名 类型 默认值 是否必填
sourceData Object undefined

说明:这是交易挂单的原始数据,通常由websocket不停的推送最新数据,你应该传入这样的对象:
(不要增量更新,每次有新数据都应该传入一个全新的sourceData对象)

{
  askData: [ // 卖方数据 正序倒序都无所谓,组件会帮你排序
    {ticks: '50001.2234', lots: '2.23456789'}
    {ticks: '50000.1234', lots: '1.23456789'},
    ...
  ],
  bidData: [ // 买方数据 正序倒序都无所谓,组件会帮你排序
    {ticks: '49999.1234', lots: '1.23456789'},
    {ticks: '49998.2234', lots: '2.23456789'}
  ]
}

事件

onAccuracyChange(p)

当深度发生变化时会触发一次
组件会根据当前数据(sourceData)计算出所有可能的深度选项,显示在右上角下拉框中
首次计算出深度时,组件会自动选中第1个深度选项,则会触发一次该事件
之后每次用户选择不同的深度时,才会再触发

返回值:

{"label":"0.01","value":"100"}
会返回一个类似这样的对象
label是组件中显示的数字
value是实际对应的值,1表示没有合并深度,10表示向前合并一位小数点,100表示合并两位小数点
以此类推

关于深度合并的解释

比如有这样的原始数据:

[
  {ticks: 50000.1234, losts:1},
  {ticks: 50000.1235, losts:2},
  {ticks: 50000.1266, losts:3}
]

此时组件会计算出所有可能的深度合并选项:0.0001,0.001,0.01,0.1,1,10,100,1000
当选择0.0001,则什么都不会发生
当选择0.001, 则小数点向前合并一位,最终展现给用户的数据就变成了:

{
  {ticks: 50000.1230, losts: 3},
  {ticks: 50000.1260, losts: 3}
}

因为小数点向前合并一位,就是说最后一位小数全变成0
然后50000.1234和50000.1235就都变成了50000.1230,这两个数值变成一样了,于是合并到一起,它们的lots相加变成3
其他选项以此类推

关于深度合并下拉框的值是怎么算出来的

会根据买方最前面挂单的价格进行计算,自动向前合并一位,直到无法再合并。


onRowClick(p, q)

当鼠标点击某一行数据时,会触发一次

返回值

p: {"ticks":47900,"lots":3.23456789,"total":9.458553034044943}
当前选中的数据:价格(ticks)/数量(lots)/累计(total)
q: {"zi":"BTC","mu":"USDT","ziPoint":8,"muPoint":4}
当前交易对的信息:就是marketInfo参数的数据


choseChange(p)

当左上角按钮状态改变时触发一次

返回值

p: "center" 选择了第1个按钮,上下数据各展示一半/ "ask"选择了仅展示卖方数据/ "bid"选择了仅展示买方数据

注意事项

  • 组件宽高都是100%, 所以需要一个有大小的容器来装它。
  • 如果你需要更多自定义,可以直接/src下的内容复制到你自己项目里,自己改,就是个普通vue组件,直接用就行。
  • /src/App.vue是本体,/src/components下是简单封装了个select组件,/src/utils是一些数学函数。
  • 本组件内部的数学运算使用了big.js

赞助

微信赞助码
  • 如果觉得有用,可以小额赞助我
  • 你的微信昵称将显示在此GitHub项目赞助者名单中
  • 同时你的微信昵称也将显示在此网站赞助者名单中
  • 所得资金不会用于帮助任何人类
  • 所得资金将全部捐赠给流浪猫狗援助项目和自然环境保护计划

更新日志

v0.1.0

  1. 更新:现在前端会自动进行深度合并计算。如果你们使用后端计算深度也没有关系,不影响
  2. 修复:修复了没有深度时下拉框的样式

Dependencies (3)

Dev Dependencies (12)

Package Sidebar

Install

npm i vue-exchange-depth

Weekly Downloads

0

Version

0.1.2

License

none

Unpacked Size

1.44 MB

Total Files

10

Last publish

Collaborators

  • lx376693576