This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new 00e79acc fix(cdn): change the CDN root in the example code to fastly
temporarily
00e79acc is described below
commit 00e79accd3f1ac638774ae56b84e845d616a3124
Author: plainheart <y...@all-my-life.cn>
AuthorDate: Wed May 18 09:35:19 2022 +0800
fix(cdn): change the CDN root in the example code to fastly temporarily
---
.../ts/archive/custom-aggregate-scatter-bar.js | 395 +++++----
.../ts/archive/custom-aggregate-scatter-cluster.js | 432 ++++++----
.../ts/archive/custom-aggregate-scatter-pie.js | 381 +++++----
.../ts/archive/custom-combine-separate-morph.js | 940 +++++++++++----------
.../examples/ts/archive/custom-story-transition.js | 736 ++++++++--------
public/examples/ts/bar-race-country.ts | 2 +-
public/examples/ts/circle-packing-with-d3.js | 2 +-
public/examples/ts/data-transform-aggregate.js | 2 +-
.../examples/ts/gl/animating-contour-on-globe.js | 10 +-
.../ts/gl/bar3d-noise-modified-from-marpi-demo.js | 2 +-
public/examples/ts/gl/bar3d-simplex-noise.js | 2 +-
public/examples/ts/gl/flowGL-noise.js | 2 +-
public/examples/ts/gl/globe-contour-paint.js | 10 +-
.../examples/ts/gl/globe-echarts-gl-hello-world.js | 2 +-
public/examples/ts/gl/graphgl-npm-dep.js | 2 +-
public/examples/ts/gl/metal-bar3d.js | 2 +-
public/examples/ts/gl/scatter3d-orthographic.js | 2 +-
public/examples/ts/gl/scatter3d-simplex-noise.js | 2 +-
public/examples/ts/gl/stacked-bar3d.js | 2 +-
public/examples/ts/map-projection-globe.ts | 4 +-
public/examples/ts/map-usa-projection.ts | 4 +-
21 files changed, 1614 insertions(+), 1322 deletions(-)
diff --git a/public/examples/ts/archive/custom-aggregate-scatter-bar.js
b/public/examples/ts/archive/custom-aggregate-scatter-bar.js
index 5f542f65..8ce0c80d 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-bar.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-bar.js
@@ -5,205 +5,252 @@ titleCN: 聚合分割形变（散点图 - 柱状图）
difficulty: 9
*/
-
var SCATTER_COLORS = [
- '#5470c6',
- '#91cc75',
- '#fac858',
- '#ee6666',
- '#73c0de',
- '#3ba272',
- '#fc8452',
- '#9a60b4',
- '#ea7ccc'
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
];
var BAR_COLOR = '#37A2DA';
var ANIMATION_DURATION_UPDATE = 1500;
-var RAW_DATA =
[[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[14260896
[...]
-
-
+var RAW_DATA = [
+ [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+ [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+ [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+ [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+ [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+ [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+ [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+ [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+ [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+ [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+ [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+ [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+ [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+ [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+ [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+ [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+ [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+ [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+ [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+ [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+ [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+ [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+ [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+ [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+ [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+ [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+ [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+ [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+ [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+ [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+ [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+ [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+ [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+ [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+ [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+ [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+ [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+ [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+ [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+ [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+ [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+ [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+ [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+ [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+ [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+ [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+ [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+ [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+ [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+ [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
$.when(
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+ )
).done(function () {
+ init();
- init();
-
- var currentIsBar = false;
- setScatterOption();
-
- setInterval(function () {
- if (currentIsBar) {
- currentIsBar = false;
- setScatterOption();
- }
- else {
- currentIsBar = true;
- setBarOption();
- }
- }, 3000);
+ var currentIsBar = false;
+ setScatterOption();
+ setInterval(function () {
+ if (currentIsBar) {
+ currentIsBar = false;
+ setScatterOption();
+ } else {
+ currentIsBar = true;
+ setBarOption();
+ }
+ }, 3000);
});
-
-
function init() {
+ echarts.registerTransform(ecSimpleTransform.aggregate);
- echarts.registerTransform(ecSimpleTransform.aggregate);
-
- var baseOption = {
- dataset: [{
- id: 'raw_dataset',
- dimensions: ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG',
'ID'],
- source: RAW_DATA
- }, {
- id: 'mTagSum_dataset',
- fromDatasetId: 'raw_dataset',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'COUNT', method: 'sum' },
- { from: 'PRICE', method: 'sum' },
- { from: 'WEIGHT', method: 'sum' },
- { from: 'M_TAG' }
- ],
- groupBy: 'M_TAG'
- }
- }
- }],
- tooltip: {}
- };
+ var baseOption = {
+ dataset: [
+ {
+ id: 'raw_dataset',
+ dimensions: [
+ 'DATE',
+ 'COUNT',
+ 'PRICE',
+ 'WEIGHT',
+ 'M_TAG',
+ 'Z_TAG',
+ 'ID'
+ ],
+ source: RAW_DATA
+ },
+ {
+ id: 'mTagSum_dataset',
+ fromDatasetId: 'raw_dataset',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'COUNT', method: 'sum' },
+ { from: 'PRICE', method: 'sum' },
+ { from: 'WEIGHT', method: 'sum' },
+ { from: 'M_TAG' }
+ ],
+ groupBy: 'M_TAG'
+ }
+ }
+ }
+ ],
+ tooltip: {}
+ };
- myChart.setOption(baseOption, { lazyUpdate: true });
+ myChart.setOption(baseOption, { lazyUpdate: true });
}
function setScatterOption() {
- var option = {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'PRICE'
- },
- yAxis: {
- name: 'COUNT'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'raw_dataset',
- encode: {
- itemName: 'ID',
- x: 'PRICE',
- y: 'COUNT',
- tooltip: ['PRICE', 'COUNT', 'WEIGHT']
- },
- renderItem: function (params, api) {
- var pos = api.coord([
- api.value('PRICE'),
- api.value('COUNT')
- ]);
- var color = getFromPalette(
- api.value('Z_TAG'),
- SCATTER_COLORS
- );
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: 10
- },
- style: {
- fill: color
- },
- transition: ['shape', 'style']
- };
- }
- }
- };
+ var option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'PRICE'
+ },
+ yAxis: {
+ name: 'COUNT'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'raw_dataset',
+ encode: {
+ itemName: 'ID',
+ x: 'PRICE',
+ y: 'COUNT',
+ tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+ },
+ renderItem: function (params, api) {
+ var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+ var color = getFromPalette(api.value('Z_TAG'), SCATTER_COLORS);
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: 10
+ },
+ style: {
+ fill: color
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: {
- from: { seriesIndex: 0, dimension: 'M_TAG' },
- to: { seriesIndex: 0, dimension: 'M_TAG' }
- }
- });
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'M_TAG' },
+ to: { seriesIndex: 0, dimension: 'M_TAG' }
+ }
+ });
}
function setBarOption() {
- var option = {
- grid: {
- containLabel: true
- },
- xAxis: {
- type: 'category'
- },
- yAxis: {
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'mTagSum_dataset',
- encode: {
- x: 'M_TAG',
- y: 'COUNT',
- tooltip: ['M_TAG', 'COUNT', 'WEIGHT']
- },
- renderItem: function (params, api) {
- var mTagVal = api.value('M_TAG');
- var ataVal = api.value('COUNT');
- var tarPos = api.coord([mTagVal, ataVal]);
- var zeroPos = api.coord([mTagVal, 0]);
- var size = api.size([mTagVal, ataVal]);
- var width = size[0] * 0.4;
- return {
- type: 'rect',
- morph: true,
- shape: {
- x: tarPos[0] - width / 2,
- y: tarPos[1],
- height: zeroPos[1] - tarPos[1],
- width: width,
- },
- style: {
- fill: BAR_COLOR
- },
- transition: ['shape', 'style']
- };
- }
- }
- };
+ var option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'mTagSum_dataset',
+ encode: {
+ x: 'M_TAG',
+ y: 'COUNT',
+ tooltip: ['M_TAG', 'COUNT', 'WEIGHT']
+ },
+ renderItem: function (params, api) {
+ var mTagVal = api.value('M_TAG');
+ var ataVal = api.value('COUNT');
+ var tarPos = api.coord([mTagVal, ataVal]);
+ var zeroPos = api.coord([mTagVal, 0]);
+ var size = api.size([mTagVal, ataVal]);
+ var width = size[0] * 0.4;
+ return {
+ type: 'rect',
+ morph: true,
+ shape: {
+ x: tarPos[0] - width / 2,
+ y: tarPos[1],
+ height: zeroPos[1] - tarPos[1],
+ width: width
+ },
+ style: {
+ fill: BAR_COLOR
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
- transition: {
- from: { seriesIndex: 0, dimension: 'M_TAG' },
- to: { seriesIndex: 0, dimension: 'M_TAG' }
- }
- });
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'M_TAG' },
+ to: { seriesIndex: 0, dimension: 'M_TAG' }
+ }
+ });
}
-
function getFromPalette(value, palette) {
- if (!palette.__colorMap) {
- palette.__colorMap = {};
- }
- if (palette.__colorIdx == null) {
- palette.__colorIdx = 0;
- }
- if (!palette.__colorMap[value]) {
- palette.__colorMap[value] = palette[palette.__colorIdx];
- palette.__colorIdx++;
- if (palette.__colorIdx >= palette.length) {
- palette.__colorIdx = 0;
- }
+ if (!palette.__colorMap) {
+ palette.__colorMap = {};
+ }
+ if (palette.__colorIdx == null) {
+ palette.__colorIdx = 0;
+ }
+ if (!palette.__colorMap[value]) {
+ palette.__colorMap[value] = palette[palette.__colorIdx];
+ palette.__colorIdx++;
+ if (palette.__colorIdx >= palette.length) {
+ palette.__colorIdx = 0;
}
- return palette.__colorMap[value];
+ }
+ return palette.__colorMap[value];
}
diff --git a/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
b/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
index b44e6a0d..6d136e6e 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-cluster.js
@@ -5,210 +5,276 @@ titleCN: 聚合分割形变（散点图聚类）
difficulty: 10
*/
-
var CLUSTER_COLORS = [
- '#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686',
'#a48dc1', '#5da6bc', '#b9dcae'
+ '#cc5664',
+ '#9bd6ec',
+ '#ea946e',
+ '#8acaaa',
+ '#f1ec64',
+ '#ee8686',
+ '#a48dc1',
+ '#5da6bc',
+ '#b9dcae'
];
var ANIMATION_DURATION_UPDATE = 1500;
-var RAW_DATA =
[[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[14260896
[...]
-var RAW_DATA_DIMENSIONS = ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG',
'Z_TAG', 'ID'];
-
-
+var RAW_DATA = [
+ [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+ [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+ [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+ [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+ [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+ [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+ [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+ [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+ [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+ [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+ [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+ [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+ [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+ [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+ [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+ [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+ [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+ [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+ [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+ [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+ [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+ [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+ [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+ [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+ [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+ [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+ [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+ [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+ [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+ [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+ [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+ [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+ [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+ [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+ [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+ [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+ [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+ [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+ [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+ [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+ [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+ [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+ [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+ [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+ [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+ [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+ [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+ [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+ [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+ [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
+var RAW_DATA_DIMENSIONS = [
+ 'DATE',
+ 'COUNT',
+ 'PRICE',
+ 'WEIGHT',
+ 'M_TAG',
+ 'Z_TAG',
+ 'ID'
+];
$.when(
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js'),
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+ $.getScript(
+ 'https://fastly.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js'
+ ),
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+ )
).done(function () {
+ init();
- init();
-
- var currentIsClustered = false;
- setRawScatterOption();
-
- setInterval(function () {
- if (currentIsClustered) {
- currentIsClustered = false;
- setRawScatterOption();
- }
- else {
- currentIsClustered = true;
- setClusteredScatterOption();
- }
- }, 3000);
+ var currentIsClustered = false;
+ setRawScatterOption();
+ setInterval(function () {
+ if (currentIsClustered) {
+ currentIsClustered = false;
+ setRawScatterOption();
+ } else {
+ currentIsClustered = true;
+ setClusteredScatterOption();
+ }
+ }, 3000);
});
-
-
function init() {
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+ echarts.registerTransform(ecStat.transform.clustering);
- echarts.registerTransform(ecSimpleTransform.aggregate);
- echarts.registerTransform(ecStat.transform.clustering);
-
- var baseOption = {
- dataset: [{
- id: 'raw_dataset',
- dimensions: RAW_DATA_DIMENSIONS,
- source: RAW_DATA
- }, {
- id: 'raw_clustered_dataset',
- fromDatasetId: 'raw_dataset',
- transform: {
- type: 'ecStat:clustering',
- print: true,
- config: {
- clusterCount: 4,
- dimensions: ['COUNT', 'PRICE'],
- outputClusterIndexDimension: {
- index: RAW_DATA_DIMENSIONS.length,
- name: 'CLUSTER_IDX'
- },
- outputCentroidDimensions: [{
- index: RAW_DATA_DIMENSIONS.length + 1,
- name: 'CLUSTER_CENTER_COUNT'
- }, {
- index: RAW_DATA_DIMENSIONS.length + 2,
- name: 'CLUSTER_CENTER_PRICE'
- }]
- }
- }
- }, {
- id: 'raw_cluster_centers_dataset',
- fromDatasetId: 'raw_clustered_dataset',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- print: true,
- config: {
- resultDimensions: [
- { from: 'COUNT', method: 'count' },
- { from: 'CLUSTER_CENTER_COUNT', method: 'first' },
- { from: 'CLUSTER_CENTER_PRICE', method: 'first' },
- { from: 'CLUSTER_IDX' }
- ],
- groupBy: 'CLUSTER_IDX'
- }
- }
- }],
- tooltip: {}
- };
+ var baseOption = {
+ dataset: [
+ {
+ id: 'raw_dataset',
+ dimensions: RAW_DATA_DIMENSIONS,
+ source: RAW_DATA
+ },
+ {
+ id: 'raw_clustered_dataset',
+ fromDatasetId: 'raw_dataset',
+ transform: {
+ type: 'ecStat:clustering',
+ print: true,
+ config: {
+ clusterCount: 4,
+ dimensions: ['COUNT', 'PRICE'],
+ outputClusterIndexDimension: {
+ index: RAW_DATA_DIMENSIONS.length,
+ name: 'CLUSTER_IDX'
+ },
+ outputCentroidDimensions: [
+ {
+ index: RAW_DATA_DIMENSIONS.length + 1,
+ name: 'CLUSTER_CENTER_COUNT'
+ },
+ {
+ index: RAW_DATA_DIMENSIONS.length + 2,
+ name: 'CLUSTER_CENTER_PRICE'
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'raw_cluster_centers_dataset',
+ fromDatasetId: 'raw_clustered_dataset',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ print: true,
+ config: {
+ resultDimensions: [
+ { from: 'COUNT', method: 'count' },
+ { from: 'CLUSTER_CENTER_COUNT', method: 'first' },
+ { from: 'CLUSTER_CENTER_PRICE', method: 'first' },
+ { from: 'CLUSTER_IDX' }
+ ],
+ groupBy: 'CLUSTER_IDX'
+ }
+ }
+ }
+ ],
+ tooltip: {}
+ };
- myChart.setOption(baseOption, { lazyUpdate: true });
+ myChart.setOption(baseOption, { lazyUpdate: true });
}
function setRawScatterOption() {
- var option = {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'PRICE'
- },
- yAxis: {
- name: 'COUNT'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'raw_clustered_dataset',
- encode: {
- itemName: 'ID',
- x: 'PRICE',
- y: 'COUNT',
- tooltip: ['PRICE', 'COUNT', 'WEIGHT']
- },
- renderItem: function (params, api) {
- var pos = api.coord([
- api.value('PRICE'),
- api.value('COUNT')
- ]);
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: 10
- },
- style: {
- fill: '#5470c6'
- },
- transition: ['shape', 'style']
- };
- }
- }
- };
+ var option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'PRICE'
+ },
+ yAxis: {
+ name: 'COUNT'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'raw_clustered_dataset',
+ encode: {
+ itemName: 'ID',
+ x: 'PRICE',
+ y: 'COUNT',
+ tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+ },
+ renderItem: function (params, api) {
+ var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: 10
+ },
+ style: {
+ fill: '#5470c6'
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: {
- from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
- to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
- }
- });
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
+ to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
+ }
+ });
}
function setClusteredScatterOption() {
- var option = {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'PRICE'
- },
- yAxis: {
- name: 'COUNT'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'raw_cluster_centers_dataset',
- encode: {
- x: 'CLUSTER_CENTER_PRICE',
- y: 'CLUSTER_CENTER_COUNT',
- tooltip: ['CLUSTER_CENTER_PRICE', 'CLUSTER_CENTER_COUNT']
- },
- renderItem: function (params, api) {
- var context = params.context;
- if (!context.layout) {
- context.layout = true;
- context.totalCount = 0;
- for (var i = 0; i < params.dataInsideLength; i++) {
- context.totalCount += api.value('COUNT', i);
- }
- }
-
- var pos = api.coord([
- api.value('CLUSTER_CENTER_PRICE'),
- api.value('CLUSTER_CENTER_COUNT')
- ]);
- var count = api.value('COUNT');
- var radius = count / context.totalCount * 100 + 10;
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: radius,
- },
- style: {
- // fill: CONTENT_COLOR,
- fill: CLUSTER_COLORS[params.dataIndex]
- },
- transition: ['shape', 'style']
- };
- }
+ var option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'PRICE'
+ },
+ yAxis: {
+ name: 'COUNT'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'raw_cluster_centers_dataset',
+ encode: {
+ x: 'CLUSTER_CENTER_PRICE',
+ y: 'CLUSTER_CENTER_COUNT',
+ tooltip: ['CLUSTER_CENTER_PRICE', 'CLUSTER_CENTER_COUNT']
+ },
+ renderItem: function (params, api) {
+ var context = params.context;
+ if (!context.layout) {
+ context.layout = true;
+ context.totalCount = 0;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ context.totalCount += api.value('COUNT', i);
+ }
}
- };
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: {
- from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
- to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
- }
- });
+ var pos = api.coord([
+ api.value('CLUSTER_CENTER_PRICE'),
+ api.value('CLUSTER_CENTER_COUNT')
+ ]);
+ var count = api.value('COUNT');
+ var radius = (count / context.totalCount) * 100 + 10;
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: radius
+ },
+ style: {
+ // fill: CONTENT_COLOR,
+ fill: CLUSTER_COLORS[params.dataIndex]
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
+
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'CLUSTER_IDX' },
+ to: { seriesIndex: 0, dimension: 'CLUSTER_IDX' }
+ }
+ });
}
diff --git a/public/examples/ts/archive/custom-aggregate-scatter-pie.js
b/public/examples/ts/archive/custom-aggregate-scatter-pie.js
index a851a35f..eb86c2aa 100644
--- a/public/examples/ts/archive/custom-aggregate-scatter-pie.js
+++ b/public/examples/ts/archive/custom-aggregate-scatter-pie.js
@@ -5,185 +5,242 @@ titleCN: 聚合分割形变（散点图 - 饼图）
difficulty: 9
*/
-
var PIE_COLORS = [
- '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+ '#e06343',
+ '#37a354',
+ '#b55dba',
+ '#b5bd48',
+ '#8378EA',
+ '#96BFFF'
];
var ANIMATION_DURATION_UPDATE = 1500;
-var RAW_DATA =
[[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[14260896
[...]
-
-
+var RAW_DATA = [
+ [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+ [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+ [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+ [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+ [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+ [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+ [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+ [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+ [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+ [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+ [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+ [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+ [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+ [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+ [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+ [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+ [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+ [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+ [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+ [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+ [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+ [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+ [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+ [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+ [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+ [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+ [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+ [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+ [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+ [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+ [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+ [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+ [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+ [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+ [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+ [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+ [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+ [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+ [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+ [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+ [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+ [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+ [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+ [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+ [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+ [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+ [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+ [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+ [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+ [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
$.when(
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js')
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform@1.0.0/dist/ecSimpleTransform.min.js'
+ )
).done(function () {
-
- init();
-
- var currentIsPie = false;
- setScatterOption();
-
- setInterval(function () {
- if (currentIsPie) {
- currentIsPie = false;
- setScatterOption();
- }
- else {
- currentIsPie = true;
- setPieOption();
- }
- }, 3000);
-
+ init();
+
+ var currentIsPie = false;
+ setScatterOption();
+
+ setInterval(function () {
+ if (currentIsPie) {
+ currentIsPie = false;
+ setScatterOption();
+ } else {
+ currentIsPie = true;
+ setPieOption();
+ }
+ }, 3000);
});
-
-
function init() {
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+
+ var baseOption = {
+ dataset: [
+ {
+ id: 'raw_dataset',
+ dimensions: [
+ 'DATE',
+ 'COUNT',
+ 'PRICE',
+ 'WEIGHT',
+ 'M_TAG',
+ 'Z_TAG',
+ 'ID'
+ ],
+ source: RAW_DATA
+ },
+ {
+ id: 'mTagSum_dataset',
+ fromDatasetId: 'raw_dataset',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'COUNT', method: 'sum' },
+ { from: 'PRICE', method: 'sum' },
+ { from: 'WEIGHT', method: 'sum' },
+ { from: 'M_TAG' }
+ ],
+ groupBy: 'M_TAG'
+ }
+ }
+ }
+ ],
+ tooltip: {}
+ };
- echarts.registerTransform(ecSimpleTransform.aggregate);
-
- var baseOption = {
- dataset: [{
- id: 'raw_dataset',
- dimensions: ['DATE', 'COUNT', 'PRICE', 'WEIGHT', 'M_TAG', 'Z_TAG',
'ID'],
- source: RAW_DATA
- }, {
- id: 'mTagSum_dataset',
- fromDatasetId: 'raw_dataset',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'COUNT', method: 'sum' },
- { from: 'PRICE', method: 'sum' },
- { from: 'WEIGHT', method: 'sum' },
- { from: 'M_TAG' }
- ],
- groupBy: 'M_TAG'
- }
- }
- }],
- tooltip: {}
- };
-
- myChart.setOption(baseOption, { lazyUpdate: true });
+ myChart.setOption(baseOption, { lazyUpdate: true });
}
function setScatterOption() {
- var option = {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'PRICE'
- },
- yAxis: {
- name: 'COUNT'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'raw_dataset',
- encode: {
- itemName: 'ID',
- x: 'PRICE',
- y: 'COUNT',
- tooltip: ['PRICE', 'COUNT', 'WEIGHT']
- },
- renderItem: function (params, api) {
- var pos = api.coord([
- api.value('PRICE'),
- api.value('COUNT')
- ]);
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: 10
- },
- style: {
- fill: '#5470c6'
- },
- transition: ['shape', 'style']
- };
- }
- }
- };
-
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: {
- from: { seriesIndex: 0, dimension: 'M_TAG' },
- to: { seriesIndex: 0, dimension: 'M_TAG' }
- }
- });
+ var option = {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'PRICE'
+ },
+ yAxis: {
+ name: 'COUNT'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'raw_dataset',
+ encode: {
+ itemName: 'ID',
+ x: 'PRICE',
+ y: 'COUNT',
+ tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+ },
+ renderItem: function (params, api) {
+ var pos = api.coord([api.value('PRICE'), api.value('COUNT')]);
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: 10
+ },
+ style: {
+ fill: '#5470c6'
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
+
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'M_TAG' },
+ to: { seriesIndex: 0, dimension: 'M_TAG' }
+ }
+ });
}
function setPieOption() {
- var option = {
- series: {
- type: 'custom',
- coordinateSystem: 'none',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: 'mTagSum_dataset',
- encode: {
- itemName: 'ID',
- value: 'COUNT',
- tooltip: ['PRICE', 'COUNT', 'WEIGHT']
- },
- renderItem: function (params, api) {
- var context = params.context;
- if (!context.layout) {
- context.layout = true;
- var totalValue = 0;
- for (var i = 0; i < params.dataInsideLength; i++) {
- totalValue += api.value('COUNT', i);
- }
- var angles = [];
- var colors = [];
- var currentAngle = -Math.PI / 2;
- for (var i = 0; i < params.dataInsideLength; i++) {
- colors.push(PIE_COLORS[i]);
- var angle = api.value('COUNT', i) / totalValue *
Math.PI * 2;
- angles.push([currentAngle, angle + currentAngle -
0.01]);
- currentAngle += angle;
- }
- context.angles = angles;
- context.colors = colors;
- }
-
- var width = myChart.getWidth();
- var 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: context.angles[params.dataIndex][0],
- endAngle: context.angles[params.dataIndex][1],
- clockwise: true
- },
- style: {
- fill: context.colors[params.dataIndex]
- },
- transition: ['shape', 'style']
- };
- }
+ var option = {
+ series: {
+ type: 'custom',
+ coordinateSystem: 'none',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: 'mTagSum_dataset',
+ encode: {
+ itemName: 'ID',
+ value: 'COUNT',
+ tooltip: ['PRICE', 'COUNT', 'WEIGHT']
+ },
+ renderItem: function (params, api) {
+ var context = params.context;
+ if (!context.layout) {
+ context.layout = true;
+ var totalValue = 0;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ totalValue += api.value('COUNT', i);
+ }
+ var angles = [];
+ var colors = [];
+ var currentAngle = -Math.PI / 2;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ colors.push(PIE_COLORS[i]);
+ var angle = (api.value('COUNT', i) / totalValue) * Math.PI * 2;
+ angles.push([currentAngle, angle + currentAngle - 0.01]);
+ currentAngle += angle;
+ }
+ context.angles = angles;
+ context.colors = colors;
}
- };
- myChart.setOption(option, {
- replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
- transition: {
- from: { seriesIndex: 0, dimension: 'M_TAG' },
- to: { seriesIndex: 0, dimension: 'M_TAG' }
- }
- });
+ var width = myChart.getWidth();
+ var 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: context.angles[params.dataIndex][0],
+ endAngle: context.angles[params.dataIndex][1],
+ clockwise: true
+ },
+ style: {
+ fill: context.colors[params.dataIndex]
+ },
+ transition: ['shape', 'style']
+ };
+ }
+ }
+ };
+
+ myChart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis', 'visualMap'],
+ transition: {
+ from: { seriesIndex: 0, dimension: 'M_TAG' },
+ to: { seriesIndex: 0, dimension: 'M_TAG' }
+ }
+ });
}
diff --git a/public/examples/ts/archive/custom-combine-separate-morph.js
b/public/examples/ts/archive/custom-combine-separate-morph.js
index 0e3a2f3e..a8be9d61 100644
--- a/public/examples/ts/archive/custom-combine-separate-morph.js
+++ b/public/examples/ts/archive/custom-combine-separate-morph.js
@@ -5,504 +5,572 @@ titleCN: 聚合分割形变
difficulty: 11
*/
-
var PIE_COLORS = [
- '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+ '#e06343',
+ '#37a354',
+ '#b55dba',
+ '#b5bd48',
+ '#8378EA',
+ '#96BFFF'
];
var CLUSTER_COLORS = [
- '#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686',
'#a48dc1', '#5da6bc', '#b9dcae'
+ '#cc5664',
+ '#9bd6ec',
+ '#ea946e',
+ '#8acaaa',
+ '#f1ec64',
+ '#ee8686',
+ '#a48dc1',
+ '#5da6bc',
+ '#b9dcae'
];
var Z_TAG_COLORS = [
- '#5470c6',
- '#91cc75',
- '#fac858',
- '#ee6666',
- '#73c0de',
- '#3ba272',
- '#fc8452',
- '#9a60b4',
- '#ea7ccc'
+ '#5470c6',
+ '#91cc75',
+ '#fac858',
+ '#ee6666',
+ '#73c0de',
+ '#3ba272',
+ '#fc8452',
+ '#9a60b4',
+ '#ea7ccc'
];
var Z_TAG_COLORS_2 = [
- '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a',
'#c77288', '#786090',
- '#91c4c5', '#6890ba'
+ '#51689b',
+ '#ce5c5c',
+ '#fbc357',
+ '#8fbf8f',
+ '#659d84',
+ '#fb8e6a',
+ '#c77288',
+ '#786090',
+ '#91c4c5',
+ '#6890ba'
];
var SYMBOL_PATHS = [
- 'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85
-27.42,-157.96 0,-88.85z',
- 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163
16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3
2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16
28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963
10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
- 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163
16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017
0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616
0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149
0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305
0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999
1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.0
[...]
- 'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999
21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401
1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4
1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
-
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072
c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363
c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417
c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827
C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,1 [...]
-
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072
c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363
c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417
c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827
C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,1 [...]
+ 'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85
-27.42,-157.96 0,-88.85z',
+ 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163
16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3
2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16
28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963
10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
+ 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163
16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017
0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616
0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149
0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305
0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999
1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017
[...]
+ 'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999
21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401
1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4
1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
+
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072
c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363
c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417
c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827
C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12. [...]
+
'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072
c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363
c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417
c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827
C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12. [...]
];
var CONTENT_COLOR = '#37A2DA';
var ANIMATION_DURATION_UPDATE = 1500;
-
-var RAW_DATA =
[[1425139200000,34,0.13,2,"MD","ZD","P0"],[1425225600000,28,0.71,1.5,"MB","ZD","P1"],[1425312000000,23,0.9,2.8,"MA","ZC","P2"],[1425398400000,21,0.58,6,"MB","ZC","P3"],[1425484800000,14,0.1,1.6,"MC","ZA","P4"],[1425571200000,21,0.6,7.7,"MC","ZA","P5"],[1425657600000,23,0.31,2.6,"MC","ZC","P6"],[1425744000000,34,0.74,2.4,"MD","ZE","P7"],[1425830400000,14,0.59,2.3,"MB","ZD","P8"],[1425916800000,18,0.85,5.1,"MB","ZB","P9"],[1426003200000,36,0.96,1.2,"MC","ZC","P10"],[14260896
[...]
+var RAW_DATA = [
+ [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
+ [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
+ [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
+ [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
+ [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
+ [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
+ [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
+ [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
+ [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
+ [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
+ [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
+ [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
+ [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
+ [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
+ [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
+ [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
+ [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
+ [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
+ [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
+ [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
+ [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
+ [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
+ [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
+ [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
+ [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
+ [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
+ [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
+ [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
+ [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
+ [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
+ [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
+ [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
+ [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
+ [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
+ [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
+ [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
+ [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
+ [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
+ [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
+ [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
+ [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
+ [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
+ [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
+ [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
+ [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
+ [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
+ [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
+ [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
+ [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
+ [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
+];
var RAW_DATA_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG',
'ID'];
var M_TAG_SUM_DIMENSIONS = ['ATA', 'STE', 'CTZ', 'M_TAG'];
-var RAW_CLUSTER_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG',
'ID', 'CLUSTER_IDX', 'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
-var RAW_CLUSTER_CENTERS_DIMENSIONS = ['COUNT', 'CLUSTER_IDX',
'CLUSTER_CENTER_ATA', 'CLUSTER_CENTER_STE'];
+var RAW_CLUSTER_DIMENSIONS = [
+ 'DATE',
+ 'ATA',
+ 'STE',
+ 'CTZ',
+ 'M_TAG',
+ 'Z_TAG',
+ 'ID',
+ 'CLUSTER_IDX',
+ 'CLUSTER_CENTER_ATA',
+ 'CLUSTER_CENTER_STE'
+];
+var RAW_CLUSTER_CENTERS_DIMENSIONS = [
+ 'COUNT',
+ 'CLUSTER_IDX',
+ 'CLUSTER_CENTER_ATA',
+ 'CLUSTER_CENTER_STE'
+];
function getFromPalette(value, palette) {
- if (!palette.__colorMap) {
- palette.__colorMap = {};
+ if (!palette.__colorMap) {
+ palette.__colorMap = {};
+ }
+ if (palette.__colorIdx == null) {
+ palette.__colorIdx = 0;
+ }
+ if (!palette.__colorMap[value]) {
+ palette.__colorMap[value] = palette[palette.__colorIdx];
+ palette.__colorIdx++;
+ if (palette.__colorIdx >= palette.length) {
+ palette.__colorIdx = 0;
}
- if (palette.__colorIdx == null) {
- palette.__colorIdx = 0;
- }
- if (!palette.__colorMap[value]) {
- palette.__colorMap[value] = palette[palette.__colorIdx];
- palette.__colorIdx++;
- if (palette.__colorIdx >= palette.length) {
- palette.__colorIdx = 0;
- }
- }
- return palette.__colorMap[value];
+ }
+ return palette.__colorMap[value];
}
-
-
-
-
var baseOption = {
- dataset: [{
- id: 'raw',
- dimensions: RAW_DATA_DIMENSIONS,
- source: RAW_DATA
- }, {
- id: 'mTagSum',
- fromDatasetId: 'raw',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'ATA', method: 'sum' },
- { from: 'STE', method: 'sum' },
- { from: 'CTZ', method: 'sum' },
- { from: 'M_TAG' }
- ],
- groupBy: 'M_TAG'
- }
+ dataset: [
+ {
+ id: 'raw',
+ dimensions: RAW_DATA_DIMENSIONS,
+ source: RAW_DATA
+ },
+ {
+ id: 'mTagSum',
+ fromDatasetId: 'raw',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'ATA', method: 'sum' },
+ { from: 'STE', method: 'sum' },
+ { from: 'CTZ', method: 'sum' },
+ { from: 'M_TAG' }
+ ],
+ groupBy: 'M_TAG'
}
- }, {
- id: 'rawClusters',
- fromDatasetId: 'raw',
- transform: {
- type: 'ecStat:clustering',
- // print: true,
- config: {
- clusterCount: 4,
- dimensions: ['ATA', 'STE'],
- outputClusterIndexDimension: {
- index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
- name: 'CLUSTER_IDX'
- },
- outputCentroidDimensions: [{
- index:
RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
- name: 'CLUSTER_CENTER_ATA'
- }, {
- index:
RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
- name: 'CLUSTER_CENTER_STE'
- }]
+ }
+ },
+ {
+ id: 'rawClusters',
+ fromDatasetId: 'raw',
+ transform: {
+ type: 'ecStat:clustering',
+ // print: true,
+ config: {
+ clusterCount: 4,
+ dimensions: ['ATA', 'STE'],
+ outputClusterIndexDimension: {
+ index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
+ name: 'CLUSTER_IDX'
+ },
+ outputCentroidDimensions: [
+ {
+ index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
+ name: 'CLUSTER_CENTER_ATA'
+ },
+ {
+ index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
+ name: 'CLUSTER_CENTER_STE'
}
+ ]
}
- }, {
- id: 'rawClusterCenters',
- fromDatasetId: 'rawClusters',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- // print: true,
- config: {
- resultDimensions: [
- { name: 'COUNT', from: 'ATA', method: 'count' },
- { from: 'CLUSTER_CENTER_ATA' },
- { from: 'CLUSTER_CENTER_STE' },
- { from: 'CLUSTER_IDX' }
- ],
- groupBy: 'CLUSTER_IDX'
- }
+ }
+ },
+ {
+ id: 'rawClusterCenters',
+ fromDatasetId: 'rawClusters',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ // print: true,
+ config: {
+ resultDimensions: [
+ { name: 'COUNT', from: 'ATA', method: 'count' },
+ { from: 'CLUSTER_CENTER_ATA' },
+ { from: 'CLUSTER_CENTER_STE' },
+ { from: 'CLUSTER_IDX' }
+ ],
+ groupBy: 'CLUSTER_IDX'
}
- }],
- tooltip: {}
+ }
+ }
+ ],
+ tooltip: {}
};
-
function makeScatterOptionCreator(renderItem) {
- return function () {
- var datasetId = 'rawClusters';
- return {
- datasetId: datasetId,
- option: {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'STE'
- },
- yAxis: {
- name: 'ATA'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: datasetId,
- encode: {
- itemName: 'ID',
- x: 'STE',
- y: 'ATA',
- tooltip: ['STE', 'ATA']
- },
- renderItem: renderItem
- }
- }
+ return function () {
+ var datasetId = 'rawClusters';
+ return {
+ datasetId: datasetId,
+ option: {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'STE'
+ },
+ yAxis: {
+ name: 'ATA'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: datasetId,
+ encode: {
+ itemName: 'ID',
+ x: 'STE',
+ y: 'ATA',
+ tooltip: ['STE', 'ATA']
+ },
+ renderItem: renderItem
}
+ }
};
+ };
}
-
-
-
var optionCreators = {
-
- 'Scatter': makeScatterOptionCreator(
- function (params, api) {
- var pos = api.coord([
- api.value('STE'),
- api.value('ATA')
- ]);
- var zTagVal = api.value('Z_TAG');
- var color = getFromPalette(zTagVal, Z_TAG_COLORS);
+ Scatter: makeScatterOptionCreator(function (params, api) {
+ var pos = api.coord([api.value('STE'), api.value('ATA')]);
+ var zTagVal = api.value('Z_TAG');
+ var color = getFromPalette(zTagVal, Z_TAG_COLORS);
+ return {
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: 10
+ },
+ style: {
+ fill: color
+ },
+ transition: ['shape', 'style']
+ };
+ }),
+
+ Glyph: makeScatterOptionCreator(function (params, api) {
+ var pos = api.coord([api.value('STE'), api.value('ATA')]);
+ var zTagVal = api.value('Z_TAG');
+ var color = getFromPalette(zTagVal, Z_TAG_COLORS);
+ var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
+ return {
+ type: 'path',
+ morph: true,
+ x: pos[0],
+ y: pos[1],
+ shape: {
+ pathData: symbolPath,
+ width: 40,
+ height: 40
+ },
+ style: {
+ fill: color
+ },
+ transition: ['style']
+ };
+ }),
+
+ House: makeScatterOptionCreator(function (params, api) {
+ var pos = api.coord([api.value('STE'), api.value('ATA')]);
+ var zTagVal = api.value('Z_TAG');
+ var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
+ var color2 = '#aaa';
+ return {
+ type: 'group',
+ x: pos[0],
+ y: pos[1],
+ children: [
+ {
+ type: 'polygon',
+ morph: true,
+ shape: {
+ points: [
+ [-25, -1],
+ [25, -1],
+ [0, -20]
+ ]
+ },
+ style: {
+ fill: color1
+ },
+ transition: ['shape', 'style']
+ },
+ {
+ type: 'rect',
+ morph: true,
+ shape: {
+ x: -15,
+ y: 0,
+ width: 30,
+ height: 20
+ },
+ style: {
+ fill: color2,
+ stroke: '#fff',
+ lineWidth: 1
+ },
+ transition: ['shape', 'style']
+ }
+ ]
+ };
+ }),
+
+ Bar_Sum: function () {
+ var datasetId = 'mTagSum';
+ return {
+ datasetId: datasetId,
+ option: {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: datasetId,
+ encode: {
+ x: 'M_TAG',
+ y: 'ATA',
+ tooltip: ['M_TAG', 'ATA']
+ },
+ renderItem: function (params, api) {
+ var mTagVal = api.value('M_TAG');
+ var ataVal = api.value('ATA');
+ var tarPos = api.coord([mTagVal, ataVal]);
+ var zeroPos = api.coord([mTagVal, 0]);
+ var size = api.size([mTagVal, ataVal]);
+ var width = size[0] * 0.4;
return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: 10
- },
- style: {
- fill: color
- },
- transition: ['shape', 'style']
+ type: 'rect',
+ morph: true,
+ shape: {
+ x: tarPos[0] - width / 2,
+ y: tarPos[1],
+ height: zeroPos[1] - tarPos[1],
+ width: width
+ },
+ style: {
+ fill: CONTENT_COLOR
+ },
+ transition: ['shape', 'style']
};
+ }
}
- ),
+ }
+ };
+ },
+
+ Pie_Sum: function () {
+ var datasetId = 'mTagSum';
+ return {
+ datasetId: datasetId,
+ option: {
+ series: {
+ type: 'custom',
+ coordinateSystem: 'none',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: datasetId,
+ encode: {
+ itemName: 'M_TAG',
+ value: 'ATA',
+ tooltip: 'ATA'
+ },
+ renderItem: function (params, api) {
+ var context = params.context;
+ if (!context.layout) {
+ context.layout = true;
+ var totalValue = 0;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ totalValue += api.value('ATA', i);
+ }
+ var angles = [];
+ var colors = [];
+ var currentAngle = -Math.PI / 2;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ colors.push(PIE_COLORS[i]);
+ var angle = (api.value('ATA', i) / totalValue) * Math.PI * 2;
+ angles.push([currentAngle, angle + currentAngle - 0.01]);
+ currentAngle += angle;
+ }
+ context.angles = angles;
+ context.colors = colors;
+ }
- 'Glyph': makeScatterOptionCreator(
- function (params, api) {
- var pos = api.coord([
- api.value('STE'),
- api.value('ATA')
- ]);
- var zTagVal = api.value('Z_TAG');
- var color = getFromPalette(zTagVal, Z_TAG_COLORS);
- var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
+ var width = myChart.getWidth();
+ var height = myChart.getHeight();
return {
- type: 'path',
- morph: true,
- x: pos[0],
- y: pos[1],
- shape: {
- pathData: symbolPath,
- width: 40,
- height: 40
- },
- style: {
- fill: color
- },
- transition: ['style']
+ type: 'sector',
+ morph: true,
+ shape: {
+ cx: width / 2,
+ cy: height / 2,
+ r: Math.min(width, height) / 3,
+ r0: Math.min(width, height) / 5,
+ startAngle: context.angles[params.dataIndex][0],
+ endAngle: context.angles[params.dataIndex][1],
+ clockwise: true
+ },
+ style: {
+ // fill: CONTENT_COLOR,
+ fill: context.colors[params.dataIndex]
+ },
+ transition: ['shape', 'style']
};
+ }
}
- ),
+ }
+ };
+ },
+
+ Clustered: function () {
+ var datasetId = 'rawClusterCenters';
+ return {
+ datasetId: datasetId,
+ option: {
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ name: 'STE'
+ },
+ yAxis: {
+ name: 'ATA'
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ datasetId: datasetId,
+ encode: {
+ x: 'CLUSTER_CENTER_STE',
+ y: 'CLUSTER_CENTER_ATA',
+ tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
+ },
+ renderItem: function (params, api) {
+ var context = params.context;
+ if (!context.layout) {
+ context.layout = true;
+ context.totalCount = 0;
+ for (var i = 0; i < params.dataInsideLength; i++) {
+ context.totalCount += api.value('COUNT', i);
+ }
+ }
- 'House': makeScatterOptionCreator(
- function (params, api) {
var pos = api.coord([
- api.value('STE'),
- api.value('ATA')
+ api.value('CLUSTER_CENTER_STE'),
+ api.value('CLUSTER_CENTER_ATA')
]);
- var zTagVal = api.value('Z_TAG');
- var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
- var color2 = '#aaa';
+ var count = api.value('COUNT');
+ var radius = (count / context.totalCount) * 100 + 10;
return {
- type: 'group',
- x: pos[0],
- y: pos[1],
- children: [{
- type: 'polygon',
- morph: true,
- shape: {
- points: [
- [-25, -1],
- [25, -1],
- [0, -20]
- ]
- },
- style: {
- fill: color1
- },
- transition: ['shape', 'style']
- }, {
- type: 'rect',
- morph: true,
- shape: {
- x: -15,
- y: 0,
- width: 30,
- height: 20
- },
- style: {
- fill: color2,
- stroke: '#fff',
- lineWidth: 1
- },
- transition: ['shape', 'style']
- }]
+ type: 'circle',
+ morph: true,
+ shape: {
+ cx: pos[0],
+ cy: pos[1],
+ r: radius
+ },
+ style: {
+ // fill: CONTENT_COLOR,
+ fill: CLUSTER_COLORS[params.dataIndex]
+ },
+ transition: ['shape', 'style']
};
+ }
}
- ),
-
- 'Bar_Sum': function () {
- var datasetId = 'mTagSum'
- return {
- datasetId: datasetId,
- option: {
- grid: {
- containLabel: true
- },
- xAxis: {
- type: 'category'
- },
- yAxis: {
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: datasetId,
- encode: {
- x: 'M_TAG',
- y: 'ATA',
- tooltip: ['M_TAG', 'ATA']
- },
- renderItem: function (params, api) {
- var mTagVal = api.value('M_TAG');
- var ataVal = api.value('ATA');
- var tarPos = api.coord([mTagVal, ataVal]);
- var zeroPos = api.coord([mTagVal, 0]);
- var size = api.size([mTagVal, ataVal]);
- var width = size[0] * 0.4;
- return {
- type: 'rect',
- morph: true,
- shape: {
- x: tarPos[0] - width / 2,
- y: tarPos[1],
- height: zeroPos[1] - tarPos[1],
- width: width,
- },
- style: {
- fill: CONTENT_COLOR
- },
- transition: ['shape', 'style']
- };
- }
- }
- }
- };
- },
-
- 'Pie_Sum': function () {
- var datasetId = 'mTagSum';
- return {
- datasetId: datasetId,
- option: {
- series: {
- type: 'custom',
- coordinateSystem: 'none',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: datasetId,
- encode: {
- itemName: 'M_TAG',
- value: 'ATA',
- tooltip: 'ATA'
- },
- renderItem: function (params, api) {
- var context = params.context;
- if (!context.layout) {
- context.layout = true;
- var totalValue = 0;
- for (var i = 0; i < params.dataInsideLength; i++) {
- totalValue += api.value('ATA', i);
- }
- var angles = [];
- var colors = [];
- var currentAngle = -Math.PI / 2;
- for (var i = 0; i < params.dataInsideLength; i++) {
- colors.push(PIE_COLORS[i]);
- var angle = api.value('ATA', i) / totalValue *
Math.PI * 2;
- angles.push([currentAngle, angle +
currentAngle - 0.01]);
- currentAngle += angle;
- }
- context.angles = angles;
- context.colors = colors;
- }
-
- var width = myChart.getWidth();
- var 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:
context.angles[params.dataIndex][0],
- endAngle: context.angles[params.dataIndex][1],
- clockwise: true
- },
- style: {
- // fill: CONTENT_COLOR,
- fill: context.colors[params.dataIndex]
- },
- transition: ['shape', 'style']
- };
- }
- }
- }
- };
- },
-
- 'Clustered': function () {
- var datasetId = 'rawClusterCenters';
- return {
- datasetId: datasetId,
- option: {
- grid: {
- containLabel: true
- },
- xAxis: {
- name: 'STE'
- },
- yAxis: {
- name: 'ATA'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- datasetId: datasetId,
- encode: {
- x: 'CLUSTER_CENTER_STE',
- y: 'CLUSTER_CENTER_ATA',
- tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
- },
- renderItem: function (params, api) {
- var context = params.context;
- if (!context.layout) {
- context.layout = true;
- context.totalCount = 0;
- for (var i = 0; i < params.dataInsideLength; i++) {
- context.totalCount += api.value('COUNT', i);
- }
- }
-
- var pos = api.coord([
- api.value('CLUSTER_CENTER_STE'),
- api.value('CLUSTER_CENTER_ATA')
- ]);
- var count = api.value('COUNT');
- var radius = count / context.totalCount * 100 + 10;
- return {
- type: 'circle',
- morph: true,
- shape: {
- cx: pos[0],
- cy: pos[1],
- r: radius,
- },
- style: {
- // fill: CONTENT_COLOR,
- fill: CLUSTER_COLORS[params.dataIndex]
- },
- transition: ['shape', 'style']
- };
- }
- }
- }
- };
- }
+ }
+ };
+ }
};
-
-
var _player;
var _optionList = [];
app.config = {};
echarts.util.each(optionCreators, function (creator, key) {
- var optionWrap = creator();
- _optionList.push({
- key: key,
- dataMetaKey: optionWrap.datasetId,
- option: optionWrap.option
- });
- app.config[key] = function () {
- _player.go(key);
- }
+ var optionWrap = creator();
+ _optionList.push({
+ key: key,
+ dataMetaKey: optionWrap.datasetId,
+ option: optionWrap.option
+ });
+ app.config[key] = function () {
+ _player.go(key);
+ };
});
console.log(app.config);
-
-
$.when(
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'),
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-option-player/dist/ecSimpleOptionPlayer.min.js'),
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+ ),
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-option-player/dist/ecSimpleOptionPlayer.min.js'
+ )
).done(function () {
- run();
+ run();
});
-
function run() {
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+ echarts.registerTransform(ecStat.transform.clustering);
- echarts.registerTransform(ecSimpleTransform.aggregate);
- echarts.registerTransform(ecStat.transform.clustering);
-
- _player = ecSimpleOptionPlayer.create({
- chart: function () {
- return myChart;
- },
- seriesIndex: 0,
- replaceMerge: ['xAxis', 'yAxis'],
- dataMeta: {
- raw: {
- dimensions: RAW_DATA_DIMENSIONS,
- uniqueDimension: 'ID'
- },
- mTagSum: {
- dimensions: M_TAG_SUM_DIMENSIONS,
- uniqueDimension: 'M_TAG'
- },
- rawClusters: {
- dimensions: RAW_CLUSTER_DIMENSIONS,
- uniqueDimension: 'ID',
- dividingMethod: 'duplicate'
- },
- rawClusterCenters: {
- dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
- uniqueDimension: 'CLUSTER_IDX'
- }
- },
- optionList: _optionList
- });
-
- myChart.setOption(baseOption, { lazyUpdate: true });
+ _player = ecSimpleOptionPlayer.create({
+ chart: function () {
+ return myChart;
+ },
+ seriesIndex: 0,
+ replaceMerge: ['xAxis', 'yAxis'],
+ dataMeta: {
+ raw: {
+ dimensions: RAW_DATA_DIMENSIONS,
+ uniqueDimension: 'ID'
+ },
+ mTagSum: {
+ dimensions: M_TAG_SUM_DIMENSIONS,
+ uniqueDimension: 'M_TAG'
+ },
+ rawClusters: {
+ dimensions: RAW_CLUSTER_DIMENSIONS,
+ uniqueDimension: 'ID',
+ dividingMethod: 'duplicate'
+ },
+ rawClusterCenters: {
+ dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
+ uniqueDimension: 'CLUSTER_IDX'
+ }
+ },
+ optionList: _optionList
+ });
- _player.go('Glyph');
+ myChart.setOption(baseOption, { lazyUpdate: true });
+ _player.go('Glyph');
}
-
diff --git a/public/examples/ts/archive/custom-story-transition.js
b/public/examples/ts/archive/custom-story-transition.js
index c164a88e..f8796946 100644
--- a/public/examples/ts/archive/custom-story-transition.js
+++ b/public/examples/ts/archive/custom-story-transition.js
@@ -6,390 +6,440 @@ difficulty: 11
*/
$.when(
- $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
-
$.getScript('https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js')
+ $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
+ $.getScript(
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+ )
).done(function (res) {
- run(res[0]);
+ run(res[0]);
});
let _optionList;
function run(_rawData) {
- echarts.registerTransform(ecSimpleTransform.aggregate);
- echarts.registerTransform(ecSimpleTransform.id);
+ echarts.registerTransform(ecSimpleTransform.aggregate);
+ echarts.registerTransform(ecSimpleTransform.id);
+ const COUNTRY_A = 'Germany';
+ const COUNTRY_B = 'France';
+ const CONTENT_COLORS = {
+ [COUNTRY_A]: '#5470c6',
+ [COUNTRY_B]: '#91cc75'
+ };
+ const Z2 = {
+ [COUNTRY_A]: 1,
+ [COUNTRY_B]: 2
+ };
- const COUNTRY_A = 'Germany';
- const COUNTRY_B = 'France';
- const CONTENT_COLORS = {
- [COUNTRY_A]: '#5470c6',
- [COUNTRY_B]: '#91cc75'
- };
- const Z2 = {
- [COUNTRY_A]: 1,
- [COUNTRY_B]: 2
+ const ANIMATION_DURATION_UPDATE = 1000;
+ const AXIS_NAME_STYLE = {
+ nameGap: 25,
+ nameTextStyle: {
+ fontSize: 20
}
+ };
-
- const ANIMATION_DURATION_UPDATE = 1000;
- const AXIS_NAME_STYLE = {
- nameGap: 25,
- nameTextStyle: {
- fontSize: 20
- },
- };
-
-
- const baseOption = {
- animationDurationUpdate: ANIMATION_DURATION_UPDATE,
- dataset: [{
- id: 'DatasetRaw',
- source: _rawData
- }, {
- id: 'DatasetRawWithId',
- fromDatasetId: 'DatasetRaw',
- transform: [{
- type: 'filter',
- config: {
- dimension: 'Year', gte: 1950
- }
- }, {
- type: 'ecSimpleTransform:id',
- config: {
- dimensionIndex: 5,
- dimensionName: 'Id'
- }
- }]
- }, {
- id: 'DatasetCountryAB',
- fromDatasetId: 'DatasetRawWithId',
- transform: {
- type: 'filter',
- config: {
- or: [{
- dimension: 'Country', '=': COUNTRY_A
- }, {
- dimension: 'Country', '=': COUNTRY_B
- }]
- }
+ const baseOption = {
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ dataset: [
+ {
+ id: 'DatasetRaw',
+ source: _rawData
+ },
+ {
+ id: 'DatasetRawWithId',
+ fromDatasetId: 'DatasetRaw',
+ transform: [
+ {
+ type: 'filter',
+ config: {
+ dimension: 'Year',
+ gte: 1950
}
- }, {
- id: 'DatasetCountryABSumIncome',
- fromDatasetId: 'DatasetCountryAB',
- transform: {
- type: 'ecSimpleTransform:aggregate',
- config: {
- resultDimensions: [
- { from: 'Income', method: 'sum' },
- { from: 'Country' }
- ],
- groupBy: 'Country'
- }
+ },
+ {
+ type: 'ecSimpleTransform:id',
+ config: {
+ dimensionIndex: 5,
+ dimensionName: 'Id'
}
- }],
- tooltip: {}
- };
-
+ }
+ ]
+ },
+ {
+ id: 'DatasetCountryAB',
+ fromDatasetId: 'DatasetRawWithId',
+ transform: {
+ type: 'filter',
+ config: {
+ or: [
+ {
+ dimension: 'Country',
+ '=': COUNTRY_A
+ },
+ {
+ dimension: 'Country',
+ '=': COUNTRY_B
+ }
+ ]
+ }
+ }
+ },
+ {
+ id: 'DatasetCountryABSumIncome',
+ fromDatasetId: 'DatasetCountryAB',
+ transform: {
+ type: 'ecSimpleTransform:aggregate',
+ config: {
+ resultDimensions: [
+ { from: 'Income', method: 'sum' },
+ { from: 'Country' }
+ ],
+ groupBy: 'Country'
+ }
+ }
+ }
+ ],
+ tooltip: {}
+ };
+ const optionCreators = {
+ Option_CountryAB_Year_Income_Bar: function (datasetId, specifiedCountry) {
+ return {
+ xAxis: {
+ type: 'category',
+ nameLocation: 'middle'
+ },
+ yAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE
+ },
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Year',
+ y: 'Income',
+ itemName: 'Year',
+ tooltip: ['Income']
+ },
+ renderItem: function (params, api) {
+ const valPos = api.coord([api.value('Year'), api.value('Income')]);
+ const basePos = api.coord([api.value('Year'), 0]);
+ const width = api.size([1, 0])[0] * 0.9;
- const optionCreators = {
+ const country = api.value('Country');
+ if (specifiedCountry != null && specifiedCountry !== country) {
+ return;
+ }
- 'Option_CountryAB_Year_Income_Bar': function (datasetId,
specifiedCountry) {
return {
- xAxis: {
- type: 'category',
- nameLocation: 'middle'
- },
- yAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Year',
- y: 'Income',
- itemName: 'Year',
- tooltip: ['Income'],
- },
- renderItem: function (params, api) {
- const valPos = api.coord([api.value('Year'),
api.value('Income')]);
- const basePos = api.coord([api.value('Year'), 0]);
- const width = api.size([1, 0])[0] * 0.9;
-
- const country = api.value('Country');
- if (specifiedCountry != null && specifiedCountry !==
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
- }
- }]
- };
- }
+ 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
+ }
}
+ ]
};
- },
+ }
+ }
+ };
+ },
- 'Option_CountryAB_Year_Population_Bar': function (datasetId,
specifiedCountry) {
- return {
- xAxis: {
- type: 'category',
- nameLocation: 'middle'
- },
- 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) {
- const valPos = api.coord([api.value('Year'),
api.value('Population')]);
- const basePos = api.coord([api.value('Year'), 0]);
- const width = api.size([1, 0])[0] * 0.9;
+ Option_CountryAB_Year_Population_Bar: function (
+ datasetId,
+ specifiedCountry
+ ) {
+ return {
+ xAxis: {
+ type: 'category',
+ nameLocation: 'middle'
+ },
+ 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) {
+ const valPos = api.coord([
+ api.value('Year'),
+ api.value('Population')
+ ]);
+ const basePos = api.coord([api.value('Year'), 0]);
+ const width = api.size([1, 0])[0] * 0.9;
- const country = api.value('Country');
- if (specifiedCountry != null && specifiedCountry !==
country) {
- return;
- }
+ const country = api.value('Country');
+ if (specifiedCountry != null && specifiedCountry !== 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]
+ },
+ style: {
+ fill: CONTENT_COLORS[country]
+ }
}
+ ]
};
- },
+ }
+ }
+ };
+ },
- 'Option_CountryAB_Income_Population_Scatter': function (datasetId,
specifiedCountry) {
- return {
- xAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE,
- scale: true,
- nameLocation: 'middle'
- },
- 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) {
- const pos = api.coord([api.value('Income'),
api.value('Population')]);
+ Option_CountryAB_Income_Population_Scatter: function (
+ datasetId,
+ specifiedCountry
+ ) {
+ return {
+ xAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE,
+ scale: true,
+ nameLocation: 'middle'
+ },
+ 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) {
+ const pos = api.coord([
+ api.value('Income'),
+ api.value('Population')
+ ]);
- const country = api.value('Country');
- if (specifiedCountry != null && specifiedCountry !==
country) {
- return;
- }
+ const country = api.value('Country');
+ if (specifiedCountry != null && specifiedCountry !== 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
- }
- }
- }]
- };
+ 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
}
+ }
}
+ ]
};
+ }
+ }
+ };
+ },
+
+ Option_CountryAB_Income_Sum_Bar: function (datasetId) {
+ return {
+ xAxis: {
+ name: 'Income',
+ ...AXIS_NAME_STYLE,
+ nameLocation: 'middle'
+ },
+ yAxis: {
+ type: 'category'
},
+ series: {
+ type: 'custom',
+ coordinateSystem: 'cartesian2d',
+ datasetId: datasetId,
+ encode: {
+ x: 'Income',
+ y: 'Country',
+ itemName: ['Country'],
+ tooltip: ['Income']
+ },
+ renderItem: function (params, api) {
+ const country = api.ordinalRawValue('Country');
+ const valPos = api.coord([api.value('Income'), country]);
+ const basePos = api.coord([0, country]);
+ const height = api.size([0, 1])[1] * 0.4;
- 'Option_CountryAB_Income_Sum_Bar': function (datasetId) {
return {
- xAxis: {
- name: 'Income',
- ...AXIS_NAME_STYLE,
- nameLocation: 'middle'
- },
- yAxis: {
- type: 'category'
- },
- series: {
- type: 'custom',
- coordinateSystem: 'cartesian2d',
- datasetId: datasetId,
- encode: {
- x: 'Income',
- y: 'Country',
- itemName: ['Country'],
- tooltip: ['Income']
- },
- renderItem: function (params, api) {
- const country = api.ordinalRawValue('Country');
- const valPos = api.coord([api.value('Income'),
country]);
- const basePos = api.coord([0, country]);
- const 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]
- }
- }]
- };
- }
+ 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]
+ }
}
+ ]
};
+ }
}
+ };
+ }
+ };
- };
-
- _optionList = [{
- backwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB',
COUNTRY_A)
- }, {
- backwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- forwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Year_Population_Bar']('DatasetCountryAB',
COUNTRY_A)
- }, {
- backwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- forwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Income_Population_Scatter']('DatasetCountryAB',
COUNTRY_A)
- }, {
- backwardTransitionOpt: {
- from: { dimension: 'Country', seriesIndex: 0 },
- to: { dimension: 'Country', seriesIndex: 0 }
- },
- forwardTransitionOpt: {
- from: { dimension: 'Id', seriesIndex: 0 },
- to: { dimension: 'Id', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Income_Population_Scatter']('DatasetCountryAB')
- }, {
- backwardTransitionOpt: {
- from: { dimension: 'Country', seriesIndex: 0 },
- to: { dimension: 'Country', seriesIndex: 0 }
- },
- forwardTransitionOpt: {
- from: { dimension: 'Country', seriesIndex: 0 },
- to: { dimension: 'Country', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Income_Sum_Bar']('DatasetCountryABSumIncome')
- }, {
- forwardTransitionOpt: {
- from: { dimension: 'Country', seriesIndex: 0 },
- to: { dimension: 'Country', seriesIndex: 0 }
- },
- option:
optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB')
- }];
-
+ _optionList = [
+ {
+ backwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ option: optionCreators['Option_CountryAB_Year_Income_Bar'](
+ 'DatasetCountryAB',
+ COUNTRY_A
+ )
+ },
+ {
+ backwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ forwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ option: optionCreators['Option_CountryAB_Year_Population_Bar'](
+ 'DatasetCountryAB',
+ COUNTRY_A
+ )
+ },
+ {
+ backwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ forwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ option: optionCreators['Option_CountryAB_Income_Population_Scatter'](
+ 'DatasetCountryAB',
+ COUNTRY_A
+ )
+ },
+ {
+ backwardTransitionOpt: {
+ from: { dimension: 'Country', seriesIndex: 0 },
+ to: { dimension: 'Country', seriesIndex: 0 }
+ },
+ forwardTransitionOpt: {
+ from: { dimension: 'Id', seriesIndex: 0 },
+ to: { dimension: 'Id', seriesIndex: 0 }
+ },
+ option:
+ optionCreators['Option_CountryAB_Income_Population_Scatter'](
+ 'DatasetCountryAB'
+ )
+ },
+ {
+ backwardTransitionOpt: {
+ from: { dimension: 'Country', seriesIndex: 0 },
+ to: { dimension: 'Country', seriesIndex: 0 }
+ },
+ forwardTransitionOpt: {
+ from: { dimension: 'Country', seriesIndex: 0 },
+ to: { dimension: 'Country', seriesIndex: 0 }
+ },
+ option: optionCreators['Option_CountryAB_Income_Sum_Bar'](
+ 'DatasetCountryABSumIncome'
+ )
+ },
+ {
+ forwardTransitionOpt: {
+ from: { dimension: 'Country', seriesIndex: 0 },
+ to: { dimension: 'Country', seriesIndex: 0 }
+ },
+ option:
+ optionCreators['Option_CountryAB_Year_Income_Bar']('DatasetCountryAB')
+ }
+ ];
- myChart.setOption(baseOption, { lazyMode: true });
+ myChart.setOption(baseOption, { lazyMode: true });
- // Initialize state
- myChart.setOption(_optionList[currentOptionIndex].option);
+ // Initialize state
+ myChart.setOption(_optionList[currentOptionIndex].option);
}
let currentOptionIndex = 0;
app.config = {
- 'Next': function () {
- if (!_optionList || currentOptionIndex >= _optionList.length - 1) {
- return;
- }
- const optionWrap = _optionList[++currentOptionIndex];
- myChart.setOption(optionWrap.option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: optionWrap.forwardTransitionOpt
- });
- },
+ Next: function () {
+ if (!_optionList || currentOptionIndex >= _optionList.length - 1) {
+ return;
+ }
+ const optionWrap = _optionList[++currentOptionIndex];
+ myChart.setOption(optionWrap.option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: optionWrap.forwardTransitionOpt
+ });
+ },
- 'Previous': function () {
- if (!_optionList || currentOptionIndex <= 0) {
- return;
- }
- const optionWrap = _optionList[--currentOptionIndex];
- myChart.setOption(optionWrap.option, {
- replaceMerge: ['xAxis', 'yAxis'],
- transition: optionWrap.backwardTransitionOpt
- });
+ Previous: function () {
+ if (!_optionList || currentOptionIndex <= 0) {
+ return;
}
-}
+ const optionWrap = _optionList[--currentOptionIndex];
+ myChart.setOption(optionWrap.option, {
+ replaceMerge: ['xAxis', 'yAxis'],
+ transition: optionWrap.backwardTransitionOpt
+ });
+ }
+};
diff --git a/public/examples/ts/bar-race-country.ts
b/public/examples/ts/bar-race-country.ts
index bd9781a2..722ac63e 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -33,7 +33,7 @@ const countryColors: Record<string, string> = {
};
$.when(
- $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
+ $.getJSON('https://fastly.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
$.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
).done(function (res0, res1) {
interface Flag {
diff --git a/public/examples/ts/circle-packing-with-d3.js
b/public/examples/ts/circle-packing-with-d3.js
index bcdc92d3..24603c8f 100644
--- a/public/examples/ts/circle-packing-with-d3.js
+++ b/public/examples/ts/circle-packing-with-d3.js
@@ -8,7 +8,7 @@ difficulty: 11
$.when(
$.get(ROOT_PATH + '/data/asset/data/option-view.json'),
$.getScript(
- 'https://cdn.jsdelivr.net/npm/d3-hierarchy@2.0.0/dist/d3-hierarchy.min.js'
+
'https://fastly.jsdelivr.net/npm/d3-hierarchy@2.0.0/dist/d3-hierarchy.min.js'
)
).done(function (res) {
run(res[0]);
diff --git a/public/examples/ts/data-transform-aggregate.js
b/public/examples/ts/data-transform-aggregate.js
index 1af54613..317eecd9 100644
--- a/public/examples/ts/data-transform-aggregate.js
+++ b/public/examples/ts/data-transform-aggregate.js
@@ -8,7 +8,7 @@ difficulty: 4
$.when(
$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
$.getScript(
-
'https://cdn.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
+
'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
)
).done(function (res) {
run(res[0]);
diff --git a/public/examples/ts/gl/animating-contour-on-globe.js
b/public/examples/ts/gl/animating-contour-on-globe.js
index dac7a49f..8871b779 100644
--- a/public/examples/ts/gl/animating-contour-on-globe.js
+++ b/public/examples/ts/gl/animating-contour-on-globe.js
@@ -24,12 +24,14 @@ context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
$.getScript(
- 'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+ 'https://fastly.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'
),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
+ $.getScript(
+ 'https://fastly.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+ ),
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
+
$.getScript('https://fastly.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
).done(function () {
image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
function (image) {
diff --git a/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
index 68c870cc..86affc92 100644
--- a/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
+++ b/public/examples/ts/gl/bar3d-noise-modified-from-marpi-demo.js
@@ -5,7 +5,7 @@ titleCN: Noise modified from marpi's demo
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var simplex = new SimplexNoise();
diff --git a/public/examples/ts/gl/bar3d-simplex-noise.js
b/public/examples/ts/gl/bar3d-simplex-noise.js
index 39788c9e..507041c4 100644
--- a/public/examples/ts/gl/bar3d-simplex-noise.js
+++ b/public/examples/ts/gl/bar3d-simplex-noise.js
@@ -6,7 +6,7 @@ theme: dark
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/flowGL-noise.js
b/public/examples/ts/gl/flowGL-noise.js
index 11810a49..ede0aa9d 100644
--- a/public/examples/ts/gl/flowGL-noise.js
+++ b/public/examples/ts/gl/flowGL-noise.js
@@ -8,7 +8,7 @@ videoEnd: 10000
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var noise = new SimplexNoise(Math.random);
var noise2 = new SimplexNoise(Math.random);
diff --git a/public/examples/ts/gl/globe-contour-paint.js
b/public/examples/ts/gl/globe-contour-paint.js
index 3a128be0..bd002563 100644
--- a/public/examples/ts/gl/globe-contour-paint.js
+++ b/public/examples/ts/gl/globe-contour-paint.js
@@ -22,12 +22,14 @@ context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
$.getScript(
- 'https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+ 'https://fastly.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'
),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
+ $.getScript(
+ 'https://fastly.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'
+ ),
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
+
$.getScript('https://fastly.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
).done(function () {
image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(
function (image) {
diff --git a/public/examples/ts/gl/globe-echarts-gl-hello-world.js
b/public/examples/ts/gl/globe-echarts-gl-hello-world.js
index 876f6f95..87192dbb 100644
--- a/public/examples/ts/gl/globe-echarts-gl-hello-world.js
+++ b/public/examples/ts/gl/globe-echarts-gl-hello-world.js
@@ -2,7 +2,7 @@
title: ECharts-GL Hello World
category: globe
titleCN: ECharts-GL Hello World
-scripts: 'https://cdn.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
+scripts:
'https://fastly.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
videoStart: 2000
videoEnd: 6000
*/
diff --git a/public/examples/ts/gl/graphgl-npm-dep.js
b/public/examples/ts/gl/graphgl-npm-dep.js
index beadebc5..5461a628 100644
--- a/public/examples/ts/gl/graphgl-npm-dep.js
+++ b/public/examples/ts/gl/graphgl-npm-dep.js
@@ -15,7 +15,7 @@ function loadScript(scriptUrl, cb) {
}
loadScript(
-
'https://cdn.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js',
+
'https://fastly.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js',
function () {
// Reinit chart again
// TODO: visual encoding registerion must been done before echarts.init.
diff --git a/public/examples/ts/gl/metal-bar3d.js
b/public/examples/ts/gl/metal-bar3d.js
index 842eb72b..5401ec57 100644
--- a/public/examples/ts/gl/metal-bar3d.js
+++ b/public/examples/ts/gl/metal-bar3d.js
@@ -5,7 +5,7 @@ titleCN: Metal Bar3D
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/scatter3d-orthographic.js
b/public/examples/ts/gl/scatter3d-orthographic.js
index 81ab4bea..f72d2cdd 100644
--- a/public/examples/ts/gl/scatter3d-orthographic.js
+++ b/public/examples/ts/gl/scatter3d-orthographic.js
@@ -6,7 +6,7 @@ titleCN: 三维散点图正交投影
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/scatter3d-simplex-noise.js
b/public/examples/ts/gl/scatter3d-simplex-noise.js
index b71c4dec..596af5db 100644
--- a/public/examples/ts/gl/scatter3d-simplex-noise.js
+++ b/public/examples/ts/gl/scatter3d-simplex-noise.js
@@ -6,7 +6,7 @@ titleCN: Scatter3D - Simplex Noise
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
diff --git a/public/examples/ts/gl/stacked-bar3d.js
b/public/examples/ts/gl/stacked-bar3d.js
index 0796cb5a..ef588a23 100644
--- a/public/examples/ts/gl/stacked-bar3d.js
+++ b/public/examples/ts/gl/stacked-bar3d.js
@@ -5,7 +5,7 @@ titleCN: Stacked Bar3D
*/
$.getScript(
- 'https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
+ 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
).done(function () {
function generateData() {
var data = [];
diff --git a/public/examples/ts/map-projection-globe.ts
b/public/examples/ts/map-projection-globe.ts
index 1c79f059..12f062e9 100644
--- a/public/examples/ts/map-projection-globe.ts
+++ b/public/examples/ts/map-projection-globe.ts
@@ -10,8 +10,8 @@ let projection: any;
$.when(
$.get(ROOT_PATH + '/data/asset/geo/world.json'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
).done(function (res) {
myChart.hideLoading();
// Add graticule
diff --git a/public/examples/ts/map-usa-projection.ts
b/public/examples/ts/map-usa-projection.ts
index eacf6e91..552295a9 100644
--- a/public/examples/ts/map-usa-projection.ts
+++ b/public/examples/ts/map-usa-projection.ts
@@ -9,8 +9,8 @@ myChart.showLoading();
$.when(
$.get(ROOT_PATH + '/data/asset/geo/USA.json'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-array'),
- $.getScript('https://cdn.jsdelivr.net/npm/d3-geo')
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
+ $.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
).done(function (res) {
const usaJson = res[0];
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
