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
