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