| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Scatter</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS --> |
| </head> |
| <body> |
| <style> |
| html, body, #main { |
| background: #111; |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| </style> |
| <div id="main"></div> |
| <div id="data-count"> |
| <span>LOADED: </span> |
| <span id="data-count-number"></span> |
| </div> |
| <style> |
| #data-count { |
| font-size: 30px; |
| color: #fff; |
| position: absolute; |
| z-index: 1000; |
| left: 10px; |
| bottom: 10px; |
| } |
| #data-count-number { |
| font-size: 80px; |
| } |
| </style> |
| <script src="../dist/echarts.js"></script> |
| <script src="../map/js/world.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <script src="lib/countup.js"></script> |
| <script> |
| var chart = echarts.init(document.getElementById('main')); |
| |
| var dataCount = 0; |
| var CHUNK_COUNT = 200; |
| // var CHUNK_COUNT = 20; |
| // https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/ |
| function fetchData(idx) { |
| if (idx >= CHUNK_COUNT) { |
| return; |
| } |
| // var dataURL = `../../echarts-gl/test/data/gps/gps_${idx}.bin`; |
| // var dataURL = `../../data-online/gps/gps_${idx}.bin`; |
| var dataURL = `../../echarts-examples/public/data/asset/data/gps/gps_${idx}.bin`; |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', dataURL, true); |
| xhr.responseType = 'arraybuffer'; |
| |
| xhr.onload = function (e) { |
| var rawData = new Int32Array(this.response); |
| var data = new Float32Array(rawData.length); |
| var addedDataCount = rawData.length / 2; |
| for (var i = 0; i < rawData.length; i += 2) { |
| data[i] = rawData[i+1] / 1e7; |
| data[i+1] = rawData[i] / 1e7; |
| } |
| |
| chart.appendData({ |
| seriesIndex: 0, |
| data: data |
| }); |
| |
| var countUp = new CountUp('data-count-number', dataCount, dataCount + addedDataCount, 0, 1); |
| countUp.start(); |
| dataCount += addedDataCount; |
| |
| fetchData(idx + 1); |
| } |
| |
| xhr.send(); |
| } |
| |
| chart.setOption({ |
| backgroundColor: '#000', |
| geo: { |
| map: 'world', |
| roam: true, |
| label: { |
| emphasis: { |
| show: false |
| } |
| }, |
| silent: true, |
| itemStyle: { |
| normal: { |
| areaColor: '#323c48', |
| borderColor: '#111' |
| }, |
| emphasis: { |
| areaColor: '#2a333d' |
| } |
| } |
| }, |
| series: [{ |
| name: '弱', |
| type: 'scatter', |
| progressive: 1e5, |
| coordinateSystem: 'geo', |
| symbolSize: 0.5, |
| blendMode: 'lighter', |
| large: true, |
| itemStyle: { |
| normal: { |
| color: 'rgb(20, 15, 2)' |
| } |
| }, |
| postEffect: { |
| enable: true |
| }, |
| silent: true, |
| dimensions: ['lng', 'lat'], |
| data: new Float32Array() |
| }] |
| }); |
| |
| fetchData(0); |
| </script> |
| </body> |
| </html> |
