This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch enhance-visual-regression-test
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit f07de0bb68e07beb73e6717ae12e66b1bc1dfb4c
Author: pissang <bm...@gmail.com>
AuthorDate: Mon May 10 14:02:42 2021 +0800
test: use require to replace original jquery loading
Make sure no async loading that are out of control
---
test/brush.html | 634 ++++++++++----------
test/brush2.html | 153 +++--
test/custom-hexbin.html | 426 +++++++------
test/custom-shape-morphing.html | 473 ++++++++-------
test/custom-shape-morphing3.html | 698 +++++++++++-----------
test/data-transform-aggregate.html | 411 ++++++-------
test/dataZoom-action.html | 5 +-
test/dataset-pivot.html | 162 +++--
test/effectScatter.html | 611 ++++++++++---------
test/finished.html | 96 ++-
test/force-edge-ignoreLayout.html | 128 ++--
test/geo-data-stream.html | 146 +++--
test/geo-map.html | 323 +++++-----
test/geo-random-stream.html | 127 ++--
test/geoLine.html | 280 ++++-----
test/geoScatter.html | 548 +++++++++--------
test/graph.html | 261 ++++----
test/heatmap-map.html | 858 +++++++++++++--------------
test/hoverStyle.html | 92 ++-
test/label-layout.html | 124 ++--
test/lines-bus.html | 5 +-
test/lines-flight.html | 185 +++---
test/lines-stream-large.html | 210 ++++---
test/lines-stream-not-large.html | 171 +++---
test/lines-symbol.html | 153 +++--
test/lines-track.html | 321 +++++-----
test/map-contour.html | 119 ++--
test/map-default.html | 119 ++--
test/map-grid.html | 607 +++++++++----------
test/map-labels.html | 143 +++--
test/map-nameProperty.html | 295 +++++----
test/map-nested.html | 96 ++-
test/map-parallel.html | 7 +-
test/map-province.html | 7 +-
test/map.html | 690 +++++++++++----------
test/mapWorld.html | 469 ++++++++-------
test/markLine-symbolRotate.html | 267 +++++----
test/masterPainterColorChoice.html | 101 ++--
test/parallel-nutrients.html | 39 +-
test/pie-richText.html | 4 +-
test/pie-visual.html | 18 +-
test/sankey-level.html | 129 ++--
test/sankey-nodeAlign-left.html | 77 ++-
test/sankey-nodeAlign-right.html | 78 ++-
test/sankey-vertical-energy.html | 91 ++-
test/sankey.html | 70 +--
test/scatter-random-stream-fix-axis.html | 232 ++++----
test/scatter-stream-large.html | 216 ++++---
test/scatter-stream-visual.html | 20 +-
test/scatter-weibo.html | 195 +++---
test/timeline-life.html | 385 ++++++------
test/tooltip-domnode.html | 1 -
test/touch-slide.html | 98 ++-
test/tree-basic.html | 121 ++--
test/tree-image.html | 87 ++-
test/tree-image2.html | 80 ++-
test/tree-orient-right-left.html | 95 ++-
test/tree-orient-top-bottom.html | 88 ++-
test/tree-radial.html | 58 +-
test/tree-roam.html | 62 +-
test/tree-vertical.html | 88 ++-
test/treemap-option.html | 7 +-
test/treemap-option2.html | 7 +-
test/visualMap-large.html | 178 +++---
test/visualMap-opacity.html | 141 +++--
test/visualMap-special-case.html | 109 ++--
test/worldPopulationBubble.html | 989 +++++++++++++++----------------
67 files changed, 7042 insertions(+), 7242 deletions(-)
diff --git a/test/brush.html b/test/brush.html
index f005b87..728833b 100644
--- a/test/brush.html
+++ b/test/brush.html
@@ -480,375 +480,373 @@ under the License.
<script>
- require(['echarts'], function (echarts) {
+ require(['echarts', 'map/js/china'], function (echarts) {
var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {name: '乳山', value: 18}, {name: '金昌', value: 19}, {name: '泉州', value: 21}, {name: '莱西', value: 21}, {name: '日照', value: 21}, {name: '胶南', value: 22}, {name: '南通', value: 23}, {name: '拉萨', value: 24}, {name: '云浮', value: 24}, {name: '梅州', value: 25}, {name: '文登 [...]
- require(['map/js/china'], function () {
- var geoCoordMap = { '海门':[121.15,31.89], '鄂尔多斯':[109.781327,39.608266], '招远':[120.38,37.35], '舟山':[122.207216,29.985295], '齐齐哈尔':[123.97,47.33], '盐城':[120.13,33.38], '赤峰':[118.87,42.28], '青岛':[120.33,36.07], '乳山':[121.52,36.89], '金昌':[102.188043,38.520089], '泉州':[118.58,24.93], '莱西':[120.53,36.86], '日照':[119.46,35.42], '胶南':[119.97,35.88], '南通':[121.05,32.08], '拉萨':[91.11,29.97], '云浮':[112.02,22.93], '梅州':[116.1,24.55], '文登':[122.05,37.2], '上海':[121.48,31.22], '攀枝花':[ [...]
-
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
+ var geoCoordMap = { '海门':[121.15,31.89], '鄂尔多斯':[109.781327,39.608266], '招远':[120.38,37.35], '舟山':[122.207216,29.985295], '齐齐哈尔':[123.97,47.33], '盐城':[120.13,33.38], '赤峰':[118.87,42.28], '青岛':[120.33,36.07], '乳山':[121.52,36.89], '金昌':[102.188043,38.520089], '泉州':[118.58,24.93], '莱西':[120.53,36.86], '日照':[119.46,35.42], '胶南':[119.97,35.88], '南通':[121.05,32.08], '拉萨':[91.11,29.97], '云浮':[112.02,22.93], '梅州':[116.1,24.55], '文登':[122.05,37.2], '上海':[121.48,31.22], '攀枝花':[101. [...]
+
+ var convertData = function (data) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
}
- return res;
- };
- var convertedData = [
- convertData(data),
- convertData(data.slice().sort(function (a, b) {
- return b.value - a.value;
- }).slice(0, 6))
- ];
+ }
+ return res;
+ };
+ var convertedData = [
+ convertData(data),
+ convertData(data.slice().sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, 6))
+ ];
+
+ var chart = echarts.init(document.getElementById('main1'));
+ var elSt = document.getElementById('main1-st');
+ var chartSt = echarts.init(document.getElementById('main1-st'));
+ elSt.style.visibility = 'hidden';
+ panel = document.getElementById('panel1');
+
+
+ var smSettings = {
+ seperatedEChartsInstance: false,
+ diff: false,
+ animation: true,
+ animationDurationUpdate: 1000,
+ throttleDelay: 300,
+ throttleType: 'debounce'
+ };
- var chart = echarts.init(document.getElementById('main1'));
- var elSt = document.getElementById('main1-st');
- var chartSt = echarts.init(document.getElementById('main1-st'));
- elSt.style.visibility = 'hidden';
- panel = document.getElementById('panel1');
+ window.smChange = {
+ seperatedEChartsInstance: function (val) {
+ smSettings.seperatedEChartsInstance = val;
+ restart();
+ },
+ diff: function (val) {
+ smSettings.diff = val;
+ restart();
+ },
+ animation: function (val) {
+ smSettings.animation = val;
+ restart();
+ },
+ animationDurationUpdate: function (el) {
+ smSettings.animationDurationUpdate = +el.value;
+ restart();
+ },
+ throttleDelay: function (el) {
+ smSettings.throttleDelay = +el.value;
+ restart();
+ },
+ throttleType: function (val) {
+ smSettings.throttleType = val;
+ restart();
+ }
+ };
- var smSettings = {
- seperatedEChartsInstance: false,
- diff: false,
- animation: true,
- animationDurationUpdate: 1000,
- throttleDelay: 300,
- throttleType: 'debounce'
- };
+ restart();
- window.smChange = {
- seperatedEChartsInstance: function (val) {
- smSettings.seperatedEChartsInstance = val;
- restart();
- },
- diff: function (val) {
- smSettings.diff = val;
- restart();
- },
- animation: function (val) {
- smSettings.animation = val;
- restart();
+
+ function restart() {
+ chart.off();
+ chartSt.off();
+
+ var option = {
+ backgroundColor: '#404a59',
+ animation: smSettings.animation,
+ animationDurationUpdate: smSettings.animationDurationUpdate,
+ title: {
+ text: '全国主要城市空气质量',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
},
- animationDurationUpdate: function (el) {
- smSettings.animationDurationUpdate = +el.value;
- restart();
+ toolbox: {
+ iconStyle: {
+ normal: {
+ borderColor: '#fff'
+ },
+ emphasis: {
+ borderColor: '#b1e4ff'
+ }
+ }
},
- throttleDelay: function (el) {
- smSettings.throttleDelay = +el.value;
- restart();
+ brush: {
+ outOfBrush: {
+ color: '#abc'
+ },
+ brushStyle: {
+ borderWidth: 2,
+ color: 'rgba(0,0,0,0.2)',
+ borderColor: 'rgba(0,0,0,0.5)',
+ },
+ seriesIndex: [0, 1],
+ throttleType: smSettings.throttleType,
+ throttleDelay: smSettings.throttleDelay,
+ geoIndex: 0
},
- throttleType: function (val) {
- smSettings.throttleType = val;
- restart();
- }
- };
-
-
- restart();
-
-
- function restart() {
- chart.off();
- chartSt.off();
-
- var option = {
- backgroundColor: '#404a59',
- animation: smSettings.animation,
- animationDurationUpdate: smSettings.animationDurationUpdate,
- title: {
- text: '全国主要城市空气质量',
- subtext: 'data from PM25.in',
- sublink: 'http://www.pm25.in',
- left: 'center',
- textStyle: {
- color: '#fff'
+ geo: {
+ map: 'china',
+ left: '10',
+ right: '35%',
+ center: [117.98561551896913, 31.205000490896193],
+ zoom: 4.177248169415658,
+ label: {
+ emphasis: {
+ show: false
}
},
- toolbox: {
- iconStyle: {
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: '#323c48',
+ borderColor: '#111'
+ },
+ emphasis: {
+ areaColor: '#2a333d'
+ }
+ }
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertedData[0],
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ label: {
normal: {
- borderColor: '#fff'
+ formatter: '{b}',
+ position: 'right',
+ show: false
},
emphasis: {
- borderColor: '#b1e4ff'
+ show: true
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ddb926'
}
}
},
- brush: {
- outOfBrush: {
- color: '#abc'
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ data: convertedData[1],
+ symbolSize: function (val) {
+ return val[2] / 10;
},
- brushStyle: {
- borderWidth: 2,
- color: 'rgba(0,0,0,0.2)',
- borderColor: 'rgba(0,0,0,0.5)',
+ showEffectOn: 'emphasis',
+ rippleEffect: {
+ brushType: 'stroke'
},
- seriesIndex: [0, 1],
- throttleType: smSettings.throttleType,
- throttleDelay: smSettings.throttleDelay,
- geoIndex: 0
- },
- geo: {
- map: 'china',
- left: '10',
- right: '35%',
- center: [117.98561551896913, 31.205000490896193],
- zoom: 4.177248169415658,
+ hoverAnimation: true,
label: {
- emphasis: {
- show: false
+ normal: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
}
},
- roam: true,
itemStyle: {
normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
- }
- },
- series : [
- {
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: convertedData[0],
- symbolSize: function (val) {
- return val[2] / 10;
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#ddb926'
- }
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
}
},
- {
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- data: convertedData[1],
- symbolSize: function (val) {
- return val[2] / 10;
- },
- showEffectOn: 'emphasis',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- }
- },
- zlevel: 1
- }
- ]
- };
+ zlevel: 1
+ }
+ ]
+ };
- var optionSt = {
- animation: smSettings.animation,
- animationDurationUpdate: smSettings.animationDurationUpdate,
- tooltip : {
- trigger: 'item'
- },
- grid: {
- right: 20,
- top: 50,
- left: 80,
- bottom: 20,
- width: null
- },
- xAxis: {
- type: 'value',
- scale: true,
- boundaryGap: false,
- splitLine: {show: false},
- axisLine: {show: false, lineStyle: {color: '#ddd'}},
- axisTick: {show: false},
- axisLabel: {textStyle: {color: '#ddd'}},
- },
- yAxis: {
- type: 'category',
- name: 'PM 2.5',
- axisLine: {show: false, lineStyle: {color: '#ddd'}},
- axisTick: {show: false, lineStyle: {color: '#ddd'}},
- axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
+ var optionSt = {
+ animation: smSettings.animation,
+ animationDurationUpdate: smSettings.animationDurationUpdate,
+ tooltip : {
+ trigger: 'item'
+ },
+ grid: {
+ right: 20,
+ top: 50,
+ left: 80,
+ bottom: 20,
+ width: null
+ },
+ xAxis: {
+ type: 'value',
+ scale: true,
+ boundaryGap: false,
+ splitLine: {show: false},
+ axisLine: {show: false, lineStyle: {color: '#ddd'}},
+ axisTick: {show: false},
+ axisLabel: {textStyle: {color: '#ddd'}},
+ },
+ yAxis: {
+ type: 'category',
+ name: 'PM 2.5',
+ axisLine: {show: false, lineStyle: {color: '#ddd'}},
+ axisTick: {show: false, lineStyle: {color: '#ddd'}},
+ axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
+ data: []
+ },
+ series: [
+ {
+ id: 'bar',
+ zlevel: 2,
+ type: 'bar',
+ symbol: 'none',
+ itemStyle: {
+ normal: {
+ color: '#ddb926'
+ }
+ },
data: []
- },
- series: [
- {
- id: 'bar',
- zlevel: 2,
- type: 'bar',
- symbol: 'none',
- itemStyle: {
- normal: {
- color: '#ddb926'
- }
- },
- data: []
- }
- ]
- };
+ }
+ ]
+ };
- if (!smSettings.seperatedEChartsInstance) {
- for (var key in optionSt) {
- if (key !== 'series') {
- option[key] = optionSt[key];
- }
+ if (!smSettings.seperatedEChartsInstance) {
+ for (var key in optionSt) {
+ if (key !== 'series') {
+ option[key] = optionSt[key];
}
- option.series.push(optionSt.series[0]);
- option.grid.left = null;
- option.grid.width = '30%';
}
+ option.series.push(optionSt.series[0]);
+ option.grid.left = null;
+ option.grid.width = '30%';
+ }
- var oldCategoryData = [];
- var oldBarData = [];
-
- chart.on('brushSelected', renderBrushed);
- chart.setOption(option, true);
- chart.dispatchAction({
- type: 'brush',
- areas: [
- // {
- // geoIndex: 0,
- // brushType: 'polygon',
- // range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466], [...]
- // }
- {
- geoIndex: 0,
- brushType: 'polygon',
- // coordRange: [[121.15,31.89], [120.95,31.39], [112.91,27.87], [118.78,32.04]]
- coordRange: [[121.15, 31.89], [121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33]]
- // geoRange: [[117.27,31.86], [114.31,30.52], [126.57,43.87]]
- }
- ]
- });
+ var oldCategoryData = [];
+ var oldBarData = [];
+
+ chart.on('brushSelected', renderBrushed);
+ chart.setOption(option, true);
+ chart.dispatchAction({
+ type: 'brush',
+ areas: [
+ // {
+ // geoIndex: 0,
+ // brushType: 'polygon',
+ // range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401 [...]
+ // }
+ {
+ geoIndex: 0,
+ brushType: 'polygon',
+ // coordRange: [[121.15,31.89], [120.95,31.39], [112.91,27.87], [118.78,32.04]]
+ coordRange: [[121.15, 31.89], [121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33]]
+ // geoRange: [[117.27,31.86], [114.31,30.52], [126.57,43.87]]
+ }
+ ]
+ });
- if (smSettings.seperatedEChartsInstance) {
- elSt.style.visibility = 'visible';
- chartSt.setOption(optionSt, true);
- }
- else {
- elSt.style.visibility = 'hidden';
- }
+ if (smSettings.seperatedEChartsInstance) {
+ elSt.style.visibility = 'visible';
+ chartSt.setOption(optionSt, true);
+ }
+ else {
+ elSt.style.visibility = 'hidden';
+ }
- function renderBrushed(params) {
- var brushed = [];
- var top = 0;
- var topWhere;
- var sum = 0;
- var count = 0;
- var brushComponent = params.batch[0];
- var selectedItems = [];
-
- for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
- var rawIndices = brushComponent.selected[sIdx].dataIndex;
- var placesBySeries = [];
- for (var i = 0; i < rawIndices.length; i++) {
- var rawIndex = rawIndices[i];
- var item = convertedData[sIdx][rawIndex];
- var value = item.value[2];
- sum += value;
- count++;
- if (value > top) {
- top = value;
- topWhere = item.name;
- }
- if (sIdx === 0) {
- selectedItems.push(item);
- }
- placesBySeries.push(item.name);
+ function renderBrushed(params) {
+ var brushed = [];
+ var top = 0;
+ var topWhere;
+ var sum = 0;
+ var count = 0;
+ var brushComponent = params.batch[0];
+ var selectedItems = [];
+
+ for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
+ var rawIndices = brushComponent.selected[sIdx].dataIndex;
+ var placesBySeries = [];
+ for (var i = 0; i < rawIndices.length; i++) {
+ var rawIndex = rawIndices[i];
+ var item = convertedData[sIdx][rawIndex];
+ var value = item.value[2];
+ sum += value;
+ count++;
+ if (value > top) {
+ top = value;
+ topWhere = item.name;
}
- brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
+ if (sIdx === 0) {
+ selectedItems.push(item);
+ }
+ placesBySeries.push(item.name);
}
+ brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
+ }
- panel.innerHTML = [
- '<h3>STATISTICS:</h3>',
- 'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
- 'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
- '<br>',
- '<br>',
- '<h3>BRUSHED:</h3>',
- brushed.join('<br><br>'),
- ].join(' ');
+ panel.innerHTML = [
+ '<h3>STATISTICS:</h3>',
+ 'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
+ 'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
+ '<br>',
+ '<br>',
+ '<h3>BRUSHED:</h3>',
+ brushed.join('<br><br>'),
+ ].join(' ');
- selectedItems.sort(function (a, b) {
- return a.value[2] - b.value[2];
- });
+ selectedItems.sort(function (a, b) {
+ return a.value[2] - b.value[2];
+ });
- var categoryData = [];
- var barData = [];
- var max = 30;
+ var categoryData = [];
+ var barData = [];
+ var max = 30;
- for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
- categoryData.push(selectedItems[i].name);
- barData.push(selectedItems[i].value[2]);
- }
+ for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
+ categoryData.push(selectedItems[i].name);
+ barData.push(selectedItems[i].value[2]);
+ }
- var isDiff = checkDiff(categoryData, oldCategoryData)
- || checkDiff(barData, oldBarData);
- oldCategoryData = categoryData;
- oldBarData = barData;
-
- if (!smSettings.diff || isDiff) {
- var targetName = smSettings.seperatedEChartsInstance ? 'chart2' : 'mainChart';
- smSettings.diff
- ? console.log('diff checked and setOption to ' + targetName)
- : console.log('do not check diff and setOption' + targetName);
-
- (smSettings.seperatedEChartsInstance ? chartSt : chart).setOption({
- yAxis: {data: categoryData},
- series: {id: 'bar', data: barData}
- });
- }
+ var isDiff = checkDiff(categoryData, oldCategoryData)
+ || checkDiff(barData, oldBarData);
+ oldCategoryData = categoryData;
+ oldBarData = barData;
+
+ if (!smSettings.diff || isDiff) {
+ var targetName = smSettings.seperatedEChartsInstance ? 'chart2' : 'mainChart';
+ smSettings.diff
+ ? console.log('diff checked and setOption to ' + targetName)
+ : console.log('do not check diff and setOption' + targetName);
+
+ (smSettings.seperatedEChartsInstance ? chartSt : chart).setOption({
+ yAxis: {data: categoryData},
+ series: {id: 'bar', data: barData}
+ });
}
+ }
- function checkDiff(list, oldList) {
- if (list.length !== oldList.length) {
- return true;
- }
- else {
- for (var i = 0; i < list.length; i++) {
- if (list[i] !== oldList[i]) {
- return true;
- }
+ function checkDiff(list, oldList) {
+ if (list.length !== oldList.length) {
+ return true;
+ }
+ else {
+ for (var i = 0; i < list.length; i++) {
+ if (list[i] !== oldList[i]) {
+ return true;
}
}
}
}
- });
+ }
});
</script>
diff --git a/test/brush2.html b/test/brush2.html
index 08e7a08..773ec73 100644
--- a/test/brush2.html
+++ b/test/brush2.html
@@ -442,95 +442,94 @@ under the License.
require([
'echarts',
'extension/dataTool',
+ './data/les-miserables.gexf',
'theme/vintage'
- ], function (echarts, dataTool) {
+ ], function (echarts, dataTool, xml) {
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: {
+ 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
},
- 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,
- label: {
- normal: {
- position: 'right',
- formatter: '{b}'
- }
- },
- lineStyle: {
- normal: {
- color: 'source',
- curveness: 0.3
- }
+ 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,
+ label: {
+ normal: {
+ position: 'right',
+ formatter: '{b}'
+ }
+ },
+ lineStyle: {
+ normal: {
+ color: 'source',
+ curveness: 0.3
}
}
- ]
- };
+ }
+ ]
+ };
- chart.setOption(option);
+ chart.setOption(option);
- var config = {
- layout: 'none'
- };
-
- chart.on('click', function (params) {
- console.log(params, params.data);
- });
+ var config = {
+ layout: 'none'
+ };
+ chart.on('click', function (params) {
+ console.log(params, params.data);
});
+
});
</script>
diff --git a/test/custom-hexbin.html b/test/custom-hexbin.html
index 6eea06b..1ed29dc 100644
--- a/test/custom-hexbin.html
+++ b/test/custom-hexbin.html
@@ -112,234 +112,232 @@ under the License.
<script>
- require(['echarts'], function (echarts) {
+ require([
+ 'echarts',
+ './data/kawhi-leonard-16-17-regular.json',
+ './data/nba-court.json'
+ ], function (echarts, shotData, nbaCourt) {
// 2006-2007 Regular Season
+ echarts.registerMap('nbaCourt', nbaCourt.borderGeoJSON);
+
+ var backgroundColor = '#333';
+ var hexagonRadiusInGeo = 1;
+
+ var hexBinResult = hexBinStatistics(
+ echarts.util.map(shotData.data, function (item) {
+ // "shot_made_flag" made missed
+ var made = item[echarts.util.indexOf(shotData.schema, 'shot_made_flag')];
+ return [
+ item[echarts.util.indexOf(shotData.schema, 'loc_x')],
+ item[echarts.util.indexOf(shotData.schema, 'loc_y')],
+ made === 'made' ? 1 : 0
+ ];
+ }),
+ hexagonRadiusInGeo
+ );
+
+ var data = echarts.util.map(hexBinResult.bins, function (bin) {
+ var made = 0;
+ echarts.util.each(bin.points, function (point) {
+ made += point[2];
+ });
+ return [bin.x, bin.y, bin.points.length, (made / bin.points.length * 100).toFixed(2)];
+ });
- $.getJSON('./data/kawhi-leonard-16-17-regular.json', function (shotData) {
- $.getJSON('./data/nba-court.json', function (nbaCourt) {
-
- echarts.registerMap('nbaCourt', nbaCourt.borderGeoJSON);
-
- var backgroundColor = '#333';
- var hexagonRadiusInGeo = 1;
-
- var hexBinResult = hexBinStatistics(
- echarts.util.map(shotData.data, function (item) {
- // "shot_made_flag" made missed
- var made = item[echarts.util.indexOf(shotData.schema, 'shot_made_flag')];
- return [
- item[echarts.util.indexOf(shotData.schema, 'loc_x')],
- item[echarts.util.indexOf(shotData.schema, 'loc_y')],
- made === 'made' ? 1 : 0
- ];
- }),
- hexagonRadiusInGeo
+ function createItemRenderer(type) {
+ type = type || 'polygon';
+ return function renderItemHexBin(params, api) {
+ var center = api.coord([api.value(0), api.value(1)]);
+ var points = [];
+ var pointsBG = [];
+
+ var maxViewRadius = api.size([hexagonRadiusInGeo, 0])[0];
+ var minViewRadius = Math.min(maxViewRadius, 4);
+ var extentMax = Math.log(Math.sqrt(hexBinResult.maxBinLen));
+ var viewRadius = echarts.number.linearMap(
+ Math.log(Math.sqrt(api.value(2))),
+ [0, extentMax],
+ [minViewRadius, maxViewRadius]
);
- var data = echarts.util.map(hexBinResult.bins, function (bin) {
- var made = 0;
- echarts.util.each(bin.points, function (point) {
- made += point[2];
- });
- return [bin.x, bin.y, bin.points.length, (made / bin.points.length * 100).toFixed(2)];
- });
-
- function createItemRenderer(type) {
- type = type || 'polygon';
- return function renderItemHexBin(params, api) {
- var center = api.coord([api.value(0), api.value(1)]);
- var points = [];
- var pointsBG = [];
-
- var maxViewRadius = api.size([hexagonRadiusInGeo, 0])[0];
- var minViewRadius = Math.min(maxViewRadius, 4);
- var extentMax = Math.log(Math.sqrt(hexBinResult.maxBinLen));
- var viewRadius = echarts.number.linearMap(
- Math.log(Math.sqrt(api.value(2))),
- [0, extentMax],
- [minViewRadius, maxViewRadius]
- );
-
- var angle = Math.PI / 6;
- for (var i = 0; i < 6; i++, angle += Math.PI / 3) {
- points.push([
- center[0] + viewRadius * Math.cos(angle),
- center[1] + viewRadius * Math.sin(angle)
- ]);
- pointsBG.push([
- center[0] + maxViewRadius * Math.cos(angle),
- center[1] + maxViewRadius * Math.sin(angle)
- ]);
- }
-
- return {
- type: 'group',
- children: [{
- type,
- morph: true,
- shape: type === 'polygon' ? {
- points: points
- } : {
- // Circle
- cx: center[0],
- cy: center[1],
- r: viewRadius
- },
- style: {
- stroke: '#ccc',
- fill: api.visual('color'),
- lineWidth: 0
- }
- }, {
- type,
- morph: true,
- shape: type === 'polygon' ? {
- points: pointsBG
- } : {
- // Circle
- cx: center[0],
- cy: center[1],
- r: maxViewRadius
- },
- style: {
- stroke: null,
- fill: 'rgba(0,0,0,0.5)',
- lineWidth: 0
- },
- z2: -19
- }]
- };
- };
- }
-
- function renderItemNBACourt(param, api) {
- return {
- type: 'group',
- children: echarts.util.map(nbaCourt.geometry, function (item) {
- return {
- type: item.type,
- style: {
- stroke: '#aaa',
- fill: null,
- lineWidth: 1.5
- },
- shape: {
- points: echarts.util.map(item.points, api.coord)
- }
- };
- })
- };
+ var angle = Math.PI / 6;
+ for (var i = 0; i < 6; i++, angle += Math.PI / 3) {
+ points.push([
+ center[0] + viewRadius * Math.cos(angle),
+ center[1] + viewRadius * Math.sin(angle)
+ ]);
+ pointsBG.push([
+ center[0] + maxViewRadius * Math.cos(angle),
+ center[1] + maxViewRadius * Math.sin(angle)
+ ]);
}
- var option = {
- backgroundColor: backgroundColor,
- aria: {
- show: true
- },
- tooltip: {
- backgroundColor: 'rgba(255,255,255,0.9)',
- textStyle: {
- color: '#333'
- }
- },
- title: {
- text: 'Kawhi Leonard',
- subtext: '2016-2017 Regular Season',
- backgroundColor: backgroundColor,
- top: 10,
- left: 10,
- textStyle: {
- color: '#eee'
- }
- },
- legend: {
- data: ['bar', 'error']
- },
- geo: {
- left: 0,
- right: 0,
- top: 0,
- bottom: 0,
- roam: true,
- silent: true,
- itemStyle: {
- normal: {
- color: backgroundColor,
- borderWidth: 0
- }
+ return {
+ type: 'group',
+ children: [{
+ type,
+ morph: true,
+ shape: type === 'polygon' ? {
+ points: points
+ } : {
+ // Circle
+ cx: center[0],
+ cy: center[1],
+ r: viewRadius
},
- map: 'nbaCourt'
- },
- visualMap: {
- type: 'continuous',
- orient: 'horizontal',
- right: 30,
- top: 40,
- min: 0,
- max: 100,
- align: 'bottom',
- text: [null, 'FG: '],
- dimension: 3,
- seriesIndex: 0,
- calculable: true,
- textStyle: {
- color: '#eee'
- },
- formatter: '{value} %',
- inRange: {
- // color: ['rgba(241,222,158, 0.3)', 'rgba(241,222,158, 1)']
- color: ['green', 'yellow']
+ style: {
+ stroke: '#ccc',
+ fill: api.visual('color'),
+ lineWidth: 0
}
- },
- series: [{
- type: 'custom',
- coordinateSystem: 'geo',
- geoIndex: 0,
- renderItem: createItemRenderer(),
- dimensions: [null, null, 'Field Goals Attempted (hexagon size)', 'Field Goal Percentage (color)'],
- encode: {
- tooltip: [2, 3]
- },
- data: data
}, {
- coordinateSystem: 'geo',
- type: 'custom',
- geoIndex: 0,
- renderItem: renderItemNBACourt,
- silent: true,
- data: [0]
+ type,
+ morph: true,
+ shape: type === 'polygon' ? {
+ points: pointsBG
+ } : {
+ // Circle
+ cx: center[0],
+ cy: center[1],
+ r: maxViewRadius
+ },
+ style: {
+ stroke: null,
+ fill: 'rgba(0,0,0,0.5)',
+ lineWidth: 0
+ },
+ z2: -19
}]
};
+ };
+ }
- // var width = 1000;
- const myChart = testHelper.create(echarts, 'hexagonal-binning', {
- option,
- buttons: [{
- text: 'Hexgon',
- onClick: function() {
- myChart.setOption({
- series: [{
- type: 'custom',
- renderItem: createItemRenderer('polygon')
- }]
- });
- }
- }, {
- text: 'Circle',
- onClick: function() {
- myChart.setOption({
- series: [{
- type: 'custom',
- renderItem: createItemRenderer('circle')
- }]
- });
+ function renderItemNBACourt(param, api) {
+ return {
+ type: 'group',
+ children: echarts.util.map(nbaCourt.geometry, function (item) {
+ return {
+ type: item.type,
+ style: {
+ stroke: '#aaa',
+ fill: null,
+ lineWidth: 1.5
+ },
+ shape: {
+ points: echarts.util.map(item.points, api.coord)
}
- }]
- // width: width,
- // height: width * nbaCourt.height / nbaCourt.width
- });
- });
+ };
+ })
+ };
+ }
+
+ var option = {
+ backgroundColor: backgroundColor,
+ aria: {
+ show: true
+ },
+ tooltip: {
+ backgroundColor: 'rgba(255,255,255,0.9)',
+ textStyle: {
+ color: '#333'
+ }
+ },
+ title: {
+ text: 'Kawhi Leonard',
+ subtext: '2016-2017 Regular Season',
+ backgroundColor: backgroundColor,
+ top: 10,
+ left: 10,
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ legend: {
+ data: ['bar', 'error']
+ },
+ geo: {
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ roam: true,
+ silent: true,
+ itemStyle: {
+ normal: {
+ color: backgroundColor,
+ borderWidth: 0
+ }
+ },
+ map: 'nbaCourt'
+ },
+ visualMap: {
+ type: 'continuous',
+ orient: 'horizontal',
+ right: 30,
+ top: 40,
+ min: 0,
+ max: 100,
+ align: 'bottom',
+ text: [null, 'FG: '],
+ dimension: 3,
+ seriesIndex: 0,
+ calculable: true,
+ textStyle: {
+ color: '#eee'
+ },
+ formatter: '{value} %',
+ inRange: {
+ // color: ['rgba(241,222,158, 0.3)', 'rgba(241,222,158, 1)']
+ color: ['green', 'yellow']
+ }
+ },
+ series: [{
+ type: 'custom',
+ coordinateSystem: 'geo',
+ geoIndex: 0,
+ renderItem: createItemRenderer(),
+ dimensions: [null, null, 'Field Goals Attempted (hexagon size)', 'Field Goal Percentage (color)'],
+ encode: {
+ tooltip: [2, 3]
+ },
+ data: data
+ }, {
+ coordinateSystem: 'geo',
+ type: 'custom',
+ geoIndex: 0,
+ renderItem: renderItemNBACourt,
+ silent: true,
+ data: [0]
+ }]
+ };
+
+ // var width = 1000;
+ const myChart = testHelper.create(echarts, 'hexagonal-binning', {
+ option,
+ buttons: [{
+ text: 'Hexgon',
+ onClick: function() {
+ myChart.setOption({
+ series: [{
+ type: 'custom',
+ renderItem: createItemRenderer('polygon')
+ }]
+ });
+ }
+ }, {
+ text: 'Circle',
+ onClick: function() {
+ myChart.setOption({
+ series: [{
+ type: 'custom',
+ renderItem: createItemRenderer('circle')
+ }]
+ });
+ }
+ }]
+ // width: width,
+ // height: width * nbaCourt.height / nbaCourt.width
});
});
</script>
diff --git a/test/custom-shape-morphing.html b/test/custom-shape-morphing.html
index cbb6f72..c5a98a0 100644
--- a/test/custom-shape-morphing.html
+++ b/test/custom-shape-morphing.html
@@ -39,262 +39,261 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
+ 'echarts',
+ 'data/usa.json'
+ ], function (echarts, geojson) {
- $.getJSON('data/usa.json', function (geojson) {
- echarts.registerMap('USA', geojson, {
- Alaska: { // 把阿拉斯加移到美国主大陆左下方
- left: -131,
- top: 25,
- width: 15
- },
- Hawaii: {
- left: -110, // 夏威夷
- top: 28,
- width: 5
- },
- 'Puerto Rico': { // 波多黎各
- left: -76,
- top: 26,
- width: 2
- }
- });
+ echarts.registerMap('USA', geojson, {
+ Alaska: { // 把阿拉斯加移到美国主大陆左下方
+ left: -131,
+ top: 25,
+ width: 15
+ },
+ Hawaii: {
+ left: -110, // 夏威夷
+ top: 28,
+ width: 5
+ },
+ 'Puerto Rico': { // 波多黎各
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
- const tmpChart = echarts.init(document.createElement('div'), null, {
- width: window.innerWidth,
- height: window.innerHeight
- });
- tmpChart.setOption({
- geo: {
- map: 'USA'
- }
- });
+ const tmpChart = echarts.init(document.createElement('div'), null, {
+ width: window.innerWidth,
+ height: window.innerHeight
+ });
+ tmpChart.setOption({
+ geo: {
+ map: 'USA'
+ }
+ });
- const geo = tmpChart.getModel().getComponent('geo').coordinateSystem;
- const regionsMap = geo.regions.reduce(function (obj, region) {
- obj[region.properties.name] = region;
- return obj;
- }, {});
+ const geo = tmpChart.getModel().getComponent('geo').coordinateSystem;
+ const regionsMap = geo.regions.reduce(function (obj, region) {
+ obj[region.properties.name] = region;
+ return obj;
+ }, {});
- const transform = geo.transform;
+ const transform = geo.transform;
- const data = [
- {name: 'Alabama', value: 4822023},
- {name: 'Alaska', value: 731449},
- {name: 'Arizona', value: 6553255},
- {name: 'Arkansas', value: 2949131},
- {name: 'California', value: 38041430},
- {name: 'Colorado', value: 5187582},
- {name: 'Connecticut', value: 3590347},
- {name: 'Delaware', value: 917092},
- {name: 'District of Columbia', value: 632323},
- {name: 'Florida', value: 19317568},
- {name: 'Georgia', value: 9919945},
- {name: 'Hawaii', value: 1392313},
- {name: 'Idaho', value: 1595728},
- {name: 'Illinois', value: 12875255},
- {name: 'Indiana', value: 6537334},
- {name: 'Iowa', value: 3074186},
- {name: 'Kansas', value: 2885905},
- {name: 'Kentucky', value: 4380415},
- {name: 'Louisiana', value: 4601893},
- {name: 'Maine', value: 1329192},
- {name: 'Maryland', value: 5884563},
- {name: 'Massachusetts', value: 6646144},
- {name: 'Michigan', value: 9883360},
- {name: 'Minnesota', value: 5379139},
- {name: 'Mississippi', value: 2984926},
- {name: 'Missouri', value: 6021988},
- {name: 'Montana', value: 1005141},
- {name: 'Nebraska', value: 1855525},
- {name: 'Nevada', value: 2758931},
- {name: 'New Hampshire', value: 1320718},
- {name: 'New Jersey', value: 8864590},
- {name: 'New Mexico', value: 2085538},
- {name: 'New York', value: 19570261},
- {name: 'North Carolina', value: 9752073},
- {name: 'North Dakota', value: 699628},
- {name: 'Ohio', value: 11544225},
- {name: 'Oklahoma', value: 3814820},
- {name: 'Oregon', value: 3899353},
- {name: 'Pennsylvania', value: 12763536},
- {name: 'Rhode Island', value: 1050292},
- {name: 'South Carolina', value: 4723723},
- {name: 'South Dakota', value: 833354},
- {name: 'Tennessee', value: 6456243},
- {name: 'Texas', value: 26059203},
- {name: 'Utah', value: 2855287},
- {name: 'Vermont', value: 626011},
- {name: 'Virginia', value: 8185867},
- {name: 'Washington', value: 6897012},
- {name: 'West Virginia', value: 1855413},
- {name: 'Wisconsin', value: 5726398},
- {name: 'Wyoming', value: 576412},
- {name: 'Puerto Rico', value: 3667084}
- ];
+ const data = [
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ {name: 'Arizona', value: 6553255},
+ {name: 'Arkansas', value: 2949131},
+ {name: 'California', value: 38041430},
+ {name: 'Colorado', value: 5187582},
+ {name: 'Connecticut', value: 3590347},
+ {name: 'Delaware', value: 917092},
+ {name: 'District of Columbia', value: 632323},
+ {name: 'Florida', value: 19317568},
+ {name: 'Georgia', value: 9919945},
+ {name: 'Hawaii', value: 1392313},
+ {name: 'Idaho', value: 1595728},
+ {name: 'Illinois', value: 12875255},
+ {name: 'Indiana', value: 6537334},
+ {name: 'Iowa', value: 3074186},
+ {name: 'Kansas', value: 2885905},
+ {name: 'Kentucky', value: 4380415},
+ {name: 'Louisiana', value: 4601893},
+ {name: 'Maine', value: 1329192},
+ {name: 'Maryland', value: 5884563},
+ {name: 'Massachusetts', value: 6646144},
+ {name: 'Michigan', value: 9883360},
+ {name: 'Minnesota', value: 5379139},
+ {name: 'Mississippi', value: 2984926},
+ {name: 'Missouri', value: 6021988},
+ {name: 'Montana', value: 1005141},
+ {name: 'Nebraska', value: 1855525},
+ {name: 'Nevada', value: 2758931},
+ {name: 'New Hampshire', value: 1320718},
+ {name: 'New Jersey', value: 8864590},
+ {name: 'New Mexico', value: 2085538},
+ {name: 'New York', value: 19570261},
+ {name: 'North Carolina', value: 9752073},
+ {name: 'North Dakota', value: 699628},
+ {name: 'Ohio', value: 11544225},
+ {name: 'Oklahoma', value: 3814820},
+ {name: 'Oregon', value: 3899353},
+ {name: 'Pennsylvania', value: 12763536},
+ {name: 'Rhode Island', value: 1050292},
+ {name: 'South Carolina', value: 4723723},
+ {name: 'South Dakota', value: 833354},
+ {name: 'Tennessee', value: 6456243},
+ {name: 'Texas', value: 26059203},
+ {name: 'Utah', value: 2855287},
+ {name: 'Vermont', value: 626011},
+ {name: 'Virginia', value: 8185867},
+ {name: 'Washington', value: 6897012},
+ {name: 'West Virginia', value: 1855413},
+ {name: 'Wisconsin', value: 5726398},
+ {name: 'Wyoming', value: 576412},
+ {name: 'Puerto Rico', value: 3667084}
+ ];
- const myChart = echarts.init(document.getElementById('main'));
+ const myChart = echarts.init(document.getElementById('main'));
- function createMapOption() {
- return {
- series: [{
- coordinateSystem: 'none',
- type: 'custom',
- data,
- animationDurationUpdate: 2000,
- renderItem(params, api) {
- const dataItem = data[params.dataIndex];
- const geometries = regionsMap[dataItem.name].geometries.slice();
- // Pick the main polygon
- // TODO Multipolygon
- geometries.sort((a, b) => b.exterior.length - a.exterior.length);
- const points = geometries[0].exterior;
- const newPoints = [];
- for (let i = 0; i < points.length; i++) {
- newPoints.push([
- points[i][0] * transform[0] + transform[4],
- points[i][1] * transform[3] + transform[5]
- ]);
- }
- return {
- type: 'polygon',
- morph: true,
- shape: {
- points: newPoints
- },
- style: {
- fill: '#aaa',
- stroke: '#555',
- strokeNoScale: true
- }
+ function createMapOption() {
+ return {
+ series: [{
+ coordinateSystem: 'none',
+ type: 'custom',
+ data,
+ animationDurationUpdate: 2000,
+ renderItem(params, api) {
+ const dataItem = data[params.dataIndex];
+ const geometries = regionsMap[dataItem.name].geometries.slice();
+ // Pick the main polygon
+ // TODO Multipolygon
+ geometries.sort((a, b) => b.exterior.length - a.exterior.length);
+ const points = geometries[0].exterior;
+ const newPoints = [];
+ for (let i = 0; i < points.length; i++) {
+ newPoints.push([
+ points[i][0] * transform[0] + transform[4],
+ points[i][1] * transform[3] + transform[5]
+ ]);
+ }
+ return {
+ type: 'polygon',
+ morph: true,
+ shape: {
+ points: newPoints
+ },
+ style: {
+ fill: '#aaa',
+ stroke: '#555',
+ strokeNoScale: true
}
}
- }]
- };
- }
+ }
+ }]
+ };
+ }
- function renderBarItem(params, api) {
- const dataItem = data[params.dataIndex];
- const start = api.coord([params.dataIndex, 0]);
- const size = api.size([0, api.value(1)]);
- const width = 20;
- return {
- type: 'rect',
- morph: true,
- shape: {
- x: start[0] - width / 2,
- y: start[1],
- width: width,
- height: -size[1]
- },
- style: {
- fill: '#aaa',
- stroke: '#555',
- strokeNoScale: true
- },
- };
- }
+ function renderBarItem(params, api) {
+ const dataItem = data[params.dataIndex];
+ const start = api.coord([params.dataIndex, 0]);
+ const size = api.size([0, api.value(1)]);
+ const width = 20;
+ return {
+ type: 'rect',
+ morph: true,
+ shape: {
+ x: start[0] - width / 2,
+ y: start[1],
+ width: width,
+ height: -size[1]
+ },
+ style: {
+ fill: '#aaa',
+ stroke: '#555',
+ strokeNoScale: true
+ },
+ };
+ }
- function renderBubbleItem(params, api) {
- const dataItem = data[params.dataIndex];
- const center = api.coord([params.dataIndex, api.value(1)]);
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: center[0],
- cy: center[1],
- r: api.value(1) / 5e5
- },
- style: {
- fill: '#aaa',
- stroke: '#555',
- strokeNoScale: true
- },
- };
- }
+ function renderBubbleItem(params, api) {
+ const dataItem = data[params.dataIndex];
+ const center = api.coord([params.dataIndex, api.value(1)]);
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: center[0],
+ cy: center[1],
+ r: api.value(1) / 5e5
+ },
+ style: {
+ fill: '#aaa',
+ stroke: '#555',
+ strokeNoScale: true
+ },
+ };
+ }
- function createCartesianOption(renderItem) {
- return {
- xAxis: {
- data: data.map(item => item.name)
- },
- yAxis: {
- },
- series: [{
- type: 'custom',
- data,
- animationDurationUpdate: 2000,
- renderItem
- }]
- };
- }
+ function createCartesianOption(renderItem) {
+ return {
+ xAxis: {
+ data: data.map(item => item.name)
+ },
+ yAxis: {
+ },
+ series: [{
+ type: 'custom',
+ data,
+ animationDurationUpdate: 2000,
+ renderItem
+ }]
+ };
+ }
- function createPieOption(renderItem) {
- const pieData = data.slice();
- pieData.reverse();
- const totalValue = pieData.reduce(function (val, item) {
- return val + item.value;
- }, 0);
- let angles = [];
- let currentAngle = -Math.PI / 2;
- for (let i = 0; i < pieData.length; i++) {
- const angle = pieData[i].value / totalValue * Math.PI * 2;
- angles.push([currentAngle, angle + currentAngle]);
- currentAngle += angle;
- }
- return {
- series: [{
- type: 'custom',
- coordinateSystem: 'none',
- data: pieData,
- animationDurationUpdate: 2000,
- renderItem(params, api) {
- const width = myChart.getWidth();
- const height = myChart.getHeight();
- return {
- type: 'sector',
- morph: true,
- shape: {
- cx: width / 2,
- cy: height / 2,
- r: Math.min(width, height) / 3,
- r0: Math.min(width, height) / 5,
- startAngle: angles[params.dataIndex][0],
- endAngle: angles[params.dataIndex][1],
- clockwise: true
- },
- style: {
- fill: '#aaa',
- stroke: '#555',
- strokeNoScale: true
- },
- };
- }
- }]
- };
+ function createPieOption(renderItem) {
+ const pieData = data.slice();
+ pieData.reverse();
+ const totalValue = pieData.reduce(function (val, item) {
+ return val + item.value;
+ }, 0);
+ let angles = [];
+ let currentAngle = -Math.PI / 2;
+ for (let i = 0; i < pieData.length; i++) {
+ const angle = pieData[i].value / totalValue * Math.PI * 2;
+ angles.push([currentAngle, angle + currentAngle]);
+ currentAngle += angle;
}
+ return {
+ series: [{
+ type: 'custom',
+ coordinateSystem: 'none',
+ data: pieData,
+ animationDurationUpdate: 2000,
+ renderItem(params, api) {
+ const width = myChart.getWidth();
+ const height = myChart.getHeight();
+ return {
+ type: 'sector',
+ morph: true,
+ shape: {
+ cx: width / 2,
+ cy: height / 2,
+ r: Math.min(width, height) / 3,
+ r0: Math.min(width, height) / 5,
+ startAngle: angles[params.dataIndex][0],
+ endAngle: angles[params.dataIndex][1],
+ clockwise: true
+ },
+ style: {
+ fill: '#aaa',
+ stroke: '#555',
+ strokeNoScale: true
+ },
+ };
+ }
+ }]
+ };
+ }
- const options = [
- createMapOption(),
- createCartesianOption(renderBarItem),
- createCartesianOption(renderBubbleItem),
- createPieOption()
- ];
+ const options = [
+ createMapOption(),
+ createCartesianOption(renderBarItem),
+ createCartesianOption(renderBubbleItem),
+ createPieOption()
+ ];
- let currentIndex = 0;
- myChart.setOption(options[currentIndex]);
+ let currentIndex = 0;
+ myChart.setOption(options[currentIndex]);
- function transitionToNext() {
- const nextIndex = (currentIndex + 1) % options.length;
- myChart.setOption(options[nextIndex], true);
- currentIndex = nextIndex;
- }
+ function transitionToNext() {
+ const nextIndex = (currentIndex + 1) % options.length;
+ myChart.setOption(options[nextIndex], true);
+ currentIndex = nextIndex;
+ }
- setInterval(transitionToNext, 3000);
- });
+ setInterval(transitionToNext, 3000);
});
</script>
diff --git a/test/custom-shape-morphing3.html b/test/custom-shape-morphing3.html
index 8f367aa..1345fa4 100644
--- a/test/custom-shape-morphing3.html
+++ b/test/custom-shape-morphing3.html
@@ -40,383 +40,381 @@ under the License.
<script>
require([
- 'echarts', 'ecStat', 'ecSimpleTransform', 'ecSimpleOptionPlayer'
- ], function (echarts, ecStat, ecSimpleTransform, ecSimpleOptionPlayer) {
- $.get('data/life-expectancy-table.json', function (rawData) {
-
- echarts.registerTransform(ecSimpleTransform.aggregate);
- echarts.registerTransform(ecSimpleTransform.id);
-
- const COLORS = [
- '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
- ];
- var COUNTRY_A = 'Germany';
- var COUNTRY_B = 'France';
- const CONTENT_COLORS = {
- [COUNTRY_A]: '#37a354',
- [COUNTRY_B]: '#e06343'
- };
- const Z2 = {
- [COUNTRY_A]: 1,
- [COUNTRY_B]: 2
- }
-
- // const COLORS = [
- // {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
- // {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
- // {name: 'Population', index: 2, text: '总人口', unit: ''},
- // {name: 'Country', index: 3, text: '国家', unit: ''}
- // ];
-
- var RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'];
- var ID_RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year', 'Id'];
- var SUM_INCOME_DIMENSIONS = ['Income', 'Country'];
- var ANIMATION_DURATION_UPDATE = 1000;
- var AXIS_NAME_STYLE = {
- nameGap: 25,
- nameTextStyle: {
- fontSize: 20
- },
- };
-
- var baseOption = {
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- dataset: [{
- id: 'RawData',
- source: rawData
- }, {
- id: 'IdRawData',
- fromDatasetId: 'RawData',
- transform: [{
- type: 'filter',
- config: {
- dimension: 'Year', gte: 1950
- }
- }, {
- type: 'ecSimpleTransform:id',
- config: {
- dimensionIndex: ID_RAW_DATA_DIMENSIONS.indexOf('Id'),
- dimensionName: 'Id'
- }
- }]
- }, {
- id: 'CountryABData',
- fromDatasetId: 'IdRawData',
- transform: {
- type: 'filter',
- config: {
- or: [{
- dimension: 'Country', '=': COUNTRY_A
- }, {
- dimension: 'Country', '=': COUNTRY_B
- }]
- }
+ 'echarts', 'ecStat', 'ecSimpleTransform', 'ecSimpleOptionPlayer',
+ 'data/life-expectancy-table.json'
+ ], function (echarts, ecStat, ecSimpleTransform, ecSimpleOptionPlayer, rawData) {
+
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+ echarts.registerTransform(ecSimpleTransform.id);
+
+ const COLORS = [
+ '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+ ];
+ var COUNTRY_A = 'Germany';
+ var COUNTRY_B = 'France';
+ const CONTENT_COLORS = {
+ [COUNTRY_A]: '#37a354',
+ [COUNTRY_B]: '#e06343'
+ };
+ const Z2 = {
+ [COUNTRY_A]: 1,
+ [COUNTRY_B]: 2
+ }
+
+ // const COLORS = [
+ // {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
+ // {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
+ // {name: 'Population', index: 2, text: '总人口', unit: ''},
+ // {name: 'Country', index: 3, text: '国家', unit: ''}
+ // ];
+
+ var RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'];
+ var ID_RAW_DATA_DIMENSIONS = ['Income', 'Life Expectancy', 'Population', 'Country', 'Year', 'Id'];
+ var SUM_INCOME_DIMENSIONS = ['Income', 'Country'];
+ var ANIMATION_DURATION_UPDATE = 1000;
+ var AXIS_NAME_STYLE = {
+ nameGap: 25,
+ nameTextStyle: {
+ fontSize: 20
+ },
+ };
+
+ var baseOption = {
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ dataset: [{
+ id: 'RawData',
+ source: rawData
+ }, {
+ id: 'IdRawData',
+ fromDatasetId: 'RawData',
+ transform: [{
+ type: 'filter',
+ config: {
+ dimension: 'Year', gte: 1950
}
}, {
- id: 'CountryABSumIncome',
- fromDatasetId: 'CountryABData',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'Income', method: 'sum' },
- { from: 'Country' }
- ],
- groupBy: 'Country'
- }
+ type: 'ecSimpleTransform:id',
+ config: {
+ dimensionIndex: ID_RAW_DATA_DIMENSIONS.indexOf('Id'),
+ dimensionName: 'Id'
+ }
+ }]
+ }, {
+ id: 'CountryABData',
+ fromDatasetId: 'IdRawData',
+ transform: {
+ type: 'filter',
+ config: {
+ or: [{
+ dimension: 'Country', '=': COUNTRY_A
+ }, {
+ dimension: 'Country', '=': COUNTRY_B
+ }]
}
- }],
- tooltip: {}
- };
+ }
+ }, {
+ id: 'CountryABSumIncome',
+ fromDatasetId: 'CountryABData',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'Income', method: 'sum' },
+ { from: 'Country' }
+ ],
+ groupBy: 'Country'
+ }
+ }
+ }],
+ tooltip: {}
+ };
- var optionCreators = {
+ var optionCreators = {
- 'CountryAB_Year_Income_Bar': function (datasetId, onlyCountry) {
- return {
- xAxis: {
- type: 'category'
- },
- yAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE
+ 'CountryAB_Year_Income_Bar': function (datasetId, onlyCountry) {
+ return {
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Year',
+ y: 'Income',
+ itemName: 'Year',
+ tooltip: ['Income'],
},
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Year',
- y: 'Income',
- itemName: 'Year',
- tooltip: ['Income'],
- },
- renderItem: function (params, api) {
- var valPos = api.coord([api.value('Year'), api.value('Income')]);
- var basePos = api.coord([api.value('Year'), 0]);
- var width = api.size([1, 0])[0] * 0.9;
-
- var country = api.value('Country');
- if (onlyCountry != null && onlyCountry !== country) {
- return;
- }
-
- return {
- type: 'group',
- children: [{
- type: 'rect',
- transition: ['shape', 'style'],
- morph: true,
- shape: {
- x: basePos[0],
- y: basePos[1],
- width: width,
- height: valPos[1] - basePos[1]
- },
- z2: Z2[country],
- style: {
- fill: CONTENT_COLORS[country],
- opacity: 0.8
- }
- }]
- };
+ renderItem: function (params, api) {
+ var valPos = api.coord([api.value('Year'), api.value('Income')]);
+ var basePos = api.coord([api.value('Year'), 0]);
+ var width = api.size([1, 0])[0] * 0.9;
+
+ var country = api.value('Country');
+ if (onlyCountry != null && onlyCountry !== country) {
+ return;
}
- }
- };
- },
- 'CountryAB_Year_Population_Bar': function (datasetId, onlyCountry) {
- return {
- xAxis: {
- type: 'category'
- },
- yAxis: {
- name: 'Population',
- ...AXIS_NAME_STYLE
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Year',
- y: 'Population',
- itemName: 'Year',
- tooltip: ['Population'],
- },
- renderItem: function (params, api) {
- var valPos = api.coord([api.value('Year'), api.value('Population')]);
- var basePos = api.coord([api.value('Year'), 0]);
- var width = api.size([1, 0])[0] * 0.9;
-
- var country = api.value('Country');
- if (onlyCountry != null && onlyCountry !== country) {
- return;
- }
-
- return {
- type: 'group',
- children: [{
- type: 'rect',
- transition: ['shape', 'style'],
- morph: true,
- shape: {
- x: basePos[0],
- y: basePos[1],
- width: width,
- height: valPos[1] - basePos[1]
- },
- style: {
- fill: CONTENT_COLORS[country]
- }
- }]
- };
- }
+ return {
+ type: 'group',
+ children: [{
+ type: 'rect',
+ transition: ['shape', 'style'],
+ morph: true,
+ shape: {
+ x: basePos[0],
+ y: basePos[1],
+ width: width,
+ height: valPos[1] - basePos[1]
+ },
+ z2: Z2[country],
+ style: {
+ fill: CONTENT_COLORS[country],
+ opacity: 0.8
+ }
+ }]
+ };
}
- };
- },
+ }
+ };
+ },
- 'CountryAB_Income_Population_Scatter': function (datasetId, onlyCountry) {
- return {
- xAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE,
- scale: true
- },
- yAxis: {
- name: 'Population',
- ...AXIS_NAME_STYLE,
- scale: true
+ 'CountryAB_Year_Population_Bar': function (datasetId, onlyCountry) {
+ return {
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {
+ name: 'Population',
+ ...AXIS_NAME_STYLE
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Year',
+ y: 'Population',
+ itemName: 'Year',
+ tooltip: ['Population'],
},
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Income',
- y: 'Population',
- itemName: ['Year'],
- tooltip: ['Income', 'Population', 'Country']
- },
- renderItem: function (params, api) {
- var pos = api.coord([api.value('Income'), api.value('Population')]);
-
- var country = api.value('Country');
- if (onlyCountry != null && onlyCountry !== country) {
- return;
- }
-
- return {
- type: 'group',
- children: [{
- type: 'circle',
- transition: ['shape', 'style'],
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: 10
- },
- style: {
- fill: CONTENT_COLORS[country],
- lineWidth: 1,
- stroke: '#333',
- opacity: 1,
- enterFrom: {
- opacity: 0
- }
- }
- }]
- };
+ renderItem: function (params, api) {
+ var valPos = api.coord([api.value('Year'), api.value('Population')]);
+ var basePos = api.coord([api.value('Year'), 0]);
+ var width = api.size([1, 0])[0] * 0.9;
+
+ var country = api.value('Country');
+ if (onlyCountry != null && onlyCountry !== country) {
+ return;
}
+
+ return {
+ type: 'group',
+ children: [{
+ type: 'rect',
+ transition: ['shape', 'style'],
+ morph: true,
+ shape: {
+ x: basePos[0],
+ y: basePos[1],
+ width: width,
+ height: valPos[1] - basePos[1]
+ },
+ style: {
+ fill: CONTENT_COLORS[country]
+ }
+ }]
+ };
}
- };
- },
+ }
+ };
+ },
+
+ 'CountryAB_Income_Population_Scatter': function (datasetId, onlyCountry) {
+ return {
+ xAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE,
+ scale: true
+ },
+ yAxis: {
+ name: 'Population',
+ ...AXIS_NAME_STYLE,
+ scale: true
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Income',
+ y: 'Population',
+ itemName: ['Year'],
+ tooltip: ['Income', 'Population', 'Country']
+ },
+ renderItem: function (params, api) {
+ var pos = api.coord([api.value('Income'), api.value('Population')]);
+ var country = api.value('Country');
+ if (onlyCountry != null && onlyCountry !== country) {
+ return;
+ }
- 'CountryAB_Income_Sum_Bar': function (datasetId) {
- return {
- xAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE
- },
- yAxis: {
- type: 'category'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Income',
- y: 'Country',
- itemName: ['Country'],
- tooltip: ['Income']
- },
- renderItem: function (params, api) {
- var country = api.ordinalRawValue('Country');
- var valPos = api.coord([api.value('Income'), country]);
- var basePos = api.coord([0, country]);
- var height = api.size([0, 1])[1] * 0.4;
-
- return {
- type: 'group',
- children: [{
- type: 'rect',
- transition: ['shape', 'style'],
- morph: true,
- shape: {
- x: basePos[0],
- y: valPos[1] - height / 2,
- width: valPos[0] - basePos[0],
- height: height
- },
- style: {
- fill: CONTENT_COLORS[country]
- // lineWidth: 0,
- // stroke: '#333',
- // opacity: 1,
- // enterFrom: {
- // opacity: 0
- // }
+ return {
+ type: 'group',
+ children: [{
+ type: 'circle',
+ transition: ['shape', 'style'],
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: 10
+ },
+ style: {
+ fill: CONTENT_COLORS[country],
+ lineWidth: 1,
+ stroke: '#333',
+ opacity: 1,
+ enterFrom: {
+ opacity: 0
}
- }]
- };
- }
+ }
+ }]
+ };
}
- };
- }
+ }
+ };
+ },
- };
- var player = ecSimpleOptionPlayer.create({
- chart: function () {
- return chart;
- },
- seriesIndex: 0,
- replaceMerge: ['xAxis', 'yAxis'],
- dataMeta: {
- 'IdRawData': {
- dimensions: ID_RAW_DATA_DIMENSIONS,
- uniqueDimension: 'Id'
+ 'CountryAB_Income_Sum_Bar': function (datasetId) {
+ return {
+ xAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE
},
- 'CountryABData': {
- dimensions: ID_RAW_DATA_DIMENSIONS,
- uniqueDimension: 'Id'
+ yAxis: {
+ type: 'category'
},
- 'CountryABSumIncome': {
- dimensions: SUM_INCOME_DIMENSIONS,
- uniqueDimension: 'Country'
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Income',
+ y: 'Country',
+ itemName: ['Country'],
+ tooltip: ['Income']
+ },
+ renderItem: function (params, api) {
+ var country = api.ordinalRawValue('Country');
+ var valPos = api.coord([api.value('Income'), country]);
+ var basePos = api.coord([0, country]);
+ var height = api.size([0, 1])[1] * 0.4;
+
+ return {
+ type: 'group',
+ children: [{
+ type: 'rect',
+ transition: ['shape', 'style'],
+ morph: true,
+ shape: {
+ x: basePos[0],
+ y: valPos[1] - height / 2,
+ width: valPos[0] - basePos[0],
+ height: height
+ },
+ style: {
+ fill: CONTENT_COLORS[country]
+ // lineWidth: 0,
+ // stroke: '#333',
+ // opacity: 1,
+ // enterFrom: {
+ // opacity: 0
+ // }
+ }
+ }]
+ };
+ }
}
+ };
+ }
+
+ };
+
+ var player = ecSimpleOptionPlayer.create({
+ chart: function () {
+ return chart;
+ },
+ seriesIndex: 0,
+ replaceMerge: ['xAxis', 'yAxis'],
+ dataMeta: {
+ 'IdRawData': {
+ dimensions: ID_RAW_DATA_DIMENSIONS,
+ uniqueDimension: 'Id'
},
- optionList: [{
- dataMetaKey: 'CountryABData',
- option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData', COUNTRY_A)
- }, {
- dataMetaKey: 'CountryABData',
- option: optionCreators['CountryAB_Year_Population_Bar']('CountryABData', COUNTRY_A)
- }, {
- dataMetaKey: 'CountryABData',
- option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData', COUNTRY_A)
- }, {
- dataMetaKey: 'CountryABData',
- option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData')
- }, {
- dataMetaKey: 'CountryABSumIncome',
- option: optionCreators['CountryAB_Income_Sum_Bar']('CountryABSumIncome')
- }, {
- dataMetaKey: 'CountryABData',
- option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData')
- }]
- });
-
-
- var chart = testHelper.create(echarts, 'main0', {
- title: [
- 'Test: buttons, should morph animation merge/split.',
- 'Test: click buttons **before animation finished**, should no blink.',
- 'Test: click buttons **twice**, should no blink.',
- 'Test: use dataZoom, update animation should exist'
- ],
- option: baseOption,
- lazyUpdate: true,
- height: 600,
- buttons: [{
- text: 'next',
- onclick: function () {
- player.next();
- }
- }, {
- text: 'previous',
- onclick: function () {
- player.previous();
- }
- }]
- });
+ 'CountryABData': {
+ dimensions: ID_RAW_DATA_DIMENSIONS,
+ uniqueDimension: 'Id'
+ },
+ 'CountryABSumIncome': {
+ dimensions: SUM_INCOME_DIMENSIONS,
+ uniqueDimension: 'Country'
+ }
+ },
+ optionList: [{
+ dataMetaKey: 'CountryABData',
+ option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData', COUNTRY_A)
+ }, {
+ dataMetaKey: 'CountryABData',
+ option: optionCreators['CountryAB_Year_Population_Bar']('CountryABData', COUNTRY_A)
+ }, {
+ dataMetaKey: 'CountryABData',
+ option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData', COUNTRY_A)
+ }, {
+ dataMetaKey: 'CountryABData',
+ option: optionCreators['CountryAB_Income_Population_Scatter']('CountryABData')
+ }, {
+ dataMetaKey: 'CountryABSumIncome',
+ option: optionCreators['CountryAB_Income_Sum_Bar']('CountryABSumIncome')
+ }, {
+ dataMetaKey: 'CountryABData',
+ option: optionCreators['CountryAB_Year_Income_Bar']('CountryABData')
+ }]
+ });
- player.next();
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Test: buttons, should morph animation merge/split.',
+ 'Test: click buttons **before animation finished**, should no blink.',
+ 'Test: click buttons **twice**, should no blink.',
+ 'Test: use dataZoom, update animation should exist'
+ ],
+ option: baseOption,
+ lazyUpdate: true,
+ height: 600,
+ buttons: [{
+ text: 'next',
+ onclick: function () {
+ player.next();
+ }
+ }, {
+ text: 'previous',
+ onclick: function () {
+ player.previous();
+ }
+ }]
});
+ player.next();
+
});
</script>
diff --git a/test/data-transform-aggregate.html b/test/data-transform-aggregate.html
index 3742a1f..f282099 100644
--- a/test/data-transform-aggregate.html
+++ b/test/data-transform-aggregate.html
@@ -45,74 +45,74 @@ under the License.
<script>
- require(['echarts', 'ecSimpleTransform'], function (echarts, ecSimpleTransform) {
-
- $.get('data/life-expectancy-table.json', function (_rawData) {
-
- echarts.registerTransform(ecSimpleTransform.aggregate);
-
- option = {
- dataset: [{
- id: 'raw',
- source: _rawData
+ require([
+ 'echarts',
+ 'ecSimpleTransform',
+ 'data/life-expectancy-table.json'
+ ], function (echarts, ecSimpleTransform, _rawData) {
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+
+ option = {
+ dataset: [{
+ id: 'raw',
+ source: _rawData
+ }, {
+ id: 'income_aggregate',
+ fromDatasetId: 'raw',
+ transform: [{
+ type: 'filter',
+ config: {
+ dimension: 'Year', gte: 1950
+ }
}, {
- id: 'income_aggregate',
- fromDatasetId: 'raw',
- transform: [{
- type: 'filter',
- config: {
- dimension: 'Year', gte: 1950
- }
- }, {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'Income', method: 'sum' },
- { from: 'Country' }
- ],
- groupBy: 'Country'
- }
- }]
- }],
- title: {
- text: 'Income sum since 1950'
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- name: 'Income',
- nameLocation: 'middle',
- nameGap: 30
- },
- yAxis: {
- type: 'category'
- },
- series: {
- type: 'bar',
- datasetId: 'income_aggregate',
- label: {
- show: true,
- position: 'right'
- },
- encode: {
- x: 'Income',
- y: 'Country',
- itemName: ['Country'],
- tooltip: ['Income']
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'Income', method: 'sum' },
+ { from: 'Country' }
+ ],
+ groupBy: 'Country'
}
+ }]
+ }],
+ title: {
+ text: 'Income sum since 1950'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ name: 'Income',
+ nameLocation: 'middle',
+ nameGap: 30
+ },
+ yAxis: {
+ type: 'category'
+ },
+ series: {
+ type: 'bar',
+ datasetId: 'income_aggregate',
+ label: {
+ show: true,
+ position: 'right'
+ },
+ encode: {
+ x: 'Income',
+ y: 'Country',
+ itemName: ['Country'],
+ tooltip: ['Income']
}
- };
-
- var chart = testHelper.create(echarts, 'main_sum', {
- title: [
- 'Aggregate sum'
- ],
- height: 400,
- option: option
- });
-
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main_sum', {
+ title: [
+ 'Aggregate sum'
+ ],
+ height: 400,
+ option: option
});
+
});
</script>
@@ -121,82 +121,83 @@ under the License.
<script>
- require(['echarts', 'ecSimpleTransform'], function (echarts, ecSimpleTransform) {
-
- $.get('data/life-expectancy-table.json', function (_rawData) {
-
- echarts.registerTransform(ecSimpleTransform.aggregate);
-
- option = {
- dataset: [{
- id: 'raw',
- source: _rawData
+ require([
+ 'echarts',
+ 'ecSimpleTransform',
+ 'data/life-expectancy-table.json'
+ ], function (echarts, ecSimpleTransform, _rawData) {
+
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+
+ option = {
+ dataset: [{
+ id: 'raw',
+ source: _rawData
+ }, {
+ id: 'income_aggregate',
+ fromDatasetId: 'raw',
+ transform: [{
+ type: 'filter',
+ config: {
+ and: [{
+ dimension: 'Year', gte: 1950
+ // }, {
+ // dimension: 'Country', eq: 'Japan'
+ }]
+ }
}, {
- id: 'income_aggregate',
- fromDatasetId: 'raw',
- transform: [{
- type: 'filter',
- config: {
- and: [{
- dimension: 'Year', gte: 1950
- // }, {
- // dimension: 'Country', eq: 'Japan'
- }]
- }
- }, {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { name: 'min', from: 'Income', method: 'min' },
- { name: 'Q1', from: 'Income', method: 'Q1' },
- { name: 'Q2', from: 'Income', method: 'Q2' },
- { name: 'Q3', from: 'Income', method: 'Q3' },
- { name: 'max', from: 'Income', method: 'max' },
- { name: 'Country', from: 'Country' }
- ],
- groupBy: 'Country'
- }
- }]
- }],
- title: {
- text: 'Income sum since 1950'
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- name: 'Income',
- nameLocation: 'middle',
- nameGap: 30
- },
- yAxis: {
- type: 'category'
- },
- series: {
- type: 'boxplot',
- datasetId: 'income_aggregate',
- label: {
- show: true,
- position: 'right'
- },
- encode: {
- x: ['min', 'Q1', 'Q2', 'Q3', 'max'],
- y: 'Country',
- itemName: ['Country'],
- tooltip: ['min', 'Q1', 'Q2', 'Q3', 'max']
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { name: 'min', from: 'Income', method: 'min' },
+ { name: 'Q1', from: 'Income', method: 'Q1' },
+ { name: 'Q2', from: 'Income', method: 'Q2' },
+ { name: 'Q3', from: 'Income', method: 'Q3' },
+ { name: 'max', from: 'Income', method: 'max' },
+ { name: 'Country', from: 'Country' }
+ ],
+ groupBy: 'Country'
}
+ }]
+ }],
+ title: {
+ text: 'Income sum since 1950'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ name: 'Income',
+ nameLocation: 'middle',
+ nameGap: 30
+ },
+ yAxis: {
+ type: 'category'
+ },
+ series: {
+ type: 'boxplot',
+ datasetId: 'income_aggregate',
+ label: {
+ show: true,
+ position: 'right'
+ },
+ encode: {
+ x: ['min', 'Q1', 'Q2', 'Q3', 'max'],
+ y: 'Country',
+ itemName: ['Country'],
+ tooltip: ['min', 'Q1', 'Q2', 'Q3', 'max']
}
- };
-
- var chart = testHelper.create(echarts, 'main_boxplot', {
- title: [
- 'Aggregate Q1 Q2 Q3 min max'
- ],
- height: 600,
- option: option
- });
-
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main_boxplot', {
+ title: [
+ 'Aggregate Q1 Q2 Q3 min max'
+ ],
+ height: 600,
+ option: option
});
+
});
</script>
@@ -209,78 +210,78 @@ under the License.
<script>
- require(['echarts', 'ecSimpleTransform'], function (echarts, ecSimpleTransform) {
-
- $.get('data/life-expectancy-table.json', function (_rawData) {
-
- echarts.registerTransform(ecSimpleTransform.aggregate);
-
- option = {
- dataset: [{
- id: 'raw',
- source: _rawData
+ require([
+ 'echarts',
+ 'ecSimpleTransform',
+ 'data/life-expectancy-table.json'
+ ], function (echarts, ecSimpleTransform, _rawData) {
+
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+
+ option = {
+ dataset: [{
+ id: 'raw',
+ source: _rawData
+ }, {
+ id: 'income_aggregate',
+ fromDatasetId: 'raw',
+ transform: [{
+ type: 'filter',
+ print: true,
+ config: {
+ and: [{
+ dimension: 'Year', gte: 1950
+ // }, {
+ // dimension: 'Country', eq: 'Japan'
+ }]
+ }
}, {
- id: 'income_aggregate',
- fromDatasetId: 'raw',
- transform: [{
- type: 'filter',
- print: true,
- config: {
- and: [{
- dimension: 'Year', gte: 1950
- // }, {
- // dimension: 'Country', eq: 'Japan'
- }]
- }
- }, {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'Income', method: 'average' },
- { from: 'Country' }
- ],
- groupBy: 'Country'
- }
- }]
- }],
- title: {
- text: 'Income sum since 1950'
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- name: 'Income',
- nameLocation: 'middle',
- nameGap: 30
- },
- yAxis: {
- type: 'category'
- },
- series: {
- type: 'bar',
- datasetId: 'income_aggregate',
- label: {
- show: true,
- position: 'right'
- },
- encode: {
- x: 'Income',
- y: 'Country',
- itemName: ['Country'],
- tooltip: ['Income']
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'Income', method: 'average' },
+ { from: 'Country' }
+ ],
+ groupBy: 'Country'
}
+ }]
+ }],
+ title: {
+ text: 'Income sum since 1950'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ name: 'Income',
+ nameLocation: 'middle',
+ nameGap: 30
+ },
+ yAxis: {
+ type: 'category'
+ },
+ series: {
+ type: 'bar',
+ datasetId: 'income_aggregate',
+ label: {
+ show: true,
+ position: 'right'
+ },
+ encode: {
+ x: 'Income',
+ y: 'Country',
+ itemName: ['Country'],
+ tooltip: ['Income']
}
- };
-
- var chart = testHelper.create(echarts, 'main_average', {
- title: [
- 'Aggregate average'
- ],
- height: 600,
- option: option
- });
-
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main_average', {
+ title: [
+ 'Aggregate average'
+ ],
+ height: 600,
+ option: option
});
});
</script>
diff --git a/test/dataZoom-action.html b/test/dataZoom-action.html
index ba0fa2b..48e24f7 100644
--- a/test/dataZoom-action.html
+++ b/test/dataZoom-action.html
@@ -22,11 +22,12 @@ under the License.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
<script src="../dist/echarts.js"></script>
<script src="lib/testHelper.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/jquery.min.js"></script>
- <script src="lib/config.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
@@ -161,7 +162,7 @@ under the License.
<script>
- $.getJSON('./data/ec-star.json', function (data) {
+ require(['./data/ec-star.json'], function (data) {
var minStartValue = '2013-06-06';
var maxEndValue = '2017-10-17';
diff --git a/test/dataset-pivot.html b/test/dataset-pivot.html
index 41ea383..e4048f0 100644
--- a/test/dataset-pivot.html
+++ b/test/dataset-pivot.html
@@ -66,13 +66,6 @@ under the License.
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
];
-
-
- function loadLifeData(cb) {
- $.getJSON('data/life-expectancy-table.json', function (data) {
- cb(data);
- })
- }
</script>
@@ -80,87 +73,88 @@ under the License.
<script>
- require(['echarts'], function (echarts) {
- loadLifeData(function (data) {
- var sizeValue = '57%';
- var option = {
- legend: {},
- tooltip: {},
- toolbox: {
- feature: {
- dataZoom: {}
+ require([
+ 'echarts',
+ 'data/life-expectancy-table.json'
+ ], function (echarts, data) {
+ var sizeValue = '57%';
+ var option = {
+ legend: {},
+ tooltip: {},
+ toolbox: {
+ feature: {
+ dataZoom: {}
+ }
+ },
+ grid: [
+ {right: sizeValue, bottom: sizeValue},
+ {left: sizeValue, bottom: sizeValue},
+ {right: sizeValue, top: sizeValue},
+ {left: sizeValue, top: sizeValue}
+ ],
+ xAxis: [
+ {type: 'value', gridIndex: 0, name: 'Income'},
+ {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
+ {type: 'category', gridIndex: 2, name: 'Year', boundaryGap: false},
+ {type: 'category', gridIndex: 3, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}}
+ ],
+ yAxis: [
+ {type: 'value', gridIndex: 0, name: 'Life Expectency'},
+ {type: 'value', gridIndex: 1, name: 'Income'},
+ {type: 'value', gridIndex: 2, name: 'Population'},
+ {type: 'category', gridIndex: 3, name: 'Year', boundaryGap: false}
+ ],
+ dataset: {
+ source: data
+ },
+ series: [
+ {
+ type: 'scatter',
+ symbolSize: 3,
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: {
+ x: 'Income',
+ y: 'Life Expectency'
}
},
- grid: [
- {right: sizeValue, bottom: sizeValue},
- {left: sizeValue, bottom: sizeValue},
- {right: sizeValue, top: sizeValue},
- {left: sizeValue, top: sizeValue}
- ],
- xAxis: [
- {type: 'value', gridIndex: 0, name: 'Income'},
- {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
- {type: 'category', gridIndex: 2, name: 'Year', boundaryGap: false},
- {type: 'category', gridIndex: 3, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}}
- ],
- yAxis: [
- {type: 'value', gridIndex: 0, name: 'Life Expectency'},
- {type: 'value', gridIndex: 1, name: 'Income'},
- {type: 'value', gridIndex: 2, name: 'Population'},
- {type: 'category', gridIndex: 3, name: 'Year', boundaryGap: false}
- ],
- dataset: {
- source: data
+ {
+ type: 'scatter',
+ symbolSize: 3,
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ encode: {
+ x: 'Country',
+ y: 'Income'
+ }
+ },
+ {
+ type: 'scatter',
+ symbolSize: 3,
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ encode: {
+ x: 'Year',
+ y: 'Population'
+ }
},
- series: [
- {
- type: 'scatter',
- symbolSize: 3,
- xAxisIndex: 0,
- yAxisIndex: 0,
- encode: {
- x: 'Income',
- y: 'Life Expectency'
- }
- },
- {
- type: 'scatter',
- symbolSize: 3,
- xAxisIndex: 1,
- yAxisIndex: 1,
- encode: {
- x: 'Country',
- y: 'Income'
- }
- },
- {
- type: 'scatter',
- symbolSize: 3,
- xAxisIndex: 2,
- yAxisIndex: 2,
- encode: {
- x: 'Year',
- y: 'Population'
- }
- },
- {
- type: 'scatter',
- symbolSize: 3,
- xAxisIndex: 3,
- yAxisIndex: 3,
- encode: {
- x: 'Country',
- y: 'Year'
- }
+ {
+ type: 'scatter',
+ symbolSize: 3,
+ xAxisIndex: 3,
+ yAxisIndex: 3,
+ encode: {
+ x: 'Country',
+ y: 'Year'
}
- ]
- };
-
- testHelper.create(echarts, 'layout0', {
- option: option,
- height: 700,
- dataTable: data
- });
+ }
+ ]
+ };
+
+ testHelper.create(echarts, 'layout0', {
+ option: option,
+ height: 700,
+ dataTable: data
});
});
</script>
diff --git a/test/effectScatter.html b/test/effectScatter.html
index 71b51b9..30ab909 100644
--- a/test/effectScatter.html
+++ b/test/effectScatter.html
@@ -38,8 +38,11 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
+ 'echarts',
+ './data/map/json/china.json'
+ ], function (echarts, chinaJson) {
+
+ echarts.registerMap('china', chinaJson);
var data = [
{name: '海门', value: 9},
@@ -234,330 +237,326 @@ under the License.
{name: '大庆', value: 279}
];
- $.get('./data/map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
- var geoCoordMap = {
- '海门':[121.15,31.89],
- '鄂尔多斯':[109.781327,39.608266],
- '招远':[120.38,37.35],
- '舟山':[122.207216,29.985295],
- '齐齐哈尔':[123.97,47.33],
- '盐城':[120.13,33.38],
- '赤峰':[118.87,42.28],
- '青岛':[120.33,36.07],
- '乳山':[121.52,36.89],
- '金昌':[102.188043,38.520089],
- '泉州':[118.58,24.93],
- '莱西':[120.53,36.86],
- '日照':[119.46,35.42],
- '胶南':[119.97,35.88],
- '南通':[121.05,32.08],
- '拉萨':[91.11,29.97],
- '云浮':[112.02,22.93],
- '梅州':[116.1,24.55],
- '文登':[122.05,37.2],
- '上海':[121.48,31.22],
- '攀枝花':[101.718637,26.582347],
- '威海':[122.1,37.5],
- '承德':[117.93,40.97],
- '厦门':[118.1,24.46],
- '汕尾':[115.375279,22.786211],
- '潮州':[116.63,23.68],
- '丹东':[124.37,40.13],
- '太仓':[121.1,31.45],
- '曲靖':[103.79,25.51],
- '烟台':[121.39,37.52],
- '福州':[119.3,26.08],
- '瓦房店':[121.979603,39.627114],
- '即墨':[120.45,36.38],
- '抚顺':[123.97,41.97],
- '玉溪':[102.52,24.35],
- '张家口':[114.87,40.82],
- '阳泉':[113.57,37.85],
- '莱州':[119.942327,37.177017],
- '湖州':[120.1,30.86],
- '汕头':[116.69,23.39],
- '昆山':[120.95,31.39],
- '宁波':[121.56,29.86],
- '湛江':[110.359377,21.270708],
- '揭阳':[116.35,23.55],
- '荣成':[122.41,37.16],
- '连云港':[119.16,34.59],
- '葫芦岛':[120.836932,40.711052],
- '常熟':[120.74,31.64],
- '东莞':[113.75,23.04],
- '河源':[114.68,23.73],
- '淮安':[119.15,33.5],
- '泰州':[119.9,32.49],
- '南宁':[108.33,22.84],
- '营口':[122.18,40.65],
- '惠州':[114.4,23.09],
- '江阴':[120.26,31.91],
- '蓬莱':[120.75,37.8],
- '韶关':[113.62,24.84],
- '嘉峪关':[98.289152,39.77313],
- '广州':[113.23,23.16],
- '延安':[109.47,36.6],
- '太原':[112.53,37.87],
- '清远':[113.01,23.7],
- '中山':[113.38,22.52],
- '昆明':[102.73,25.04],
- '寿光':[118.73,36.86],
- '盘锦':[122.070714,41.119997],
- '长治':[113.08,36.18],
- '深圳':[114.07,22.62],
- '珠海':[113.52,22.3],
- '宿迁':[118.3,33.96],
- '咸阳':[108.72,34.36],
- '铜川':[109.11,35.09],
- '平度':[119.97,36.77],
- '佛山':[113.11,23.05],
- '海口':[110.35,20.02],
- '江门':[113.06,22.61],
- '章丘':[117.53,36.72],
- '肇庆':[112.44,23.05],
- '大连':[121.62,38.92],
- '临汾':[111.5,36.08],
- '吴江':[120.63,31.16],
- '石嘴山':[106.39,39.04],
- '沈阳':[123.38,41.8],
- '苏州':[120.62,31.32],
- '茂名':[110.88,21.68],
- '嘉兴':[120.76,30.77],
- '长春':[125.35,43.88],
- '胶州':[120.03336,36.264622],
- '银川':[106.27,38.47],
- '张家港':[120.555821,31.875428],
- '三门峡':[111.19,34.76],
- '锦州':[121.15,41.13],
- '南昌':[115.89,28.68],
- '柳州':[109.4,24.33],
- '三亚':[109.511909,18.252847],
- '自贡':[104.778442,29.33903],
- '吉林':[126.57,43.87],
- '阳江':[111.95,21.85],
- '泸州':[105.39,28.91],
- '西宁':[101.74,36.56],
- '宜宾':[104.56,29.77],
- '呼和浩特':[111.65,40.82],
- '成都':[104.06,30.67],
- '大同':[113.3,40.12],
- '镇江':[119.44,32.2],
- '桂林':[110.28,25.29],
- '张家界':[110.479191,29.117096],
- '宜兴':[119.82,31.36],
- '北海':[109.12,21.49],
- '西安':[108.95,34.27],
- '金坛':[119.56,31.74],
- '东营':[118.49,37.46],
- '牡丹江':[129.58,44.6],
- '遵义':[106.9,27.7],
- '绍兴':[120.58,30.01],
- '扬州':[119.42,32.39],
- '常州':[119.95,31.79],
- '潍坊':[119.1,36.62],
- '重庆':[106.54,29.59],
- '台州':[121.420757,28.656386],
- '南京':[118.78,32.04],
- '滨州':[118.03,37.36],
- '贵阳':[106.71,26.57],
- '无锡':[120.29,31.59],
- '本溪':[123.73,41.3],
- '克拉玛依':[84.77,45.59],
- '渭南':[109.5,34.52],
- '马鞍山':[118.48,31.56],
- '宝鸡':[107.15,34.38],
- '焦作':[113.21,35.24],
- '句容':[119.16,31.95],
- '北京':[116.46,39.92],
- '徐州':[117.2,34.26],
- '衡水':[115.72,37.72],
- '包头':[110,40.58],
- '绵阳':[104.73,31.48],
- '乌鲁木齐':[87.68,43.77],
- '枣庄':[117.57,34.86],
- '杭州':[120.19,30.26],
- '淄博':[118.05,36.78],
- '鞍山':[122.85,41.12],
- '溧阳':[119.48,31.43],
- '库尔勒':[86.06,41.68],
- '安阳':[114.35,36.1],
- '开封':[114.35,34.79],
- '济南':[117,36.65],
- '德阳':[104.37,31.13],
- '温州':[120.65,28.01],
- '九江':[115.97,29.71],
- '邯郸':[114.47,36.6],
- '临安':[119.72,30.23],
- '兰州':[103.73,36.03],
- '沧州':[116.83,38.33],
- '临沂':[118.35,35.05],
- '南充':[106.110698,30.837793],
- '天津':[117.2,39.13],
- '富阳':[119.95,30.07],
- '泰安':[117.13,36.18],
- '诸暨':[120.23,29.71],
- '郑州':[113.65,34.76],
- '哈尔滨':[126.63,45.75],
- '聊城':[115.97,36.45],
- '芜湖':[118.38,31.33],
- '唐山':[118.02,39.63],
- '平顶山':[113.29,33.75],
- '邢台':[114.48,37.05],
- '德州':[116.29,37.45],
- '济宁':[116.59,35.38],
- '荆州':[112.239741,30.335165],
- '宜昌':[111.3,30.7],
- '义乌':[120.06,29.32],
- '丽水':[119.92,28.45],
- '洛阳':[112.44,34.7],
- '秦皇岛':[119.57,39.95],
- '株洲':[113.16,27.83],
- '石家庄':[114.48,38.03],
- '莱芜':[117.67,36.19],
- '常德':[111.69,29.05],
- '保定':[115.48,38.85],
- '湘潭':[112.91,27.87],
- '金华':[119.64,29.12],
- '岳阳':[113.09,29.37],
- '长沙':[113,28.21],
- '衢州':[118.88,28.97],
- '廊坊':[116.7,39.53],
- '菏泽':[115.480656,35.23375],
- '合肥':[117.27,31.86],
- '武汉':[114.31,30.52],
- '大庆':[125.03,46.58]
- };
+ var geoCoordMap = {
+ '海门':[121.15,31.89],
+ '鄂尔多斯':[109.781327,39.608266],
+ '招远':[120.38,37.35],
+ '舟山':[122.207216,29.985295],
+ '齐齐哈尔':[123.97,47.33],
+ '盐城':[120.13,33.38],
+ '赤峰':[118.87,42.28],
+ '青岛':[120.33,36.07],
+ '乳山':[121.52,36.89],
+ '金昌':[102.188043,38.520089],
+ '泉州':[118.58,24.93],
+ '莱西':[120.53,36.86],
+ '日照':[119.46,35.42],
+ '胶南':[119.97,35.88],
+ '南通':[121.05,32.08],
+ '拉萨':[91.11,29.97],
+ '云浮':[112.02,22.93],
+ '梅州':[116.1,24.55],
+ '文登':[122.05,37.2],
+ '上海':[121.48,31.22],
+ '攀枝花':[101.718637,26.582347],
+ '威海':[122.1,37.5],
+ '承德':[117.93,40.97],
+ '厦门':[118.1,24.46],
+ '汕尾':[115.375279,22.786211],
+ '潮州':[116.63,23.68],
+ '丹东':[124.37,40.13],
+ '太仓':[121.1,31.45],
+ '曲靖':[103.79,25.51],
+ '烟台':[121.39,37.52],
+ '福州':[119.3,26.08],
+ '瓦房店':[121.979603,39.627114],
+ '即墨':[120.45,36.38],
+ '抚顺':[123.97,41.97],
+ '玉溪':[102.52,24.35],
+ '张家口':[114.87,40.82],
+ '阳泉':[113.57,37.85],
+ '莱州':[119.942327,37.177017],
+ '湖州':[120.1,30.86],
+ '汕头':[116.69,23.39],
+ '昆山':[120.95,31.39],
+ '宁波':[121.56,29.86],
+ '湛江':[110.359377,21.270708],
+ '揭阳':[116.35,23.55],
+ '荣成':[122.41,37.16],
+ '连云港':[119.16,34.59],
+ '葫芦岛':[120.836932,40.711052],
+ '常熟':[120.74,31.64],
+ '东莞':[113.75,23.04],
+ '河源':[114.68,23.73],
+ '淮安':[119.15,33.5],
+ '泰州':[119.9,32.49],
+ '南宁':[108.33,22.84],
+ '营口':[122.18,40.65],
+ '惠州':[114.4,23.09],
+ '江阴':[120.26,31.91],
+ '蓬莱':[120.75,37.8],
+ '韶关':[113.62,24.84],
+ '嘉峪关':[98.289152,39.77313],
+ '广州':[113.23,23.16],
+ '延安':[109.47,36.6],
+ '太原':[112.53,37.87],
+ '清远':[113.01,23.7],
+ '中山':[113.38,22.52],
+ '昆明':[102.73,25.04],
+ '寿光':[118.73,36.86],
+ '盘锦':[122.070714,41.119997],
+ '长治':[113.08,36.18],
+ '深圳':[114.07,22.62],
+ '珠海':[113.52,22.3],
+ '宿迁':[118.3,33.96],
+ '咸阳':[108.72,34.36],
+ '铜川':[109.11,35.09],
+ '平度':[119.97,36.77],
+ '佛山':[113.11,23.05],
+ '海口':[110.35,20.02],
+ '江门':[113.06,22.61],
+ '章丘':[117.53,36.72],
+ '肇庆':[112.44,23.05],
+ '大连':[121.62,38.92],
+ '临汾':[111.5,36.08],
+ '吴江':[120.63,31.16],
+ '石嘴山':[106.39,39.04],
+ '沈阳':[123.38,41.8],
+ '苏州':[120.62,31.32],
+ '茂名':[110.88,21.68],
+ '嘉兴':[120.76,30.77],
+ '长春':[125.35,43.88],
+ '胶州':[120.03336,36.264622],
+ '银川':[106.27,38.47],
+ '张家港':[120.555821,31.875428],
+ '三门峡':[111.19,34.76],
+ '锦州':[121.15,41.13],
+ '南昌':[115.89,28.68],
+ '柳州':[109.4,24.33],
+ '三亚':[109.511909,18.252847],
+ '自贡':[104.778442,29.33903],
+ '吉林':[126.57,43.87],
+ '阳江':[111.95,21.85],
+ '泸州':[105.39,28.91],
+ '西宁':[101.74,36.56],
+ '宜宾':[104.56,29.77],
+ '呼和浩特':[111.65,40.82],
+ '成都':[104.06,30.67],
+ '大同':[113.3,40.12],
+ '镇江':[119.44,32.2],
+ '桂林':[110.28,25.29],
+ '张家界':[110.479191,29.117096],
+ '宜兴':[119.82,31.36],
+ '北海':[109.12,21.49],
+ '西安':[108.95,34.27],
+ '金坛':[119.56,31.74],
+ '东营':[118.49,37.46],
+ '牡丹江':[129.58,44.6],
+ '遵义':[106.9,27.7],
+ '绍兴':[120.58,30.01],
+ '扬州':[119.42,32.39],
+ '常州':[119.95,31.79],
+ '潍坊':[119.1,36.62],
+ '重庆':[106.54,29.59],
+ '台州':[121.420757,28.656386],
+ '南京':[118.78,32.04],
+ '滨州':[118.03,37.36],
+ '贵阳':[106.71,26.57],
+ '无锡':[120.29,31.59],
+ '本溪':[123.73,41.3],
+ '克拉玛依':[84.77,45.59],
+ '渭南':[109.5,34.52],
+ '马鞍山':[118.48,31.56],
+ '宝鸡':[107.15,34.38],
+ '焦作':[113.21,35.24],
+ '句容':[119.16,31.95],
+ '北京':[116.46,39.92],
+ '徐州':[117.2,34.26],
+ '衡水':[115.72,37.72],
+ '包头':[110,40.58],
+ '绵阳':[104.73,31.48],
+ '乌鲁木齐':[87.68,43.77],
+ '枣庄':[117.57,34.86],
+ '杭州':[120.19,30.26],
+ '淄博':[118.05,36.78],
+ '鞍山':[122.85,41.12],
+ '溧阳':[119.48,31.43],
+ '库尔勒':[86.06,41.68],
+ '安阳':[114.35,36.1],
+ '开封':[114.35,34.79],
+ '济南':[117,36.65],
+ '德阳':[104.37,31.13],
+ '温州':[120.65,28.01],
+ '九江':[115.97,29.71],
+ '邯郸':[114.47,36.6],
+ '临安':[119.72,30.23],
+ '兰州':[103.73,36.03],
+ '沧州':[116.83,38.33],
+ '临沂':[118.35,35.05],
+ '南充':[106.110698,30.837793],
+ '天津':[117.2,39.13],
+ '富阳':[119.95,30.07],
+ '泰安':[117.13,36.18],
+ '诸暨':[120.23,29.71],
+ '郑州':[113.65,34.76],
+ '哈尔滨':[126.63,45.75],
+ '聊城':[115.97,36.45],
+ '芜湖':[118.38,31.33],
+ '唐山':[118.02,39.63],
+ '平顶山':[113.29,33.75],
+ '邢台':[114.48,37.05],
+ '德州':[116.29,37.45],
+ '济宁':[116.59,35.38],
+ '荆州':[112.239741,30.335165],
+ '宜昌':[111.3,30.7],
+ '义乌':[120.06,29.32],
+ '丽水':[119.92,28.45],
+ '洛阳':[112.44,34.7],
+ '秦皇岛':[119.57,39.95],
+ '株洲':[113.16,27.83],
+ '石家庄':[114.48,38.03],
+ '莱芜':[117.67,36.19],
+ '常德':[111.69,29.05],
+ '保定':[115.48,38.85],
+ '湘潭':[112.91,27.87],
+ '金华':[119.64,29.12],
+ '岳阳':[113.09,29.37],
+ '长沙':[113,28.21],
+ '衢州':[118.88,28.97],
+ '廊坊':[116.7,39.53],
+ '菏泽':[115.480656,35.23375],
+ '合肥':[117.27,31.86],
+ '武汉':[114.31,30.52],
+ '大庆':[125.03,46.58]
+ };
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
+ var convertData = function (data) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
}
- return res;
- };
+ }
+ return res;
+ };
- var myChart = echarts.init(document.getElementById('main'));
+ var myChart = echarts.init(document.getElementById('main'));
- myChart.setOption({
- backgroundColor: '#404a59',
- title: {
- text: '全国主要城市空气质量',
- subtext: 'data from PM25.in',
- sublink: 'http://www.pm25.in',
- left: 'center',
- textStyle: {
- color: '#fff'
+ myChart.setOption({
+ backgroundColor: '#404a59',
+ title: {
+ text: '全国主要城市空气质量',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ top: 'bottom',
+ left: 'right',
+ data:['pm2.5'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ geo: {
+ map: 'china',
+ label: {
+ emphasis: {
+ show: false
}
},
- tooltip : {
- trigger: 'item'
- },
- legend: {
- orient: 'vertical',
- top: 'bottom',
- left: 'right',
- data:['pm2.5'],
- textStyle: {
- color: '#fff'
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: '#323c48',
+ borderColor: '#111'
+ },
+ emphasis: {
+ areaColor: '#2a333d'
}
- },
- geo: {
- map: 'china',
+ }
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertData(data),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
label: {
- emphasis: {
+ normal: {
+ formatter: '{b}',
+ position: 'right',
show: false
+ },
+ emphasis: {
+ show: true
}
},
- roam: true,
itemStyle: {
normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
+ color: '#ddb926'
}
}
},
- series : [
- {
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: convertData(data),
- symbolSize: function (val) {
- return val[2] / 10;
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#ddb926'
- }
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ data: convertData(data.sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, 6)),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ label: {
+ normal: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
}
},
- {
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- data: convertData(data.sort(function (a, b) {
- return b.value - a.value;
- }).slice(0, 6)),
- symbolSize: function (val) {
- return val[2] / 10;
- },
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#f4e925',
- shadowBlur: 10,
- shadowColor: '#333'
- }
- },
- zlevel: 1
- }
- ]
- });
-
- setInterval(function () {
- myChart.setOption({
- series: [{
- name: 'Top 5',
- data: convertData(data.sort(function (a, b) {
- return b.value - a.value;
- }).slice(0, Math.round(6 * Math.random())))
- }]
- });
- }, 2000);
-
+ itemStyle: {
+ normal: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ }
+ },
+ zlevel: 1
+ }
+ ]
});
+ setInterval(function () {
+ myChart.setOption({
+ series: [{
+ name: 'Top 5',
+ data: convertData(data.sort(function (a, b) {
+ return b.value - a.value;
+ }).slice(0, Math.round(6 * Math.random())))
+ }]
+ });
+ }, 2000);
+
});
</script>
diff --git a/test/finished.html b/test/finished.html
index ca64729..7779243 100644
--- a/test/finished.html
+++ b/test/finished.html
@@ -153,57 +153,55 @@ under the License.
}
require(['echarts'], function (echarts) {
- require(['map/js/china'], function () {
- var option = {
- tooltip: {},
- toolbox: {
- left: 'center',
- feature: {
- dataZoom: {}
- }
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data: ['pm2.5' /* ,'pm10' */]
+ var option = {
+ tooltip: {},
+ toolbox: {
+ left: 'center',
+ feature: {
+ dataZoom: {}
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['pm2.5' /* ,'pm10' */]
+ },
+ xAxis: [{
+ }],
+ yAxis: [{
+ }],
+ dataZoom: [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ animation: false,
+ series : [{
+ name: 'pm2.5',
+ type: 'scatter',
+ data: genData1(1e5),
+ dimensions: ['x', 'y'],
+ symbolSize: 3,
+ itemStyle: {
+ color: '#128de3',
+ opacity: 0.4
},
- xAxis: [{
- }],
- yAxis: [{
- }],
- dataZoom: [{
- type: 'inside'
- }, {
- type: 'slider'
- }],
- animation: false,
- series : [{
- name: 'pm2.5',
- type: 'scatter',
- data: genData1(1e5),
- dimensions: ['x', 'y'],
- symbolSize: 3,
- itemStyle: {
- color: '#128de3',
- opacity: 0.4
- },
- large: true,
- largeThreshold: 500,
- progressive: 500
- }]
- };
-
- var chart = testHelper.create(echarts, 'main0', {
- title: [
- 'finished should be triggered, and not repeatly',
- 'finished should not triggered before real finished'
- ],
- autoResize: false,
- option: option
- });
-
- chart && enableSnapshot(chart, 'main0');
+ large: true,
+ largeThreshold: 500,
+ progressive: 500
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'finished should be triggered, and not repeatly',
+ 'finished should not triggered before real finished'
+ ],
+ autoResize: false,
+ option: option
});
+
+ chart && enableSnapshot(chart, 'main0');
});
</script>
diff --git a/test/force-edge-ignoreLayout.html b/test/force-edge-ignoreLayout.html
index 488c57f..6c1deaa 100644
--- a/test/force-edge-ignoreLayout.html
+++ b/test/force-edge-ignoreLayout.html
@@ -40,80 +40,74 @@ under the License.
require([
'echarts',
'extension/dataTool',
+ './data/les-miserables.gexf',
'theme/vintage'
- ], function (echarts, dataTool) {
+ ], function (echarts, dataTool, xml) {
var gexf = dataTool.gexf;
- var myChart = echarts.init(document.getElementById('main'), 'vintage', {
+ var myChart = echarts.init(document.getElementById('main'), 'vintage');
+ var graph = gexf.parse(xml);
+ var categories = [];
+ for (var i = 0; i < 9; i++) {
+ categories[i] = {
+ name: '类目' + i
+ };
+ }
+ graph.nodes.forEach(function (node) {
+ node.itemStyle = null;
+ node.symbolSize = 10;
+ node.value = node.symbolSize;
+ node.category = node.attributes.modularity_class;
+ // Use random x, y
+ node.x = node.y = null;
+ node.draggable = true;
});
-
- $.get('./data/les-miserables.gexf', function (xml) {
- myChart.hideLoading();
-
- var graph = gexf.parse(xml);
- var categories = [];
- for (var i = 0; i < 9; i++) {
- categories[i] = {
- name: '类目' + i
- };
- }
- graph.nodes.forEach(function (node) {
- node.itemStyle = null;
- node.symbolSize = 10;
- node.value = node.symbolSize;
- node.category = node.attributes.modularity_class;
- // Use random x, y
- node.x = node.y = null;
- node.draggable = true;
- });
- graph.links.push({
- source:0,
- target:20,
- lineStyle:{
- color:'#aa090a'
- },
- ignoreForceLayout:true
- })
- var option = {
- title: {
- text: 'Les Miserables',
- subtext: 'Default layout',
- top: 'bottom',
- left: 'right'
- },
- tooltip: {},
- legend: [{
- // selectedMode: 'single',
- data: categories.map(function (a) {
- return a.name;
- })
- }],
- animation: false,
- series : [
- {
- name: 'Les Miserables',
- type: 'graph',
- layout: 'force',
- data: graph.nodes,
- links: graph.links,
- categories: categories,
- roam: true,
- focusNodeAdjacency:true,
- label: {
- normal: {
- position: 'right'
- }
- },
- force: {
- repulsion: 100,
+ graph.links.push({
+ source:0,
+ target:20,
+ lineStyle:{
+ color:'#aa090a'
+ },
+ ignoreForceLayout:true
+ })
+ var option = {
+ title: {
+ text: 'Les Miserables',
+ subtext: 'Default layout',
+ top: 'bottom',
+ left: 'right'
+ },
+ tooltip: {},
+ legend: [{
+ // selectedMode: 'single',
+ data: categories.map(function (a) {
+ return a.name;
+ })
+ }],
+ animation: false,
+ series : [
+ {
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'force',
+ data: graph.nodes,
+ links: graph.links,
+ categories: categories,
+ roam: true,
+ focusNodeAdjacency:true,
+ label: {
+ normal: {
+ position: 'right'
}
+ },
+ force: {
+ repulsion: 100,
}
- ]
- };
-
- myChart.setOption(option);
+ }
+ ]
+ };
- }, 'xml');
+ myChart.setOption(option);
});
</script>
</body>
diff --git a/test/geo-data-stream.html b/test/geo-data-stream.html
index a1d6763..db4c22a 100644
--- a/test/geo-data-stream.html
+++ b/test/geo-data-stream.html
@@ -60,91 +60,89 @@ under the License.
var initData = genData(2001);
require([
- 'echarts'
+ 'echarts',
+ 'map/js/china'
], function (echarts) {
+ var chart = echarts.init(document.getElementById('main'));
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
-
- chart.setOption({
- tooltip: {},
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['categoryA','categoryB','categoryC']
- },
- // ???
- // visualMap: {
- // min: 0,
- // max: 1500,
- // left: 'left',
- // top: 'bottom',
- // text: ['High','Low'],
- // seriesIndex: [1, 2, 3],
- // inRange: {
- // color: ['#006edd', '#e0ffff']
- // },
- // calculable : true
- // },
- geo: {
- map: 'china',
- roam: true,
- label: {
- normal: {
- show: true,
- textStyle: {
- color: 'rgba(0,0,0,0.4)'
- }
- }
- },
- itemStyle: {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- color: null,
- areaColor: null,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
+ chart.setOption({
+ tooltip: {},
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data:['categoryA','categoryB','categoryC']
+ },
+ // ???
+ // visualMap: {
+ // min: 0,
+ // max: 1500,
+ // left: 'left',
+ // top: 'bottom',
+ // text: ['High','Low'],
+ // seriesIndex: [1, 2, 3],
+ // inRange: {
+ // color: ['#006edd', '#e0ffff']
+ // },
+ // calculable : true
+ // },
+ geo: {
+ map: 'china',
+ roam: true,
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: 'rgba(0,0,0,0.4)'
}
}
},
- series : [{
- name: 'pm2.5',
- type: 'scatter',
- stream: true,
- coordinateSystem: 'geo',
- data: initData,
- symbolSize: 4,
- // symbol: 'rect',
- itemStyle: {
- normal: {
- // color: '#ddb926'
- color: '#dda'
- }
+ itemStyle: {
+ normal:{
+ borderColor: 'rgba(0, 0, 0, 0.2)'
},
- progressive: 100
- }]
- });
+ emphasis:{
+ color: null,
+ areaColor: null,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ borderWidth: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ },
+ series : [{
+ name: 'pm2.5',
+ type: 'scatter',
+ stream: true,
+ coordinateSystem: 'geo',
+ data: initData,
+ symbolSize: 4,
+ // symbol: 'rect',
+ itemStyle: {
+ normal: {
+ // color: '#ddb926'
+ color: '#dda'
+ }
+ },
+ progressive: 100
+ }]
+ });
- chart.on('click', function (param) {
- alert('asdf');
- });
+ chart.on('click', function (param) {
+ alert('asdf');
+ });
- next();
+ next();
- function next() {
- if (chunkCount++ < chunkMax) {
- var newData = genData(1000);
- chart.appendData({seriesIndex: 0, data: newData});
- setTimeout(next, 1000);
- }
+ function next() {
+ if (chunkCount++ < chunkMax) {
+ var newData = genData(1000);
+ chart.appendData({seriesIndex: 0, data: newData});
+ setTimeout(next, 1000);
}
+ }
- });
});
</script>
diff --git a/test/geo-map.html b/test/geo-map.html
index 7082182..56f43a1 100644
--- a/test/geo-map.html
+++ b/test/geo-map.html
@@ -455,185 +455,182 @@ under the License.
'echarts',
'map/js/china'
], function (echarts) {
+ var chart = echarts.init(document.getElementById('main'));
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
-
- chart.setOption({
- aria: {
- show: true
+ chart.setOption({
+ aria: {
+ show: true
+ },
+ tooltip: {},
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data:['categoryA','categoryB','categoryC']
+ },
+ visualMap: {
+ min: 0,
+ max: 1500,
+ left: 'left',
+ top: 'bottom',
+ text: ['High','Low'],
+ seriesIndex: [1, 2, 3],
+ inRange: {
+ color: ['#006edd', '#e0ffff']
},
- tooltip: {},
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['categoryA','categoryB','categoryC']
+ calculable : true
+ },
+ geo: {
+ map: 'china',
+ roam: true,
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: 'rgba(0,0,0,0.4)'
+ }
+ }
},
- visualMap: {
- min: 0,
- max: 1500,
- left: 'left',
- top: 'bottom',
- text: ['High','Low'],
- seriesIndex: [1, 2, 3],
- inRange: {
- color: ['#006edd', '#e0ffff']
+ itemStyle: {
+ normal:{
+ borderColor: 'rgba(0, 0, 0, 0.2)'
+ },
+ emphasis:{
+ color: null,
+ areaColor: null,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ borderWidth: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ },
+ series : [
+ {
+ name: 'pm2.5',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertData(data),
+ symbolSize: function (val) {
+ return val[2] / 10;
},
- calculable : true
- },
- geo: {
- map: 'china',
- roam: true,
label: {
normal: {
- show: true,
- textStyle: {
- color: 'rgba(0,0,0,0.4)'
- }
+ formatter: '{b}',
+ position: 'right',
+ show: false
+ },
+ emphasis: {
+ show: true
}
},
itemStyle: {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- color: null,
- areaColor: null,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
+ normal: {
+ color: '#ddb926'
}
}
},
- series : [
- {
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: convertData(data),
- symbolSize: function (val) {
- return val[2] / 10;
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#ddb926'
- }
- }
- },
- {
- name: 'categoryA',
- type: 'map',
- geoIndex: 0,
- // tooltip: {show: false},
- markPoint: {
- data: [{
- coord: [115.97, 29.71]
- }]
- },
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重庆',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '河南',value: Math.round(Math.random()*1000)},
- {name: '云南',value: Math.round(Math.random()*1000)},
- {name: '辽宁',value: Math.round(Math.random()*1000)},
- {name: '黑龙江',value: Math.round(Math.random()*1000)},
- {name: '湖南',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '山东',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '江苏',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '湖北',value: Math.round(Math.random()*1000)},
- {name: '广西',value: Math.round(Math.random()*1000)},
- {name: '甘肃',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '内蒙古',value: Math.round(Math.random()*1000)},
- {name: '陕西',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '贵州',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '青海',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '宁夏',value: Math.round(Math.random()*1000)},
- {name: '海南',value: Math.round(Math.random()*1000)},
- {name: '台湾',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ]
- },
- {
- name: 'categoryB',
- type: 'map',
- geoIndex: 0,
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重庆',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '内蒙古',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '宁夏',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ]
+ {
+ name: 'categoryA',
+ type: 'map',
+ geoIndex: 0,
+ // tooltip: {show: false},
+ markPoint: {
+ data: [{
+ coord: [115.97, 29.71]
+ }]
},
- {
- name: 'categoryC',
- type: 'map',
- geoIndex: 0,
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '台湾',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ]
- }
- ]
- });
+ data:[
+ {name: '北京',value: Math.round(Math.random()*1000)},
+ {name: '天津',value: Math.round(Math.random()*1000)},
+ {name: '上海',value: Math.round(Math.random()*1000)},
+ {name: '重庆',value: Math.round(Math.random()*1000)},
+ {name: '河北',value: Math.round(Math.random()*1000)},
+ {name: '河南',value: Math.round(Math.random()*1000)},
+ {name: '云南',value: Math.round(Math.random()*1000)},
+ {name: '辽宁',value: Math.round(Math.random()*1000)},
+ {name: '黑龙江',value: Math.round(Math.random()*1000)},
+ {name: '湖南',value: Math.round(Math.random()*1000)},
+ {name: '安徽',value: Math.round(Math.random()*1000)},
+ {name: '山东',value: Math.round(Math.random()*1000)},
+ {name: '新疆',value: Math.round(Math.random()*1000)},
+ {name: '江苏',value: Math.round(Math.random()*1000)},
+ {name: '浙江',value: Math.round(Math.random()*1000)},
+ {name: '江西',value: Math.round(Math.random()*1000)},
+ {name: '湖北',value: Math.round(Math.random()*1000)},
+ {name: '广西',value: Math.round(Math.random()*1000)},
+ {name: '甘肃',value: Math.round(Math.random()*1000)},
+ {name: '山西',value: Math.round(Math.random()*1000)},
+ {name: '内蒙古',value: Math.round(Math.random()*1000)},
+ {name: '陕西',value: Math.round(Math.random()*1000)},
+ {name: '吉林',value: Math.round(Math.random()*1000)},
+ {name: '福建',value: Math.round(Math.random()*1000)},
+ {name: '贵州',value: Math.round(Math.random()*1000)},
+ {name: '广东',value: Math.round(Math.random()*1000)},
+ {name: '青海',value: Math.round(Math.random()*1000)},
+ {name: '西藏',value: Math.round(Math.random()*1000)},
+ {name: '四川',value: Math.round(Math.random()*1000)},
+ {name: '宁夏',value: Math.round(Math.random()*1000)},
+ {name: '海南',value: Math.round(Math.random()*1000)},
+ {name: '台湾',value: Math.round(Math.random()*1000)},
+ {name: '香港',value: Math.round(Math.random()*1000)},
+ {name: '澳门',value: Math.round(Math.random()*1000)}
+ ]
+ },
+ {
+ name: 'categoryB',
+ type: 'map',
+ geoIndex: 0,
+ data:[
+ {name: '北京',value: Math.round(Math.random()*1000)},
+ {name: '天津',value: Math.round(Math.random()*1000)},
+ {name: '上海',value: Math.round(Math.random()*1000)},
+ {name: '重庆',value: Math.round(Math.random()*1000)},
+ {name: '河北',value: Math.round(Math.random()*1000)},
+ {name: '安徽',value: Math.round(Math.random()*1000)},
+ {name: '新疆',value: Math.round(Math.random()*1000)},
+ {name: '浙江',value: Math.round(Math.random()*1000)},
+ {name: '江西',value: Math.round(Math.random()*1000)},
+ {name: '山西',value: Math.round(Math.random()*1000)},
+ {name: '内蒙古',value: Math.round(Math.random()*1000)},
+ {name: '吉林',value: Math.round(Math.random()*1000)},
+ {name: '福建',value: Math.round(Math.random()*1000)},
+ {name: '广东',value: Math.round(Math.random()*1000)},
+ {name: '西藏',value: Math.round(Math.random()*1000)},
+ {name: '四川',value: Math.round(Math.random()*1000)},
+ {name: '宁夏',value: Math.round(Math.random()*1000)},
+ {name: '香港',value: Math.round(Math.random()*1000)},
+ {name: '澳门',value: Math.round(Math.random()*1000)}
+ ]
+ },
+ {
+ name: 'categoryC',
+ type: 'map',
+ geoIndex: 0,
+ data:[
+ {name: '北京',value: Math.round(Math.random()*1000)},
+ {name: '天津',value: Math.round(Math.random()*1000)},
+ {name: '上海',value: Math.round(Math.random()*1000)},
+ {name: '广东',value: Math.round(Math.random()*1000)},
+ {name: '台湾',value: Math.round(Math.random()*1000)},
+ {name: '香港',value: Math.round(Math.random()*1000)},
+ {name: '澳门',value: Math.round(Math.random()*1000)}
+ ]
+ }
+ ]
+ });
- chart.on('click', function (param) {
- alert('asdf');
- });
- // setTimeout(function () {
- // chart.setOption({
- // series: [{
- // zoom: 5
- // }]
- // });
- // }, 2000);
+ chart.on('click', function (param) {
+ alert('asdf');
});
+ // setTimeout(function () {
+ // chart.setOption({
+ // series: [{
+ // zoom: 5
+ // }]
+ // });
+ // }, 2000);
});
</script>
diff --git a/test/geo-random-stream.html b/test/geo-random-stream.html
index d78ac08..ed0417c 100644
--- a/test/geo-random-stream.html
+++ b/test/geo-random-stream.html
@@ -58,78 +58,77 @@ under the License.
}
require([
- 'echarts'
+ 'echarts',
+ 'map/js/china'
], function (echarts) {
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
+ var chart = echarts.init(document.getElementById('main'));
- chart.setOption({
- tooltip: {},
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['categoryA','categoryB','categoryC']
- },
- // visualMap: {
- // min: 0,
- // max: 1500,
- // left: 'left',
- // top: 'bottom',
- // text: ['High','Low'],
- // seriesIndex: [1, 2, 3],
- // inRange: {
- // color: ['#006edd', '#e0ffff']
- // },
- // calculable : true
- // },
- geo: {
- map: 'china',
- roam: true,
- label: {
- normal: {
- show: true,
- textStyle: {
- color: 'rgba(0,0,0,0.4)'
- }
- }
- },
- itemStyle: {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- color: null,
- areaColor: null,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
+ chart.setOption({
+ tooltip: {},
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data:['categoryA','categoryB','categoryC']
+ },
+ // visualMap: {
+ // min: 0,
+ // max: 1500,
+ // left: 'left',
+ // top: 'bottom',
+ // text: ['High','Low'],
+ // seriesIndex: [1, 2, 3],
+ // inRange: {
+ // color: ['#006edd', '#e0ffff']
+ // },
+ // calculable : true
+ // },
+ geo: {
+ map: 'china',
+ roam: true,
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: 'rgba(0,0,0,0.4)'
}
}
},
- series : [{
- name: 'pm2.5',
- type: 'scatter',
- stream: true,
- coordinateSystem: 'geo',
- data: data,
- symbolSize: 4,
- // symbol: 'rect',
- itemStyle: {
- normal: {
- // color: '#ddb926'
- color: '#dda'
- }
+ itemStyle: {
+ normal:{
+ borderColor: 'rgba(0, 0, 0, 0.2)'
},
- progressive: 100
- }]
- });
+ emphasis:{
+ color: null,
+ areaColor: null,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ borderWidth: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ },
+ series : [{
+ name: 'pm2.5',
+ type: 'scatter',
+ stream: true,
+ coordinateSystem: 'geo',
+ data: data,
+ symbolSize: 4,
+ // symbol: 'rect',
+ itemStyle: {
+ normal: {
+ // color: '#ddb926'
+ color: '#dda'
+ }
+ },
+ progressive: 100
+ }]
+ });
- chart.on('click', function (param) {
- alert('asdf');
- });
+ chart.on('click', function (param) {
+ alert('asdf');
});
});
diff --git a/test/geoLine.html b/test/geoLine.html
index 30360bd..e0a8f80 100644
--- a/test/geoLine.html
+++ b/test/geoLine.html
@@ -55,8 +55,9 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
+ 'echarts',
+ './data/map/json/china.json'
+ ], function (echarts, chinaJson) {
var geoCoordMap = {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
@@ -231,159 +232,158 @@ under the License.
}
return res;
};
- $.get('./data/map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
- var myChart = echarts.init(document.getElementById('main'));
+ echarts.registerMap('china', chinaJson);
- var color = ['#a6c84c', '#ffa022', '#46bee9'];
- var series = [];
- [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
- series.push({
- name: item[0] + ' Top10',
- type: 'lines',
- zlevel: 1,
- effect: {
- show: true,
- period: 6,
- trailLength: 0.7,
- color: '#fff',
- symbolSize: 2,
- // loop: false
- },
- lineStyle: {
- normal: {
- color: color[i],
- width: 0,
- curveness: 0.2
- }
- },
- data: convertData(item[1])
+ var myChart = echarts.init(document.getElementById('main'));
+
+ var color = ['#a6c84c', '#ffa022', '#46bee9'];
+ var series = [];
+ [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
+ series.push({
+ name: item[0] + ' Top10',
+ type: 'lines',
+ zlevel: 1,
+ effect: {
+ show: true,
+ period: 6,
+ trailLength: 0.7,
+ color: '#fff',
+ symbolSize: 2,
+ // loop: false
+ },
+ lineStyle: {
+ normal: {
+ color: color[i],
+ width: 0,
+ curveness: 0.2
+ }
+ },
+ data: convertData(item[1])
+ },
+ {
+ name: item[0] + ' Top10',
+ type: 'lines',
+ zlevel: 2,
+ effect: {
+ show: true,
+ period: 6,
+ trailLength: 0,
+ symbol: planePath,
+ symbolSize: 20,
+ // loop: false
+ },
+ lineStyle: {
+ normal: {
+ color: color[i],
+ width: 1,
+ opacity: 0.4,
+ curveness: 0.2
+ }
},
- {
- name: item[0] + ' Top10',
- type: 'lines',
- zlevel: 2,
- effect: {
+ data: convertData(item[1])
+ },
+ {
+ name: item[0] + ' Top10',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ zlevel: 2,
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ label: {
+ normal: {
show: true,
- period: 6,
- trailLength: 0,
- symbol: planePath,
- symbolSize: 20,
- // loop: false
- },
- lineStyle: {
- normal: {
- color: color[i],
- width: 1,
- opacity: 0.4,
- curveness: 0.2
- }
- },
- data: convertData(item[1])
+ position: 'right',
+ formatter: '{b}'
+ }
},
- {
- name: item[0] + ' Top10',
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 2,
- rippleEffect: {
- brushType: 'stroke'
- },
- label: {
- normal: {
- show: true,
- position: 'right',
- formatter: '{b}'
- }
- },
- symbolSize: function (val) {
- return val[2] / 8;
- },
- itemStyle: {
- normal: {
- color: color[i]
- }
- },
- data: item[1].map(function (dataItem) {
- return {
- name: dataItem[1].name,
- value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
- };
- })
- });
- });
-
- myChart.setOption({
- backgroundColor: '#404a59',
- title: {
- text: '全国主要城市空气质量',
- subtext: 'data from PM25.in',
- sublink: 'http://www.pm25.in',
- left: 'center',
- textStyle: {
- color: '#fff'
+ symbolSize: function (val) {
+ return val[2] / 8;
+ },
+ itemStyle: {
+ normal: {
+ color: color[i]
}
},
- tooltip : {
- trigger: 'item'
+ data: item[1].map(function (dataItem) {
+ return {
+ name: dataItem[1].name,
+ value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+ };
+ })
+ });
+ });
+
+ myChart.setOption({
+ backgroundColor: '#404a59',
+ title: {
+ text: '全国主要城市空气质量',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ tooltip : {
+ trigger: 'item'
+ },
+ legend: {
+ orient: 'vertical',
+ top: 'bottom',
+ left: 'right',
+ data:['北京 Top10', '上海 Top10', '广州 Top10'],
+ textStyle: {
+ color: '#fff'
},
- legend: {
- orient: 'vertical',
- top: 'bottom',
- left: 'right',
- data:['北京 Top10', '上海 Top10', '广州 Top10'],
- textStyle: {
- color: '#fff'
+ selectedMode: 'single'
+ },
+ geo: {
+ map: 'china',
+ label: {
+ normal: {
+ show: true,
+ formatter: '{a}',
+ // position: 'inside',
+ backgroundColor: '#fff',
+ padding: [3, 5],
+ borderRadius: 3,
+ borderWidth: 1,
+ borderColor: 'rgba(0,0,0,0.5)',
+ color: '#777'
},
- selectedMode: 'single'
+ emphasis: {
+ }
},
- geo: {
- map: 'china',
- label: {
- normal: {
- show: true,
- formatter: '{a}',
- // position: 'inside',
- backgroundColor: '#fff',
- padding: [3, 5],
- borderRadius: 3,
- borderWidth: 1,
- borderColor: 'rgba(0,0,0,0.5)',
- color: '#777'
- },
- emphasis: {
- }
+ selectedMode: 'single',
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: '#323c48',
+ borderColor: '#404a59'
},
- selectedMode: 'single',
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#323c48',
- borderColor: '#404a59'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
+ emphasis: {
+ areaColor: '#2a333d'
}
- },
- series: series
- });
+ }
+ },
+ series: series
+ });
- myChart.on('geoselectchanged', function (param) {
- var selected = [];
- echarts.util.each(param.selected, function (v, key) {
- v && selected.push(key);
- });
- document.getElementById('info').innerHTML = 'SELECTED: ' + selected.join(', ');
+ myChart.on('geoselectchanged', function (param) {
+ var selected = [];
+ echarts.util.each(param.selected, function (v, key) {
+ v && selected.push(key);
});
-
- var isPaused = false;
- document.getElementById('pause-resume').onclick = function () {
- myChart.getZr().animation[isPaused ? 'resume' : 'pause']();
- isPaused = !isPaused;
- };
+ document.getElementById('info').innerHTML = 'SELECTED: ' + selected.join(', ');
});
+
+ var isPaused = false;
+ document.getElementById('pause-resume').onclick = function () {
+ myChart.getZr().animation[isPaused ? 'resume' : 'pause']();
+ isPaused = !isPaused;
+ };
});
</script>
diff --git a/test/geoScatter.html b/test/geoScatter.html
index c775c8e..52d8b52 100644
--- a/test/geoScatter.html
+++ b/test/geoScatter.html
@@ -38,300 +38,294 @@ under the License.
<script>
require([
- 'echarts'
+ 'echarts',
+ 'data/map/js/china'
], function (echarts) {
- $.get('./data/map/json/china.json', function (chinaJson) {
- if (typeof chinaJson === 'string') {
- chinaJson = eval('(' + chinaJson + ')');
- }
- echarts.registerMap('china', chinaJson);
+ var placeList = [
+ {name:'海门', geoCoord:[121.15, 31.89]},
+ {name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
+ {name:'招远', geoCoord:[120.38, 37.35]},
+ {name:'舟山', geoCoord:[122.207216, 29.985295]},
+ {name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
+ {name:'盐城', geoCoord:[120.13, 33.38]},
+ {name:'赤峰', geoCoord:[118.87, 42.28]},
+ {name:'青岛', geoCoord:[120.33, 36.07]},
+ {name:'乳山', geoCoord:[121.52, 36.89]},
+ {name:'金昌', geoCoord:[102.188043, 38.520089]},
+ {name:'泉州', geoCoord:[118.58, 24.93]},
+ {name:'莱西', geoCoord:[120.53, 36.86]},
+ {name:'日照', geoCoord:[119.46, 35.42]},
+ {name:'胶南', geoCoord:[119.97, 35.88]},
+ {name:'南通', geoCoord:[121.05, 32.08]},
+ {name:'拉萨', geoCoord:[91.11, 29.97]},
+ {name:'云浮', geoCoord:[112.02, 22.93]},
+ {name:'梅州', geoCoord:[116.1, 24.55]},
+ {name:'文登', geoCoord:[122.05, 37.2]},
+ {name:'上海', geoCoord:[121.48, 31.22]},
+ {name:'攀枝花', geoCoord:[101.718637, 26.582347]},
+ {name:'威海', geoCoord:[122.1, 37.5]},
+ {name:'承德', geoCoord:[117.93, 40.97]},
+ {name:'厦门', geoCoord:[118.1, 24.46]},
+ {name:'汕尾', geoCoord:[115.375279, 22.786211]},
+ {name:'潮州', geoCoord:[116.63, 23.68]},
+ {name:'丹东', geoCoord:[124.37, 40.13]},
+ {name:'太仓', geoCoord:[121.1, 31.45]},
+ {name:'曲靖', geoCoord:[103.79, 25.51]},
+ {name:'烟台', geoCoord:[121.39, 37.52]},
+ {name:'福州', geoCoord:[119.3, 26.08]},
+ {name:'瓦房店', geoCoord:[121.979603, 39.627114]},
+ {name:'即墨', geoCoord:[120.45, 36.38]},
+ {name:'抚顺', geoCoord:[123.97, 41.97]},
+ {name:'玉溪', geoCoord:[102.52, 24.35]},
+ {name:'张家口', geoCoord:[114.87, 40.82]},
+ {name:'阳泉', geoCoord:[113.57, 37.85]},
+ {name:'莱州', geoCoord:[119.942327, 37.177017]},
+ {name:'湖州', geoCoord:[120.1, 30.86]},
+ {name:'汕头', geoCoord:[116.69, 23.39]},
+ {name:'昆山', geoCoord:[120.95, 31.39]},
+ {name:'宁波', geoCoord:[121.56, 29.86]},
+ {name:'湛江', geoCoord:[110.359377, 21.270708]},
+ {name:'揭阳', geoCoord:[116.35, 23.55]},
+ {name:'荣成', geoCoord:[122.41, 37.16]},
+ {name:'连云港', geoCoord:[119.16, 34.59]},
+ {name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
+ {name:'常熟', geoCoord:[120.74, 31.64]},
+ {name:'东莞', geoCoord:[113.75, 23.04]},
+ {name:'河源', geoCoord:[114.68, 23.73]},
+ {name:'淮安', geoCoord:[119.15, 33.5]},
+ {name:'泰州', geoCoord:[119.9, 32.49]},
+ {name:'南宁', geoCoord:[108.33, 22.84]},
+ {name:'营口', geoCoord:[122.18, 40.65]},
+ {name:'惠州', geoCoord:[114.4, 23.09]},
+ {name:'江阴', geoCoord:[120.26, 31.91]},
+ {name:'蓬莱', geoCoord:[120.75, 37.8]},
+ {name:'韶关', geoCoord:[113.62, 24.84]},
+ {name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
+ {name:'广州', geoCoord:[113.23, 23.16]},
+ {name:'延安', geoCoord:[109.47, 36.6]},
+ {name:'太原', geoCoord:[112.53, 37.87]},
+ {name:'清远', geoCoord:[113.01, 23.7]},
+ {name:'中山', geoCoord:[113.38, 22.52]},
+ {name:'昆明', geoCoord:[102.73, 25.04]},
+ {name:'寿光', geoCoord:[118.73, 36.86]},
+ {name:'盘锦', geoCoord:[122.070714, 41.119997]},
+ {name:'长治', geoCoord:[113.08, 36.18]},
+ {name:'深圳', geoCoord:[114.07, 22.62]},
+ {name:'珠海', geoCoord:[113.52, 22.3]},
+ {name:'宿迁', geoCoord:[118.3, 33.96]},
+ {name:'咸阳', geoCoord:[108.72, 34.36]},
+ {name:'铜川', geoCoord:[109.11, 35.09]},
+ {name:'平度', geoCoord:[119.97, 36.77]},
+ {name:'佛山', geoCoord:[113.11, 23.05]},
+ {name:'海口', geoCoord:[110.35, 20.02]},
+ {name:'江门', geoCoord:[113.06, 22.61]},
+ {name:'章丘', geoCoord:[117.53, 36.72]},
+ {name:'肇庆', geoCoord:[112.44, 23.05]},
+ {name:'大连', geoCoord:[121.62, 38.92]},
+ {name:'临汾', geoCoord:[111.5, 36.08]},
+ {name:'吴江', geoCoord:[120.63, 31.16]},
+ {name:'石嘴山', geoCoord:[106.39, 39.04]},
+ {name:'沈阳', geoCoord:[123.38, 41.8]},
+ {name:'苏州', geoCoord:[120.62, 31.32]},
+ {name:'茂名', geoCoord:[110.88, 21.68]},
+ {name:'嘉兴', geoCoord:[120.76, 30.77]},
+ {name:'长春', geoCoord:[125.35, 43.88]},
+ {name:'胶州', geoCoord:[120.03336, 36.264622]},
+ {name:'银川', geoCoord:[106.27, 38.47]},
+ {name:'张家港', geoCoord:[120.555821, 31.875428]},
+ {name:'三门峡', geoCoord:[111.19, 34.76]},
+ {name:'锦州', geoCoord:[121.15, 41.13]},
+ {name:'南昌', geoCoord:[115.89, 28.68]},
+ {name:'柳州', geoCoord:[109.4, 24.33]},
+ {name:'三亚', geoCoord:[109.511909, 18.252847]},
+ {name:'自贡', geoCoord:[104.778442, 29.33903]},
+ {name:'吉林', geoCoord:[126.57, 43.87]},
+ {name:'阳江', geoCoord:[111.95, 21.85]},
+ {name:'泸州', geoCoord:[105.39, 28.91]},
+ {name:'西宁', geoCoord:[101.74, 36.56]},
+ {name:'宜宾', geoCoord:[104.56, 29.77]},
+ {name:'呼和浩特', geoCoord:[111.65, 40.82]},
+ {name:'成都', geoCoord:[104.06, 30.67]},
+ {name:'大同', geoCoord:[113.3, 40.12]},
+ {name:'镇江', geoCoord:[119.44, 32.2]},
+ {name:'桂林', geoCoord:[110.28, 25.29]},
+ {name:'张家界', geoCoord:[110.479191, 29.117096]},
+ {name:'宜兴', geoCoord:[119.82, 31.36]},
+ {name:'北海', geoCoord:[109.12, 21.49]},
+ {name:'西安', geoCoord:[108.95, 34.27]},
+ {name:'金坛', geoCoord:[119.56, 31.74]},
+ {name:'东营', geoCoord:[118.49, 37.46]},
+ {name:'牡丹江', geoCoord:[129.58, 44.6]},
+ {name:'遵义', geoCoord:[106.9, 27.7]},
+ {name:'绍兴', geoCoord:[120.58, 30.01]},
+ {name:'扬州', geoCoord:[119.42, 32.39]},
+ {name:'常州', geoCoord:[119.95, 31.79]},
+ {name:'潍坊', geoCoord:[119.1, 36.62]},
+ {name:'重庆', geoCoord:[106.54, 29.59]},
+ {name:'台州', geoCoord:[121.420757, 28.656386]},
+ {name:'南京', geoCoord:[118.78, 32.04]},
+ {name:'滨州', geoCoord:[118.03, 37.36]},
+ {name:'贵阳', geoCoord:[106.71, 26.57]},
+ {name:'无锡', geoCoord:[120.29, 31.59]},
+ {name:'本溪', geoCoord:[123.73, 41.3]},
+ {name:'克拉玛依', geoCoord:[84.77, 45.59]},
+ {name:'渭南', geoCoord:[109.5, 34.52]},
+ {name:'马鞍山', geoCoord:[118.48, 31.56]},
+ {name:'宝鸡', geoCoord:[107.15, 34.38]},
+ {name:'焦作', geoCoord:[113.21, 35.24]},
+ {name:'句容', geoCoord:[119.16, 31.95]},
+ {name:'北京', geoCoord:[116.46, 39.92]},
+ {name:'徐州', geoCoord:[117.2, 34.26]},
+ {name:'衡水', geoCoord:[115.72, 37.72]},
+ {name:'包头', geoCoord:[110, 40.58]},
+ {name:'绵阳', geoCoord:[104.73, 31.48]},
+ {name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
+ {name:'枣庄', geoCoord:[117.57, 34.86]},
+ {name:'杭州', geoCoord:[120.19, 30.26]},
+ {name:'淄博', geoCoord:[118.05, 36.78]},
+ {name:'鞍山', geoCoord:[122.85, 41.12]},
+ {name:'溧阳', geoCoord:[119.48, 31.43]},
+ {name:'库尔勒', geoCoord:[86.06, 41.68]},
+ {name:'安阳', geoCoord:[114.35, 36.1]},
+ {name:'开封', geoCoord:[114.35, 34.79]},
+ {name:'济南', geoCoord:[117, 36.65]},
+ {name:'德阳', geoCoord:[104.37, 31.13]},
+ {name:'温州', geoCoord:[120.65, 28.01]},
+ {name:'九江', geoCoord:[115.97, 29.71]},
+ {name:'邯郸', geoCoord:[114.47, 36.6]},
+ {name:'临安', geoCoord:[119.72, 30.23]},
+ {name:'兰州', geoCoord:[103.73, 36.03]},
+ {name:'沧州', geoCoord:[116.83, 38.33]},
+ {name:'临沂', geoCoord:[118.35, 35.05]},
+ {name:'南充', geoCoord:[106.110698, 30.837793]},
+ {name:'天津', geoCoord:[117.2, 39.13]},
+ {name:'富阳', geoCoord:[119.95, 30.07]},
+ {name:'泰安', geoCoord:[117.13, 36.18]},
+ {name:'诸暨', geoCoord:[120.23, 29.71]},
+ {name:'郑州', geoCoord:[113.65, 34.76]},
+ {name:'哈尔滨', geoCoord:[126.63, 45.75]},
+ {name:'聊城', geoCoord:[115.97, 36.45]},
+ {name:'芜湖', geoCoord:[118.38, 31.33]},
+ {name:'唐山', geoCoord:[118.02, 39.63]},
+ {name:'平顶山', geoCoord:[113.29, 33.75]},
+ {name:'邢台', geoCoord:[114.48, 37.05]},
+ {name:'德州', geoCoord:[116.29, 37.45]},
+ {name:'济宁', geoCoord:[116.59, 35.38]},
+ {name:'荆州', geoCoord:[112.239741, 30.335165]},
+ {name:'宜昌', geoCoord:[111.3, 30.7]},
+ {name:'义乌', geoCoord:[120.06, 29.32]},
+ {name:'丽水', geoCoord:[119.92, 28.45]},
+ {name:'洛阳', geoCoord:[112.44, 34.7]},
+ {name:'秦皇岛', geoCoord:[119.57, 39.95]},
+ {name:'株洲', geoCoord:[113.16, 27.83]},
+ {name:'石家庄', geoCoord:[114.48, 38.03]},
+ {name:'莱芜', geoCoord:[117.67, 36.19]},
+ {name:'常德', geoCoord:[111.69, 29.05]},
+ {name:'保定', geoCoord:[115.48, 38.85]},
+ {name:'湘潭', geoCoord:[112.91, 27.87]},
+ {name:'金华', geoCoord:[119.64, 29.12]},
+ {name:'岳阳', geoCoord:[113.09, 29.37]},
+ {name:'长沙', geoCoord:[113, 28.21]},
+ {name:'衢州', geoCoord:[118.88, 28.97]},
+ {name:'廊坊', geoCoord:[116.7, 39.53]},
+ {name:'菏泽', geoCoord:[115.480656, 35.23375]},
+ {name:'合肥', geoCoord:[117.27, 31.86]},
+ {name:'武汉', geoCoord:[114.31, 30.52]},
+ {name:'大庆', geoCoord:[125.03, 46.58]}
+ ];
- var placeList = [
- {name:'海门', geoCoord:[121.15, 31.89]},
- {name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
- {name:'招远', geoCoord:[120.38, 37.35]},
- {name:'舟山', geoCoord:[122.207216, 29.985295]},
- {name:'齐齐哈尔', geoCoord:[123.97, 47.33]},
- {name:'盐城', geoCoord:[120.13, 33.38]},
- {name:'赤峰', geoCoord:[118.87, 42.28]},
- {name:'青岛', geoCoord:[120.33, 36.07]},
- {name:'乳山', geoCoord:[121.52, 36.89]},
- {name:'金昌', geoCoord:[102.188043, 38.520089]},
- {name:'泉州', geoCoord:[118.58, 24.93]},
- {name:'莱西', geoCoord:[120.53, 36.86]},
- {name:'日照', geoCoord:[119.46, 35.42]},
- {name:'胶南', geoCoord:[119.97, 35.88]},
- {name:'南通', geoCoord:[121.05, 32.08]},
- {name:'拉萨', geoCoord:[91.11, 29.97]},
- {name:'云浮', geoCoord:[112.02, 22.93]},
- {name:'梅州', geoCoord:[116.1, 24.55]},
- {name:'文登', geoCoord:[122.05, 37.2]},
- {name:'上海', geoCoord:[121.48, 31.22]},
- {name:'攀枝花', geoCoord:[101.718637, 26.582347]},
- {name:'威海', geoCoord:[122.1, 37.5]},
- {name:'承德', geoCoord:[117.93, 40.97]},
- {name:'厦门', geoCoord:[118.1, 24.46]},
- {name:'汕尾', geoCoord:[115.375279, 22.786211]},
- {name:'潮州', geoCoord:[116.63, 23.68]},
- {name:'丹东', geoCoord:[124.37, 40.13]},
- {name:'太仓', geoCoord:[121.1, 31.45]},
- {name:'曲靖', geoCoord:[103.79, 25.51]},
- {name:'烟台', geoCoord:[121.39, 37.52]},
- {name:'福州', geoCoord:[119.3, 26.08]},
- {name:'瓦房店', geoCoord:[121.979603, 39.627114]},
- {name:'即墨', geoCoord:[120.45, 36.38]},
- {name:'抚顺', geoCoord:[123.97, 41.97]},
- {name:'玉溪', geoCoord:[102.52, 24.35]},
- {name:'张家口', geoCoord:[114.87, 40.82]},
- {name:'阳泉', geoCoord:[113.57, 37.85]},
- {name:'莱州', geoCoord:[119.942327, 37.177017]},
- {name:'湖州', geoCoord:[120.1, 30.86]},
- {name:'汕头', geoCoord:[116.69, 23.39]},
- {name:'昆山', geoCoord:[120.95, 31.39]},
- {name:'宁波', geoCoord:[121.56, 29.86]},
- {name:'湛江', geoCoord:[110.359377, 21.270708]},
- {name:'揭阳', geoCoord:[116.35, 23.55]},
- {name:'荣成', geoCoord:[122.41, 37.16]},
- {name:'连云港', geoCoord:[119.16, 34.59]},
- {name:'葫芦岛', geoCoord:[120.836932, 40.711052]},
- {name:'常熟', geoCoord:[120.74, 31.64]},
- {name:'东莞', geoCoord:[113.75, 23.04]},
- {name:'河源', geoCoord:[114.68, 23.73]},
- {name:'淮安', geoCoord:[119.15, 33.5]},
- {name:'泰州', geoCoord:[119.9, 32.49]},
- {name:'南宁', geoCoord:[108.33, 22.84]},
- {name:'营口', geoCoord:[122.18, 40.65]},
- {name:'惠州', geoCoord:[114.4, 23.09]},
- {name:'江阴', geoCoord:[120.26, 31.91]},
- {name:'蓬莱', geoCoord:[120.75, 37.8]},
- {name:'韶关', geoCoord:[113.62, 24.84]},
- {name:'嘉峪关', geoCoord:[98.289152, 39.77313]},
- {name:'广州', geoCoord:[113.23, 23.16]},
- {name:'延安', geoCoord:[109.47, 36.6]},
- {name:'太原', geoCoord:[112.53, 37.87]},
- {name:'清远', geoCoord:[113.01, 23.7]},
- {name:'中山', geoCoord:[113.38, 22.52]},
- {name:'昆明', geoCoord:[102.73, 25.04]},
- {name:'寿光', geoCoord:[118.73, 36.86]},
- {name:'盘锦', geoCoord:[122.070714, 41.119997]},
- {name:'长治', geoCoord:[113.08, 36.18]},
- {name:'深圳', geoCoord:[114.07, 22.62]},
- {name:'珠海', geoCoord:[113.52, 22.3]},
- {name:'宿迁', geoCoord:[118.3, 33.96]},
- {name:'咸阳', geoCoord:[108.72, 34.36]},
- {name:'铜川', geoCoord:[109.11, 35.09]},
- {name:'平度', geoCoord:[119.97, 36.77]},
- {name:'佛山', geoCoord:[113.11, 23.05]},
- {name:'海口', geoCoord:[110.35, 20.02]},
- {name:'江门', geoCoord:[113.06, 22.61]},
- {name:'章丘', geoCoord:[117.53, 36.72]},
- {name:'肇庆', geoCoord:[112.44, 23.05]},
- {name:'大连', geoCoord:[121.62, 38.92]},
- {name:'临汾', geoCoord:[111.5, 36.08]},
- {name:'吴江', geoCoord:[120.63, 31.16]},
- {name:'石嘴山', geoCoord:[106.39, 39.04]},
- {name:'沈阳', geoCoord:[123.38, 41.8]},
- {name:'苏州', geoCoord:[120.62, 31.32]},
- {name:'茂名', geoCoord:[110.88, 21.68]},
- {name:'嘉兴', geoCoord:[120.76, 30.77]},
- {name:'长春', geoCoord:[125.35, 43.88]},
- {name:'胶州', geoCoord:[120.03336, 36.264622]},
- {name:'银川', geoCoord:[106.27, 38.47]},
- {name:'张家港', geoCoord:[120.555821, 31.875428]},
- {name:'三门峡', geoCoord:[111.19, 34.76]},
- {name:'锦州', geoCoord:[121.15, 41.13]},
- {name:'南昌', geoCoord:[115.89, 28.68]},
- {name:'柳州', geoCoord:[109.4, 24.33]},
- {name:'三亚', geoCoord:[109.511909, 18.252847]},
- {name:'自贡', geoCoord:[104.778442, 29.33903]},
- {name:'吉林', geoCoord:[126.57, 43.87]},
- {name:'阳江', geoCoord:[111.95, 21.85]},
- {name:'泸州', geoCoord:[105.39, 28.91]},
- {name:'西宁', geoCoord:[101.74, 36.56]},
- {name:'宜宾', geoCoord:[104.56, 29.77]},
- {name:'呼和浩特', geoCoord:[111.65, 40.82]},
- {name:'成都', geoCoord:[104.06, 30.67]},
- {name:'大同', geoCoord:[113.3, 40.12]},
- {name:'镇江', geoCoord:[119.44, 32.2]},
- {name:'桂林', geoCoord:[110.28, 25.29]},
- {name:'张家界', geoCoord:[110.479191, 29.117096]},
- {name:'宜兴', geoCoord:[119.82, 31.36]},
- {name:'北海', geoCoord:[109.12, 21.49]},
- {name:'西安', geoCoord:[108.95, 34.27]},
- {name:'金坛', geoCoord:[119.56, 31.74]},
- {name:'东营', geoCoord:[118.49, 37.46]},
- {name:'牡丹江', geoCoord:[129.58, 44.6]},
- {name:'遵义', geoCoord:[106.9, 27.7]},
- {name:'绍兴', geoCoord:[120.58, 30.01]},
- {name:'扬州', geoCoord:[119.42, 32.39]},
- {name:'常州', geoCoord:[119.95, 31.79]},
- {name:'潍坊', geoCoord:[119.1, 36.62]},
- {name:'重庆', geoCoord:[106.54, 29.59]},
- {name:'台州', geoCoord:[121.420757, 28.656386]},
- {name:'南京', geoCoord:[118.78, 32.04]},
- {name:'滨州', geoCoord:[118.03, 37.36]},
- {name:'贵阳', geoCoord:[106.71, 26.57]},
- {name:'无锡', geoCoord:[120.29, 31.59]},
- {name:'本溪', geoCoord:[123.73, 41.3]},
- {name:'克拉玛依', geoCoord:[84.77, 45.59]},
- {name:'渭南', geoCoord:[109.5, 34.52]},
- {name:'马鞍山', geoCoord:[118.48, 31.56]},
- {name:'宝鸡', geoCoord:[107.15, 34.38]},
- {name:'焦作', geoCoord:[113.21, 35.24]},
- {name:'句容', geoCoord:[119.16, 31.95]},
- {name:'北京', geoCoord:[116.46, 39.92]},
- {name:'徐州', geoCoord:[117.2, 34.26]},
- {name:'衡水', geoCoord:[115.72, 37.72]},
- {name:'包头', geoCoord:[110, 40.58]},
- {name:'绵阳', geoCoord:[104.73, 31.48]},
- {name:'乌鲁木齐', geoCoord:[87.68, 43.77]},
- {name:'枣庄', geoCoord:[117.57, 34.86]},
- {name:'杭州', geoCoord:[120.19, 30.26]},
- {name:'淄博', geoCoord:[118.05, 36.78]},
- {name:'鞍山', geoCoord:[122.85, 41.12]},
- {name:'溧阳', geoCoord:[119.48, 31.43]},
- {name:'库尔勒', geoCoord:[86.06, 41.68]},
- {name:'安阳', geoCoord:[114.35, 36.1]},
- {name:'开封', geoCoord:[114.35, 34.79]},
- {name:'济南', geoCoord:[117, 36.65]},
- {name:'德阳', geoCoord:[104.37, 31.13]},
- {name:'温州', geoCoord:[120.65, 28.01]},
- {name:'九江', geoCoord:[115.97, 29.71]},
- {name:'邯郸', geoCoord:[114.47, 36.6]},
- {name:'临安', geoCoord:[119.72, 30.23]},
- {name:'兰州', geoCoord:[103.73, 36.03]},
- {name:'沧州', geoCoord:[116.83, 38.33]},
- {name:'临沂', geoCoord:[118.35, 35.05]},
- {name:'南充', geoCoord:[106.110698, 30.837793]},
- {name:'天津', geoCoord:[117.2, 39.13]},
- {name:'富阳', geoCoord:[119.95, 30.07]},
- {name:'泰安', geoCoord:[117.13, 36.18]},
- {name:'诸暨', geoCoord:[120.23, 29.71]},
- {name:'郑州', geoCoord:[113.65, 34.76]},
- {name:'哈尔滨', geoCoord:[126.63, 45.75]},
- {name:'聊城', geoCoord:[115.97, 36.45]},
- {name:'芜湖', geoCoord:[118.38, 31.33]},
- {name:'唐山', geoCoord:[118.02, 39.63]},
- {name:'平顶山', geoCoord:[113.29, 33.75]},
- {name:'邢台', geoCoord:[114.48, 37.05]},
- {name:'德州', geoCoord:[116.29, 37.45]},
- {name:'济宁', geoCoord:[116.59, 35.38]},
- {name:'荆州', geoCoord:[112.239741, 30.335165]},
- {name:'宜昌', geoCoord:[111.3, 30.7]},
- {name:'义乌', geoCoord:[120.06, 29.32]},
- {name:'丽水', geoCoord:[119.92, 28.45]},
- {name:'洛阳', geoCoord:[112.44, 34.7]},
- {name:'秦皇岛', geoCoord:[119.57, 39.95]},
- {name:'株洲', geoCoord:[113.16, 27.83]},
- {name:'石家庄', geoCoord:[114.48, 38.03]},
- {name:'莱芜', geoCoord:[117.67, 36.19]},
- {name:'常德', geoCoord:[111.69, 29.05]},
- {name:'保定', geoCoord:[115.48, 38.85]},
- {name:'湘潭', geoCoord:[112.91, 27.87]},
- {name:'金华', geoCoord:[119.64, 29.12]},
- {name:'岳阳', geoCoord:[113.09, 29.37]},
- {name:'长沙', geoCoord:[113, 28.21]},
- {name:'衢州', geoCoord:[118.88, 28.97]},
- {name:'廊坊', geoCoord:[116.7, 39.53]},
- {name:'菏泽', geoCoord:[115.480656, 35.23375]},
- {name:'合肥', geoCoord:[117.27, 31.86]},
- {name:'武汉', geoCoord:[114.31, 30.52]},
- {name:'大庆', geoCoord:[125.03, 46.58]}
- ];
-
- var chart = echarts.init(document.getElementById('main'), null, {
+ var chart = echarts.init(document.getElementById('main'), null, {
- });
+ });
- var data = [];
- var data2 = [];
- var len = 200;
+ var data = [];
+ var data2 = [];
+ var len = 200;
- var randomValue = function (geoCoord) {
- return [
- geoCoord[0] + Math.random() * 1 - 0.5,
- geoCoord[1] + Math.random() * 1 - 0.5,
- Math.random()
- ];
- };
+ var randomValue = function (geoCoord) {
+ return [
+ geoCoord[0] + Math.random() * 1 - 0.5,
+ geoCoord[1] + Math.random() * 1 - 0.5,
+ Math.random()
+ ];
+ };
- while(len--) {
- var geoCoord = placeList[len % placeList.length].geoCoord;
- data.push({
- name: placeList[len % placeList.length].name + len,
- value: randomValue(geoCoord)
- });
+ while(len--) {
+ var geoCoord = placeList[len % placeList.length].geoCoord;
+ data.push({
+ name: placeList[len % placeList.length].name + len,
+ value: randomValue(geoCoord)
+ });
- data2.push({
- name: placeList[len % placeList.length].name + len,
- value: randomValue(geoCoord)
- });
- }
+ data2.push({
+ name: placeList[len % placeList.length].name + len,
+ value: randomValue(geoCoord)
+ });
+ }
- var pattern = new Image();
- pattern.onload = function () {
- chart.setOption({
- legend: {
- data: ['scatter', 'scatter2']
+ var pattern = new Image();
+ pattern.onload = function () {
+ chart.setOption({
+ legend: {
+ data: ['scatter', 'scatter2']
+ },
+ geo: [{
+ map: 'china',
+ roam: true,
+ left: 100,
+ width: 300,
+ selectedMode: 'single',
+ // zoom: 1.5,
+ scaleLimit: {
+ min: 1.5,
+ max: 2
},
- geo: [{
- map: 'china',
- roam: true,
- left: 100,
- width: 300,
- selectedMode: 'single',
- // zoom: 1.5,
- scaleLimit: {
- min: 1.5,
- max: 2
- },
- regions: [{
- name: '新疆',
- label: {
- normal: {
- formatter: 'asdf',
- show: true,
- offset: [100, 200]
- }
- },
- itemStyle: {
- normal: {
- areaColor: 'yellow'
- }
+ regions: [{
+ name: '新疆',
+ label: {
+ normal: {
+ formatter: 'asdf',
+ show: true,
+ offset: [100, 200]
}
- }]
- }, {
- map: 'china',
- roam: true,
- selectedMode: 'multiple',
- left: null,
- right: 100,
- width: 300,
+ },
itemStyle: {
- repeat: 'repeat',
- areaColor: {
- image: pattern,
- repeat: 'repeat'
+ normal: {
+ areaColor: 'yellow'
}
}
- }],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
+ }]
+ }, {
+ map: 'china',
+ roam: true,
+ selectedMode: 'multiple',
+ left: null,
+ right: 100,
+ width: 300,
+ itemStyle: {
+ repeat: 'repeat',
+ areaColor: {
+ image: pattern,
+ repeat: 'repeat'
}
- },
- series: []
- });
+ }
+ }],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ series: []
+ });
- chart.on('geoselectchanged', function (param) {
- console.log(param);
- });
- };
+ chart.on('geoselectchanged', function (param) {
+ console.log(param);
+ });
+ };
- pattern.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAQlBMVEX////y8vL19fXS0dLy8fHi4uLc3Nz5+fnx8fHw8PDp6enr6+v39/fa2trl5OXb29v7+vrv7+/19PT08/P09PTX19dlapQUAAAClElEQVR4Xu3cuWrEMBiF0dizT/bt/V81vxuZFGkUBOJydCqDuGBCCAyT78EBgCTHOh/taTnVWdrj66FO313D/7i8/rV83pb77hrOeT0/kK/2dN2Wr+3xeVvuu2u48/Ja52l/utdZ2+PLuU7H3c5hwwAAADiXOm/701Ln0h7fH+v03TXceflY57M93U51bu3x+1Cn767h/ss+lN2HffxueMLfU8PT/Yk0DAAAAPN8O8zwtF/MNOxD2d/DPn43POW/vxgGAAAAZqF1onVi2OtpnQQNa50 [...]
- });
+ pattern.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAQlBMVEX////y8vL19fXS0dLy8fHi4uLc3Nz5+fnx8fHw8PDp6enr6+v39/fa2trl5OXb29v7+vrv7+/19PT08/P09PTX19dlapQUAAAClElEQVR4Xu3cuWrEMBiF0dizT/bt/V81vxuZFGkUBOJydCqDuGBCCAyT78EBgCTHOh/taTnVWdrj66FO313D/7i8/rV83pb77hrOeT0/kK/2dN2Wr+3xeVvuu2u48/Ja52l/utdZ2+PLuU7H3c5hwwAAADiXOm/701Ln0h7fH+v03TXceflY57M93U51bu3x+1Cn767h/ss+lN2HffxueMLfU8PT/Yk0DAAAAPN8O8zwtF/MNOxD2d/DPn43POW/vxgGAAAAZqF1onVi2OtpnQQNa50YBgA [...]
});
</script>
diff --git a/test/graph.html b/test/graph.html
index 5644b0f..f3d104c 100644
--- a/test/graph.html
+++ b/test/graph.html
@@ -40,155 +40,152 @@ under the License.
require([
'echarts',
'extension/dataTool',
+ './data/les-miserables.gexf',
'theme/vintage'
- ], function (echarts, dataTool) {
+ ], function (echarts, dataTool, xml) {
var gexf = dataTool.gexf;
- var chart = echarts.init(document.getElementById('main'), 'vintage', {
+ var chart = echarts.init(document.getElementById('main'), 'vintage');
+ 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'];
});
-
- $.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
+ graph.links.forEach(function (link) {
+ delete link.lineStyle;
+ });
+ var option = {
+ aria: {
+ show: true,
+ description: 'Les Miserables 的关系主要分为六个区域，这张图描述了他们之间的相互关联。'
+ },
+ tooltip: {},
+ legend: [{
+ // selectedMode: 'single',
+ data: categories.map(function (a) {
+ return a.name;
+ })
+ }],
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: 'quinticInOut',
+ series : [
+ {
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'none',
+ data: graph.nodes,
+ links: graph.links,
+ categories: categories,
+ cursor: 'crosshair',
+ roam: true,
+ draggable: true,
+ itemStyle: {
+ normal: {
+ borderColor: '#fff',
+ borderWidth: 2,
+ shadowBlur: 10,
+ shadowColor: 'rgba(0, 0, 0, 0.3)'
+ }
},
emphasis: {
- show: true
- }
- };
- node.category = node.attributes['modularity_class'];
- });
- graph.links.forEach(function (link) {
- delete link.lineStyle;
- });
- var option = {
- aria: {
- show: true,
- description: 'Les Miserables 的关系主要分为六个区域，这张图描述了他们之间的相互关联。'
- },
- tooltip: {},
- legend: [{
- // selectedMode: 'single',
- data: categories.map(function (a) {
- return a.name;
- })
- }],
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
- series : [
- {
- name: 'Les Miserables',
- type: 'graph',
- layout: 'none',
- data: graph.nodes,
- links: graph.links,
- categories: categories,
- cursor: 'crosshair',
- roam: true,
- draggable: true,
- itemStyle: {
- normal: {
- borderColor: '#fff',
- borderWidth: 2,
- shadowBlur: 10,
- shadowColor: 'rgba(0, 0, 0, 0.3)'
- }
+ focus: 'adjacency'
+ },
+ // edgeSymbol: ['none', 'arrow'],
+ // scaleLimit: {
+ // min: 1.5,
+ // max: 2
+ // },
+ label: {
+ normal: {
+ position: 'right',
+ formatter: '{b}'
+ }
+ },
+ lineStyle: {
+ normal: {
+ color: 'source',
+ curveness: 0.3
},
emphasis: {
- focus: 'adjacency'
- },
- // edgeSymbol: ['none', 'arrow'],
- // scaleLimit: {
- // min: 1.5,
- // max: 2
- // },
- label: {
- normal: {
- position: 'right',
- formatter: '{b}'
- }
- },
- lineStyle: {
- normal: {
- color: 'source',
- curveness: 0.3
- },
- emphasis: {
- width: 10
- }
+ width: 10
}
}
- ]
- };
+ }
+ ]
+ };
- chart.setOption(option);
+ chart.setOption(option);
- var config = {
- layout: 'none',
- focusNodeAdjacency: true,
- manualFocusNodeAdjacency: function () {
- chart.dispatchAction({
- type: 'highlight',
- seriesName: 'Les Miserables',
- dataIndex: 2
- });
- },
- manualUnfocusNodeAdjacency: function () {
- chart.dispatchAction({
- type: 'downplay',
- seriesName: 'Les Miserables'
- });
- },
- 'circular.rotateLabel': false
- };
+ var config = {
+ layout: 'none',
+ focusNodeAdjacency: true,
+ manualFocusNodeAdjacency: function () {
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesName: 'Les Miserables',
+ dataIndex: 2
+ });
+ },
+ manualUnfocusNodeAdjacency: function () {
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesName: 'Les Miserables'
+ });
+ },
+ 'circular.rotateLabel': false
+ };
- chart.on('click', function (params) {
- console.log(params, params.data);
- });
+ chart.on('click', function (params) {
+ console.log(params, params.data);
+ });
- var gui = new dat.GUI();
- gui.add(config, 'layout', ['none', 'circular'])
- .onChange(function (value) {
- chart.setOption({
- series: [{
- name: 'Les Miserables',
- layout: value
- }]
- });
+ var gui = new dat.GUI();
+ gui.add(config, 'layout', ['none', 'circular'])
+ .onChange(function (value) {
+ chart.setOption({
+ series: [{
+ name: 'Les Miserables',
+ layout: value
+ }]
});
- gui.add(config, 'focusNodeAdjacency')
- .onChange(function (value) {
- chart.setOption({
- series: [{
- name: 'Les Miserables',
- emphasis: {
- focus: config.focusNodeAdjacency ? 'adjacency' : null
- }
- }]
- });
+ });
+ gui.add(config, 'focusNodeAdjacency')
+ .onChange(function (value) {
+ chart.setOption({
+ series: [{
+ name: 'Les Miserables',
+ emphasis: {
+ focus: config.focusNodeAdjacency ? 'adjacency' : null
+ }
+ }]
});
- gui.add(config, 'manualFocusNodeAdjacency');
- gui.add(config, 'manualUnfocusNodeAdjacency');
- gui.add(config, 'circular.rotateLabel')
- .onChange(function (value) {
- chart.setOption({
- series: [{
- name: 'Les Miserables',
- circular: {rotateLabel: !!value}
- }]
- });
+ });
+ gui.add(config, 'manualFocusNodeAdjacency');
+ gui.add(config, 'manualUnfocusNodeAdjacency');
+ gui.add(config, 'circular.rotateLabel')
+ .onChange(function (value) {
+ chart.setOption({
+ series: [{
+ name: 'Les Miserables',
+ circular: {rotateLabel: !!value}
+ }]
});
- });
+ });
});
</script>
</body>
diff --git a/test/heatmap-map.html b/test/heatmap-map.html
index 0ae13d3..0e421bf 100644
--- a/test/heatmap-map.html
+++ b/test/heatmap-map.html
@@ -37,445 +37,443 @@ under the License.
<script>
require([
- 'echarts'
+ 'echarts',
+ 'map/js/china'
], function (echarts) {
+ var chart = echarts.init(document.getElementById('main'));
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
+ var geoCoordMap = {
+ "海门":[121.15,31.89],
+ "鄂尔多斯":[109.781327,39.608266],
+ "招远":[120.38,37.35],
+ "舟山":[122.207216,29.985295],
+ "齐齐哈尔":[123.97,47.33],
+ "盐城":[120.13,33.38],
+ "赤峰":[118.87,42.28],
+ "青岛":[120.33,36.07],
+ "乳山":[121.52,36.89],
+ "金昌":[102.188043,38.520089],
+ "泉州":[118.58,24.93],
+ "莱西":[120.53,36.86],
+ "日照":[119.46,35.42],
+ "胶南":[119.97,35.88],
+ "南通":[121.05,32.08],
+ "拉萨":[91.11,29.97],
+ "云浮":[112.02,22.93],
+ "梅州":[116.1,24.55],
+ "文登":[122.05,37.2],
+ "上海":[121.48,31.22],
+ "攀枝花":[101.718637,26.582347],
+ "威海":[122.1,37.5],
+ "承德":[117.93,40.97],
+ "厦门":[118.1,24.46],
+ "汕尾":[115.375279,22.786211],
+ "潮州":[116.63,23.68],
+ "丹东":[124.37,40.13],
+ "太仓":[121.1,31.45],
+ "曲靖":[103.79,25.51],
+ "烟台":[121.39,37.52],
+ "福州":[119.3,26.08],
+ "瓦房店":[121.979603,39.627114],
+ "即墨":[120.45,36.38],
+ "抚顺":[123.97,41.97],
+ "玉溪":[102.52,24.35],
+ "张家口":[114.87,40.82],
+ "阳泉":[113.57,37.85],
+ "莱州":[119.942327,37.177017],
+ "湖州":[120.1,30.86],
+ "汕头":[116.69,23.39],
+ "昆山":[120.95,31.39],
+ "宁波":[121.56,29.86],
+ "湛江":[110.359377,21.270708],
+ "揭阳":[116.35,23.55],
+ "荣成":[122.41,37.16],
+ "连云港":[119.16,34.59],
+ "葫芦岛":[120.836932,40.711052],
+ "常熟":[120.74,31.64],
+ "东莞":[113.75,23.04],
+ "河源":[114.68,23.73],
+ "淮安":[119.15,33.5],
+ "泰州":[119.9,32.49],
+ "南宁":[108.33,22.84],
+ "营口":[122.18,40.65],
+ "惠州":[114.4,23.09],
+ "江阴":[120.26,31.91],
+ "蓬莱":[120.75,37.8],
+ "韶关":[113.62,24.84],
+ "嘉峪关":[98.289152,39.77313],
+ "广州":[113.23,23.16],
+ "延安":[109.47,36.6],
+ "太原":[112.53,37.87],
+ "清远":[113.01,23.7],
+ "中山":[113.38,22.52],
+ "昆明":[102.73,25.04],
+ "寿光":[118.73,36.86],
+ "盘锦":[122.070714,41.119997],
+ "长治":[113.08,36.18],
+ "深圳":[114.07,22.62],
+ "珠海":[113.52,22.3],
+ "宿迁":[118.3,33.96],
+ "咸阳":[108.72,34.36],
+ "铜川":[109.11,35.09],
+ "平度":[119.97,36.77],
+ "佛山":[113.11,23.05],
+ "海口":[110.35,20.02],
+ "江门":[113.06,22.61],
+ "章丘":[117.53,36.72],
+ "肇庆":[112.44,23.05],
+ "大连":[121.62,38.92],
+ "临汾":[111.5,36.08],
+ "吴江":[120.63,31.16],
+ "石嘴山":[106.39,39.04],
+ "沈阳":[123.38,41.8],
+ "苏州":[120.62,31.32],
+ "茂名":[110.88,21.68],
+ "嘉兴":[120.76,30.77],
+ "长春":[125.35,43.88],
+ "胶州":[120.03336,36.264622],
+ "银川":[106.27,38.47],
+ "张家港":[120.555821,31.875428],
+ "三门峡":[111.19,34.76],
+ "锦州":[121.15,41.13],
+ "南昌":[115.89,28.68],
+ "柳州":[109.4,24.33],
+ "三亚":[109.511909,18.252847],
+ "自贡":[104.778442,29.33903],
+ "吉林":[126.57,43.87],
+ "阳江":[111.95,21.85],
+ "泸州":[105.39,28.91],
+ "西宁":[101.74,36.56],
+ "宜宾":[104.56,29.77],
+ "呼和浩特":[111.65,40.82],
+ "成都":[104.06,30.67],
+ "大同":[113.3,40.12],
+ "镇江":[119.44,32.2],
+ "桂林":[110.28,25.29],
+ "张家界":[110.479191,29.117096],
+ "宜兴":[119.82,31.36],
+ "北海":[109.12,21.49],
+ "西安":[108.95,34.27],
+ "金坛":[119.56,31.74],
+ "东营":[118.49,37.46],
+ "牡丹江":[129.58,44.6],
+ "遵义":[106.9,27.7],
+ "绍兴":[120.58,30.01],
+ "扬州":[119.42,32.39],
+ "常州":[119.95,31.79],
+ "潍坊":[119.1,36.62],
+ "重庆":[106.54,29.59],
+ "台州":[121.420757,28.656386],
+ "南京":[118.78,32.04],
+ "滨州":[118.03,37.36],
+ "贵阳":[106.71,26.57],
+ "无锡":[120.29,31.59],
+ "本溪":[123.73,41.3],
+ "克拉玛依":[84.77,45.59],
+ "渭南":[109.5,34.52],
+ "马鞍山":[118.48,31.56],
+ "宝鸡":[107.15,34.38],
+ "焦作":[113.21,35.24],
+ "句容":[119.16,31.95],
+ "北京":[116.46,39.92],
+ "徐州":[117.2,34.26],
+ "衡水":[115.72,37.72],
+ "包头":[110,40.58],
+ "绵阳":[104.73,31.48],
+ "乌鲁木齐":[87.68,43.77],
+ "枣庄":[117.57,34.86],
+ "杭州":[120.19,30.26],
+ "淄博":[118.05,36.78],
+ "鞍山":[122.85,41.12],
+ "溧阳":[119.48,31.43],
+ "库尔勒":[86.06,41.68],
+ "安阳":[114.35,36.1],
+ "开封":[114.35,34.79],
+ "济南":[117,36.65],
+ "德阳":[104.37,31.13],
+ "温州":[120.65,28.01],
+ "九江":[115.97,29.71],
+ "邯郸":[114.47,36.6],
+ "临安":[119.72,30.23],
+ "兰州":[103.73,36.03],
+ "沧州":[116.83,38.33],
+ "临沂":[118.35,35.05],
+ "南充":[106.110698,30.837793],
+ "天津":[117.2,39.13],
+ "富阳":[119.95,30.07],
+ "泰安":[117.13,36.18],
+ "诸暨":[120.23,29.71],
+ "郑州":[113.65,34.76],
+ "哈尔滨":[126.63,45.75],
+ "聊城":[115.97,36.45],
+ "芜湖":[118.38,31.33],
+ "唐山":[118.02,39.63],
+ "平顶山":[113.29,33.75],
+ "邢台":[114.48,37.05],
+ "德州":[116.29,37.45],
+ "济宁":[116.59,35.38],
+ "荆州":[112.239741,30.335165],
+ "宜昌":[111.3,30.7],
+ "义乌":[120.06,29.32],
+ "丽水":[119.92,28.45],
+ "洛阳":[112.44,34.7],
+ "秦皇岛":[119.57,39.95],
+ "株洲":[113.16,27.83],
+ "石家庄":[114.48,38.03],
+ "莱芜":[117.67,36.19],
+ "常德":[111.69,29.05],
+ "保定":[115.48,38.85],
+ "湘潭":[112.91,27.87],
+ "金华":[119.64,29.12],
+ "岳阳":[113.09,29.37],
+ "长沙":[113,28.21],
+ "衢州":[118.88,28.97],
+ "廊坊":[116.7,39.53],
+ "菏泽":[115.480656,35.23375],
+ "合肥":[117.27,31.86],
+ "武汉":[114.31,30.52],
+ "大庆":[125.03,46.58]
+ };
- var geoCoordMap = {
- "海门":[121.15,31.89],
- "鄂尔多斯":[109.781327,39.608266],
- "招远":[120.38,37.35],
- "舟山":[122.207216,29.985295],
- "齐齐哈尔":[123.97,47.33],
- "盐城":[120.13,33.38],
- "赤峰":[118.87,42.28],
- "青岛":[120.33,36.07],
- "乳山":[121.52,36.89],
- "金昌":[102.188043,38.520089],
- "泉州":[118.58,24.93],
- "莱西":[120.53,36.86],
- "日照":[119.46,35.42],
- "胶南":[119.97,35.88],
- "南通":[121.05,32.08],
- "拉萨":[91.11,29.97],
- "云浮":[112.02,22.93],
- "梅州":[116.1,24.55],
- "文登":[122.05,37.2],
- "上海":[121.48,31.22],
- "攀枝花":[101.718637,26.582347],
- "威海":[122.1,37.5],
- "承德":[117.93,40.97],
- "厦门":[118.1,24.46],
- "汕尾":[115.375279,22.786211],
- "潮州":[116.63,23.68],
- "丹东":[124.37,40.13],
- "太仓":[121.1,31.45],
- "曲靖":[103.79,25.51],
- "烟台":[121.39,37.52],
- "福州":[119.3,26.08],
- "瓦房店":[121.979603,39.627114],
- "即墨":[120.45,36.38],
- "抚顺":[123.97,41.97],
- "玉溪":[102.52,24.35],
- "张家口":[114.87,40.82],
- "阳泉":[113.57,37.85],
- "莱州":[119.942327,37.177017],
- "湖州":[120.1,30.86],
- "汕头":[116.69,23.39],
- "昆山":[120.95,31.39],
- "宁波":[121.56,29.86],
- "湛江":[110.359377,21.270708],
- "揭阳":[116.35,23.55],
- "荣成":[122.41,37.16],
- "连云港":[119.16,34.59],
- "葫芦岛":[120.836932,40.711052],
- "常熟":[120.74,31.64],
- "东莞":[113.75,23.04],
- "河源":[114.68,23.73],
- "淮安":[119.15,33.5],
- "泰州":[119.9,32.49],
- "南宁":[108.33,22.84],
- "营口":[122.18,40.65],
- "惠州":[114.4,23.09],
- "江阴":[120.26,31.91],
- "蓬莱":[120.75,37.8],
- "韶关":[113.62,24.84],
- "嘉峪关":[98.289152,39.77313],
- "广州":[113.23,23.16],
- "延安":[109.47,36.6],
- "太原":[112.53,37.87],
- "清远":[113.01,23.7],
- "中山":[113.38,22.52],
- "昆明":[102.73,25.04],
- "寿光":[118.73,36.86],
- "盘锦":[122.070714,41.119997],
- "长治":[113.08,36.18],
- "深圳":[114.07,22.62],
- "珠海":[113.52,22.3],
- "宿迁":[118.3,33.96],
- "咸阳":[108.72,34.36],
- "铜川":[109.11,35.09],
- "平度":[119.97,36.77],
- "佛山":[113.11,23.05],
- "海口":[110.35,20.02],
- "江门":[113.06,22.61],
- "章丘":[117.53,36.72],
- "肇庆":[112.44,23.05],
- "大连":[121.62,38.92],
- "临汾":[111.5,36.08],
- "吴江":[120.63,31.16],
- "石嘴山":[106.39,39.04],
- "沈阳":[123.38,41.8],
- "苏州":[120.62,31.32],
- "茂名":[110.88,21.68],
- "嘉兴":[120.76,30.77],
- "长春":[125.35,43.88],
- "胶州":[120.03336,36.264622],
- "银川":[106.27,38.47],
- "张家港":[120.555821,31.875428],
- "三门峡":[111.19,34.76],
- "锦州":[121.15,41.13],
- "南昌":[115.89,28.68],
- "柳州":[109.4,24.33],
- "三亚":[109.511909,18.252847],
- "自贡":[104.778442,29.33903],
- "吉林":[126.57,43.87],
- "阳江":[111.95,21.85],
- "泸州":[105.39,28.91],
- "西宁":[101.74,36.56],
- "宜宾":[104.56,29.77],
- "呼和浩特":[111.65,40.82],
- "成都":[104.06,30.67],
- "大同":[113.3,40.12],
- "镇江":[119.44,32.2],
- "桂林":[110.28,25.29],
- "张家界":[110.479191,29.117096],
- "宜兴":[119.82,31.36],
- "北海":[109.12,21.49],
- "西安":[108.95,34.27],
- "金坛":[119.56,31.74],
- "东营":[118.49,37.46],
- "牡丹江":[129.58,44.6],
- "遵义":[106.9,27.7],
- "绍兴":[120.58,30.01],
- "扬州":[119.42,32.39],
- "常州":[119.95,31.79],
- "潍坊":[119.1,36.62],
- "重庆":[106.54,29.59],
- "台州":[121.420757,28.656386],
- "南京":[118.78,32.04],
- "滨州":[118.03,37.36],
- "贵阳":[106.71,26.57],
- "无锡":[120.29,31.59],
- "本溪":[123.73,41.3],
- "克拉玛依":[84.77,45.59],
- "渭南":[109.5,34.52],
- "马鞍山":[118.48,31.56],
- "宝鸡":[107.15,34.38],
- "焦作":[113.21,35.24],
- "句容":[119.16,31.95],
- "北京":[116.46,39.92],
- "徐州":[117.2,34.26],
- "衡水":[115.72,37.72],
- "包头":[110,40.58],
- "绵阳":[104.73,31.48],
- "乌鲁木齐":[87.68,43.77],
- "枣庄":[117.57,34.86],
- "杭州":[120.19,30.26],
- "淄博":[118.05,36.78],
- "鞍山":[122.85,41.12],
- "溧阳":[119.48,31.43],
- "库尔勒":[86.06,41.68],
- "安阳":[114.35,36.1],
- "开封":[114.35,34.79],
- "济南":[117,36.65],
- "德阳":[104.37,31.13],
- "温州":[120.65,28.01],
- "九江":[115.97,29.71],
- "邯郸":[114.47,36.6],
- "临安":[119.72,30.23],
- "兰州":[103.73,36.03],
- "沧州":[116.83,38.33],
- "临沂":[118.35,35.05],
- "南充":[106.110698,30.837793],
- "天津":[117.2,39.13],
- "富阳":[119.95,30.07],
- "泰安":[117.13,36.18],
- "诸暨":[120.23,29.71],
- "郑州":[113.65,34.76],
- "哈尔滨":[126.63,45.75],
- "聊城":[115.97,36.45],
- "芜湖":[118.38,31.33],
- "唐山":[118.02,39.63],
- "平顶山":[113.29,33.75],
- "邢台":[114.48,37.05],
- "德州":[116.29,37.45],
- "济宁":[116.59,35.38],
- "荆州":[112.239741,30.335165],
- "宜昌":[111.3,30.7],
- "义乌":[120.06,29.32],
- "丽水":[119.92,28.45],
- "洛阳":[112.44,34.7],
- "秦皇岛":[119.57,39.95],
- "株洲":[113.16,27.83],
- "石家庄":[114.48,38.03],
- "莱芜":[117.67,36.19],
- "常德":[111.69,29.05],
- "保定":[115.48,38.85],
- "湘潭":[112.91,27.87],
- "金华":[119.64,29.12],
- "岳阳":[113.09,29.37],
- "长沙":[113,28.21],
- "衢州":[118.88,28.97],
- "廊坊":[116.7,39.53],
- "菏泽":[115.480656,35.23375],
- "合肥":[117.27,31.86],
- "武汉":[114.31,30.52],
- "大庆":[125.03,46.58]
- };
-
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push(geoCoord.concat(data[i].value));
- }
+ var convertData = function (data) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push(geoCoord.concat(data[i].value));
}
- return res;
- };
+ }
+ return res;
+ };
- chart.setOption({
- backgroundColor: '#404a59',
- visualMap: {
- min: 0,
- max: 500,
- splitNumber: 5,
- inRange: {
- color: ['#d94e5d','#eac736','#50a3ba'].reverse()
- },
- textStyle: {
- color: '#fff'
+ chart.setOption({
+ backgroundColor: '#404a59',
+ visualMap: {
+ min: 0,
+ max: 500,
+ splitNumber: 5,
+ inRange: {
+ color: ['#d94e5d','#eac736','#50a3ba'].reverse()
+ },
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ geo: {
+ map: 'china',
+ label: {
+ emphasis: {
+ show: false
}
},
- geo: {
- map: 'china',
- label: {
- emphasis: {
- show: false
- }
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: '#323c48',
+ borderColor: '#111'
},
- roam: true,
- itemStyle: {
- normal: {
- areaColor: '#323c48',
- borderColor: '#111'
- },
- emphasis: {
- areaColor: '#2a333d'
- }
+ emphasis: {
+ areaColor: '#2a333d'
}
- },
- series: [{
- name: 'AQI',
- type: 'heatmap',
- coordinateSystem: 'geo',
- data: convertData([
- {name: "海门", value: 9},
- {name: "鄂尔多斯", value: 12},
- {name: "招远", value: 12},
- {name: "舟山", value: 12},
- {name: "齐齐哈尔", value: 14},
- {name: "盐城", value: 15},
- {name: "赤峰", value: 16},
- {name: "青岛", value: 18},
- {name: "乳山", value: 18},
- {name: "金昌", value: 19},
- {name: "泉州", value: 21},
- {name: "莱西", value: 21},
- {name: "日照", value: 21},
- {name: "胶南", value: 22},
- {name: "南通", value: 23},
- {name: "拉萨", value: 24},
- {name: "云浮", value: 24},
- {name: "梅州", value: 25},
- {name: "文登", value: 25},
- {name: "上海", value: 25},
- {name: "攀枝花", value: 25},
- {name: "威海", value: 25},
- {name: "承德", value: 25},
- {name: "厦门", value: 26},
- {name: "汕尾", value: 26},
- {name: "潮州", value: 26},
- {name: "丹东", value: 27},
- {name: "太仓", value: 27},
- {name: "曲靖", value: 27},
- {name: "烟台", value: 28},
- {name: "福州", value: 29},
- {name: "瓦房店", value: 30},
- {name: "即墨", value: 30},
- {name: "抚顺", value: 31},
- {name: "玉溪", value: 31},
- {name: "张家口", value: 31},
- {name: "阳泉", value: 31},
- {name: "莱州", value: 32},
- {name: "湖州", value: 32},
- {name: "汕头", value: 32},
- {name: "昆山", value: 33},
- {name: "宁波", value: 33},
- {name: "湛江", value: 33},
- {name: "揭阳", value: 34},
- {name: "荣成", value: 34},
- {name: "连云港", value: 35},
- {name: "葫芦岛", value: 35},
- {name: "常熟", value: 36},
- {name: "东莞", value: 36},
- {name: "河源", value: 36},
- {name: "淮安", value: 36},
- {name: "泰州", value: 36},
- {name: "南宁", value: 37},
- {name: "营口", value: 37},
- {name: "惠州", value: 37},
- {name: "江阴", value: 37},
- {name: "蓬莱", value: 37},
- {name: "韶关", value: 38},
- {name: "嘉峪关", value: 38},
- {name: "广州", value: 38},
- {name: "延安", value: 38},
- {name: "太原", value: 39},
- {name: "清远", value: 39},
- {name: "中山", value: 39},
- {name: "昆明", value: 39},
- {name: "寿光", value: 40},
- {name: "盘锦", value: 40},
- {name: "长治", value: 41},
- {name: "深圳", value: 41},
- {name: "珠海", value: 42},
- {name: "宿迁", value: 43},
- {name: "咸阳", value: 43},
- {name: "铜川", value: 44},
- {name: "平度", value: 44},
- {name: "佛山", value: 44},
- {name: "海口", value: 44},
- {name: "江门", value: 45},
- {name: "章丘", value: 45},
- {name: "肇庆", value: 46},
- {name: "大连", value: 47},
- {name: "临汾", value: 47},
- {name: "吴江", value: 47},
- {name: "石嘴山", value: 49},
- {name: "沈阳", value: 50},
- {name: "苏州", value: 50},
- {name: "茂名", value: 50},
- {name: "嘉兴", value: 51},
- {name: "长春", value: 51},
- {name: "胶州", value: 52},
- {name: "银川", value: 52},
- {name: "张家港", value: 52},
- {name: "三门峡", value: 53},
- {name: "锦州", value: 54},
- {name: "南昌", value: 54},
- {name: "柳州", value: 54},
- {name: "三亚", value: 54},
- {name: "自贡", value: 56},
- {name: "吉林", value: 56},
- {name: "阳江", value: 57},
- {name: "泸州", value: 57},
- {name: "西宁", value: 57},
- {name: "宜宾", value: 58},
- {name: "呼和浩特", value: 58},
- {name: "成都", value: 58},
- {name: "大同", value: 58},
- {name: "镇江", value: 59},
- {name: "桂林", value: 59},
- {name: "张家界", value: 59},
- {name: "宜兴", value: 59},
- {name: "北海", value: 60},
- {name: "西安", value: 61},
- {name: "金坛", value: 62},
- {name: "东营", value: 62},
- {name: "牡丹江", value: 63},
- {name: "遵义", value: 63},
- {name: "绍兴", value: 63},
- {name: "扬州", value: 64},
- {name: "常州", value: 64},
- {name: "潍坊", value: 65},
- {name: "重庆", value: 66},
- {name: "台州", value: 67},
- {name: "南京", value: 67},
- {name: "滨州", value: 70},
- {name: "贵阳", value: 71},
- {name: "无锡", value: 71},
- {name: "本溪", value: 71},
- {name: "克拉玛依", value: 72},
- {name: "渭南", value: 72},
- {name: "马鞍山", value: 72},
- {name: "宝鸡", value: 72},
- {name: "焦作", value: 75},
- {name: "句容", value: 75},
- {name: "北京", value: 79},
- {name: "徐州", value: 79},
- {name: "衡水", value: 80},
- {name: "包头", value: 80},
- {name: "绵阳", value: 80},
- {name: "乌鲁木齐", value: 84},
- {name: "枣庄", value: 84},
- {name: "杭州", value: 84},
- {name: "淄博", value: 85},
- {name: "鞍山", value: 86},
- {name: "溧阳", value: 86},
- {name: "库尔勒", value: 86},
- {name: "安阳", value: 90},
- {name: "开封", value: 90},
- {name: "济南", value: 92},
- {name: "德阳", value: 93},
- {name: "温州", value: 95},
- {name: "九江", value: 96},
- {name: "邯郸", value: 98},
- {name: "临安", value: 99},
- {name: "兰州", value: 99},
- {name: "沧州", value: 100},
- {name: "临沂", value: 103},
- {name: "南充", value: 104},
- {name: "天津", value: 105},
- {name: "富阳", value: 106},
- {name: "泰安", value: 112},
- {name: "诸暨", value: 112},
- {name: "郑州", value: 113},
- {name: "哈尔滨", value: 114},
- {name: "聊城", value: 116},
- {name: "芜湖", value: 117},
- {name: "唐山", value: 119},
- {name: "平顶山", value: 119},
- {name: "邢台", value: 119},
- {name: "德州", value: 120},
- {name: "济宁", value: 120},
- {name: "荆州", value: 127},
- {name: "宜昌", value: 130},
- {name: "义乌", value: 132},
- {name: "丽水", value: 133},
- {name: "洛阳", value: 134},
- {name: "秦皇岛", value: 136},
- {name: "株洲", value: 143},
- {name: "石家庄", value: 147},
- {name: "莱芜", value: 148},
- {name: "常德", value: 152},
- {name: "保定", value: 153},
- {name: "湘潭", value: 154},
- {name: "金华", value: 157},
- {name: "岳阳", value: 169},
- {name: "长沙", value: 175},
- {name: "衢州", value: 177},
- {name: "廊坊", value: 193},
- {name: "菏泽", value: 194},
- {name: "合肥", value: 229},
- {name: "武汉", value: 273},
- {name: "大庆", value: 279}
- ])
- }]
- });
+ }
+ },
+ series: [{
+ name: 'AQI',
+ type: 'heatmap',
+ coordinateSystem: 'geo',
+ data: convertData([
+ {name: "海门", value: 9},
+ {name: "鄂尔多斯", value: 12},
+ {name: "招远", value: 12},
+ {name: "舟山", value: 12},
+ {name: "齐齐哈尔", value: 14},
+ {name: "盐城", value: 15},
+ {name: "赤峰", value: 16},
+ {name: "青岛", value: 18},
+ {name: "乳山", value: 18},
+ {name: "金昌", value: 19},
+ {name: "泉州", value: 21},
+ {name: "莱西", value: 21},
+ {name: "日照", value: 21},
+ {name: "胶南", value: 22},
+ {name: "南通", value: 23},
+ {name: "拉萨", value: 24},
+ {name: "云浮", value: 24},
+ {name: "梅州", value: 25},
+ {name: "文登", value: 25},
+ {name: "上海", value: 25},
+ {name: "攀枝花", value: 25},
+ {name: "威海", value: 25},
+ {name: "承德", value: 25},
+ {name: "厦门", value: 26},
+ {name: "汕尾", value: 26},
+ {name: "潮州", value: 26},
+ {name: "丹东", value: 27},
+ {name: "太仓", value: 27},
+ {name: "曲靖", value: 27},
+ {name: "烟台", value: 28},
+ {name: "福州", value: 29},
+ {name: "瓦房店", value: 30},
+ {name: "即墨", value: 30},
+ {name: "抚顺", value: 31},
+ {name: "玉溪", value: 31},
+ {name: "张家口", value: 31},
+ {name: "阳泉", value: 31},
+ {name: "莱州", value: 32},
+ {name: "湖州", value: 32},
+ {name: "汕头", value: 32},
+ {name: "昆山", value: 33},
+ {name: "宁波", value: 33},
+ {name: "湛江", value: 33},
+ {name: "揭阳", value: 34},
+ {name: "荣成", value: 34},
+ {name: "连云港", value: 35},
+ {name: "葫芦岛", value: 35},
+ {name: "常熟", value: 36},
+ {name: "东莞", value: 36},
+ {name: "河源", value: 36},
+ {name: "淮安", value: 36},
+ {name: "泰州", value: 36},
+ {name: "南宁", value: 37},
+ {name: "营口", value: 37},
+ {name: "惠州", value: 37},
+ {name: "江阴", value: 37},
+ {name: "蓬莱", value: 37},
+ {name: "韶关", value: 38},
+ {name: "嘉峪关", value: 38},
+ {name: "广州", value: 38},
+ {name: "延安", value: 38},
+ {name: "太原", value: 39},
+ {name: "清远", value: 39},
+ {name: "中山", value: 39},
+ {name: "昆明", value: 39},
+ {name: "寿光", value: 40},
+ {name: "盘锦", value: 40},
+ {name: "长治", value: 41},
+ {name: "深圳", value: 41},
+ {name: "珠海", value: 42},
+ {name: "宿迁", value: 43},
+ {name: "咸阳", value: 43},
+ {name: "铜川", value: 44},
+ {name: "平度", value: 44},
+ {name: "佛山", value: 44},
+ {name: "海口", value: 44},
+ {name: "江门", value: 45},
+ {name: "章丘", value: 45},
+ {name: "肇庆", value: 46},
+ {name: "大连", value: 47},
+ {name: "临汾", value: 47},
+ {name: "吴江", value: 47},
+ {name: "石嘴山", value: 49},
+ {name: "沈阳", value: 50},
+ {name: "苏州", value: 50},
+ {name: "茂名", value: 50},
+ {name: "嘉兴", value: 51},
+ {name: "长春", value: 51},
+ {name: "胶州", value: 52},
+ {name: "银川", value: 52},
+ {name: "张家港", value: 52},
+ {name: "三门峡", value: 53},
+ {name: "锦州", value: 54},
+ {name: "南昌", value: 54},
+ {name: "柳州", value: 54},
+ {name: "三亚", value: 54},
+ {name: "自贡", value: 56},
+ {name: "吉林", value: 56},
+ {name: "阳江", value: 57},
+ {name: "泸州", value: 57},
+ {name: "西宁", value: 57},
+ {name: "宜宾", value: 58},
+ {name: "呼和浩特", value: 58},
+ {name: "成都", value: 58},
+ {name: "大同", value: 58},
+ {name: "镇江", value: 59},
+ {name: "桂林", value: 59},
+ {name: "张家界", value: 59},
+ {name: "宜兴", value: 59},
+ {name: "北海", value: 60},
+ {name: "西安", value: 61},
+ {name: "金坛", value: 62},
+ {name: "东营", value: 62},
+ {name: "牡丹江", value: 63},
+ {name: "遵义", value: 63},
+ {name: "绍兴", value: 63},
+ {name: "扬州", value: 64},
+ {name: "常州", value: 64},
+ {name: "潍坊", value: 65},
+ {name: "重庆", value: 66},
+ {name: "台州", value: 67},
+ {name: "南京", value: 67},
+ {name: "滨州", value: 70},
+ {name: "贵阳", value: 71},
+ {name: "无锡", value: 71},
+ {name: "本溪", value: 71},
+ {name: "克拉玛依", value: 72},
+ {name: "渭南", value: 72},
+ {name: "马鞍山", value: 72},
+ {name: "宝鸡", value: 72},
+ {name: "焦作", value: 75},
+ {name: "句容", value: 75},
+ {name: "北京", value: 79},
+ {name: "徐州", value: 79},
+ {name: "衡水", value: 80},
+ {name: "包头", value: 80},
+ {name: "绵阳", value: 80},
+ {name: "乌鲁木齐", value: 84},
+ {name: "枣庄", value: 84},
+ {name: "杭州", value: 84},
+ {name: "淄博", value: 85},
+ {name: "鞍山", value: 86},
+ {name: "溧阳", value: 86},
+ {name: "库尔勒", value: 86},
+ {name: "安阳", value: 90},
+ {name: "开封", value: 90},
+ {name: "济南", value: 92},
+ {name: "德阳", value: 93},
+ {name: "温州", value: 95},
+ {name: "九江", value: 96},
+ {name: "邯郸", value: 98},
+ {name: "临安", value: 99},
+ {name: "兰州", value: 99},
+ {name: "沧州", value: 100},
+ {name: "临沂", value: 103},
+ {name: "南充", value: 104},
+ {name: "天津", value: 105},
+ {name: "富阳", value: 106},
+ {name: "泰安", value: 112},
+ {name: "诸暨", value: 112},
+ {name: "郑州", value: 113},
+ {name: "哈尔滨", value: 114},
+ {name: "聊城", value: 116},
+ {name: "芜湖", value: 117},
+ {name: "唐山", value: 119},
+ {name: "平顶山", value: 119},
+ {name: "邢台", value: 119},
+ {name: "德州", value: 120},
+ {name: "济宁", value: 120},
+ {name: "荆州", value: 127},
+ {name: "宜昌", value: 130},
+ {name: "义乌", value: 132},
+ {name: "丽水", value: 133},
+ {name: "洛阳", value: 134},
+ {name: "秦皇岛", value: 136},
+ {name: "株洲", value: 143},
+ {name: "石家庄", value: 147},
+ {name: "莱芜", value: 148},
+ {name: "常德", value: 152},
+ {name: "保定", value: 153},
+ {name: "湘潭", value: 154},
+ {name: "金华", value: 157},
+ {name: "岳阳", value: 169},
+ {name: "长沙", value: 175},
+ {name: "衢州", value: 177},
+ {name: "廊坊", value: 193},
+ {name: "菏泽", value: 194},
+ {name: "合肥", value: 229},
+ {name: "武汉", value: 273},
+ {name: "大庆", value: 279}
+ ])
+ }]
});
});
diff --git a/test/hoverStyle.html b/test/hoverStyle.html
index 14e2d79..acc98b2 100644
--- a/test/hoverStyle.html
+++ b/test/hoverStyle.html
@@ -1122,57 +1122,51 @@ under the License.
<script>
- $.get('./data/map/json/china.json', function (chinaJson) {
- if (typeof chinaJson === 'string') {
- chinaJson = eval('(' + chinaJson + ')');
- }
- require(['echarts'], function (echarts) {
- echarts.registerMap('china', chinaJson);
- var option = {
- hoverLayerThreshold: hoverLayerThreshold,
- tooltip: {},
- legend: {},
- geo: [{
- type: 'map',
- map: 'china',
- roam: true,
- scaleLimit: {
- min: 1.5,
- max: 10
- },
- selectedMode: 'multiple',
- // emphasis: {
- // itemStyle: {
- // color: 'none',
- // borderWidth: 2
- // }
- // },
- select: {
- itemStyle: {
- color: 'green'
- }
+ require(['echarts', 'data/map/js/china'], function (echarts) {
+ var option = {
+ hoverLayerThreshold: hoverLayerThreshold,
+ tooltip: {},
+ legend: {},
+ geo: [{
+ type: 'map',
+ map: 'china',
+ roam: true,
+ scaleLimit: {
+ min: 1.5,
+ max: 10
+ },
+ selectedMode: 'multiple',
+ // emphasis: {
+ // itemStyle: {
+ // color: 'none',
+ // borderWidth: 2
+ // }
+ // },
+ select: {
+ itemStyle: {
+ color: 'green'
}
- }]
- };
+ }
+ }]
+ };
- var chart = testHelper.create(echarts, 'main8', {
- title: [
- 'Click button toggleSelected 内蒙古',
- 'Then hover and unhover the region, highlight state will not changed'
- ],
- option: option,
- height: 400,
- buttons: [{
- text: 'toggleSelected 内蒙古',
- onclick: function () {
- chart.dispatchAction({
- type: 'geoToggleSelect',
- geoIndex: 0,
- name: '内蒙古'
- });
- }
- }]
- });
+ var chart = testHelper.create(echarts, 'main8', {
+ title: [
+ 'Click button toggleSelected 内蒙古',
+ 'Then hover and unhover the region, highlight state will not changed'
+ ],
+ option: option,
+ height: 400,
+ buttons: [{
+ text: 'toggleSelected 内蒙古',
+ onclick: function () {
+ chart.dispatchAction({
+ type: 'geoToggleSelect',
+ geoIndex: 0,
+ name: '内蒙古'
+ });
+ }
+ }]
});
});
</script>
diff --git a/test/label-layout.html b/test/label-layout.html
index 3dc60bb..675b600 100644
--- a/test/label-layout.html
+++ b/test/label-layout.html
@@ -731,74 +731,76 @@ under the License.
</script>
<script>
- require(['echarts', 'extension/dataTool'], function (echarts, dataTool) {
- $.get('./data/les-miserables.gexf', function (xml) {
- var graph = dataTool.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.category = node.attributes['modularity_class'];
- });
- graph.links.forEach(function (link) {
- delete link.lineStyle;
- });
- var option = {
- legend: [{}],
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
-
- series : [
- {
- name: 'Les Miserables',
- type: 'graph',
- layout: 'none',
- data: graph.nodes,
- links: graph.links,
- categories: categories,
- roam: true,
- draggable: true,
+ require([
+ 'echarts',
+ 'extension/dataTool',
+ './data/les-miserables.gexf'
+ ], function (echarts, dataTool, xml) {
+ var graph = dataTool.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.category = node.attributes['modularity_class'];
+ });
+ graph.links.forEach(function (link) {
+ delete link.lineStyle;
+ });
+ var option = {
+ legend: [{}],
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: 'quinticInOut',
- label: {
- show: true,
- formatter: '{b}',
- position: 'right'
- },
+ series : [
+ {
+ name: 'Les Miserables',
+ type: 'graph',
+ layout: 'none',
+ data: graph.nodes,
+ links: graph.links,
+ categories: categories,
+ roam: true,
+ draggable: true,
- labelLayout: {
- hideOverlap: true
- },
+ label: {
+ show: true,
+ formatter: '{b}',
+ position: 'right'
+ },
- emphasis: {
- label: {
- show: true
- }
- },
+ labelLayout: {
+ hideOverlap: true
+ },
+
+ emphasis: {
+ label: {
+ show: true
+ }
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ emphasis: {
lineStyle: {
- color: 'source',
- curveness: 0.3
- },
- emphasis: {
- lineStyle: {
- width: 10
- }
+ width: 10
}
}
- ]
- };
+ }
+ ]
+ };
- var chart = testHelper.create(echarts, 'main10', {
- title: [
- 'Hide overlap in graph zooming.'
- ],
- height: 800,
- option: option
- });
+ var chart = testHelper.create(echarts, 'main10', {
+ title: [
+ 'Hide overlap in graph zooming.'
+ ],
+ height: 800,
+ option: option
});
});
</script>
diff --git a/test/lines-bus.html b/test/lines-bus.html
index 398632d..ac6989d 100644
--- a/test/lines-bus.html
+++ b/test/lines-bus.html
@@ -46,12 +46,12 @@ under the License.
require([
'echarts',
+ 'data/lines-bus.json',
'extension/bmap'
- ], function (echarts) {
+ ], function (echarts, data) {
var myChart = echarts.init(document.getElementById('main'));
- $.get('data/lines-bus.json', function (data) {
var hStep = 300 / (data.length - 1);
var busLines = data.map(function (busLine, idx) {
var prevPt;
@@ -255,7 +255,6 @@ under the License.
}]
});
});
- });
</script>
</body>
</html>
\ No newline at end of file
diff --git a/test/lines-flight.html b/test/lines-flight.html
index d127735..fd5f96e 100644
--- a/test/lines-flight.html
+++ b/test/lines-flight.html
@@ -38,112 +38,107 @@ under the License.
<div id='main'></div>
<script>
- var xs = [440000, 450000];
- var ys = [4368000, 4537000];
+ var xs = [440000, 450000];
+ var ys = [4368000, 4537000];
- var dataURL = './data/flight.json';
+ require([
+ 'echarts',
+ 'data/map/json/world.json',
+ './data/flight.json'
+ ], function (echarts, worldJson, data) {
- require([
- 'echarts'
- ], function (echarts) {
-
- $.get('./data/map/json/world.json', function (worldJson) {
echarts.registerMap('world', worldJson);
- $.get(dataURL, function (data) {
- var config = {
- dataLoading: 'whole',
- streamThreshold: 0,
- streamRender: true,
- largeModel: true
- };
+ var config = {
+ dataLoading: 'whole',
+ streamThreshold: 0,
+ streamRender: true,
+ largeModel: true
+ };
+
+ var chart;
+
+ // var gui = new dat.GUI();
+ // gui.add(config, 'dataLoading', ['whole', 'chunked'])
+ // .onChange(init);
+ // gui.add(config, 'largeModel')
+ // .onChange(init);
+ // gui.add(config, 'streamRender')
+ // .onChange(init);
+ // gui.add(config, 'streamThreshold', 0, 200000)
+ // .onChange(init);
+
+ init();
+
+ function init() {
+ if (chart) {
+ chart.dispose();
+ }
- var chart;
-
- // var gui = new dat.GUI();
- // gui.add(config, 'dataLoading', ['whole', 'chunked'])
- // .onChange(init);
- // gui.add(config, 'largeModel')
- // .onChange(init);
- // gui.add(config, 'streamRender')
- // .onChange(init);
- // gui.add(config, 'streamThreshold', 0, 200000)
- // .onChange(init);
-
- init();
-
- function init() {
- if (chart) {
- chart.dispose();
- }
-
- chart = echarts.init(document.getElementById('main'));
-
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
- }
- var routes = data.routes.map(function (airline) {
- return [
- getAirportCoord(airline[1]),
- getAirportCoord(airline[2])
- ];
- });
-
- var option = {
- streamStep: 4000,
- title: {
- text: 'World Flights',
- left: 'center',
- textStyle: {
- color: '#eee'
- }
- },
- backgroundColor: '#003',
- tooltip: {
- formatter: function (param) {
- var route = data.routes[param.dataIndex];
- return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
+ chart = echarts.init(document.getElementById('main'));
+
+ function getAirportCoord(idx) {
+ return [data.airports[idx][3], data.airports[idx][4]];
+ }
+ var routes = data.routes.map(function (airline) {
+ return [
+ getAirportCoord(airline[1]),
+ getAirportCoord(airline[2])
+ ];
+ });
+
+ var option = {
+ streamStep: 4000,
+ title: {
+ text: 'World Flights',
+ left: 'center',
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ backgroundColor: '#003',
+ tooltip: {
+ formatter: function (param) {
+ var route = data.routes[param.dataIndex];
+ return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
+ }
+ },
+ geo: {
+ map: 'world',
+ left: 0,
+ right: 0,
+ roam: true,
+ silent: true,
+ itemStyle: {
+ normal: {
+ borderColor: '#003',
+ color: '#005'
}
- },
- geo: {
- map: 'world',
- left: 0,
- right: 0,
- roam: true,
- silent: true,
- itemStyle: {
- normal: {
- borderColor: '#003',
- color: '#005'
- }
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'geo',
+ blendModel: 'lighter',
+ data: routes,
+ large: true,
+ largeThreshold: 100,
+ lineStyle: {
+ normal: {
+ opacity: 0.5,
+ width: 0.5,
+ curveness: 0.3
}
},
- series: [{
- type: 'lines',
- coordinateSystem: 'geo',
- blendModel: 'lighter',
- data: routes,
- large: true,
- largeThreshold: 100,
- lineStyle: {
- normal: {
- opacity: 0.5,
- width: 0.5,
- curveness: 0.3
- }
- },
- // 设置混合模式为叠加
- blendMode: 'lighter'
- }]
- };
-
- chart.setOption(option);
- }
+ // 设置混合模式为叠加
+ blendMode: 'lighter'
+ }]
+ };
- });
+ chart.setOption(option);
+ }
});
- });
</script>
</body>
diff --git a/test/lines-stream-large.html b/test/lines-stream-large.html
index 5a48304..1d0bb8e 100644
--- a/test/lines-stream-large.html
+++ b/test/lines-stream-large.html
@@ -43,119 +43,117 @@ under the License.
var ys = [4368000, 4537000];
require([
- 'echarts'
- ], function (echarts) {
-
- $.get('./data/map/json/world.json', function (worldJson) {
- echarts.registerMap('world', worldJson);
-
- var linesCount = 35663;
- var chart;
-
- var routes = [];
-
- var lngStep = 0.01;
- var lng0 = -160;
- var lng1 = lng0 + linesCount * lngStep;
-
- for (var i = 0; i < linesCount; i++) {
- var lng = lng0 + i * lngStep;
- var lat0 = 0;
- var lat1 = 90;
-
- // if (i % 1000 < 500) {
- // lat0 = 30;
- // lat1 = 120;
- // }
- routes.push([[lng, lat0], [lng, lat1]]);
- }
+ 'echarts',
+ './data/map/json/world.json'
+ ], function (echarts, worldJson) {
+ echarts.registerMap('world', worldJson);
+
+ var linesCount = 35663;
+ var chart;
+
+ var routes = [];
+
+ var lngStep = 0.01;
+ var lng0 = -160;
+ var lng1 = lng0 + linesCount * lngStep;
+
+ for (var i = 0; i < linesCount; i++) {
+ var lng = lng0 + i * lngStep;
+ var lat0 = 0;
+ var lat1 = 90;
+
+ // if (i % 1000 < 500) {
+ // lat0 = 30;
+ // lat1 = 120;
+ // }
+ routes.push([[lng, lat0], [lng, lat1]]);
+ }
- var option = {
- title: {
- text: 'World Flights',
- left: 'center',
- textStyle: {
- color: '#eee'
- }
- },
- backgroundColor: '#003',
- tooltip: {
- formatter: function (param) {
- return 'Line: ' + param.dataIndex;
+ var option = {
+ title: {
+ text: 'World Flights',
+ left: 'center',
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ backgroundColor: '#003',
+ tooltip: {
+ formatter: function (param) {
+ return 'Line: ' + param.dataIndex;
+ }
+ },
+ geo: {
+ map: 'world',
+ left: 0,
+ right: 0,
+ zoom: 0.3,
+ roam: true,
+ silent: true,
+ itemStyle: {
+ normal: {
+ borderColor: '#003',
+ color: '#005'
}
- },
- geo: {
- map: 'world',
- left: 0,
- right: 0,
- zoom: 0.3,
- roam: true,
- silent: true,
- itemStyle: {
- normal: {
- borderColor: '#003',
- color: '#005'
- }
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'geo',
+ blendModel: 'lighter',
+ data: routes,
+ large: true,
+ // large: false,
+ largeThreshold: 0,
+ // progressive: 5e3,
+ progressiveThreshold: 101,
+ lineStyle: {
+ normal: {
+ opacity: 1,
+ width: 1,
+ // curveness: 0.3
}
},
- series: [{
- type: 'lines',
- coordinateSystem: 'geo',
- blendModel: 'lighter',
- data: routes,
- large: true,
- // large: false,
- largeThreshold: 0,
- // progressive: 5e3,
- progressiveThreshold: 101,
- lineStyle: {
- normal: {
- opacity: 1,
- width: 1,
- // curveness: 0.3
+ // blendMode: 'lighter'
+ }, {
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbolSize: 5,
+ color: ['green'],
+ data: [
+ {
+ value: [lng0, 30],
+ label: {
+ show: true,
+ position: 'top',
+ formatter: 'longitude start'
}
- },
- // blendMode: 'lighter'
- }, {
- type: 'scatter',
- coordinateSystem: 'geo',
- symbolSize: 5,
- color: ['green'],
- data: [
- {
- value: [lng0, 30],
- label: {
- show: true,
- position: 'top',
- formatter: 'longitude start'
- }
- }, {
- value: [lng1, 30],
- label: {
- show: true,
- position: 'top',
- formatter: 'longitude end'
- }
+ }, {
+ value: [lng1, 30],
+ label: {
+ show: true,
+ position: 'top',
+ formatter: 'longitude end'
}
- ]
- }]
- };
-
- var chart = testHelper.create(echarts, 'main0', {
- title: [
- linesCount + ' lines should be rendered vertically side by side ',
- 'from the left green point to the right green point, NO GAP.',
- '( large:true and el.incremetal = true) ',
- 'And check roam.'
- ],
- option: option,
- height: 550
- });
- chart.on('finished', function () {
- console.log('finished');
- });
-
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ linesCount + ' lines should be rendered vertically side by side ',
+ 'from the left green point to the right green point, NO GAP.',
+ '( large:true and el.incremetal = true) ',
+ 'And check roam.'
+ ],
+ option: option,
+ height: 550
});
+ chart.on('finished', function () {
+ console.log('finished');
+ });
+
});
</script>
diff --git a/test/lines-stream-not-large.html b/test/lines-stream-not-large.html
index 674c2de..e5a8f01 100644
--- a/test/lines-stream-not-large.html
+++ b/test/lines-stream-not-large.html
@@ -52,106 +52,93 @@ under the License.
var xs = [440000, 450000];
var ys = [4368000, 4537000];
- var dataURL = './data/flight.json';
-
require([
- 'echarts'
- ], function (echarts) {
-
- $.get('./data/map/json/world.json', function (worldJson) {
- echarts.registerMap('world', worldJson);
-
- $.get(dataURL, function (data) {
- var config = {
- dataLoading: 'whole',
- streamThreshold: 0,
- streamRender: true,
- largeModel: true
- };
-
- var chart;
- var infoEl = document.getElementById('info');
-
- init();
+ 'echarts',
+ './data/map/json/world.json',
+ './data/flight.json'
+ ], function (echarts, worldJson, data) {
+
+ echarts.registerMap('world', worldJson);
+
+ var config = {
+ dataLoading: 'whole',
+ streamThreshold: 0,
+ streamRender: true,
+ largeModel: true
+ };
+
+ var infoEl = document.getElementById('info');
+ if (chart) {
+ chart.dispose();
+ }
- function init() {
- if (chart) {
- chart.dispose();
- }
+ var chart = echarts.init(document.getElementById('main'));
- chart = echarts.init(document.getElementById('main'));
+ function getAirportCoord(idx) {
+ return [data.airports[idx][3], data.airports[idx][4]];
+ }
+ var routes = data.routes.map(function (airline) {
+ return [
+ getAirportCoord(airline[1]),
+ getAirportCoord(airline[2])
+ ];
+ });
- function getAirportCoord(idx) {
- return [data.airports[idx][3], data.airports[idx][4]];
+ var option = {
+ streamStep: 4000,
+ title: {
+ text: 'World Flights',
+ left: 'center',
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ backgroundColor: '#003',
+ tooltip: {
+ formatter: function (param) {
+ var route = data.routes[param.dataIndex];
+ return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
+ }
+ },
+ geo: {
+ map: 'world',
+ left: 0,
+ right: 0,
+ roam: true,
+ silent: true,
+ itemStyle: {
+ normal: {
+ borderColor: '#003',
+ color: '#005'
}
- var routes = data.routes.map(function (airline) {
- return [
- getAirportCoord(airline[1]),
- getAirportCoord(airline[2])
- ];
- });
-
- var option = {
- streamStep: 4000,
- title: {
- text: 'World Flights',
- left: 'center',
- textStyle: {
- color: '#eee'
- }
- },
- backgroundColor: '#003',
- tooltip: {
- formatter: function (param) {
- var route = data.routes[param.dataIndex];
- return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
- }
- },
- geo: {
- map: 'world',
- left: 0,
- right: 0,
- roam: true,
- silent: true,
- itemStyle: {
- normal: {
- borderColor: '#003',
- color: '#005'
- }
- }
- },
- series: [{
- type: 'lines',
- coordinateSystem: 'geo',
- blendModel: 'lighter',
- data: routes,
- // Test not large mode.
- large: false,
- largeThreshold: 100,
- lineStyle: {
- normal: {
- opacity: 0.05,
- width: 0.5,
- curveness: 0.3
- }
- },
- // 设置混合模式为叠加
- blendMode: 'lighter'
- }]
- };
-
- chart.on('finished', function () {
- infoEl.innerHTML = 'Finished (large: false). Please test roam (in not large mode, should no error thrown';
- });
-
- chart.setOption(option);
}
-
- });
-
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'geo',
+ blendModel: 'lighter',
+ data: routes,
+ // Test not large mode.
+ large: false,
+ largeThreshold: 100,
+ lineStyle: {
+ normal: {
+ opacity: 0.05,
+ width: 0.5,
+ curveness: 0.3
+ }
+ },
+ // 设置混合模式为叠加
+ blendMode: 'lighter'
+ }]
+ };
+
+ chart.on('finished', function () {
+ infoEl.innerHTML = 'Finished (large: false). Please test roam (in not large mode, should no error thrown)';
});
- });
+ chart.setOption(option);
+ });
</script>
</body>
</html>
\ No newline at end of file
diff --git a/test/lines-symbol.html b/test/lines-symbol.html
index 146e121..0d06233 100644
--- a/test/lines-symbol.html
+++ b/test/lines-symbol.html
@@ -39,99 +39,96 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
+ 'echarts',
+ './data/map/json/china.json'
+ ], function (echarts, chinaJson) {
+ echarts.registerMap('china', chinaJson);
- $.get('./data/map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
+ var myChart = echarts.init(document.getElementById('main'));
- var myChart = echarts.init(document.getElementById('main'));
+ var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
- var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
+ var option = {
- var option = {
+ geo: {
+ map: 'china',
+ roam: true
+ },
- geo: {
- map: 'china',
- roam: true
- },
+ legend: {
+ show: true,
+ data: ['a', 'b']
+ },
- legend: {
+ series: [{
+ name: 'a',
+ type: 'lines',
+ coordinateSystem: 'geo',
+ polyline: true,
+ effect: {
show: true,
- data: ['a', 'b']
+ period: 8,
+ color: '#4433aa',
+ symbolSize: 20,
+ symbol: planePath
},
-
- series: [{
- name: 'a',
- type: 'lines',
- coordinateSystem: 'geo',
- polyline: true,
- effect: {
- show: true,
- period: 8,
- color: '#4433aa',
- symbolSize: 20,
- symbol: planePath
- },
- zlevel: 1,
+ zlevel: 1,
+ lineStyle: {
+ normal: {
+ width: 4,
+ opacity: 0.2
+ }
+ },
+ data: [{
+ coords: [
+ [100.5107, 23.2196],
+ [120.5107, 23.2196]
+ ],
lineStyle: {
normal: {
- width: 4,
- opacity: 0.2
- }
- },
- data: [{
- coords: [
- [100.5107, 23.2196],
- [120.5107, 23.2196]
- ],
- lineStyle: {
- normal: {
- curveness: 0.2
- }
+ curveness: 0.2
}
- }, {
- coords: [
- [100.5107, 30.2196],
- [100.5107, 32.2196],
- [110.5107, 34.2196],
- [112.5107, 38.2196],
- [104.5107, 30.2196],
- [100.5107, 30.2196]
- ]
- }]
+ }
+ }, {
+ coords: [
+ [100.5107, 30.2196],
+ [100.5107, 32.2196],
+ [110.5107, 34.2196],
+ [112.5107, 38.2196],
+ [104.5107, 30.2196],
+ [100.5107, 30.2196]
+ ]
+ }]
+ },
+ {
+ name: 'b',
+ type: 'lines',
+ coordinateSystem: 'geo',
+ effect: {
+ show: true,
+ period: 4,
+ color: '#4433aa',
+ symbolSize: 20,
+ symbol: planePath
},
- {
- name: 'b',
- type: 'lines',
- coordinateSystem: 'geo',
- effect: {
- show: true,
- period: 4,
- color: '#4433aa',
- symbolSize: 20,
- symbol: planePath
- },
- zlevel: 1,
- data: [{
- coords: [
- [100.5107, 23.2196],
- [120.5107, 23.2196]
- ],
- lineStyle: {
- normal: {
- curveness: 0.2,
- width: 4,
- opacity: 0.4
- }
+ zlevel: 1,
+ data: [{
+ coords: [
+ [100.5107, 23.2196],
+ [120.5107, 23.2196]
+ ],
+ lineStyle: {
+ normal: {
+ curveness: 0.2,
+ width: 4,
+ opacity: 0.4
}
- }]
+ }
}]
- }
-
- myChart.setOption(option);
+ }]
+ }
- });
+ myChart.setOption(option);
});
diff --git a/test/lines-track.html b/test/lines-track.html
index 6e4175f..cebabe3 100644
--- a/test/lines-track.html
+++ b/test/lines-track.html
@@ -40,172 +40,171 @@ under the License.
require([
'echarts',
+ 'data/hangzhou-tracks.json',
'extension/bmap'
- ], function (echarts) {
+ ], function (echarts, data) {
var myChart = echarts.init(document.getElementById('main'));
- $.get('data/hangzhou-tracks.json', function (data) {
- var lines = data.map(function (track) {
- return {
- coords: track.map(function (seg, idx) {
- return seg.coord;
- })
- };
- });
- // var lines = [].concat.apply([], data.map(function (track) {
- // return track.slice(1).map(function (seg, idx) {
- // return [track[idx], track[idx + 1]];
- // });
- // }));
- // lines = lines.concat(lines);
- myChart.setOption({
- animation: false,
- bmap: {
- center: [120.13066322374, 30.240018034923],
- zoom: 14,
- roam: true,
- mapStyle: {
- styleJson: [
- {
- 'featureType': 'water',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'land',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#f3f3f3'
- }
- },
- {
- 'featureType': 'railway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fdfdfd'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'poi',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'green',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'subway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'manmade',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'local',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'boundary',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'building',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#848484'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'geometry',
- 'stylers': {
- 'visibility': 'off'
- }
- }
- ]
- }
- },
- series: [{
- type: 'lines',
- coordinateSystem: 'bmap',
- data: lines,
- polyline: true,
- lineStyle: {
- normal: {
- color: 'purple',
- opacity: 0.4,
- width: 1
- }
- }
- }]
- });
+ var lines = data.map(function (track) {
+ return {
+ coords: track.map(function (seg, idx) {
+ return seg.coord;
+ })
+ };
+ });
+ // var lines = [].concat.apply([], data.map(function (track) {
+ // return track.slice(1).map(function (seg, idx) {
+ // return [track[idx], track[idx + 1]];
+ // });
+ // }));
+ // lines = lines.concat(lines);
+ myChart.setOption({
+ animation: false,
+ bmap: {
+ center: [120.13066322374, 30.240018034923],
+ zoom: 14,
+ roam: true,
+ mapStyle: {
+ styleJson: [
+ {
+ 'featureType': 'water',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ },
+ {
+ 'featureType': 'land',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#f3f3f3'
+ }
+ },
+ {
+ 'featureType': 'railway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'highway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fdfdfd'
+ }
+ },
+ {
+ 'featureType': 'highway',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ },
+ {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ },
+ {
+ 'featureType': 'poi',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'green',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'subway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'manmade',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ },
+ {
+ 'featureType': 'local',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ },
+ {
+ 'featureType': 'arterial',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'boundary',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ },
+ {
+ 'featureType': 'building',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ },
+ {
+ 'featureType': 'label',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#848484'
+ }
+ },
+ {
+ 'featureType': 'label',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }
+ ]
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'bmap',
+ data: lines,
+ polyline: true,
+ lineStyle: {
+ normal: {
+ color: 'purple',
+ opacity: 0.4,
+ width: 1
+ }
+ }
+ }]
+ });
- });
- });
+ });
</script>
</body>
diff --git a/test/map-contour.html b/test/map-contour.html
index 7aeabab..f961b2f 100644
--- a/test/map-contour.html
+++ b/test/map-contour.html
@@ -39,72 +39,71 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
+ 'echarts',
+ 'map/js/china-contour',
+ 'map/js/china'
+ ], function (echarts, contour) {
+ var chart = echarts.init(document.getElementById('main'));
- require(['map/js/china-contour', 'map/js/china'], function (contour) {
- var chart = echarts.init(document.getElementById('main'));
-
- var itemStyle = {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
+ var itemStyle = {
+ normal:{
+ borderColor: 'rgba(0, 0, 0, 0.2)'
+ },
+ emphasis:{
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ borderWidth: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
}
+ }
- chart.setOption({
- title : {
- text: 'iphone销量',
- subtext: '纯属虚构',
- left: 'center'
+ chart.setOption({
+ title : {
+ text: 'iphone销量',
+ subtext: '纯属虚构',
+ left: 'center'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data:['iphone3','iphone4','iphone5']
+ },
+ visualMap: {
+ min: 0,
+ max: 1500,
+ left: 'left',
+ top: 'bottom',
+ text:['高','低'], // 文本，默认为数值文本
+ calculable : true
+ },
+ selectedMode: 'single',
+ geo: [
+ {
+ name: 'detail',
+ type: 'map',
+ map: 'china',
+ data: [],
+ roam: true
},
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['iphone3','iphone4','iphone5']
- },
- visualMap: {
- min: 0,
- max: 1500,
- left: 'left',
- top: 'bottom',
- text:['高','低'], // 文本，默认为数值文本
- calculable : true
- },
- selectedMode: 'single',
- geo: [
- {
- name: 'detail',
- type: 'map',
- map: 'china',
- data: [],
- roam: true
- },
- {
- name: 'contour',
- type: 'map',
- roam: true,
- map: 'china-contour',
- itemStyle: {
- normal: {
- borderWidth: 3,
- borderColor: '#000',
- areaColor: 'transparent',
- },
- emphasis: {
- areaColor: 'transparent'
- }
+ {
+ name: 'contour',
+ type: 'map',
+ roam: true,
+ map: 'china-contour',
+ itemStyle: {
+ normal: {
+ borderWidth: 3,
+ borderColor: '#000',
+ areaColor: 'transparent',
+ },
+ emphasis: {
+ areaColor: 'transparent'
}
}
- ],
- series : []
- });
+ }
+ ],
+ series : []
});
});
diff --git a/test/map-default.html b/test/map-default.html
index 1216674..e129fbe 100644
--- a/test/map-default.html
+++ b/test/map-default.html
@@ -60,73 +60,70 @@ under the License.
var chart;
require([
- 'echarts'
+ 'echarts',
+ 'map/js/china'
], function (echarts) {
- require(['map/js/china'], function () {
-
- option = {
- tooltip: {
- trigger: 'item',
- formatter: '{b}'
- },
- legend: {
- top: 0,
- left: 'center',
- data: ['中国A', '中国B']
- },
- series: [
- {
- name: '中国A',
- type: 'map',
- mapType: 'china',
- selectedMode : 'multiple',
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: true
- }
+ option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}'
+ },
+ legend: {
+ top: 0,
+ left: 'center',
+ data: ['中国A', '中国B']
+ },
+ series: [
+ {
+ name: '中国A',
+ type: 'map',
+ mapType: 'china',
+ selectedMode : 'multiple',
+ label: {
+ normal: {
+ show: true
},
- roam: true,
- nameMap: {
- '广东': 'guangdong',
- '广西': 'guangxi'
- },
- data:[
- {name:'广东', selected:true}
- ]
+ emphasis: {
+ show: true
+ }
+ },
+ roam: true,
+ nameMap: {
+ '广东': 'guangdong',
+ '广西': 'guangxi'
},
- {
- name: '中国B',
- type: 'map',
- mapType: 'china',
- selectedMode : 'multiple',
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: true
- }
+ data:[
+ {name:'广东', selected:true}
+ ]
+ },
+ {
+ name: '中国B',
+ type: 'map',
+ mapType: 'china',
+ selectedMode : 'multiple',
+ label: {
+ normal: {
+ show: true
},
- roam: true,
- // nameMap: {
- // '广东': 'guangdong',
- // '广西': 'guangxi'
- // },
- data:[
- {name:'广东', selected: true},
- {name:'山东', selected: true}
- ]
- }
- ]
- };
-
- chart = testHelper.createChart(echarts, 'main0', option);
+ emphasis: {
+ show: true
+ }
+ },
+ roam: true,
+ // nameMap: {
+ // '广东': 'guangdong',
+ // '广西': 'guangxi'
+ // },
+ data:[
+ {name:'广东', selected: true},
+ {name:'山东', selected: true}
+ ]
+ }
+ ]
+ };
- });
+ chart = testHelper.createChart(echarts, 'main0', option);
});
diff --git a/test/map-grid.html b/test/map-grid.html
index 669a427..cc350b5 100644
--- a/test/map-grid.html
+++ b/test/map-grid.html
@@ -39,331 +39,308 @@ under the License.
var myChart;
require([
- 'echarts'
- ], function (ec) {
+ 'echarts',
+ 'data/life-expectancy.json',
+ 'map/js/world'
+ ], function (ec, data) {
echarts = ec;
-require(['map/js/world'], function () {
-
- chart = myChart = echarts.init(document.getElementById('main'), null, {
-
- });
-
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-
-
-myChart.showLoading();
-
-$.getJSON('data/life-expectancy.json', function (data) {
- myChart.hideLoading();
-
- var itemStyle = {
- normal: {
- opacity: 0.8,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- };
-
- var sizeFunction = function (x) {
- var y = Math.sqrt(x / 5e8) + 0.1;
- return y * 40;
- };
- // Schema:
- var schema = [
- {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
- {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
- {name: 'Population', index: 2, text: '总人口', unit: ''},
- {name: 'Country', index: 3, text: '国家', unit: ''}
- ];
-
- option = {
- baseOption: {
- timeline: {
- axisType: 'category',
- orient: 'vertical',
- autoPlay: true,
- inverse: true,
- playInterval: 1000,
- left: null,
- right: 10,
- top: 20,
- bottom: 20,
- width: 55,
- height: null,
- label: {
- normal: {
- textStyle: {
- color: '#ddd'
- }
- },
- emphasis: {
- textStyle: {
- color: '#fff'
- }
- }
- },
- symbol: 'none',
- lineStyle: {
- color: '#555'
- },
- checkpointStyle: {
- color: '#bbb',
- borderColor: '#777',
- borderWidth: 2
- },
- controlStyle: {
- showNextBtn: false,
- showPrevBtn: false,
+ chart = myChart = echarts.init(document.getElementById('main'));
+ var itemStyle = {
normal: {
- color: '#666',
- borderColor: '#666'
- },
- emphasis: {
- color: '#aaa',
- borderColor: '#aaa'
+ opacity: 0.8,
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
}
- },
- data: []
- },
- backgroundColor: '#333',
- title: {
- 'text': data.timeline[0],
- textAlign: 'center',
- right: '3%',
- top: '73%',
- textStyle: {
- fontSize: 100,
- color: 'rgba(255, 255, 255, 0.9)'
- }
- },
- tooltip: {
- padding: 5,
- backgroundColor: '#222',
- borderColor: '#777',
- borderWidth: 1
- },
- xAxis: {
- type: 'log',
- name: '人均收入',
- max: 100000,
- min: 300,
- nameGap: 25,
- nameLocation: 'middle',
- nameTextStyle: {
- fontSize: 18
- },
- splitLine: {
- show: false
- },
- axisTick: {
- lineStyle: {
- color: '#ddd'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#ddd'
- }
- },
- axisLabel: {
- formatter: '{value} $',
- textStyle: {
- color: '#ddd'
- }
- }
- },
- yAxis: {
- type: 'value',
- name: '平均寿命',
- nameGap: 25,
- max: 100,
- nameTextStyle: {
- color: '#ccc',
- fontSize: 18
- },
- axisLine: {
- lineStyle: {
- color: '#ddd'
- }
- },
- axisTick: {
- lineStyle: {
- color: '#ddd'
- }
- },
- splitLine: {
- show: false
- },
- axisLabel: {
- formatter: '{value} 岁',
- textStyle: {
- color: '#ddd'
- }
- }
- },
- grid: {
- top: '40%',
- left: 200,
- right: 110
- },
- geo: {
- top: 20,
- left: 170,
- right: 120,
- height: '38%',
- name: 'World Population (2010)',
- type: 'map',
- map: 'world',
- roam: false,
- label: {
- emphasis: {
- show: false
- }
- },
- itemStyle: {
- normal: {
- borderColor: '#aaa',
- areaColor: '#555'
- },
- emphasis: {
- areaColor: '#555'
- }
- }
- },
- toolbox: {
- // orient: 'vertical',
- top: 25,
- left: 10,
- itemSize: 20,
- // itemGap: 17,
- iconStyle: {
- normal: {
- borderColor: '#eee'
- },
- emphasis: {
- borderColor: '#fffb60'
- }
- }
- },
- brush: {
- toolbox: ['polygon', 'keep', 'clear'],
- brushLink: 'all',
- xAxisIndex: 0,
- geoIndex: 0,
- outOfBrush: {
- opacity: .1,
- color: '#aaa'
- }
- },
- visualMap: [
- {
- type: 'piecewise',
- dimension: 3,
- categories: data.countries.map(function (item) {
- return item[2];
- }),
- left: 10,
- bottom: 35,
- calculable: true,
- precision: 0.1,
- textGap: 10,
- itemGap: 12,
- textStyle: {
- color: '#ccc'
- },
- inRange: {
- color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a', '#376956', '#c3bed4', '#495a80', '#9966cc', '#bdb76a', '#eee8ab', '#a35015', '#04dd98', '#d9b3e6']
- },
- outOfRange: {
- color: '#555'
- }
- }
- ],
- series: [
- {
- type: 'scatter',
- id: 'gridScatter',
- itemStyle: itemStyle,
- data: data.series[0],
- symbolSize: function(val) {
- return sizeFunction(val[2]);
- },
- tooltip: {
- formatter: function (obj) {
- var value = obj.value;
- return schema[3].text + '：' + value[3] + '<br>'
- + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
- + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
- + schema[2].text + '：' + value[2] + '<br>';
- }
- }
- },
- {
- type: 'scatter',
- id: 'geoScatter',
- coordinateSystem: 'geo',
- itemStyle: {
- normal: {
- opacity: 1,
- shadowBlur: 5,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
+ };
+
+ var sizeFunction = function (x) {
+ var y = Math.sqrt(x / 5e8) + 0.1;
+ return y * 40;
+ };
+ // Schema:
+ var schema = [
+ {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
+ {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
+ {name: 'Population', index: 2, text: '总人口', unit: ''},
+ {name: 'Country', index: 3, text: '国家', unit: ''}
+ ];
+
+ option = {
+ baseOption: {
+ timeline: {
+ axisType: 'category',
+ orient: 'vertical',
+ autoPlay: true,
+ inverse: true,
+ playInterval: 1000,
+ left: null,
+ right: 10,
+ top: 20,
+ bottom: 20,
+ width: 55,
+ height: null,
+ label: {
+ normal: {
+ textStyle: {
+ color: '#ddd'
+ }
+ },
+ emphasis: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ symbol: 'none',
+ lineStyle: {
+ color: '#555'
+ },
+ checkpointStyle: {
+ color: '#bbb',
+ borderColor: '#777',
+ borderWidth: 2
+ },
+ controlStyle: {
+ showNextBtn: false,
+ showPrevBtn: false,
+ normal: {
+ color: '#666',
+ borderColor: '#666'
+ },
+ emphasis: {
+ color: '#aaa',
+ borderColor: '#aaa'
+ }
+ },
+ data: []
+ },
+ backgroundColor: '#333',
+ title: {
+ 'text': data.timeline[0],
+ textAlign: 'center',
+ right: '3%',
+ top: '73%',
+ textStyle: {
+ fontSize: 100,
+ color: 'rgba(255, 255, 255, 0.9)'
+ }
+ },
+ tooltip: {
+ padding: 5,
+ backgroundColor: '#222',
+ borderColor: '#777',
+ borderWidth: 1
+ },
+ xAxis: {
+ type: 'log',
+ name: '人均收入',
+ max: 100000,
+ min: 300,
+ nameGap: 25,
+ nameLocation: 'middle',
+ nameTextStyle: {
+ fontSize: 18
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ axisLabel: {
+ formatter: '{value} $',
+ textStyle: {
+ color: '#ddd'
+ }
+ }
},
+ yAxis: {
+ type: 'value',
+ name: '平均寿命',
+ nameGap: 25,
+ max: 100,
+ nameTextStyle: {
+ color: '#ccc',
+ fontSize: 18
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value} 岁',
+ textStyle: {
+ color: '#ddd'
+ }
+ }
+ },
+ grid: {
+ top: '40%',
+ left: 200,
+ right: 110
+ },
+ geo: {
+ top: 20,
+ left: 170,
+ right: 120,
+ height: '38%',
+ name: 'World Population (2010)',
+ type: 'map',
+ map: 'world',
+ roam: false,
+ label: {
+ emphasis: {
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ borderColor: '#aaa',
+ areaColor: '#555'
+ },
+ emphasis: {
+ areaColor: '#555'
+ }
+ }
+ },
+ toolbox: {
+ // orient: 'vertical',
+ top: 25,
+ left: 10,
+ itemSize: 20,
+ // itemGap: 17,
+ iconStyle: {
+ normal: {
+ borderColor: '#eee'
+ },
+ emphasis: {
+ borderColor: '#fffb60'
+ }
+ }
+ },
+ brush: {
+ toolbox: ['polygon', 'keep', 'clear'],
+ brushLink: 'all',
+ xAxisIndex: 0,
+ geoIndex: 0,
+ outOfBrush: {
+ opacity: .1,
+ color: '#aaa'
+ }
+ },
+ visualMap: [
+ {
+ type: 'piecewise',
+ dimension: 3,
+ categories: data.countries.map(function (item) {
+ return item[2];
+ }),
+ left: 10,
+ bottom: 35,
+ calculable: true,
+ precision: 0.1,
+ textGap: 10,
+ itemGap: 12,
+ textStyle: {
+ color: '#ccc'
+ },
+ inRange: {
+ color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a', '#376956', '#c3bed4', '#495a80', '#9966cc', '#bdb76a', '#eee8ab', '#a35015', '#04dd98', '#d9b3e6']
+ },
+ outOfRange: {
+ color: '#555'
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'scatter',
+ id: 'gridScatter',
+ itemStyle: itemStyle,
+ data: data.series[0],
+ symbolSize: function(val) {
+ return sizeFunction(val[2]);
+ },
+ tooltip: {
+ formatter: function (obj) {
+ var value = obj.value;
+ return schema[3].text + '：' + value[3] + '<br>'
+ + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
+ + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
+ + schema[2].text + '：' + value[2] + '<br>';
+ }
+ }
+ },
+ {
+ type: 'scatter',
+ id: 'geoScatter',
+ coordinateSystem: 'geo',
+ itemStyle: {
+ normal: {
+ opacity: 1,
+ shadowBlur: 5,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
+ },
+ data: data.countries.map(function (item) {
+ return [item[0], item[1], 0, item[2]];
+ }),
+ symbolSize: 15,
+ tooltip: {
+ formatter: function (obj) {
+ var value = obj.value;
+ return schema[3].text + '：' + value[3];
+ }
+ }
+ }
+ ],
+ animationDurationUpdate: 1000,
+ animationEasingUpdate: 'quinticInOut'
},
- data: data.countries.map(function (item) {
- return [item[0], item[1], 0, item[2]];
- }),
- symbolSize: 15,
- tooltip: {
- formatter: function (obj) {
- var value = obj.value;
- return schema[3].text + '：' + value[3];
- }
- }
- }
- ],
- animationDurationUpdate: 1000,
- animationEasingUpdate: 'quinticInOut'
- },
- options: []
- };
+ options: []
+ };
- for (var n = 0; n < data.timeline.length; n++) {
- option.baseOption.timeline.data.push(data.timeline[n]);
- option.options.push({
- title: {
- show: true,
- 'text': data.timeline[n] + ''
- },
- series: {
- id: 'gridScatter',
- name: data.timeline[n],
- type: 'scatter',
- itemStyle: itemStyle,
- data: data.series[n],
- symbolSize: function(val) {
- return sizeFunction(val[2]);
+ for (var n = 0; n < data.timeline.length; n++) {
+ option.baseOption.timeline.data.push(data.timeline[n]);
+ option.options.push({
+ title: {
+ show: true,
+ 'text': data.timeline[n] + ''
+ },
+ series: {
+ id: 'gridScatter',
+ name: data.timeline[n],
+ type: 'scatter',
+ itemStyle: itemStyle,
+ data: data.series[n],
+ symbolSize: function(val) {
+ return sizeFunction(val[2]);
+ }
+ }
+ });
}
- }
- });
- }
-
- myChart.setOption(option);
-
-});
-
-
-
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-// -------------------------------------------------------------------
-})
+ myChart.setOption(option);
});
diff --git a/test/map-labels.html b/test/map-labels.html
index 391f5a4..881e30b 100644
--- a/test/map-labels.html
+++ b/test/map-labels.html
@@ -48,85 +48,84 @@ under the License.
var groupColors = [];
require([
- 'echarts'
- ], function (ec, ct) {
+ 'echarts',
+ './data/map/json/world.json'
+ ], function (ec, worldJson) {
echarts = ec;
colorTool = echarts.color;
chart = myChart = echarts.init(document.getElementById('main'));
- $.get('./data/map/json/world.json', function (worldJson) {
- echarts.registerMap('world', worldJson);
+ echarts.registerMap('world', worldJson);
- option = {
- title: {
- text: 'Test hover link\nCheck highlights and label positions',
- subtext: 'Each colony is a region.\nLabel should not be in the ocean.'
- },
- visualMap: {
- type: 'piecewise',
- dimension: 1,
- orient: 'vertical',
- top: 120,
- left: 0,
- categories: [
- 'China', 'France', 'United Kingdom',
- 'Netherlands', 'Denmark', 'Portugal', 'Spain'
- ],
- inRange: {
- color: {
- 'China': '#943382',
- 'France': '#2196f3',
- 'United Kingdom': '#e91e63',
- 'Netherlands': '#341290',
- 'Denmark': '#e1648f',
- 'Portugal': '#498121',
- 'Spain': '#a41933'
- }
- }
- },
- series: [
- {
- map: 'world',
- name: 'France',
- type: 'map',
- roam: true,
- left: 130,
- data: [
- {
- name: 'China',
- value: [6, 'China']
- },
- {
- name: 'France',
- value: [6, 'France']
- },
- {
- name: 'United Kingdom',
- value: [5, 'United Kingdom']
- },
- {
- name: 'Netherlands',
- value: [5, 'Netherlands']
- },
- {
- name: 'Denmark',
- value: [5, 'Denmark']
- },
- {
- name: 'Portugal',
- value: [5, 'Portugal']
- },
- {
- name: 'Spain',
- value: [5, 'Spain']
- }
- ]
+ option = {
+ title: {
+ text: 'Test hover link\nCheck highlights and label positions',
+ subtext: 'Each colony is a region.\nLabel should not be in the ocean.'
+ },
+ visualMap: {
+ type: 'piecewise',
+ dimension: 1,
+ orient: 'vertical',
+ top: 120,
+ left: 0,
+ categories: [
+ 'China', 'France', 'United Kingdom',
+ 'Netherlands', 'Denmark', 'Portugal', 'Spain'
+ ],
+ inRange: {
+ color: {
+ 'China': '#943382',
+ 'France': '#2196f3',
+ 'United Kingdom': '#e91e63',
+ 'Netherlands': '#341290',
+ 'Denmark': '#e1648f',
+ 'Portugal': '#498121',
+ 'Spain': '#a41933'
}
- ]
- }
+ }
+ },
+ series: [
+ {
+ map: 'world',
+ name: 'France',
+ type: 'map',
+ roam: true,
+ left: 130,
+ data: [
+ {
+ name: 'China',
+ value: [6, 'China']
+ },
+ {
+ name: 'France',
+ value: [6, 'France']
+ },
+ {
+ name: 'United Kingdom',
+ value: [5, 'United Kingdom']
+ },
+ {
+ name: 'Netherlands',
+ value: [5, 'Netherlands']
+ },
+ {
+ name: 'Denmark',
+ value: [5, 'Denmark']
+ },
+ {
+ name: 'Portugal',
+ value: [5, 'Portugal']
+ },
+ {
+ name: 'Spain',
+ value: [5, 'Spain']
+ }
+ ]
+ }
+ ]
+ }
- chart.setOption(option);
- });
+ chart.setOption(option);
});
</script>
diff --git a/test/map-nameProperty.html b/test/map-nameProperty.html
index b364ef3..7cdf664 100644
--- a/test/map-nameProperty.html
+++ b/test/map-nameProperty.html
@@ -37,161 +37,158 @@ under the License.
<script>
require([
- 'echarts'
- ], function (echarts) {
- $.getJSON('./data/usa.json', function (geojson) {
- geojson.features.forEach(function (feature) {
- feature.properties = {
- NAME: feature.properties.name
- }
- });
+ 'echarts',
+ './data/usa.json'
+ ], function (echarts, geojson) {
+ geojson.features.forEach(function (feature) {
+ feature.properties = {
+ NAME: feature.properties.name
+ }
+ });
- echarts.registerMap('USA', geojson, {
- Alaska: { // 把阿拉斯加移到美国主大陆左下方
- left: -131,
- top: 25,
- width: 15
- },
- Hawaii: {
- left: -110, // 夏威夷
- top: 28,
- width: 5
- },
- 'Puerto Rico': { // 波多黎各
- left: -76,
- top: 26,
- width: 2
- }
- });
- var chart = echarts.init(document.getElementById('main'), null, {
+ echarts.registerMap('USA', geojson, {
+ Alaska: { // 把阿拉斯加移到美国主大陆左下方
+ left: -131,
+ top: 25,
+ width: 15
+ },
+ Hawaii: {
+ left: -110, // 夏威夷
+ top: 28,
+ width: 5
+ },
+ 'Puerto Rico': { // 波多黎各
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
+ var chart = echarts.init(document.getElementById('main'));
- });
+ var itemStyle = {
+ normal:{
+ borderWidth: 0.5,
+ borderColor: 'black'
+ },
+ emphasis:{
+ label:{show:true}
+ // shadowOffsetX: 0,
+ // shadowOffsetY: 0,
+ // shadowBlur: 20,
+ // shadowColor: 'rgba(0, 0, 0, 0.3)'
+ }
+ };
- var itemStyle = {
- normal:{
- borderWidth: 0.5,
- borderColor: 'black'
- },
- emphasis:{
- label:{show:true}
- // shadowOffsetX: 0,
- // shadowOffsetY: 0,
- // shadowBlur: 20,
- // shadowColor: 'rgba(0, 0, 0, 0.3)'
+ chart.setOption({
+ title: {
+ text: 'USA Population Estimates (2012)',
+ subtext: 'Data from www.census.gov',
+ sublink: 'http://www.census.gov/popest/data/datasets.html',
+ left: 'right'
+ },
+ tooltip: {
+ trigger: 'item',
+ showDelay: 0,
+ transitionDuration: 0.2,
+ formatter: function (params) {
+ var value = (params.value + '').split('.');
+ value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
+ return params.seriesName + '<br/>' + params.name + ': ' + value;
}
- };
-
- chart.setOption({
- title: {
- text: 'USA Population Estimates (2012)',
- subtext: 'Data from www.census.gov',
- sublink: 'http://www.census.gov/popest/data/datasets.html',
- left: 'right'
- },
- tooltip: {
- trigger: 'item',
- showDelay: 0,
- transitionDuration: 0.2,
- formatter: function (params) {
- var value = (params.value + '').split('.');
- value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
- return params.seriesName + '<br/>' + params.name + ': ' + value;
- }
+ },
+ visualMap: {
+ left: 'right',
+ min: 500000,
+ max: 38000000,
+ inRange: {
+ color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
- visualMap: {
- left: 'right',
- min: 500000,
- max: 38000000,
- inRange: {
- color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ text: ['High', 'Low'], // 文本，默认为数值文本
+ calculable: true
+ },
+ toolbox: {
+ show: true,
+ //orient: 'vertical',
+ left: 'left',
+ top: 'top',
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series : [
+ {
+ name: 'USA PopEstimates',
+ type: 'map',
+ roam: true,
+ map: 'USA',
+ emphasis: {
+ label: {
+ show: true
+ }
},
- text: ['High', 'Low'], // 文本，默认为数值文本
- calculable: true
- },
- toolbox: {
- show: true,
- //orient: 'vertical',
- left: 'left',
- top: 'top',
- feature: {
- dataView: {readOnly: false},
- restore: {},
- saveAsImage: {}
- }
- },
- series : [
- {
- name: 'USA PopEstimates',
- type: 'map',
- roam: true,
- map: 'USA',
- emphasis: {
- label: {
- show: true
- }
- },
- // 文本位置修正
- textFixed: {
- Alaska: [20, -20]
- },
- nameProperty: 'NAME', // new option to denote key in geoJSON, default is 'name'
- data:[
- {name: 'Alabama', value: 4822023},
- {name: 'Alaska', value: 731449},
- {name: 'Arizona', value: 6553255},
- {name: 'Arkansas', value: 2949131},
- {name: 'California', value: 38041430},
- {name: 'Colorado', value: 5187582},
- {name: 'Connecticut', value: 3590347},
- {name: 'Delaware', value: 917092},
- {name: 'District of Columbia', value: 632323},
- {name: 'Florida', value: 19317568},
- {name: 'Georgia', value: 9919945},
- {name: 'Hawaii', value: 1392313},
- {name: 'Idaho', value: 1595728},
- {name: 'Illinois', value: 12875255},
- {name: 'Indiana', value: 6537334},
- {name: 'Iowa', value: 3074186},
- {name: 'Kansas', value: 2885905},
- {name: 'Kentucky', value: 4380415},
- {name: 'Louisiana', value: 4601893},
- {name: 'Maine', value: 1329192},
- {name: 'Maryland', value: 5884563},
- {name: 'Massachusetts', value: 6646144},
- {name: 'Michigan', value: 9883360},
- {name: 'Minnesota', value: 5379139},
- {name: 'Mississippi', value: 2984926},
- {name: 'Missouri', value: 6021988},
- {name: 'Montana', value: 1005141},
- {name: 'Nebraska', value: 1855525},
- {name: 'Nevada', value: 2758931},
- {name: 'New Hampshire', value: 1320718},
- {name: 'New Jersey', value: 8864590},
- {name: 'New Mexico', value: 2085538},
- {name: 'New York', value: 19570261},
- {name: 'North Carolina', value: 9752073},
- {name: 'North Dakota', value: 699628},
- {name: 'Ohio', value: 11544225},
- {name: 'Oklahoma', value: 3814820},
- {name: 'Oregon', value: 3899353},
- {name: 'Pennsylvania', value: 12763536},
- {name: 'Rhode Island', value: 1050292},
- {name: 'South Carolina', value: 4723723},
- {name: 'South Dakota', value: 833354},
- {name: 'Tennessee', value: 6456243},
- {name: 'Texas', value: 26059203},
- {name: 'Utah', value: 2855287},
- {name: 'Vermont', value: 626011},
- {name: 'Virginia', value: 8185867},
- {name: 'Washington', value: 6897012},
- {name: 'West Virginia', value: 1855413},
- {name: 'Wisconsin', value: 5726398},
- {name: 'Wyoming', value: 576412},
- {name: 'Puerto Rico', value: 3667084}
- ]
- }
- ]
- });
+ // 文本位置修正
+ textFixed: {
+ Alaska: [20, -20]
+ },
+ nameProperty: 'NAME', // new option to denote key in geoJSON, default is 'name'
+ data:[
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ {name: 'Arizona', value: 6553255},
+ {name: 'Arkansas', value: 2949131},
+ {name: 'California', value: 38041430},
+ {name: 'Colorado', value: 5187582},
+ {name: 'Connecticut', value: 3590347},
+ {name: 'Delaware', value: 917092},
+ {name: 'District of Columbia', value: 632323},
+ {name: 'Florida', value: 19317568},
+ {name: 'Georgia', value: 9919945},
+ {name: 'Hawaii', value: 1392313},
+ {name: 'Idaho', value: 1595728},
+ {name: 'Illinois', value: 12875255},
+ {name: 'Indiana', value: 6537334},
+ {name: 'Iowa', value: 3074186},
+ {name: 'Kansas', value: 2885905},
+ {name: 'Kentucky', value: 4380415},
+ {name: 'Louisiana', value: 4601893},
+ {name: 'Maine', value: 1329192},
+ {name: 'Maryland', value: 5884563},
+ {name: 'Massachusetts', value: 6646144},
+ {name: 'Michigan', value: 9883360},
+ {name: 'Minnesota', value: 5379139},
+ {name: 'Mississippi', value: 2984926},
+ {name: 'Missouri', value: 6021988},
+ {name: 'Montana', value: 1005141},
+ {name: 'Nebraska', value: 1855525},
+ {name: 'Nevada', value: 2758931},
+ {name: 'New Hampshire', value: 1320718},
+ {name: 'New Jersey', value: 8864590},
+ {name: 'New Mexico', value: 2085538},
+ {name: 'New York', value: 19570261},
+ {name: 'North Carolina', value: 9752073},
+ {name: 'North Dakota', value: 699628},
+ {name: 'Ohio', value: 11544225},
+ {name: 'Oklahoma', value: 3814820},
+ {name: 'Oregon', value: 3899353},
+ {name: 'Pennsylvania', value: 12763536},
+ {name: 'Rhode Island', value: 1050292},
+ {name: 'South Carolina', value: 4723723},
+ {name: 'South Dakota', value: 833354},
+ {name: 'Tennessee', value: 6456243},
+ {name: 'Texas', value: 26059203},
+ {name: 'Utah', value: 2855287},
+ {name: 'Vermont', value: 626011},
+ {name: 'Virginia', value: 8185867},
+ {name: 'Washington', value: 6897012},
+ {name: 'West Virginia', value: 1855413},
+ {name: 'Wisconsin', value: 5726398},
+ {name: 'Wyoming', value: 576412},
+ {name: 'Puerto Rico', value: 3667084}
+ ]
+ }
+ ]
});
});
diff --git a/test/map-nested.html b/test/map-nested.html
index 02026e4..388d842 100644
--- a/test/map-nested.html
+++ b/test/map-nested.html
@@ -61,60 +61,58 @@ under the License.
var groupColors = [];
require([
- 'echarts'
- ], function (ec) {
+ 'echarts',
+ './data/czech_geo.json'
+ ], function (ec, geoJSON) {
echarts = ec;
- $.getJSON('./data/czech_geo.json', function (geoJSON) {
-
- echarts.registerMap('nestedMap', geoJSON);
-
- var option = {
- tooltip: {},
- // visualMap: {
- // min: 0,
- // max: 1500,
- // left: 'left',
- // top: 'bottom',
- // text: ['High','Low'],
- // seriesIndex: [1, 2, 3],
- // inRange: {
- // color: ['#006edd', '#e0ffff']
- // },
- // calculable : true
- // },
- tooltip: {},
- series: [
- {
- name: 'categoryA',
- type: 'map',
- map: 'nestedMap',
- geoIndex: 0,
- itemStyle: {
- normal: {
- // areaColor: 'red'
- borderColor: 'red',
- borderWidth: 2
- },
- emphasis: {
- borderColor: 'blue',
- borderWidth: 2
- }
+ echarts.registerMap('nestedMap', geoJSON);
+
+ var option = {
+ tooltip: {},
+ // visualMap: {
+ // min: 0,
+ // max: 1500,
+ // left: 'left',
+ // top: 'bottom',
+ // text: ['High','Low'],
+ // seriesIndex: [1, 2, 3],
+ // inRange: {
+ // color: ['#006edd', '#e0ffff']
+ // },
+ // calculable : true
+ // },
+ tooltip: {},
+ series: [
+ {
+ name: 'categoryA',
+ type: 'map',
+ map: 'nestedMap',
+ geoIndex: 0,
+ itemStyle: {
+ normal: {
+ // areaColor: 'red'
+ borderColor: 'red',
+ borderWidth: 2
},
- data:[
- {name: 'Praha', value: 123},
- {name: 'Plzeňský kraj', value: 321},
- {name: 'Středočeský kraj', value: 521}
- ]
- }
- ]
- };
-
- testHelper.createChart(echarts, 'main', option);
- });
-
+ emphasis: {
+ borderColor: 'blue',
+ borderWidth: 2
+ }
+ },
+ data:[
+ {name: 'Praha', value: 123},
+ {name: 'Plzeňský kraj', value: 321},
+ {name: 'Středočeský kraj', value: 521}
+ ]
+ }
+ ]
+ };
+
+ testHelper.createChart(echarts, 'main', option);
});
+
</script>
</body>
</html>
\ No newline at end of file
diff --git a/test/map-parallel.html b/test/map-parallel.html
index 8eea4d0..e4cc3b1 100644
--- a/test/map-parallel.html
+++ b/test/map-parallel.html
@@ -38,13 +38,12 @@ under the License.
var myChart;
require([
- 'echarts'
+ 'echarts',
+ 'map/js/world'
], function (ec) {
echarts = ec;
-require(['map/js/world'], function () {
-
chart = myChart = echarts.init(document.getElementById('main'), null, {
});
@@ -491,8 +490,6 @@ option = {
// -------------------------------------------------------------------
chart.setOption(option);
-})
-
});
</script>
diff --git a/test/map-province.html b/test/map-province.html
index eecdc7b..592bdb9 100644
--- a/test/map-province.html
+++ b/test/map-province.html
@@ -50,18 +50,17 @@ under the License.
'echarts'/*, 'map/js/china' */
], function (echarts) {
-
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
function showProvince() {
var name = provinces[currentIdx];
- // myChart.showLoading();
+ chart.showLoading();
$.get('./data/map/json/province/' + name + '.json', function (geoJson) {
- // myChart.hideLoading();
+ chart.hideLoading();
echarts.registerMap(name, geoJson);
@@ -150,8 +149,6 @@ under the License.
showProvince();
-
-
});
</script>
diff --git a/test/map.html b/test/map.html
index 6e3286e..62e3336 100644
--- a/test/map.html
+++ b/test/map.html
@@ -42,195 +42,193 @@ under the License.
<script>
require([
- 'echarts'
+ 'echarts',
+ 'map/js/china'
], function (echarts) {
-
- require(['map/js/china'], function () {
- var itemStyle = {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- };
-
- var option = {
- tooltip: {},
- title : {
- text: '内蒙古 青海 没数据也要能被选中',
- left: 'center'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['iphone3','iphone4','iphone5']
- },
- visualMap: {
- min: 0,
- max: 1500,
- left: 'left',
- top: 'bottom',
- text: ['高','低'],
- calculable : true
- },
- selectedMode: 'single',
- series : [
- {
- name: 'iphone3',
- type: 'map',
- map: 'china',
- itemStyle: itemStyle,
- showLegendSymbol: true,
- // zoom: 10,
- // center: [115.97, 29.71],
- roam: true,
- markPoint: {
- data: [{
- coord: [115.97, 29.71]
- }]
- },
- label: {
- normal: {
- show: true,
- rotate: 40,
- formatter: '{b}：{value|{c}}',
- // position: 'inside',
- backgroundColor: '#fff',
- padding: [3, 5],
- borderRadius: 3,
- borderWidth: 1,
- borderColor: 'rgba(0,0,0,0.5)',
- color: '#777',
- rich: {
- value: {
- color: '#019D2D',
- fontSize: 14,
- // fontWeight: 'bold'
- // textBorderWidth: 2,
- // textBorderColor: '#000'
- }
+ var itemStyle = {
+ normal:{
+ borderColor: 'rgba(0, 0, 0, 0.2)'
+ },
+ emphasis:{
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ shadowBlur: 20,
+ borderWidth: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ };
+
+ var option = {
+ tooltip: {},
+ title : {
+ text: '内蒙古 青海 没数据也要能被选中',
+ left: 'center'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data:['iphone3','iphone4','iphone5']
+ },
+ visualMap: {
+ min: 0,
+ max: 1500,
+ left: 'left',
+ top: 'bottom',
+ text: ['高','低'],
+ calculable : true
... 5928 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org