| <!DOCTYPE html> | |
| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="lib/simpleRequire.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', | |
| autoResize: false, | |
| 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> |