<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script> <title>echart.html</title> </head> <body> <div id="main" style="width: 100px;height:40px;border: 1px dashed #000;margin: 20px;"></div> <script type="text/javascript"> // based ready dom, instance initialization echarts var myChart = echarts.init (document.getElementById ( 'main' )); // do not have to generate a random array generateOHLC Study [date, open, high, low, off dish], ; var Data = generateOHLC (2000 ); var Option = { dataset: { source: data }, tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }, grid: [ { left: 0, right: 0, top: 0, bottom:0 } ], xAxis: [ { show:false, type: 'category', scale: true, boundaryGap: false, splitNumber: 20, min: 'dataMin' , max: 'dataMax' } ], yAxis: [ { show:false, scale: true } ], series: [ { type: 'candlestick', itemStyle: { color: '#00B2D9', color0: '#00B2D9', borderColor: '#00B2D9', borderColor0: '#00B2D9' }, // Here i.e., a first dimension of 0 bit array is shown in x-axis @ type: 'to Candlestick' default dimension is 0-'date ', 1-'open ', 2-'close ', 3 -'highest ',. 4-'lowest' encode: { X: 0 , @ type: 'to Candlestick' of y to be 4 or error; // sort here for tooltip display when the mouse is placed on a view showing a change of the order does not affect the display of FIG line k // If only want to show open, close, it is set to [1,2,1,2] // [1,4,3,2] represents the tooltip box before playing the show open, again demonstrated the lowest, again demonstrated the highest, final Close Y: [1,4,3,2 ] } } ] }; function generateOHLC(count) { console.log(count); was data = []; was XValue = + new Date (2011, 0, 1 ); was minute = 60 * 1000 ; was base value = Math.random () * 12000 ; was boxVals = new Array (4 ); was dayRange = 12 ; for (var i = 0; i < count; i++) { baseValue = baseValue + Math.random() * 20 - 10; for (var j = 0; j < 4; j++) { boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue; } boxVals.sort (); var openIdx = Math.round(Math.random() * 3); var closeIdx = Math.round(Math.random() * 2); if (closeIdx === openIdx) { closeIdx++; } var volumn = boxVals[3] * (1000 + Math.random() * 500); // ['open', 'close', 'lowest', 'highest'] // [1, 4, 3, 2] data[i] = [ echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute), +boxVals[openIdx].toFixed(2), // open +boxVals[3].toFixed(2), // highest +boxVals[0].toFixed(2), // lowest +boxVals[closeIdx].toFixed(2) // close ]; } return data; function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) { var sign; if (openVal > closeVal) { sign = -1; } else if (openVal < closeVal) { sign = 1; } else { sign = dataIndex > 0 ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1) : 1; } return sign; } } myChart.setOption(option); </script> </body> </html>