/*
问题1：周期性setOption会使已经激活的Tootip消失，设置了lazyUpdate但没效果
问题2：Toohttp://gallery.echartsjs.com/explore.htmltip太长无法自动换行，设置过confine属性，但不见效果
问题3：深度图（不确定深度图怎么创建，根据自己的理解把买方深度和卖方深度分成两个独立的部分）
1）卖方深度的填色区域（绿色区域）如何在保持数据正确的情况下为相反的方向填色（试过inverse属性，但是没能实现）。
2）如何能做到深度图与K线图的Y轴刻度一致，并保持ZOOM的联动，正确显示数据
深度图案例参考：https://www.huobi.com/market/cny_btc
*/
var rawKlineData = [["20170911100000000",24900.00,25424.50,24555.55,24900.00,1430.5407],["20170911110000000",24900.90,25369.10,24886.00,25080.00,1307.5900],["20170911120000000",25090.00,25200.00,24750.00,25000.00,1166.1944],["20170911130000000",25000.00,25260.00,24923.06,25120.00,946.4615],["20170911140000000",25122.00,25888.00,25115.96,25202.43,1615.0744],["20170911150000000",25201.00,25587.27,25000.00,25270.91,1010.4124],["20170911160000000",25300.01,25420.80,24889.08,25400.00,968.2616],["20170911170000000",25420.00,25500.00,25050.00,25423.10,734.4896],["20170911180000000",25423.10,25428.00,25080.00,25329.90,614.5957],["20170911190000000",25329.90,25400.00,25051.00,25277.90,474.2390],["20170911200000000",25330.09,25450.00,25250.00,25325.45,489.8002],["20170911210000000",25300.00,25888.00,25288.00,25746.39,758.8118],["20170911220000000",25744.10,25890.00,25545.10,25823.00,475.9696],["20170911230000000",25850.00,25888.10,25497.00,25600.90,629.8603],["20170912000000000",25600.99,25877.00,25600.99,25875.00,344.4649],["20170912010000000",25875.00,25999.00,25704.10,25820.90,365.9164],["20170912020000000",25848.00,25899.00,25606.95,25889.10,106.3510],["20170912030000000",25899.00,25950.00,25530.84,25719.10,150.2241],["20170912040000000",25716.39,25720.00,25500.00,25511.00,137.3111],["20170912050000000",25511.00,25800.00,25511.00,25515.00,108.7451],["20170912060000000",25515.90,25787.28,25515.00,25683.42,137.5299],["20170912070000000",25691.00,25777.00,25500.00,25701.83,285.5493],["20170912080000000",25720.00,26500.12,25671.82,26273.61,935.6071],["20170912090000000",26273.61,26539.08,26211.42,26495.49,555.3506],["20170912100000000",26495.49,26889.09,26439.15,26821.90,590.7307],["20170912110000000",26821.90,27249.98,26680.00,27200.00,937.2339],["20170912120000000",27200.00,27464.08,26840.58,27098.19,906.2810],["20170912130000000",27098.19,27262.77,27050.00,27072.90,531.2870],["20170912140000000",27072.90,27299.00,27060.00,27215.00,465.6854],["20170912150000000",27215.00,27500.00,27215.00,27452.80,531.9325],["20170912160000000",27452.80,27460.51,25250.00,26380.00,3181.0736],["20170912170000000",26388.90,26785.89,26250.00,26676.35,1168.4911],["20170912180000000",26578.85,26934.98,26564.00,26870.25,406.9193],["20170912190000000",26902.44,27199.99,26660.00,26789.10,555.0005],["20170912200000000",26789.10,26987.99,26284.38,26466.33,677.8531],["20170912210000000",26423.85,26466.33,25250.00,25600.00,2239.3492],["20170912220000000",25568.00,25968.11,25111.00,25700.00,1544.8163],["20170912230000000",25700.90,25850.00,25483.19,25600.00,914.0029],["20170913000000000",25602.99,25966.31,25200.00,25933.03,663.6989],["20170913010000000",25958.00,25992.00,25300.00,25706.99,380.3859],["20170913020000000",25707.00,25708.10,25255.00,25589.62,510.0348],["20170913030000000",25594.99,25595.99,25412.00,25559.10,134.2207],["20170913040000000",25512.90,25900.00,25508.00,25900.00,112.4091],["20170913050000000",25880.14,25920.00,25694.76,25786.97,80.9161],["20170913060000000",25878.14,25999.00,25808.90,25996.80,198.0760],["20170913070000000",25990.00,25996.70,25600.00,25880.00,381.2132],["20170913080000000",25808.11,25889.00,25068.00,25554.51,650.4750],["20170913090000000",25647.09,25779.96,25210.00,25249.00,738.0604],["20170913100000000",25249.10,25350.00,24800.00,25033.00,1465.1426],["20170913110000000",25030.28,25300.00,24901.00,24911.00,828.0711],["20170913120000000",24911.00,25465.99,24708.03,25201.82,772.2099],["20170913130000000",25203.62,25588.00,25203.62,25400.00,623.5732],["20170913140000000",25400.00,25700.00,25300.00,25662.00,366.3365],["20170913150000000",25662.00,25662.00,24999.10,25110.00,962.4483],["20170913160000000",25100.00,25369.93,25050.00,25090.98,1001.7578],["20170913170000000",25091.02,25227.26,24901.92,24901.92,785.8670],["20170913180000000",24947.17,25175.00,24890.00,24950.16,519.4169],["20170913190000000",24950.18,24987.99,24650.37,24885.00,776.7584]];
var rawDepthData = {"bids":[[22235.200000,0.300000],[22234.400000,1.860000],[22234.300000,1.038000],[22233.500000,0.500000],[22218.100000,0.200000],[22201.800000,0.083400],[22184.000000,0.990000],[22183.000000,0.300000],[22181.000000,0.557000],[22155.900000,0.086300],[22155.000000,0.654200],[22150.900000,3.000000],[22101.100000,0.500000],[22100.200000,0.400000],[22100.100000,0.156700],[22100.000000,10.488000],[22060.010000,0.580000],[22060.000000,1.000000],[22056.900000,0.126700],[22001.000000,1.321300],[22000.100000,1.133000],[22000.000000,2.418600],[21993.030000,5.792000],[21909.000000,0.024800],[21900.000000,0.010000],[21897.300000,0.008800],[21880.080000,0.200000],[21815.390000,0.900000],[21815.290000,0.751100],[21808.000000,0.200000],[21806.990000,0.032000],[21801.000000,0.005000],[21800.000000,3.931900],[21790.000000,1.367300],[21750.000000,0.230000],[21731.000000,0.200000],[21700.000000,0.983300],[21661.110000,0.440300],[21661.000000,5.000000],[21623.000000,0.500000],[21602.000000,0.300000],[21600.000000,1.868100],[21580.000000,2.125700],[21566.000000,1.115000],[21517.100000,0.400000],[21517.000000,0.499900],[21501.000000,0.500000],[21500.100000,3.707100],[21500.000000,30.879400],[21485.680000,0.100000],[21480.000000,0.559900],[21450.000000,1.116500],[21415.800000,2.011800],[21408.000000,0.200000],[21407.900000,0.500000],[21400.000000,7.291200],[21396.600000,2.000000],[21388.000000,0.084700],[21380.000000,0.244900],[21350.000000,1.687000],[21325.000000,0.199200],[21318.180000,0.131600],[21300.000000,1.239000],[21239.100000,1.000000],[21234.000000,0.110000],[21233.000000,0.007800],[21229.000000,1.655300],[21222.220000,0.349700],[21222.000000,1.450300],[21221.900000,0.108300],[21212.120000,1.058800],[21208.590000,9.000000],[21200.000000,0.046800],[21190.000000,0.357500],[21188.000000,0.507300],[21185.000000,0.025600],[21178.180000,0.500000],[21165.000000,7.184300],[21150.000000,2.653400],[21148.990000,0.836500],[21145.870000,0.002200],[21138.000000,0.523100],[21112.620000,1.189000],[21111.000000,0.143900],[21105.410000,1.000000],[21105.000000,2.954800],[21100.000000,0.648100],[21089.000000,0.249100],[21088.580000,0.026200],[21088.000000,0.327500],[21081.100000,1.000000],[21080.000000,0.500000],[21077.000000,0.068700],[21073.000000,1.000000],[21069.000000,1.917600],[21038.000000,0.655600],[21035.010000,0.648700],[21018.960000,1.038400],[21014.000000,0.001000],[21012.000000,0.961800],[21010.000000,0.031400],[21008.000000,0.200000],[21006.110000,0.016600],[21002.100000,3.522400],[21002.020000,0.440700],[21002.010000,1.000000],[21002.000000,1.200000],[21001.670000,1.453400],[21001.110000,0.539600],[21001.100000,95.603700],[21001.010000,0.490300],[21001.000000,0.293300],[21000.200000,0.029400],[21000.100000,0.100000],[21000.010000,5.064800],[21000.000000,186.153600],[20990.000000,0.023900],[20931.000000,1.962600],[20919.370000,0.500000],[20900.000000,0.050000],[20888.000000,0.009300],[20881.000000,0.900000],[20880.000000,1.000000],[20817.100000,5.000000],[20808.000000,0.001000],[20800.000000,3.419300],[20799.000000,0.033100],[20723.100000,5.500000],[20700.000000,0.116600],[20697.980000,0.029500],[20666.000000,1.729000],[20653.090000,0.063600],[20650.000000,0.100000],[20620.000000,0.169500],[20608.000000,0.200000],[20605.100000,0.040500],[20600.000000,6.465900],[20580.000000,0.230500],[20577.000000,1.194500],[20569.000000,0.600000],[20568.000000,0.016800],[20566.000000,0.348300],[20562.000000,1.004900],[20550.000000,1.802300],[20544.500000,0.812600],[20520.000000,0.700000],[20501.000000,0.938100],[20500.000000,82.822100],[20461.000000,0.100000],[20430.190000,0.040000]],"asks":[[22353.280000,0.330000],[22354.190000,1.000000],[22355.100000,0.276900],[22356.000000,0.450600],[22359.990000,2.053600],[22360.000000,14.541300],[22367.480000,0.103600],[22370.000000,0.030900],[22378.000000,0.060600],[22380.000000,10.800000],[22390.000000,0.481700],[22396.000000,0.033500],[22400.000000,7.009400],[22406.000000,0.440700],[22413.240000,1.122200],[22435.690000,0.579000],[22449.900000,0.780000],[22450.000000,2.001900],[22480.000000,8.629400],[22488.000000,0.078300],[22495.000000,1.546200],[22499.000000,1.500000],[22500.000000,10.198800],[22507.000000,0.050000],[22512.000000,0.066700],[22518.000000,0.198700],[22520.000000,0.558200],[22522.220000,0.082400],[22526.000000,1.000000],[22527.000000,1.682800],[22528.000000,0.764700],[22529.000000,1.000000],[22529.900000,5.000000],[22530.000000,2.419500],[22545.000000,0.974100],[22550.000000,2.253100],[22555.000000,0.020600],[22560.000000,1.000000],[22561.980000,0.394000],[22562.000000,1.000000],[22565.460000,0.001900],[22580.000000,4.489700],[22595.000000,1.132600],[22598.000000,0.199600],[22599.000000,0.700000],[22600.000000,22.267800],[22600.900000,0.011900],[22602.000000,3.325700],[22614.750000,2.803000],[22619.900000,0.180600],[22620.000000,11.082800],[22622.000000,0.099800],[22626.390000,0.500000],[22626.450000,0.320000],[22634.900000,0.500000],[22635.000000,0.151200],[22637.820000,0.099800],[22645.000000,1.501400],[22648.860000,0.500000],[22650.000000,1.085300],[22654.550000,0.011500],[22659.750000,2.803000],[22661.000000,0.010600],[22666.000000,0.015000],[22669.100000,0.934600],[22680.600000,0.308900],[22686.000000,0.008300],[22688.000000,0.235600],[22699.000000,0.089600],[22699.990000,1.760200],[22700.000000,4.519600],[22707.000000,2.803000],[22710.000000,1.990000],[22710.110000,0.200000],[22720.000000,0.670800],[22738.000000,1.000000],[22750.000000,2.630300],[22760.000000,3.713000],[22769.000000,1.000000],[22780.000000,2.869200],[22786.000000,0.966900],[22786.730000,0.393000],[22788.000000,0.005000],[22789.000000,2.230000],[22797.000000,0.507100],[22798.000000,0.012200],[22799.000000,0.100000],[22800.000000,16.785800],[22800.010000,2.159200],[22820.000000,0.957700],[22838.090000,0.050200],[22839.000000,1.522300],[22848.000000,1.000000],[22850.000000,7.525600],[22853.000000,1.000000],[22854.800000,0.001000],[22870.000000,0.439200],[22880.000000,2.028800],[22882.700000,0.001000],[22888.000000,5.663500],[22888.880000,0.200000],[22889.000000,1.340700],[22890.000000,1.000000],[22895.000000,1.137300],[22895.900000,0.049500],[22898.000000,1.000000],[22898.800000,0.100000],[22900.000000,12.094400],[22905.000000,0.500000],[22937.000000,1.000000],[22950.000000,1.516400],[22950.400000,0.242800],[22955.000000,0.002000],[22958.900000,0.400000],[22959.000000,0.300000],[22960.000000,0.149600],[22965.000000,0.006900],[22966.120000,0.300000],[22976.000000,0.500000],[22980.000000,2.410000],[22986.000000,0.218400],[22986.160000,0.031000],[22986.900000,2.907200],[22988.000000,6.268000],[22989.000000,1.005800],[22990.000000,3.579700],[22992.000000,1.575300],[22996.280000,0.045700],[22996.900000,3.114600],[22997.000000,0.036900],[22998.000000,1.073100],[22998.300000,0.140000],[22999.000000,3.705600],[22999.990000,1.687900],[23000.000000,115.746800],[23000.100000,0.159400],[23000.700000,0.025500],[23003.000000,1.768500],[23008.600000,0.016300],[23009.000000,0.050000],[23010.000000,2.595600],[23019.880000,0.021000],[23050.000000,0.147800],[23080.000000,0.050000],[23095.000000,1.446000],[23100.000000,7.086400],[23100.210000,0.007100],[23106.900000,2.845900],[23109.000000,0.050000],[23110.000000,0.524100]]};
var times = [];
var ohlcs = [];
var xAsks = [];
var yAsks = [];
var xBids = [];
var yBids = [];
// asks卖单，bids买单
var splitKlineData = function() {
var i;
var item;
for (i = 0; i < rawKlineData.length; i++) {
item = rawKlineData[i];
times.push(item[0]);
ohlcs.push([item[1], item[4], item[3], item[2]]); // [开盘值, 收盘值, 最低值, 最高值]
}
};
var splitDepthData = function() {
var i;
var item;
for (i = 0; i < rawDepthData.bids.length; i++) {
item = rawDepthData.asks[i];
xAsks.push(item[1]);
yAsks.push(item[0]);
}
for (i = 0; i < rawDepthData.asks.length; i++) {
item = rawDepthData.bids[i];
xBids.push(item[1]);
yBids.push(item[0]);
}
};
splitKlineData();
splitDepthData();
option = {
xAxis: [{
type: 'category',
data: times,
scale: true,
boundaryGap: ['20%', '20%'],
axisTick: false,
axisLabel: false,
axisPointer: {
label: {
show: false
}
},
zlevel: 1
}, {
type: 'category',
gridIndex: 1,
data: xAsks,
min: 'dataMin',
axisTick: false,
axisLabel: false,
zlevel: 0,
axisLine: { show: false }
}, {
type: 'category',
gridIndex: 2,
data: xBids,
min: 'dataMin',
axisTick: false,
axisLabel: false,
zlevel: 0
}],
yAxis: [{
position: 'right',
scale: true,
boundaryGap: ['20%', '20%'],
axisLabel: {
showMinLabel: false,
showMaxLabel: false,
},
zlevel: 1
}, {
position: 'right',
scale: true,
step: true,
gridIndex: 1,
splitNumber: 3,
boundaryGap: [0, '20%'],
axisTick: { inside: true },
axisLabel: false,
splitLine: false,
min: 'dataMin',
zlevel: 0
}, {
position: 'right',
scale: true,
step: true,
gridIndex: 2,
splitNumber: 3,
boundaryGap: ['20%', 0],
axisTick: { inside: true },
axisLabel: false,
splitLine: false,
max: 'dataMax',
zlevel: 0
}],
grid: [{
top: 0,
left: '1%',
right: '10%',
height: '90%'
}, {
top: 0,
left: '90%',
width: '10%',
height: '45%'
}, {
top: '45%',
left: '90%',
width: '10%',
height: '45%'
}],
tooltip: {
trigger: 'axis',
formatter: function(params) {
var kline;
var item;
for (var i = 0; i < params.length; i++) {
item = params[i];
switch (item.seriesIndex) {
case 0:
kline = item.name + ' 开：' + item.value[1] + ' 高：' + item.value[4] + ' 低：' + item.value[3] + ' 收：' + item.value[2];
break;
}
}
return kline + '<br/>'+' 我不会换行啦啦啦啦啦啦啦 我不会换行啦啦啦啦啦啦啦 我不会换行啦啦啦啦啦啦啦 我不会换行啦啦啦啦啦啦啦 啊啊啊啊';
},
textStyle: {
color: '#000000',
},
backgroundColor: 'transparent',
padding: [0, 0],
position: [3, 3],
axisPointer: {
type: 'cross',
crossStyle: {
type: 'solid'
}
}
},
axisPointer: {
zlevel: 2
},
dataZoom: [{
type: 'inside',
xAxisIndex: [0, 1, 2]
}, {
show: false
}],
series: [
{
name: 'K线',
type: 'candlestick',
dimensions: ['时间', '开', '收', '低', '高'],
data: ohlcs,
animation: false,
markPoint: {
symbolSize: [1, 1],
itemStyle: {
normal: {
color: 'transparent'
}
},
data: [{
type: 'max',
name: '最大值',
valueDim: '高',
symbolOffset: [0, -9],
label: {
normal: {
color: '#000000'
}
}
}, {
type: 'min',
name: '最小值',
valueDim: '低',
symbolOffset: [0, 9],
label: {
normal: {
color: '#000000'
}
}
}]
},
itemStyle: {
normal: {
color: 'red',
color0: 'green',
borderColor: 'red',
borderColor0: 'green'
}
},
zlevel: 1
},
{
name: 'Asks',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: yAsks,
showSymbol: false,
animation: false,
lineStyle: {
normal: {
width: 1,
color: 'green'
}
},
areaStyle: {
normal:{
color: 'green'
}
}
},
{
name: 'Bids',
type: 'line',
xAxisIndex: 2,
yAxisIndex: 2,
data: yBids,
showSymbol: false,
animation: false,
lineStyle: {
normal: {
width: 1,
color: 'red'
}
},
areaStyle: {
normal: {
color: 'red'
}
}
}
]
};
setInterval(function() {
myChart.setOption(option);
}, 5 * 1000);