{"id":26271177,"url":"https://github.com/xbc30/vue-depth-chart","last_synced_at":"2025-12-29T15:36:31.347Z","repository":{"id":57395580,"uuid":"286071729","full_name":"xbc30/vue-depth-chart","owner":"xbc30","description":"Configurable Depth Chart component based on Vue.  基于Vue的可配置深度图","archived":false,"fork":false,"pushed_at":"2020-09-03T07:26:09.000Z","size":775,"stargazers_count":11,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-09T00:37:49.587Z","etag":null,"topics":["depth-map","vue-component"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xbc30.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-08T15:43:00.000Z","updated_at":"2023-08-31T05:03:20.000Z","dependencies_parsed_at":"2022-09-05T05:51:11.496Z","dependency_job_id":null,"html_url":"https://github.com/xbc30/vue-depth-chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbc30%2Fvue-depth-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbc30%2Fvue-depth-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbc30%2Fvue-depth-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xbc30%2Fvue-depth-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xbc30","download_url":"https://codeload.github.com/xbc30/vue-depth-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243532530,"owners_count":20306157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["depth-map","vue-component"],"created_at":"2025-03-14T06:18:54.292Z","updated_at":"2025-12-29T15:36:26.310Z","avatar_url":"https://github.com/xbc30.png","language":"Vue","readme":"## Vue-Depth-Chart\n\n![image](images/cover.png)\n\nConfigurable Depth Chart component based on Vue\n\nEnglish | [简体中文](https://github.com/xbc30/vue-depth-chart/blob/master/README_ZH.md) | [Article](https://github.com/xbc30/vue-depth-chart/blob/master/article.md)\n\n* 日间模式\n\n![image](images/effect-type-mouse.png)\n\n* 夜间模式\n\n![image](images/effect-night.png)\n\n### Installation\n\nYou can install and save an entry to your package.json with the following command:\n\n```javascript\nnpm i vue-depth-chart\n```\n\n### Usage\n\nGlobally reference ```vue-depth-chart``` in ```main.js```, you can use it directly in any component (note that the corresponding css should be introduced in the component)\n\n* main.js\n\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\n\nimport \"vue-depth-chart\"\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n\n```\n\n* App.vue\n\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-depth-chart :data=\"data\" :customizeOptions=\"options\" :theme=\"theme\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nexport default {\n  name: \"App\",\n  data() {\n    return {\n      options: {\n        width: 780,\n        height: 540,\n      },\n      theme: \"day\",\n      data: {\n        buy: [\n          { price: 10977.76, amount: 0.303 },\n          { price: 10977.63, amount: 0.462 },\n          ...more items\n        ],\n        sell: [\n          { price: 10986, amount: 52.896 },\n          { price: 10985.91, amount: 48.57 },\n          ...more items\n        ],\n      },\n    };\n  },\n};\n\u003c/script\u003e\n\u003cstyle scoped\u003e\n@import \"~vue-depth-chart/dist/vue-depth-chart.css\";\n\u003c/style\u003e\n```\n\n### Config Options\n\n* Basic configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| width | Viewable width of depth map | ```780``` | ```780``` |\n| height | Visual height of depth map | ```540``` | ```540``` |\n| initOffset | Initial offset, to solve line blur | ```0.5``` | ```0.5``` |\n| bgColor | Overall background color | ```rgba(255,255,255,0.1)``` | ```rgba(0,0,0,0.9)``` |\n\n* Watermark configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| watermaskType | Watermark type, optional ```text```(text) ```image```(picture) | ```image``` | ```image``` |\n| watermaskContent | Watermark content, when ```watermaskType```=```text```, it should be a specific text string, when ```watermaskType```=```image```, it should be Is the corresponding image base64 string | ```data:image/png;base64,..``` | ```data:image/png;base64,..``` |\n\n* Line configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| gridLineColor | Grid line color | ```#ddd``` | ```#333``` |\n| rulerLineColor | Ruler line color color | ```#999``` | ```rgb(47,47,47)``` |\n\n* Shaft configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| xAxisGridSpace | x-axis background grid spacing | ```90``` | ```90``` |\n| yAxisGridSpace | y-axis background grid spacing | ```30``` | ```30``` |\n| xAxisFontColor | x-axis ruler scale font color | ```#666``` | ```#999``` |\n| yAxisFontColor | y-axis ruler scale font color | ```#666``` | ```#999``` |\n| xAxisFontSize | x-axis ruler scale font size | ```12px Aria``` | ```12px Aria``` |\n| yAxisFontSize | y-axis ruler scale font size | ```12px``` | ```12px Aria``` |\n| yAxisShadowColor | y-axis ruler scale shadow color | ```#fff``` | ```#333``` |\n\n* Pitch configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| bottomSpace | The distance between the depth map and the y-axis | ```8``` | ```8``` |\n| buySellSpace | End-point spacing of buy and sell orders | ```10``` | ```10``` |\n\n* Basic configuration of prompt box\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| tipWidth | Tip width | ```120``` | ```120``` |\n| tipHeight | Tip height | ```60``` | ```60``` |\n| tipLocationLineColor | Tip Location Line Color | ```#999``` | ```#999``` |\n| tipLocationDotRadius | Tip Location Dot Radius | ```5``` | ```5``` |\n| tipType | The type of the tip type of the mouse movement, ```axis``` (on the xy axis) ```mouse``` (absolute positioning display following the mouse position) | ```mouse``` | ```mouse` `` |\n\n* Prompt box (sale) configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| tipBuyLocationDotBgColor | The background color of the dots of the pay prompt box | ```#fff``` | ```#fff``` |\n| tipBuyBorderColor | Border color of the tipBuy box | ```#67c23a``` | ```#67c23a``` |\n| tipBuyBgColor | Background color of the prompt box to pay | ```#f0f9eb``` | ```#f0f9eb``` |\n| tipBuyTextColor | Prompt text color of the buy order prompt box | ```#67c23a``` | ```#67c23a``` |\n| tipSellLocationDotBgColor | Dot background color of the sell order prompt box | ```#fff``` | ```#fff``` |\n| tipSellBorderColor | Border color of the sell order tip box | ```#f56c6c``` | ```#f56c6c``` |\n| tipSellBgColor | Sell order prompt box background color | ```#fef0f0``` | ```#fef0f0``` |\n| tipSellTextColor | Tips text color of the sell order prompt box | ```#f56c6c``` | ```#f56c6c``` |\n\n* Buy and sell strokes and fill configuration\n\n| Options | Description | Day mode | Night mode |\n| :------| :------: | :------: | :------: |\n| buyStrokeColor | Buy Stroke Color | ```rgb(111,168,0)``` | ```rgb(111,168,0)``` |\n| sellStrokeColor | Sell Stroke Color | ```rgb(234,0,112)``` | ```rgb(234,0,112)``` |\n| buyLinearGradientArray | buy order fill gradient array (top to bottom) | ```[\"rgb(141,186,51)\", \"rgb(160,197,87)\", \"rgb(189,215,138)\", \"rgb(228,238,206)\", \" rgb(250,250,241)\"]``` | ```[\"rgb(80,120,3)\", \"rgb(72,106,4)\", \"rgb(51,74,5)\", \"rgb(35,49, 7)\", \"rgb(20,25,8)\"]``` |\n| sellLinearGradientArray | Sell order fill gradient array (top to bottom) | ```[\"rgb(255,148,152)\", \"rgb(255,164,172)\", \"rgb(255,192,197)\", \"rgb(255,228,230)\", \"rgb(255,249,249) \"]``` | ```[\"rgb(217,45,127)\", \"rgb(172,37,101)\", \"rgb(115,27,68)\", \"rgb(64,19,39)\", \"rgb(26,13,18)\"]``` |","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxbc30%2Fvue-depth-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxbc30%2Fvue-depth-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxbc30%2Fvue-depth-chart/lists"}