This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit b18189d9a0978c5cad898bddf1365bc5c74bf430 Author: sushuang <sushuang0...@gmail.com> AuthorDate: Tue Apr 3 16:06:53 2018 +0800 add example. --- test/scatter-stream-large.html | 149 +++++++++++++++++++++++++++++++++++++ test/scatter-stream-not-large.html | 149 +++++++++++++++++++++++++++++++++++++ 2 files changed, 298 insertions(+) diff --git a/test/scatter-stream-large.html b/test/scatter-stream-large.html new file mode 100644 index 0000000..2295b1c --- /dev/null +++ b/test/scatter-stream-large.html @@ -0,0 +1,149 @@ +<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> + <script src='lib/testHelper.js'></script> + <link rel="stylesheet" href="lib/reset.css" /> + <meta name='viewport' content='width=device-width, initial-scale=1' /> + </head> + <body> + <style> + html, body, #main0 { + width: 100%; + height: 100%; + margin: 0; + } + </style> + <div id='main0'></div> + <script> + + var xs = [440000, 450000]; + var ys = [4368000, 4537000]; + + require([ + 'echarts' + ], function (echarts) { + + $.get('../map/json/world.json', function (worldJson) { + echarts.registerMap('world', worldJson); + + var count = 35663; + var lngCount = 1000; + var chart; + + var points = []; + + var lngStep = 0.3; + var latStep = 1; + var lng0 = -160; + var lng1 = lng0 + lngCount * lngStep; + var lat0 = 0; + var lat1 = lat0 + Math.floor(count / lngCount) * latStep; + + for (var i = 0; i < count; i++) { + var iLng = i % lngCount; + var iLat = Math.floor(i / lngCount); + var lng = lng0 + iLng * lngStep; + var lat = lat0 + iLat * latStep; + points.push([lng, lat]); + } + + var option = { + title: { + text: 'World Flights', + left: 'center', + textStyle: { + color: '#eee' + } + }, + backgroundColor: '#003', + tooltip: { + formatter: function (param) { + return 'Point: ' + param.value[0] + ', ' + param.value[1]; + } + }, + geo: { + map: 'world', + left: 0, + right: 0, + zoom: 0.5, + roam: true, + silent: true, + itemStyle: { + normal: { + borderColor: '#003', + color: '#005' + } + } + }, + series: [{ + type: 'scatter', + coordinateSystem: 'geo', + blendModel: 'lighter', + data: points, + symbol: 'rect', + symbolSize: 6, + large: true, + // large: false, + largeThreshold: 100, + progressiveThreshold: 101 + }, { + type: 'scatter', + coordinateSystem: 'geo', + symbolSize: 5, + color: ['green'], + data: [ + { + value: [lng0, lat0], + label: { + show: true, + position: 'top', + formatter: 'bottom-left' + } + }, { + value: [lng1, lat0], + label: { + show: true, + position: 'top', + formatter: 'bottom-right' + } + }, { + value: [lng0, lat1], + label: { + show: true, + position: 'bottom', + formatter: 'top-left' + } + }, { + value: [lng1, lat1], + label: { + show: true, + position: 'bottom', + formatter: 'top-right' + } + } + ] + }] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + count + ' points should be rendered in the area of the 4 green points', + '( large:true and el.incremetal = true) ', + 'And check roam.' + ], + option: option, + height: 550 + }); + chart.on('finished', function () { + console.log('finished'); + }); + + }); + }); + + </script> + </body> +</html> \ No newline at end of file diff --git a/test/scatter-stream-not-large.html b/test/scatter-stream-not-large.html new file mode 100644 index 0000000..8afede3 --- /dev/null +++ b/test/scatter-stream-not-large.html @@ -0,0 +1,149 @@ +<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> + <script src='lib/testHelper.js'></script> + <link rel="stylesheet" href="lib/reset.css" /> + <meta name='viewport' content='width=device-width, initial-scale=1' /> + </head> + <body> + <style> + html, body, #main0 { + width: 100%; + height: 100%; + margin: 0; + } + </style> + <div id='main0'></div> + <script> + + var xs = [440000, 450000]; + var ys = [4368000, 4537000]; + + require([ + 'echarts' + ], function (echarts) { + + $.get('../map/json/world.json', function (worldJson) { + echarts.registerMap('world', worldJson); + + var count = 35663; + var lngCount = 1000; + var chart; + + var points = []; + + var lngStep = 0.3; + var latStep = 1; + var lng0 = -160; + var lng1 = lng0 + lngCount * lngStep; + var lat0 = 0; + var lat1 = lat0 + Math.floor(count / lngCount) * latStep; + + for (var i = 0; i < count; i++) { + var iLng = i % lngCount; + var iLat = Math.floor(i / lngCount); + var lng = lng0 + iLng * lngStep; + var lat = lat0 + iLat * latStep; + points.push([lng, lat]); + } + + var option = { + title: { + text: 'World Flights', + left: 'center', + textStyle: { + color: '#eee' + } + }, + backgroundColor: '#003', + tooltip: { + formatter: function (param) { + return 'Point: ' + param.value[0] + ', ' + param.value[1]; + } + }, + geo: { + map: 'world', + left: 0, + right: 0, + zoom: 0.5, + roam: true, + silent: true, + itemStyle: { + normal: { + borderColor: '#003', + color: '#005' + } + } + }, + series: [{ + type: 'scatter', + coordinateSystem: 'geo', + blendModel: 'lighter', + data: points, + symbol: 'rect', + symbolSize: 6, + // large: true, + large: false, + largeThreshold: 100, + progressiveThreshold: 101 + }, { + type: 'scatter', + coordinateSystem: 'geo', + symbolSize: 5, + color: ['green'], + data: [ + { + value: [lng0, lat0], + label: { + show: true, + position: 'top', + formatter: 'bottom-left' + } + }, { + value: [lng1, lat0], + label: { + show: true, + position: 'top', + formatter: 'bottom-right' + } + }, { + value: [lng0, lat1], + label: { + show: true, + position: 'bottom', + formatter: 'top-left' + } + }, { + value: [lng1, lat1], + label: { + show: true, + position: 'bottom', + formatter: 'top-right' + } + } + ] + }] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + count + ' points should be rendered in the area of the 4 green points', + '( large:true and el.incremetal = true) ', + 'And check roam.' + ], + option: option, + height: 550 + }); + chart.on('finished', function () { + console.log('finished'); + }); + + }); + }); + + </script> + </body> +</html> \ No newline at end of file -- To stop receiving notification emails like this one, please contact sushu...@apache.org. --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org