先去hightCharts官网引用highcharts.js的引用，因为需要他，其他就不用了，下面是代码，可以直接测试
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>highcharts测试</title>
<script src="highcharts.js"></script>
</head>
<body>
<div>
<div id="container" style="min-width:400px;height:400px"></div>
</div>
<script type="text/javascript">
loadChart();
function loadChart() {
var chartTheme = {
colors: ["#008c00", "#ee3523"],
chart: {
backgroundColor: "#fff",
//borderColor: "#fff",
//borderRadius: 0,
//plotShadow: !0,
//plotBorderWidth: 1,
height: 540
},
xAxis: {
gridLineWidth: 0,
lineColor: "#000",
tickColor: "#000",
labels: {
style: {
color: "#000"
}
},
title: {
style: {
color: "#333"
}
}
},
yAxis: {
gridLineWidth: 0,
lineColor: "#000",
lineWidth: 1,
tickWidth: 1,
labels: {
style: {
color: "#000"
}
},
title: {
style: {
color: "#333"
}
}
},
plotOptions: {
series: {
fillOpacity: .2
}
}
}
Highcharts.setOptions(chartTheme);
Highcharts.zdy_chart = new Highcharts.Chart('container', {
chart: {
type: "area",
//renderTo: "chart_depth"
},
title: {
text: "深度图测试"
},
subtitle: {
text: ""
},
credits: {
text: "",
href: ""
},
xAxis: {
title: {
text: '比特币价格'
},
labels: {
formatter: function () {
return '￥' + this.value
}
}
},
yAxis: {
title: {
text: '比特币数量'
},
labels: {
formatter: function () {
return this.value + '比特币'
}
}
},
tooltip: {
shared: !0,
formatter: function () {
return "委 托 价 ：" + '￥'+ this.points[0].x + "<br>" + this.points[0].series.name + "：" + '累计数量' + Math.round(this.points[0].y)
}
},
plotOptions: {
area: {
pointStart: 0,
marker: {
enabled: !1,
symbol: "circle",
radius: 2,
states: {
hover: {
enabled: !0
}
}
}
}
},
series: [{
name:'买盘委托',
data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [900, 12]]
},
{
name:'卖盘委托',
data: [[910, 8], [1000, 14], [1100,29], [1200,45], [1300, 59], [1400, 81.2]]
}]
});
}
</script>
<script type="text/javascript">
var buy = [[28408, 298.2393, 0.1367], [28412.73, 298.1026, 0.0389], [28420, 298.0637, 0.2], [28431.52, 297.8637, 0.2223], [28440.11, 297.6414, 0.1002], [28443.62, 297.5412, 0.0348], [28444.44, 297.5064, 0.3842], [28451, 297.1222, 0.176], [28456.25, 296.9462,
5], [28460, 291.9462, 0.4923], [28498.21, 291.4539, 0.0805], [28499, 291.3734, 0.05], [28500, 291.3234, 66.7432], [28500.01, 224.5802, 0.891], [28501, 223.6892, 1.4607], [28502, 222.2285, 0.12], [28508, 222.1085, 0.2191], [28509.23, 221.8894, 0.01], [28510,
221.8794, 26.5546], [28512, 195.3248, 0.1], [28522.67, 195.2248, 0.0473], [28529.81, 195.1775, 0.5], [28538, 194.6775, 0.094], [28538.03, 194.5835, 0.5], [28543, 194.0835, 0.4039], [28545, 193.6796, 0.095], [28555, 193.5846, 0.094], [28560, 193.4906, 0.374],
[28561, 193.1166, 0.08], [28567.1, 193.0366, 1.1214], [28588, 191.9152, 0.02], [28600, 191.8952, 43.13], [28608, 148.7652, 0.1], [28613, 148.6652, 0.2], [28613.6, 148.4652, 0.0273], [28617.97, 148.4379, 0.7], [28625.8, 147.7379, 0.0587], [28640.04, 147.6792,
0.2283], [28650, 147.4509, 0.923], [28651, 146.5279, 1.8931], [28651.99, 144.6348, 0.015], [28656, 144.6198, 0.2], [28658, 144.4198, 0.01], [28660, 144.4098, 0.3489], [28665, 144.0609, 0.098], [28668, 143.9629, 0.1187], [28679.92, 143.8442, 0.0935], [28683.22,
143.7507, 0.6], [28692, 143.1507, 1], [28699, 142.1507, 0.3356], [28700, 141.8151, 1.8774], [28701.02, 139.9377, 1.8122], [28701.05, 138.1255, 0.7], [28703.03, 137.4255, 0.5], [28703.06, 136.9255, 0.7], [28708, 136.2255, 0.1], [28715.22, 136.1255, 0.3], [28723.22,
135.8255, 0.4], [28725.22, 135.4255, 0.15], [28731.15, 135.2755, 0.7705], [28735, 134.505, 0.0815], [28736, 134.4235, 0.0262], [28737, 134.3973, 0.3581], [28737.18, 134.0392, 0.3806], [28738.97, 133.6586, 0.2347], [28740, 133.4239, 3.3747], [28750, 130.0492,
2.6797], [28750.03, 127.3695, 0.6852], [28750.22, 126.6843, 0.5688], [28752, 126.1155, 0.12], [28753, 125.9955, 7.1862], [28756.74, 118.8093, 2.027], [28780, 116.7823, 3.2505], [28780.06, 113.5318, 0.093], [28797.03, 113.4388, 0.5], [28800, 112.9388, 1.2749],
[28808, 111.6639, 0.1], [28822.89, 111.5639, 1.1127], [28822.92, 110.4512, 0.7], [28847, 109.7512, 1], [28850, 108.7512, 0.3888], [28855.53, 108.3624, 10], [28855.56, 98.3624, 0.5], [28856, 97.8624, 0.02], [28860, 97.8424, 0.0693], [28866, 97.7731, 0.02],
[28871.66, 97.7531, 3.201], [28882, 94.5521, 0.1], [28888, 94.4521, 0.1404], [28888.88, 94.3117, 0.45], [28889, 93.8617, 0.1], [28890, 93.7617, 0.2193], [28900, 93.5424, 1.1176], [28901, 92.4248, 1], [28908, 91.4248, 1.1], [28915.73, 90.3248, 0.55], [28932.8,
89.7748, 0.004], [28937, 89.7708, 0.0035], [28940, 89.7673, 1.7601], [28942, 88.0072, 0.0347], [28943.53, 87.9725, 0.18], [28950, 87.7925, 0.06], [28955.03, 87.7325, 1.09], [28960.03, 86.6425, 0.0035], [28961, 86.639, 0.123], [28961.31, 86.516, 0.0075], [28962.09,
86.5085, 0.321], [28973.4, 86.1875, 0.7], [28980, 85.4875, 0.7071], [28981.52, 84.7804, 1.87], [28993.91, 82.9104, 0.0133], [28999, 82.8971, 0.002], [28999.88, 82.8951, 0.1118], [29000, 82.7833, 12.7248], [29002, 70.0585, 0.12], [29008, 69.9385, 0.1], [29010,
69.8385, 0.4676], [29010.03, 69.3709, 0.1802], [29010.06, 69.1907, 0.5], [29018, 68.6907, 0.1251], [29020, 68.5656, 0.1343], [29022, 68.4313, 1.0337], [29022.03, 67.3976, 0.7], [29050, 66.6976, 0.0684], [29053, 66.6292, 0.01], [29055.13, 66.6192, 0.1722],
[29066, 66.447, 0.4879], [29066.1, 65.9591, 0.05], [29068, 65.9091, 0.4549], [29070, 65.4542, 0.3006], [29072, 65.1536, 0.0347], [29085, 65.1189, 0.0806], [29088, 65.0383, 0.0034], [29100, 65.0349, 15.2143], [29100.09, 49.8206, 0.172], [29102, 49.6486, 0.4637],
[29105, 49.1849, 0.0342], [29106.31, 49.1507, 0.0608], [29109.84, 49.0899, 0.3934], [29109.87, 48.6965, 3.2], [29112.11, 45.4965, 0.0055], [29116.62, 45.491, 1.19], [29128.14, 44.301, 0.9665], [29136, 43.3345, 0.9451], [29136.52, 42.3894, 0.0608], [29145.66,
42.3286, 0.0608], [29149, 42.2678, 0.069], [29150, 42.1988, 36.5088], [29150.03, 5.69, 2.98], [29150.04, 2.71, 2.71]];
var sale = [[29180, 0.8431, 0.8431], [29190, 18.7992, 17.9561], [29193.3, 18.9259, 0.1267], [29195, 20.1828, 1.2569], [29195.8, 22.1698, 1.987], [29195.9, 22.2077, 0.0379], [29196, 22.2765, 0.0688], [29198, 24.2765, 2], [29198.97, 25.3765, 1.1], [29199,
25.809, 0.4325], [29199.96, 26.499, 0.69], [29199.99, 33.7677, 7.2687], [29200, 49.6009, 15.8332], [29205, 49.6459, 0.045], [29206, 50.2087, 0.5628], [29210, 50.6568, 0.4481], [29218, 50.9655, 0.3087], [29219.99, 51.7768, 0.8113], [29220, 53.2598, 1.483],
[29222, 53.297, 0.0372], [29230, 53.797, 0.5], [29239.97, 54.487, 0.69], [29240, 55.9015, 1.4145], [29247.82, 56.4415, 0.54], [29247.85, 56.6107, 0.1692], [29249.57, 57.4907, 0.88], [29249.6, 60.5383, 3.0476], [29250, 66.028, 5.4897], [29250.2, 66.064, 0.036],
[29257.95, 66.2636, 0.1996], [29260, 66.4753, 0.2117], [29269.9, 66.4803, 0.005], [29270, 66.6234, 0.1431], [29271, 66.7512, 0.1278], [29274.52, 67.4512, 0.7], [29276, 67.7385, 0.2873], [29279.88, 68.2385, 0.5], [29279.91, 69.0251, 0.7866], [29280, 73.8076,
4.7825], [29282.97, 74.5076, 0.7], [29283, 75.5076, 1], [29288, 77.0269, 1.5193], [29289, 77.3816, 0.3547], [29290, 79.8187, 2.4371], [29294.87, 80.9187, 1.1], [29294.9, 81.5802, 0.6615], [29294.99, 84.5802, 3], [29295, 146.6652, 62.085], [29296, 146.6951,
0.0299], [29297, 146.6978, 0.0027], [29298, 159.6089, 12.9111], [29298.71, 159.6438, 0.0349], [29298.99, 159.7133, 0.0695], [29299, 160.7382, 1.0249], [29299.8, 160.8211, 0.0829], [29299.9, 161.4211, 0.6], [29300, 300.4619, 139.0408], [29301.03, 300.4669,
0.005], [29305, 300.7669, 0.3], [29306.5, 300.8169, 0.05], [29307.13, 300.8404, 0.0235], [29310, 300.8414, 0.001], [29329.8, 300.8434, 0.002], [29348, 301.1026, 0.2592], [29349, 301.4128, 0.3102], [29350, 302.3845, 0.9717], [29352, 302.4092, 0.0247], [29359.97,
302.9092, 0.5], [29360, 303.5622, 0.653], [29361.1, 303.6374, 0.0752], [29379, 304.6374, 1], [29380, 305.5176, 0.8802], [29383.2, 305.6176, 0.1], [29384, 305.6877, 0.0701], [29386.8, 305.719, 0.0313], [29388, 308.4591, 2.7401], [29388.88, 308.5686, 0.1095],
[29389.97, 317.5686, 9], [29391, 317.5719, 0.0033], [29395, 317.5776, 0.0057], [29398, 317.8276, 0.25], [29399, 317.9638, 0.1362], [29400, 345.3181, 27.3543], [29400.03, 346.3181, 1], [29403.12, 346.3332, 0.0151], [29410, 347.3934, 1.0602], [29411, 347.4024,
0.009], [29420, 347.6177, 0.2153], [29424.16, 347.6227, 0.005], [29430, 348.6227, 1], [29432, 348.7227, 0.1], [29439.83, 348.7753, 0.0526], [29447.94, 349.4753, 0.7], [29447.97, 349.6753, 0.2], [29449, 351.7253, 2.05], [29449.02, 351.9255, 0.2002], [29450,
387.399, 35.4735], [29450.01, 387.8074, 0.4084], [29458, 388.3074, 0.5], [29460, 388.7188, 0.4114], [29466, 389.7418, 1.023], [29468, 390.2208, 0.479], [29469.98, 390.7208, 0.5], [29470, 392.1821, 1.4613], [29477.98, 392.3321, 0.15], [29480, 396.6028, 4.2707],
[29486, 406.6028, 10], [29488, 408.47, 1.8672], [29488.23, 408.9784, 0.5084], [29489, 410.1148, 1.1364], [29489.39, 410.7669, 0.6521], [29490, 412.4259, 1.659], [29495, 412.8022, 0.3763], [29496, 412.9955, 0.1933], [29498, 414.1007, 1.1052], [29499, 512.2822,
98.1815], [29499.05, 512.8822, 0.6], [29499.8, 512.9181, 0.0359], [29499.98, 513.0181, 0.1], [29499.99, 514.0064, 0.9883], [29500, 687.6153, 173.6089], [29500.1, 687.6186, 0.0033], [29500.88, 690.6186, 3], [29501, 690.622, 0.0034], [29501.19, 690.722, 0.1],
[29509, 690.8218, 0.0998], [29510, 690.8348, 0.013], [29517, 691.8756, 1.0408], [29520, 692.1256, 0.25], [29522, 692.1297, 0.0041], [29522.59, 692.1968, 0.0671], [29525, 692.5569, 0.3601], [29528, 692.6569, 0.1], [29534, 692.6599, 0.003], [29536, 696.6687,
4.0088], [29540, 697.6667, 0.998], [29540.68, 697.6717, 0.005], [29543, 697.6751, 0.0034], [29544, 697.7816, 0.1065], [29545, 698.488, 0.7064], [29546, 698.4957, 0.0077], [29546.99, 700.4957, 2], [29548.99, 700.738, 0.2423], [29549.01, 700.749, 0.011], [29550,
706.5007, 5.7517], [29553, 706.7758, 0.2751], [29555, 708.7783, 2.0025], [29555.55, 708.8857, 0.1074], [29558, 709.2143, 0.3286], [29560, 710.2282, 1.0139]];
Highcharts.zdy_chart.series[0].setData(buy);
Highcharts.zdy_chart.series[1].setData(sale);
</script>
</body>
</html>
