| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| .split { |
| line-height: 60px; |
| height: 60px; |
| background: #333; |
| text-align: center; |
| font-weight: bold; |
| font-size: 20px; |
| color: #fff; |
| } |
| .block { |
| position: relative; |
| } |
| body { |
| background: #555; |
| } |
| body .main { |
| height: 550px; |
| margin-right: 220px; |
| margin-left: 20px; |
| } |
| .panel { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| width: 200px; |
| background: #555; |
| color: #fff; |
| font-size: 14px; |
| font-weight: normal; |
| padding: 10px; |
| } |
| ul.panel-desc { |
| padding-left: 20px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid #777; |
| } |
| ul.panel-desc li { |
| margin-bottom: 5px; |
| } |
| h3 { |
| font-size: 14px; |
| } |
| |
| #main2 { |
| height: 450px; |
| } |
| #main2-st { |
| position: relative; |
| height: 200px; |
| margin-right: 220px; |
| margin-left: 20px; |
| } |
| strong { |
| background: yellow; |
| padding: 0 2px; |
| border-radius: 2px; |
| color: #000; |
| } |
| |
| #main1-st { |
| position: absolute; |
| top: 0; |
| right: 300px; |
| height: 550px; |
| width: 400px; |
| z-index: 999; |
| } |
| |
| .sm-settings { |
| border-bottom: 1px solid #777; |
| padding-bottom: 15px; |
| } |
| .sm-settings input { |
| max-width: 50px; |
| } |
| </style> |
| |
| <div class="split">Candlestick</div> |
| <div class="block"> |
| <div id="main1" class="main"></div> |
| <!-- <div id="main1-st"></div> --> |
| <div class="panel"> |
| <ul class="panel-desc"> |
| <li><strong>CHECK</strong>: brush an area and drag dataZoom.</li> |
| </ul> |
| <div id="panel1"></div> |
| </div> |
| </div> |
| |
| <div class="split">Graph</div> |
| <div class="block"> |
| <div id="main2" class="main"></div> |
| <!-- <div id="main1-st"></div> --> |
| <div class="panel"> |
| <ul class="panel-desc"> |
| <li><strong>CHECK</strong>: brush an area and drag dataZoom.</li> |
| </ul> |
| <div id="panel2"></div> |
| </div> |
| </div> |
| |
| |
| |
| |
| <!-- =================== 1 ===================== --> |
| |
| |
| |
| |
| <script> |
| |
| /** |
| * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment> |
| * @see <http://bl.ocks.org/mbostock/4061502> |
| */ |
| var chart; |
| var data; |
| var panel; |
| |
| require([ |
| 'echarts', |
| 'data/stock-DJI.json' |
| ], function (echarts, rawData) { |
| |
| chart = echarts.init(document.getElementById('main1'), null, { |
| |
| }); |
| panel = document.getElementById('panel1'); |
| data = splitData(rawData); |
| |
| update(); |
| |
| chart.on('click', function (info) { |
| if (info.data && info.componentType === 'series') { |
| alert([ |
| 'clicked on: ', |
| 'DATA: ' + info.name, |
| 'OPEN: ' + info.data[0], |
| 'CLOSE: ' + info.data[1], |
| 'LOWEST: ' + info.data[2], |
| 'HIGHEST: ' + info.data[3], |
| 'VOLUMN: ' + info.data[4] |
| ].join('\n')); |
| } |
| }); |
| }) |
| |
| function splitData(rawData) { |
| var categoryData = []; |
| var values = []; |
| var volumns = []; |
| for (var i = 0; i < rawData.length; i++) { |
| categoryData.push(rawData[i].splice(0, 1)[0]); |
| values.push(rawData[i]) |
| volumns.push(rawData[i][4]); |
| } |
| return { |
| categoryData: categoryData, |
| values: values, |
| volumns: volumns |
| }; |
| } |
| |
| function calculateMA(dayCount, data) { |
| var result = []; |
| for (var i = 0, len = data.values.length; i < len; i++) { |
| if (i < dayCount) { |
| result.push('-'); |
| continue; |
| } |
| var sum = 0; |
| for (var j = 0; j < dayCount; j++) { |
| sum += data.values[i - j][1]; |
| } |
| result.push(+(sum / dayCount).toFixed(3)); |
| } |
| return result; |
| } |
| |
| function update() { |
| |
| chart.setOption({ |
| backgroundColor: '#eee', |
| animation: false, |
| legend: { |
| left: 0, |
| data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30'] |
| }, |
| 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', |
| data: data.categoryData, |
| scale: true, |
| boundaryGap : false, |
| axisLine: {onZero: false}, |
| splitLine: {show: false}, |
| splitNumber: 20, |
| min: 'dataMin', |
| max: 'dataMax' |
| }, |
| { |
| 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 |
| } |
| }, |
| { |
| 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: 98, |
| end: 100 |
| }, |
| { |
| show: true, |
| xAxisIndex: [0, 1], |
| type: 'slider', |
| bottom: 10, |
| start: 98, |
| end: 100 |
| } |
| ], |
| series: [ |
| { |
| name: 'Dow-Jones index', |
| type: 'candlestick', |
| data: data.values, |
| itemStyle: { |
| normal: { |
| borderColor: null, |
| borderColor0: null |
| } |
| }, |
| 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 |
| } |
| ] |
| }); |
| |
| 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.dispatchAction({ |
| type: 'brush', |
| areas: [ |
| { |
| brushType: 'lineX', |
| coordRange: ['2016-06-02', '2016-06-20'], |
| xAxisIndex: 0 |
| } |
| ] |
| }); |
| } |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <!-- =================== 2 ===================== --> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts', |
| 'extension/dataTool', |
| // 'echarts/chart/graph', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/geo', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/visualMap', |
| 'theme/vintage' |
| ], function (echarts, dataTool) { |
| var gexf = dataTool.gexf; |
| |
| var chart = echarts.init(document.getElementById('main2'), 'vintage'); |
| |
| $.get('./data/les-miserables.gexf', function (xml) { |
| var graph = gexf.parse(xml); |
| var categories = []; |
| for (var i = 0; i < 9; i++) { |
| categories[i] = { |
| name: '类目' + i |
| }; |
| } |
| graph.nodes.forEach(function (node) { |
| delete node.itemStyle; |
| node.value = node.symbolSize; |
| node.label = { |
| normal: { |
| show: node.symbolSize > 30 |
| }, |
| emphasis: { |
| show: true |
| } |
| }; |
| node.category = node.attributes['modularity_class']; |
| }); |
| graph.links.forEach(function (link) { |
| delete link.lineStyle; |
| }); |
| var option = { |
| tooltip: {}, |
| legend: [{ |
| width: '70%', |
| // selectedMode: 'single', |
| data: categories.map(function (a) { |
| return a.name; |
| }) |
| }], |
| animationDurationUpdate: 1500, |
| animationEasingUpdate: 'quinticInOut', |
| brush: { |
| }, |
| series : [ |
| { |
| name: 'Les Miserables', |
| type: 'graph', |
| layout: 'none', |
| data: graph.nodes, |
| links: graph.links, |
| categories: categories, |
| roam: true, |
| draggable: true, |
| itemStyle: { |
| normal: { |
| borderColor: '#fff', |
| borderWidth: 2, |
| shadowBlur: 10, |
| shadowColor: 'rgba(0, 0, 0, 0.3)' |
| } |
| }, |
| focusNodeAdjacency: true, |
| // edgeSymbol: ['none', 'arrow'], |
| // scaleLimit: { |
| // min: 1.5, |
| // max: 2 |
| // }, |
| label: { |
| normal: { |
| position: 'right', |
| formatter: '{b}' |
| } |
| }, |
| lineStyle: { |
| normal: { |
| color: 'source', |
| curveness: 0.3 |
| } |
| } |
| } |
| ] |
| }; |
| |
| chart.setOption(option); |
| |
| var config = { |
| layout: 'none' |
| }; |
| |
| chart.on('click', function (params) { |
| console.log(params, params.data); |
| }); |
| |
| }); |
| }); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
