Nervous Parrot Muttering

    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. 修复:修复了没有深度时下拉框的样式

    Keywords

    none

    Install

    npm i vue-exchange-depth

    DownloadsWeekly Downloads

    2

    Version

    0.1.2

    License

    none

    Unpacked Size

    1.44 MB

    Total Files

    10

    Last publish

    Collaborators

    • lx376693576