Highcharts创建深度图表示列

一、Highcharts深度图示列代码（ETH‑BTC 市场深度图）

php 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ETH-BTC 市场深度图</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width:900px;height:500px;margin:20px auto;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'area',          //图表类型：面积图
        zooming: {
            type: 'xy'         //开启XY双向框选缩放
        }
    },
    title: {
        text: 'ETH-BTC 市场深度图'
    },
    xAxis: {
        minPadding: 0,
        maxPadding: 0,
        plotLines: [{          //实际价格参考竖线
            color: '#888',
            value: 0.1523,
            width: 1,
            label: {
                text: '实际价格',
                rotation: 90
            }
        }],
        title: {
            text: '价格（BTC）'
        }
    },
    yAxis: [{                 //左侧Y轴
        lineWidth: 1,
        gridLineWidth: 1,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
            align: 'left',
            x: 8
        }
    }, {                      //右侧Y轴（镜像联动）
        opposite: true,
        linkedTo: 0,
        lineWidth: 1,
        gridLineWidth: 0,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
            align: 'right',
            x: -8
        }
    }],
    legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillOpacity: 0.2,   //面积填充透明度
            lineWidth: 1,
            step: 'center'       //阶梯式折线（订单簿阶梯特征）
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px;">价格: {point.key}</span><br/>',
        valueDecimals: 2
    },
    series: [{
        name: '买盘 Bids',
        data: [
            [0.1524, 0.95], [0.1539, 35.51], [0.1540, 39.88],
            [0.1541, 40.50], [0.1545, 43.26], [0.1547, 60.15],
            [0.1553, 60.31], [0.1558, 60.55], [0.1564, 68.38],
            [0.1567, 69.47], [0.1569, 69.62], [0.1570, 70.40],
            [0.1574, 70.40], [0.1575, 73.20], [0.1580, 77.70],
            [0.1583, 79.45], [0.1588, 79.58], [0.1590, 80.58],
            [0.1600, 81.58], [0.1608, 83.38]
        ],
        color: '#03a7a8'      //买盘：青色
    }, {
        name: '卖盘 Asks',
        data: [
            [0.1435, 242.52], [0.1436, 206.50], [0.1437, 205.82],
            [0.1438, 197.33], [0.1439, 153.68], [0.1440, 146.01],
            [0.1442, 82.55],  [0.1443, 59.15],  [0.1444, 57.94],
            [0.1445, 57.48],  [0.1446, 52.39],  [0.1447, 51.87],
            [0.1448, 44.10],  [0.1449, 40.13],  [0.1450, 31.88],
            [0.1451, 22.79],  [0.1453, 12.35],  [0.1454, 10.04],
            [0.1480, 9.33],   [0.1522, 3.76]
        ],
        color: '#fc5857'      //卖盘：红色
    }]
});
</script>
</body>
</html>

二、核心配置逐段解析

1. `chart.type: 'area'` + `zooming.type: 'xy'`

面积图是市场深度图的标准类型，用填充区域直观展示累计挂单量。
xy 双向缩放：鼠标框选可同时放大价格区间和数量区间，适合查看深度图局部细节。

2. `xAxis.plotLines` --- 实际价格参考线

yaml 复制代码

plotLines: [{
    value: 0.1523,
    label: { text: '实际价格', rotation: 90 }
}]

在X轴指定价格位置画一条竖线，标注当前市场成交价 。深度图中买盘在价格线右侧、卖盘在左侧，中间缺口就是买卖价差（Spread）。

3. 双Y轴镜像联动

yaml 复制代码

yAxis: [
    { /* 左轴 */ },
    { opposite: true, linkedTo: 0, gridLineWidth: 0 }
]

linkedTo: 0：右轴完全绑定左轴刻度，左右数值一致。
右轴关闭网格线，避免和左轴网格重叠。
刻度标签 tickPosition: 'inside' 向内显示，是专业交易图表的典型风格。

4. `plotOptions.area.step: 'center'`

阶梯式面积图 ，这是市场深度图最关键的视觉特征。订单簿（Order Book）的挂单量是阶梯式累积 的------每个价格档位挂单量突变，用平滑曲线会失真，step: 'center' 让折线在数据点中间阶梯跳转，真实还原订单簿结构。

5. `fillOpacity: 0.2`

面积填充透明度设为20%，买盘青色和卖盘红色区域半透明叠加，既能看到累计量，又不会遮挡对方区域。

6. 两组数据的业务含义

系列	颜色	含义	数据特征
Bids 买盘	青色 `#03a7a8`	买方挂单，价格高于实际价	价格越高，累计买量越大（从0.1524到0.1608，量从0.95涨到83.38）
Asks 卖盘	红色 `#fc5857`	卖方挂单，价格低于实际价	价格越低，累计卖量越大（从0.1435到0.1522，量从242.52降到3.76）

买盘数据点价格都大于实际价0.1523，卖盘都小于实际价，两条曲线在实际价格线两侧形成"V型"深度轮廓。

三、市场深度图怎么看

横轴：价格（ETH兑BTC汇率）
纵轴：累计挂单数量
青色区域宽度：买方支撑强度，越宽说明买盘越厚
红色区域宽度：卖方压力强度，越宽说明卖压越重
中间缺口：买卖价差，缺口越小市场流动性越好
阶梯陡峭程度：反映大单挂单位置，陡峭处存在大额限价单

四、适用场景 & 常见坑点

适用场景： 加密货币交易所订单簿、股票Level‑2行情、外汇做市商深度展示、金融交易终端。

常见坑点：

忘记 step: 'center' → 深度图变成平滑曲线，失去订单簿阶梯特征
买盘卖盘数据顺序写反 → 曲线交叉错乱，必须确保买盘价格递增、卖盘价格递减
不设 minPadding/maxPadding: 0 → 图表两侧留白，深度图边缘被截断
双Y轴忘记 linkedTo: 0 → 左右刻度不一致，用户误读数量