| <html> |
| <head> |
| <meta charset='utf-8'> |
| <script src='../dist/echarts.js'></script> |
| <script src="../../echarts-gl/dist/echarts-gl.js"></script> |
| <script src='../map/js/world.js'></script> |
| <meta name='viewport' content='width=device-width, initial-scale=1' /> |
| </head> |
| <body> |
| <style> |
| html, body, #main { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| </style> |
| <div id='main'></div> |
| <script> |
| |
| var CHUNK_COUNT = 32; |
| |
| var dataCount = 0; |
| |
| var chart = echarts.init(document.getElementById('main')); |
| |
| fetchData() |
| |
| function fetchData() { |
| // if (idx >= CHUNK_COUNT) { |
| // return; |
| // } |
| // var dataURL = `../data/ny/links_ny_${idx}.bin`; |
| var dataURL = `../../echarts-examples/public/data/asset/data/links-ny/links_ny.bin`; |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', dataURL, true); |
| xhr.responseType = 'arraybuffer'; |
| |
| xhr.onload = function (e) { |
| var rawData = new Float32Array(this.response); |
| var data = new Float64Array(rawData.length - 2); |
| var offsetX = rawData[0]; |
| var offsetY = rawData[1]; |
| var off = 0; |
| var addedDataCount = 0; |
| for (var i = 2; i < rawData.length;) { |
| var count = rawData[i++]; |
| data[off++] = count; |
| for (var k = 0; k < count; k++) { |
| var x = rawData[i++] + offsetX; |
| var y = rawData[i++] + offsetY; |
| data[off++] = x; |
| data[off++] = y; |
| |
| addedDataCount++; |
| } |
| } |
| |
| setOption(data); |
| // chart.appendData({ |
| // seriesIndex: 0, |
| // data: data |
| // }); |
| |
| // dataCount += addedDataCount; |
| |
| // fetchData(idx + 1); |
| } |
| |
| xhr.send(); |
| } |
| |
| function setOption(data) { |
| |
| var option = { |
| progressive: 20000, |
| backgroundColor: '#111', |
| geo: { |
| center: [-74.04327099998152, 40.86737600240287], |
| zoom: 360, |
| map: 'world', |
| roam: true, |
| silent: true, |
| itemStyle: { |
| normal: { |
| color: 'transparent', |
| borderColor: 'rgba(255,255,255,0.1)', |
| borderWidth: 1 |
| } |
| } |
| }, |
| series: [{ |
| type: 'lines', |
| |
| coordinateSystem: 'geo', |
| |
| blendMode: 'lighter', |
| |
| dimensions: ['value'], |
| |
| data: data, |
| polyline: true, |
| large: true, |
| |
| lineStyle: { |
| color: 'orange', |
| width: 0.5, |
| opacity: 0.3 |
| } |
| }] |
| }; |
| |
| chart.setOption(option); |
| } |
| |
| |
| </script> |
| </body> |
| </html> |
