{"id":16773176,"url":"https://github.com/javaluo/vue-exchange-depth","last_synced_at":"2026-03-18T22:07:29.435Z","repository":{"id":91926562,"uuid":"365167750","full_name":"javaLuo/vue-exchange-depth","owner":"javaLuo","description":"depth component","archived":false,"fork":false,"pushed_at":"2021-05-14T22:59:39.000Z","size":622,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-04T07:46:48.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-07T08:34:38.000Z","updated_at":"2022-03-19T06:26:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"c1313329-31c4-48aa-b334-0b2e90ce5404","html_url":"https://github.com/javaLuo/vue-exchange-depth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/javaLuo/vue-exchange-depth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-exchange-depth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-exchange-depth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-exchange-depth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-exchange-depth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/vue-exchange-depth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-exchange-depth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28847054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T06:44:55.554Z","updated_at":"2026-01-28T17:02:31.393Z","avatar_url":"https://github.com/javaLuo.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-exchange-depth [![npm](https://img.shields.io/npm/v/vue-exchange-depth.svg)](https://www.npmjs.com/package/vue-exchange-depth) [![npm downloads](https://img.shields.io/npm/dt/vue-exchange-depth.svg)](https://www.npmjs.com/package/vue-exchange-depth)\n\n交易所深度组件/挂单信息组件\u003cbr/\u003e\n这个目前仅用于vue2.x\n\n### DEMO\nhttps://isluo.com/work/vue-exchange-depth\n\n### 安装\n```\nnpm install vue-exchange-depth -S\n```\n\n### 代码示例\n\n```vue\n  \u003ctemplate\u003e\n    \u003c!-- 需要一个容器来包裹 --\u003e\n    \u003cdiv style=\"width: 300px; height: 500px\"\u003e\n      \u003cVueExchangeDepth\n        :marketInfo=\"marketInfo\"\n        :options=\"options\"\n        :sourceData=\"sourceData\"\n        :lastPrice=\"lastPrice\"\n        :lastFormatFial=\"lastFormatFial\"\n        @onAccuracyChange=\"onAccuracyChange\"\n        @onRowClick=\"onRowClick\"\n        @choseChange=\"choseChange\"\n      /\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n```\n```vue\n  \u003cscript\u003e\n    import VueExchangeDepth from 'vue-exchange-depth';\n    export default {\n      components:{\n        VueExchangeDepth\n      }\n      data(){\n        return {\n          marketInfo: {\n            zi: 'BTC',\n            mu; 'USDT',\n            ziPoint: 8,\n            muPoint: 4,\n          },\n          options: {\n            isFlash: false,\n            isHoverInfo: true,\n            hoverType: 'left'\n          },\n          lastPrice: 50000,\n          lastFormatFial: '≈ 300000 RMB',\n          sourceData: {\n            askData:[\n              {ticks: '50000.1234', lots: '1.23456789'}\n            ],\n            bidData:[\n              {ticks: '49999.1234', lots: '1.23456789'}\n            ]\n          }\n        }\n      },\n      methods:{\n        onAccuracyChange(p){\n          // 深度变化\n          // p: {\"label\":\"0.01\",\"value\":\"100\"}\n        },\n        onRowClick(p, q){\n          // 点击了某一行数据\n          // p: {\"ticks\":47900,\"lots\":3.23456789,\"count\":29,\"total\":9.458553034044943}\n          // q: {\"zi\":\"BTC\",\"mu\":\"USDT\",\"ziPoint\":8,\"muPoint\":4}\n        },\n        choseChange(p){\n          // 选择了左上角的按钮\n          // p: 'center'/'bid'/'ask'\n        }\n      }\n    }\n  \u003c/script\u003e\n```\n\n### 参数\n\n字段名|类型|默认值|是否必填\n--|--|--|--\nmarketInfo|Object|undefined|是\n\n说明：这个参数用于说明交易对的信息，你应该传入一个类似这样的对象：\n```js\n{\n  zi: 'BTC', // 子币名称\n  mu: 'USDT', // 母币名称\n  ziPoint: 8, // 子币小数点精度\n  muPoint: 4, // 母币小数点精度\n}\n```\n\n字段名|类型|是否必填\n--|--|--\noptions|Object|否\n\n说明：自定义设置，你应该传入一个类似这样的对象：\n```js\n{\n  isFlash: false, // 当某个价位(ticks)的数量(lots)变化时，是否高亮闪烁一下；默认false\n  isHoverInfo: true, // 当鼠标放在价位上时，是否显示均价浮窗；默认true\n  hoverType: 'left' // 均价浮窗显示在左边(left)还是右边(right), 默认\"left\"\n}\n```\n\n字段名|类型|默认值|是否必填\n--|--|--|--\nlastPrice|String/Number|''|否\n\n说明：你可以传入一个最终成交的价格，这会显示在组件中间那个位置\u003cbr/\u003e\n比如这样：50000.1234\n\n\n字段名|类型|默认值|是否必填\n--|--|--|--\nlastFormatFial|String|''|否\n\n说明：你可以传入一个字符串，这会显示在组件中间那个位置，跟在lastPrice的后面\u003cbr/\u003e\n比如这样：\"≈ 300000 RMB\"\n\n字段名|类型|默认值|是否必填\n--|--|--|--\nsourceData|Object|undefined|是\n\n说明：这是交易挂单的原始数据，通常由websocket不停的推送最新数据，你应该传入这样的对象：\u003cbr/\u003e\n(不要增量更新，每次有新数据都应该传入一个全新的sourceData对象)\n```js\n{\n  askData: [ // 卖方数据 正序倒序都无所谓，组件会帮你排序\n    {ticks: '50001.2234', lots: '2.23456789'}\n    {ticks: '50000.1234', lots: '1.23456789'},\n    ...\n  ],\n  bidData: [ // 买方数据 正序倒序都无所谓，组件会帮你排序\n    {ticks: '49999.1234', lots: '1.23456789'},\n    {ticks: '49998.2234', lots: '2.23456789'}\n  ]\n}\n```\n\n### 事件\n\n  **onAccuracyChange(p)**\n\n  当深度发生变化时会触发一次\u003cbr/\u003e\n  组件会根据当前数据(`sourceData`)计算出所有可能的深度选项，显示在右上角下拉框中\u003cbr/\u003e\n  首次计算出深度时，组件会自动选中第1个深度选项，则会触发一次该事件\u003cbr/\u003e\n  之后每次用户选择不同的深度时，才会再触发\u003cbr/\u003e\n\n  **返回值：**\n\n  `{\"label\":\"0.01\",\"value\":\"100\"}`\u003cbr/\u003e\n  会返回一个类似这样的对象\u003cbr/\u003e\n  label是组件中显示的数字\u003cbr/\u003e\n  value是实际对应的值，1表示没有合并深度，10表示向前合并一位小数点，100表示合并两位小数点\u003cbr/\u003e\n  以此类推\u003cbr/\u003e\n\n\n**关于深度合并的解释**\n\n比如有这样的原始数据：\n```js\n[\n  {ticks: 50000.1234, losts:1},\n  {ticks: 50000.1235, losts:2},\n  {ticks: 50000.1266, losts:3}\n]\n```\n此时组件会计算出所有可能的深度合并选项：0.0001，0.001，0.01，0.1，1，10，100，1000\u003cbr/\u003e\n当选择0.0001，则什么都不会发生\u003cbr/\u003e\n当选择0.001, 则小数点向前合并一位，最终展现给用户的数据就变成了：\n```js\n{\n  {ticks: 50000.1230, losts: 3},\n  {ticks: 50000.1260, losts: 3}\n}\n```\n因为小数点向前合并一位，就是说最后一位小数全变成0\u003cbr/\u003e\n然后50000.1234和50000.1235就都变成了50000.1230,这两个数值变成一样了，于是合并到一起，它们的lots相加变成3\u003cbr/\u003e\n其他选项以此类推\n\n**关于深度合并下拉框的值是怎么算出来的**\n\n会根据买方最前面挂单的价格进行计算，自动向前合并一位，直到无法再合并。\n\n---\n\n**onRowClick(p, q)**\n\n当鼠标点击某一行数据时，会触发一次\n\n**返回值**\n\np: `{\"ticks\":47900,\"lots\":3.23456789,\"total\":9.458553034044943}`\u003cbr/\u003e\n当前选中的数据：价格(ticks)/数量(lots)/累计(total)\u003cbr/\u003e\nq: `{\"zi\":\"BTC\",\"mu\":\"USDT\",\"ziPoint\":8,\"muPoint\":4}`\u003cbr/\u003e\n当前交易对的信息：就是`marketInfo`参数的数据\n\n---\n\n**choseChange(p)**\n\n当左上角按钮状态改变时触发一次\n\n**返回值**\n\np: \"center\" 选择了第1个按钮，上下数据各展示一半/ \"ask\"选择了仅展示卖方数据/ \"bid\"选择了仅展示买方数据\n\n\n### 注意事项\n\n- 组件宽高都是100%， 所以需要一个有大小的容器来装它。\n- 如果你需要更多自定义，可以直接`/src`下的内容复制到你自己项目里，自己改，就是个普通vue组件，直接用就行。\n- `/src/App.vue`是本体，`/src/components`下是简单封装了个select组件，`/src/utils`是一些数学函数。\n- 本组件内部的数学运算使用了`big.js`。\n\n### 赞助\n\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://github.com/javaLuo/water/blob/master/libs/imgs/up.jpg\" width=\"400\" alt=\"微信赞助码\"/\u003e\n\u003c/div\u003e\n\n- 如果觉得有用，可以小额赞助我\u003cbr/\u003e\n- 你的微信昵称将显示在\u003ca href=\"https://github.com/javaLuo/water\" target=\"_blank\"\u003e此GitHub项目\u003c/a\u003e赞助者名单中\u003cbr/\u003e\n- 同时你的微信昵称也将显示在\u003ca href=\"https://isluo.com/work/water\" target=\"_blank\"\u003e此网站\u003c/a\u003e赞助者名单中\u003cbr/\u003e\n- 所得资金不会用于帮助任何人类\u003cbr/\u003e\n- 所得资金将全部捐赠给流浪猫狗援助项目和自然环境保护计划\u003cbr/\u003e\n\n### 更新日志\n\nv0.1.0\u003cbr/\u003e\n1. 更新：现在前端会自动进行深度合并计算。如果你们使用后端计算深度也没有关系，不影响\n2. 修复：修复了没有深度时下拉框的样式","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-exchange-depth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Fvue-exchange-depth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-exchange-depth/lists"}