blob: 63612014e981b07b6665f57f1e33c46acfaed8cf [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<script src="lib/frameInsight.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
.test-title {
background: #146402;
color: #fff;
}
</style>
<div id="main0"></div>
<div id="panel0"></div>
<div id="duration"></div>
<script>
require(['echarts'], function (echarts) {
// The data count is from a real requirement.
var rawDataChunkSize = 1e4;
var chunkCount = 20;
var minute = 60 * 1000;
var xValue = +new Date(2011, 0, 1);
var baseValue = Math.random() * 12000;
var xValueMin = 0;
var xValueMax = rawDataChunkSize * chunkCount;
var yValueMin = Infinity;
var yValueMax = -Infinity;
var rawData = [];
for (var i = 0; i < chunkCount; i++) {
rawData.push(generateOHLC(rawDataChunkSize));
}
yValueMax = Math.ceil(yValueMax);
yValueMin = Math.floor(yValueMin);
function run() {
frameInsight.init(echarts, 'duration');
// var data = generateOHLC(rawDataChunkSize);
var chart = window.chart = init();
var loadedChunkIndex = 0;
appendData();
function appendData() {
if (loadedChunkIndex >= chunkCount) {
return;
}
setTimeout(function () {
chart.appendData({seriesIndex: 0, data: rawData[loadedChunkIndex]});
loadedChunkIndex++;
appendData();
}, 300);
}
}
function generateOHLC(count) {
var data = [];
var tmpVals = new Array(4);
var dayRange = 12;
for (var i = 0; i < count; i++) {
baseValue = baseValue + Math.random() * 20 - 10;
for (var j = 0; j < 4; j++) {
tmpVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
if (tmpVals[j] < yValueMin) {
yValueMin = tmpVals[j];
}
if (tmpVals[j] > yValueMax) {
yValueMax = tmpVals[j];
}
}
tmpVals.sort();
var idxRandom = Math.random();
var openIdx = Math.round(Math.random() * 3);
var closeIdx = Math.round(Math.random() * 2);
if (closeIdx === openIdx) {
closeIdx++;
}
// ['open', 'close', 'lowest', 'highest']
// [1, 4, 3, 2]
data.push([
echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', xValue += minute),
+tmpVals[openIdx].toFixed(2), // open
+tmpVals[3].toFixed(2), // highest
+tmpVals[0].toFixed(2), // lowest
+tmpVals[closeIdx].toFixed(2) // close
]);
}
return data;
}
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j][2];
}
result.push(+(sum / dayCount).toFixed(3));
}
return result;
}
function init() {
var option = {
backgroundColor: '#eee',
// animation: false,
legend: {
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
}
}
},
// brush: {
// xAxisIndex: 'all',
// brushLink: 'all',
// outOfBrush: {
// colorAlpha: 0.1
// }
// },
grid: [
{
left: '10%',
right: '10%',
height: 300
},
// {
// left: '10%',
// right: '10%',
// height: 70,
// bottom: 80
// }
],
xAxis: [
{
type: 'category',
scale: true,
boundaryGap : false,
// inverse: true,
axisLine: {onZero: false},
splitLine: {show: false},
splitNumber: 20,
min: xValueMin,
max: xValueMax
},
// {
// type: 'category',
// gridIndex: 1,
// data: data.categoryData,
// scale: true,
// boundaryGap : false,
// axisLine: {onZero: false},
// axisTick: {show: false},
// splitLine: {show: false},
// axisLabel: {show: false},
// splitNumber: 20,
// min: 'dataMin',
// max: 'dataMax'
// }
],
yAxis: [
{
scale: true,
splitArea: {
show: true
},
min: yValueMin,
max: yValueMax
},
// {
// scale: true,
// gridIndex: 1,
// splitNumber: 2,
// axisLabel: {show: false},
// axisLine: {show: false},
// axisTick: {show: false},
// splitLine: {show: false}
// }
],
dataZoom: [
{
type: 'inside',
// xAxisIndex: [0, 1],
// start: 10,
// end: 100
},
{
show: true,
// xAxisIndex: [0, 1],
type: 'slider',
bottom: 10,
// start: 10,
// end: 100
}
],
series: [
{
type: 'candlestick',
// progressiveMode: 'linear',
// data: data,
encode: {
x: 0,
y: [1, 4, 3, 2]
},
// progressiveChunkMode: 'sequential'
// progressive: false
// progressive: progressive
// tooltip: {
// formatter: function (param) {
// var param = param[0];
// return [
// 'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
// 'Open: ' + param.data[0] + '<br/>',
// 'Close: ' + param.data[1] + '<br/>',
// 'Lowest: ' + param.data[2] + '<br/>',
// 'Highest: ' + param.data[3] + '<br/>'
// ].join('')
// }
// }
} //,
// {
// name: 'MA5',
// type: 'line',
// data: calculateMA(5, data),
// smooth: true,
// lineStyle: {
// normal: {opacity: 0.5}
// }
// },
// {
// name: 'MA10',
// type: 'line',
// data: calculateMA(10, data),
// smooth: true,
// lineStyle: {
// normal: {opacity: 0.5}
// }
// },
// {
// name: 'MA20',
// type: 'line',
// data: calculateMA(20, data),
// smooth: true,
// lineStyle: {
// normal: {opacity: 0.5}
// }
// },
// {
// name: 'MA30',
// type: 'line',
// data: calculateMA(30, data),
// smooth: true,
// lineStyle: {
// normal: {opacity: 0.5}
// }
// },
// {
// name: 'Volumn',
// type: 'bar',
// xAxisIndex: 1,
// yAxisIndex: 1,
// data: data.volumns
// }
]
};
var panel = document.getElementById('panel0');
var chart = testHelper.create(echarts, 'main0', {
title: 'Append data and progressive by mod',
option: option,
height: 550
});
return chart;
// chart && chart.on('brushSelected', renderBrushed);
// function renderBrushed(params) {
// var sum = 0;
// var min = Infinity;
// var max = -Infinity;
// var countBySeries = [];
// var brushComponent = params.batch[0];
// var rawIndices = brushComponent.selected[0].dataIndex;
// for (var i = 0; i < rawIndices.length; i++) {
// var val = data.values[rawIndices[i]][1];
// sum += val;
// min = Math.min(val, min);
// max = Math.max(val, max);
// }
// panel.innerHTML = [
// '<h3>STATISTICS:</h3>',
// 'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
// 'MIN of open: ' + min.toFixed(4) + '<br>',
// 'MAX of open: ' + max.toFixed(4) + '<br>'
// ].join(' ');
// }
// chart && chart.dispatchAction({
// type: 'brush',
// areas: [
// {
// brushType: 'lineX',
// coordRange: ['2016-06-02', '2016-06-20'],
// xAxisIndex: 0
// }
// ]
// });
}
run();
});
</script>
</body>
</html>