DepthChart.js组件适用于资产交易中的市场深度（Depth Of Market）数据表现， 例如可以结合K线图嵌入股票、加密货币等资产的交易应用软件中作为用户的交易工具。DepthChart.js组件基于HTML的Canvas技术实现，支持鼠标滚轮缩放与十字线聚焦，提供深色与浅色两种预置主题，并且支持自定义主题。DepthChart.js的官方下载地址：市场深度图JS组件。
1、Depth Chart JS组件概述
DepthChart.js组件的主要特点如下：
- 基于html的canvas实现：与基于SVG的实现相比，在大数据量场景中的性能更好
- 不依赖第三方库：没有第三方依赖，非常容易嵌入其他库或框架，例如jquery、vue、react、angular等
- 支持鼠标滚轮缩放：鼠标滚轮即可在水平方向缩放，便于观察数据细节
- 支持自定义配色主题：可以根据应用需求自定义组件的配色主题，便于融入现有应用，同时也提供深/浅两色 的预置主题
DepthChart.js组件当前版本为1.0.0，主要文件清单详见官网：http://sc.hubwiz.com/codebag/uikit-depth/
2、基本使用方法
STEP 1：引入脚本文件
在HTML文件中声明canvas元素，并引入uikit.umd.js文件：
代码语言：javascript复制<canvas id="#depth-chart" width="900" height="400"></canvas>
<script src="lib/uikit.umd.js"></script>STEP 2：声明数据
DepthChart组件要求数据按预定格式组织，例如：
var dataset = {
"bids":[
["0.00283330","95.18000000"],
["0.00283300","5.56000000"],
...
["0.00282410","3.74000000"],
["0.00282400","1.15000000"]
],
"asks":[
["0.00283480","4.95000000"],
["0.00283490","5.19000000"],
...
["0.00284400","79.01000000"],
["0.00284410","15.53000000"]
]
}其中bids表示买方市场深度数据，asks表示卖方市场深度数据，每一行的两个数据分别表示价位及该价位的数量。容易理解，买方数据是按价格从高到底排列，而卖方数据则是按价格从低到高排列，价差（spread）则是买方最高价和卖方最低价的差值，即：
spread = asks[0][0] - bids[0][0]你可以使用币安的API获取指定交易对的实时市场深度数据，例如，获取BNB-BTC交易对的市场深度数据：
代码语言：javascript复制https://api.binance.com/api/v1/depth?symbol=BNBBTC&limit=50STEP 3：创建DepthChart对象
使用uikit中的DepthChart类初始化深度图：
new uikit.DepthChart({
el: '#depth-chart', //canvas元素选择符
dataset: dataset //数据集，参见下面说明
})实例化DepthChart类的时候，需要传入一个配置对象。el配置用来声明深度图渲染的canvas元素（或者其选择符），dataset配置项用来声明要进行处理的市场深度数据。
3、使用配色主题
在创建DepthChart时，可以使用theme配置项来应用一个预置的主题，或者一个自定义的主题。
3.1 预置的深色主题
例如使用预置的dark主题：
代码语言：javascript复制new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.dark()
})运行结果如下：
3.2 预置的浅色主题
或者使用预置的light主题：
代码语言：javascript复制new uikit.DepthChart({
el: '#depth-chart',
dataset: dataset,
theme: uikit.Theme.light()
})运行结果如下：
3.3 自定义主题
可以参考src/Theme.js中的dark或light主题，根据自己的需要进行自定义。 可以配置的主要选项详见官网：http://sc.hubwiz.com/codebag/uikit-depth/
4、使用源代码
如果自定义主题还不能满足应用需求，那么可以直接修改源代码。
首先到官网下载源码：http://sc.hubwiz.com/codebag/uikit-depth/ 。
然后解压下载的代码包：
代码语言：javascript复制~$ tar zxvf uikit-depth-1.0.0.tar.gz DepthChart.js组件的源代码位于src目录下，其主要类以及相互关系如下图所示：
修改完成后，需要重新构建UMD库文件：
代码语言：javascript复制~/uikit$ npm install -g rollup
~/uikit$ npm run build上面的命令首先全局安装rollup，然后执行组件库的构建任务，最终在lib目录下 生成可用于浏览器端的库文件 - uikit.umd.js。
(adsbygoogle = window.adsbygoogle || []).push({});
