You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/11/03 10:07:19 UTC
[incubator-echarts-examples] branch next updated: update ecstat
related examples.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-examples.git
The following commit(s) were added to refs/heads/next by this push:
new 609cc82 update ecstat related examples.
609cc82 is described below
commit 609cc826bc0a694550532fa9e6033679f420f5fb
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Nov 3 18:07:01 2020 +0800
update ecstat related examples.
---
public/data/bar-histogram.js | 166 +++++++++++------
public/data/scatter-clustering-process.js | 210 ++++++++++++++-------
public/data/scatter-clustering.js | 131 +++++++++++++
public/data/scatter-exponential-regression.js | 98 +++++-----
public/data/scatter-linear-regression.js | 58 +++---
public/data/scatter-logarithmic-regression.js | 256 +++++++++-----------------
public/data/scatter-polynomial-regression.js | 72 +++-----
public/screenshot.html | 2 +-
src/common/config.js | 2 +-
9 files changed, 554 insertions(+), 441 deletions(-)
diff --git a/public/data/bar-histogram.js b/public/data/bar-histogram.js
index be0b6ec..64687d2 100644
--- a/public/data/bar-histogram.js
+++ b/public/data/bar-histogram.js
@@ -5,78 +5,122 @@ titleCN: 直方图（自定义系列）
difficulty: 0
*/
-var girth = [8.3, 8.6, 8.8, 10.5, 10.7, 10.8, 11.0, 11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9, 13.3, 13.7, 13.8, 14.0, 14.2, 14.5, 16.0, 16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6];
-
// See https://github.com/ecomfe/echarts-stat
-var bins = ecStat.histogram(girth);
-
-var interval;
-var min = Infinity;
-var max = -Infinity;
-
-var data = bins.data.map(function (item, index) {
- var x0 = bins.bins[index].x0;
- var x1 = bins.bins[index].x1;
- interval = x1 - x0;
- min = Math.min(min, x0);
- max = Math.max(max, x1);
- return [x0, x1, item[1]];
-});
-
-function renderItem(params, api) {
- var yValue = api.value(2);
- var start = api.coord([api.value(0), yValue]);
- var size = api.size([api.value(1) - api.value(0), yValue]);
- var style = api.style();
-
- return {
- type: 'rect',
- shape: {
- x: start[0] + 1,
- y: start[1],
- width: size[0] - 2,
- height: size[1]
- },
- style: style
- };
-}
+echarts.registerTransform(ecStat.transform.histogram);
option = {
- title: {
- text: 'Girths of Black Cherry Trees',
- subtext: 'By ecStat.histogram',
- sublink: 'https://github.com/ecomfe/echarts-stat',
- left: 'center',
- top: 10
- },
- color: ['rgb(25, 183, 207)'],
- grid: {
- top: 80,
- containLabel: true
+ dataset: [{
+ source: [
+ [8.3, 143],
+ [8.6, 214],
+ [8.8, 251],
+ [10.5, 26],
+ [10.7, 86],
+ [10.8, 93],
+ [11.0, 176],
+ [11.0, 39],
+ [11.1, 221],
+ [11.2, 188],
+ [11.3, 57],
+ [11.4, 91],
+ [11.4, 191],
+ [11.7, 8],
+ [12.0, 196],
+ [12.9, 177],
+ [12.9, 153],
+ [13.3, 201],
+ [13.7, 199],
+ [13.8, 47],
+ [14.0, 81],
+ [14.2, 98],
+ [14.5, 121],
+ [16.0, 37],
+ [16.3, 12],
+ [17.3, 105],
+ [17.5, 168],
+ [17.9, 84],
+ [18.0, 197],
+ [18.0, 155],
+ [20.6, 125]
+ ]
+ }, {
+ transform: {
+ type: 'ecStat:histogram'
+ }
+ }, {
+ transform: {
+ type: 'ecStat:histogram',
+ print: true,
+ config: { dimensions: [1] }
+ }
+ }],
+ tooltip: {
},
+ grid: [{
+ top: '50%',
+ right: '50%'
+ }, {
+ bottom: '52%',
+ right: '50%',
+ }, {
+ top: '50%',
+ left: '52%'
+ }],
xAxis: [{
- type: 'value',
- min: min,
- max: max,
- interval: interval
+ scale: true,
+ gridIndex: 0
+ }, {
+ type: 'category',
+ scale: true,
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ gridIndex: 1
+ }, {
+ scale: true,
+ gridIndex: 2
}],
yAxis: [{
- type: 'value',
+ gridIndex: 0
+ }, {
+ gridIndex: 1
+ }, {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ gridIndex: 2
}],
series: [{
- name: 'height',
- type: 'custom',
- renderItem: renderItem,
+ name: 'origianl scatter',
+ type: 'scatter',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ encode: { tooltip: [0, 1] },
+ datasetIndex: 0
+ }, {
+ name: 'histogram',
+ type: 'bar',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ barWidth: '99.3%',
label: {
show: true,
- position: 'insideTop'
+ position: 'top'
},
- encode: {
- x: [0, 1],
- y: 2,
- tooltip: 2,
- label: 2
+ encode: { x: 0, y: 1, itemName: 4 },
+ datasetIndex: 1
+ }, {
+ name: 'histogram',
+ type: 'bar',
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ barWidth: '99.3%',
+ label: {
+ show: true,
+ position: 'right'
},
- data: data
+ encode: { x: 1, y: 0, itemName: 4 },
+ datasetIndex: 2
}]
-};
\ No newline at end of file
+};
diff --git a/public/data/scatter-clustering-process.js b/public/data/scatter-clustering-process.js
index 89b4807..4e2a8ef 100644
--- a/public/data/scatter-clustering-process.js
+++ b/public/data/scatter-clustering-process.js
@@ -5,7 +5,8 @@ titleCN: 聚合过程可视化
difficulty: 1
*/
-var data = [
+
+var originalData = [
[3.275154, 2.957587],
[-3.344465, 2.603513],
[0.355083, -3.376585],
@@ -68,34 +69,157 @@ var data = [
[0.639276, -3.41284]
];
-var clusterNumber = 6;
+
+var DIM_CLUSTER_INDEX = 2;
+var DATA_DIM_IDX = [0, 1];
+var CENTER_DIM_IDX = [3, 4];
+
// See https://github.com/ecomfe/echarts-stat
-var step = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, true);
-var result;
+var step = ecStat.clustering.hierarchicalKMeans(originalData, {
+ clusterCount: 6,
+ outputType: 'single',
+ outputClusterIndexDimension: DIM_CLUSTER_INDEX,
+ outputCentroidDimensions: CENTER_DIM_IDX,
+ stepByStep: true
+});
+
+var colorAll = [
+ '#bbb', '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+];
+var ANIMATION_DURATION_UPDATE = 1500;
+
+function renderItemPoint(params, api) {
+ var coord = api.coord([api.value(0), api.value(1)]);
+ var clusterIdx = api.value(2);
+ if (clusterIdx == null || isNaN(clusterIdx)) {
+ clusterIdx = 0;
+ }
+ var isNewCluster = clusterIdx === api.value(3);
+
+ var extra = {
+ transition: []
+ };
+ var contentColor = colorAll[clusterIdx];
+
+ return {
+ type: 'circle',
+ x: coord[0],
+ y: coord[1],
+ shape: {
+ cx: 0,
+ cy: 0,
+ r: 10
+ },
+ extra: extra,
+ style: {
+ fill: contentColor,
+ stroke: '#333',
+ lineWidth: 1,
+ shadowColor: contentColor,
+ shadowBlur: isNewCluster ? 12 : 0,
+ transition: ['shadowBlur', 'fill']
+ }
+ };
+}
+
+function renderBoundary(params, api) {
+ var xVal = api.value(0);
+ var yVal = api.value(1);
+ var maxDist = api.value(2);
+ var center = api.coord([xVal, yVal]);
+ var size = api.size([maxDist, maxDist]);
+
+ return {
+ type: 'ellipse',
+ shape: {
+ cx: isNaN(center[0]) ? 0 : center[0],
+ cy: isNaN(center[1]) ? 0 : center[1],
+ rx: isNaN(size[0]) ? 0 : size[0] + 15,
+ ry: isNaN(size[1]) ? 0 : size[1] + 15
+ },
+ extra: {
+ renderProgress: ++targetRenderProgress,
+ enterFrom: {
+ renderProgress: 0
+ },
+ transition: 'renderProgress'
+ },
+ style: {
+ fill: null,
+ stroke: 'rgba(0,0,0,0.2)',
+ lineDash: [4, 4],
+ lineWidth: 4
+ }
+ };
+}
+
+function makeStepOption(option, data, centroids) {
+ var newCluIdx = centroids ? centroids.length - 1 : -1;
+ var maxDist = 0;
+ for (var i = 0; i < data.length; i++) {
+ var line = data[i];
+ if (line[DIM_CLUSTER_INDEX] === newCluIdx) {
+ var dist0 = Math.pow(line[DATA_DIM_IDX[0]] - line[CENTER_DIM_IDX[0]], 2);
+ var dist1 = Math.pow(line[DATA_DIM_IDX[1]] - line[CENTER_DIM_IDX[1]], 2);
+ maxDist = Math.max(maxDist, dist0 + dist1);
+ }
+ }
+ var boundaryData = centroids
+ ? [
+ [
+ centroids[newCluIdx][0],
+ centroids[newCluIdx][1],
+ Math.sqrt(maxDist)
+ ]
+ ]
+ : [];
+
+ option.options.push({
+ series: [{
+ type: 'custom',
+ encode: {
+ tooltip: [0, 1]
+ },
+ renderItem: renderItemPoint,
+ data: data
+ }, {
+ type: 'custom',
+ renderItem: renderBoundary,
+ animationDuration: 3000,
+ silent: true,
+ data: boundaryData
+ }]
+ });
+}
+
+var targetRenderProgress = 0;
option = {
timeline: {
top: 'center',
- right: 35,
+ right: 50,
height: 300,
width: 10,
inverse: true,
+ autoPlay: false,
playInterval: 2500,
symbol: 'none',
orient: 'vertical',
axisType: 'category',
- autoPlay: true,
label: {
- show: false
+ formatter: 'step {value}',
+ position: 10
+ },
+ checkpointStyle: {
+ color: '#555',
+ borderWidth: 0,
+ animationDuration: ANIMATION_DURATION_UPDATE
},
data: []
},
baseOption: {
- title: {
- text: 'Process of Clustering',
- subtext: 'By ecStat.hierarchicalKMeans',
- sublink: 'https://github.com/ecomfe/echarts-stat',
- left: 'center'
+ animationDurationUpdate: ANIMATION_DURATION_UPDATE,
+ tooltip: {
},
xAxis: {
type: 'value'
@@ -110,59 +234,13 @@ option = {
options: []
};
-for (var i = 0; !(result = step.next()).isEnd; i++) {
-
- option.options.push(getOption(result, clusterNumber));
+makeStepOption(option, originalData);
+option.timeline.data.push('0');
+for (var i = 1, stepResult; !(stepResult = step.next()).isEnd; i++) {
+ makeStepOption(
+ option,
+ echarts.util.clone(stepResult.data),
+ echarts.util.clone(stepResult.centroids)
+ );
option.timeline.data.push(i + '');
-
}
-
-function getOption(result, k) {
- var clusterAssment = result.clusterAssment;
- var centroids = result.centroids;
- var ptsInCluster = result.pointsInCluster;
- var color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
- var series = [];
- for (i = 0; i < k; i++) {
- series.push({
- name: 'scatter' + i,
- type: 'scatter',
- animation: false,
- data: ptsInCluster[i],
- markPoint: {
- symbolSize: 29,
- label: {
- show: false
- },
- itemStyle: {
- opacity: 0.7
- },
- emphasis: {
- label: {
- show: true,
- position: 'top',
- formatter: function (params) {
- return Math.round(params.data.coord[0] * 100) / 100 + ' ' +
- Math.round(params.data.coord[1] * 100) / 100 + ' ';
- },
- color: '#000'
- }
- },
- data: [{
- coord: centroids[i]
- }]
- }
- });
- }
-
- return {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
- },
- series: series,
- color: color
- };
-}
\ No newline at end of file
diff --git a/public/data/scatter-clustering.js b/public/data/scatter-clustering.js
new file mode 100644
index 0000000..3a6715c
--- /dev/null
+++ b/public/data/scatter-clustering.js
@@ -0,0 +1,131 @@
+/*
+title: Clustering Process
+category: scatter
+titleCN: 数据聚合
+difficulty: 1
+*/
+
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.clustering);
+
+var data = [
+ [3.275154, 2.957587],
+ [-3.344465, 2.603513],
+ [0.355083, -3.376585],
+ [1.852435, 3.547351],
+ [-2.078973, 2.552013],
+ [-0.993756, -0.884433],
+ [2.682252, 4.007573],
+ [-3.087776, 2.878713],
+ [-1.565978, -1.256985],
+ [2.441611, 0.444826],
+ [-0.659487, 3.111284],
+ [-0.459601, -2.618005],
+ [2.17768, 2.387793],
+ [-2.920969, 2.917485],
+ [-0.028814, -4.168078],
+ [3.625746, 2.119041],
+ [-3.912363, 1.325108],
+ [-0.551694, -2.814223],
+ [2.855808, 3.483301],
+ [-3.594448, 2.856651],
+ [0.421993, -2.372646],
+ [1.650821, 3.407572],
+ [-2.082902, 3.384412],
+ [-0.718809, -2.492514],
+ [4.513623, 3.841029],
+ [-4.822011, 4.607049],
+ [-0.656297, -1.449872],
+ [1.919901, 4.439368],
+ [-3.287749, 3.918836],
+ [-1.576936, -2.977622],
+ [3.598143, 1.97597],
+ [-3.977329, 4.900932],
+ [-1.79108, -2.184517],
+ [3.914654, 3.559303],
+ [-1.910108, 4.166946],
+ [-1.226597, -3.317889],
+ [1.148946, 3.345138],
+ [-2.113864, 3.548172],
+ [0.845762, -3.589788],
+ [2.629062, 3.535831],
+ [-1.640717, 2.990517],
+ [-1.881012, -2.485405],
+ [4.606999, 3.510312],
+ [-4.366462, 4.023316],
+ [0.765015, -3.00127],
+ [3.121904, 2.173988],
+ [-4.025139, 4.65231],
+ [-0.559558, -3.840539],
+ [4.376754, 4.863579],
+ [-1.874308, 4.032237],
+ [-0.089337, -3.026809],
+ [3.997787, 2.518662],
+ [-3.082978, 2.884822],
+ [0.845235, -3.454465],
+ [1.327224, 3.358778],
+ [-2.889949, 3.596178],
+ [-0.966018, -2.839827],
+ [2.960769, 3.079555],
+ [-3.275518, 1.577068],
+ [0.639276, -3.41284]
+];
+
+var CLUSTER_COUNT = 6;
+var DIENSIION_CLUSTER_INDEX = 2;
+var COLOR_ALL = [
+ '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+];
+var pieces = [];
+for (var i = 0; i < CLUSTER_COUNT; i++) {
+ pieces.push({
+ value: i,
+ label: 'cluster ' + i,
+ color: COLOR_ALL[i]
+ });
+}
+
+option = {
+ dataset: [{
+ source: data
+ }, {
+ transform: {
+ type: 'ecStat:clustering',
+ print: true,
+ config: {
+ clusterCount: CLUSTER_COUNT,
+ outputType: 'single',
+ outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
+ }
+ }
+ }],
+ tooltip: {
+ position: 'top'
+ },
+ visualMap: {
+ type: 'piecewise',
+ top: 'middle',
+ min: 0,
+ max: CLUSTER_COUNT,
+ left: 10,
+ splitNumber: CLUSTER_COUNT,
+ dimension: DIENSIION_CLUSTER_INDEX,
+ pieces: pieces
+ },
+ grid: {
+ left: 120
+ },
+ xAxis: {
+ },
+ yAxis: {
+ },
+ series: {
+ type: 'scatter',
+ encode: { tooltip: [0, 1] },
+ symbolSize: 15,
+ itemStyle: {
+ borderColor: '#555'
+ },
+ datasetIndex: 1
+ }
+};
diff --git a/public/data/scatter-exponential-regression.js b/public/data/scatter-exponential-regression.js
index f753c15..feafb8c 100644
--- a/public/data/scatter-exponential-regression.js
+++ b/public/data/scatter-exponential-regression.js
@@ -5,35 +5,41 @@ titleCN: 指数回归（使用统计插件）
difficulty: 1
*/
-var data = [
- [1, 4862.4],
- [2, 5294.7],
- [3, 5934.5],
- [4, 7171.0],
- [5, 8964.4],
- [6, 10202.2],
- [7, 11962.5],
- [8, 14928.3],
- [9, 16909.2],
- [10, 18547.9],
- [11, 21617.8],
- [12, 26638.1],
- [13, 34634.4],
- [14, 46759.4],
- [15, 58478.1],
- [16, 67884.6],
- [17, 74462.6],
- [18, 79395.7]
-];
-
// See https://github.com/ecomfe/echarts-stat
-var myRegression = ecStat.regression('exponential', data);
-
-myRegression.points.sort(function(a, b) {
- return a[0] - b[0];
-});
+echarts.registerTransform(ecStat.transform.regression);
option = {
+ dataset: [{
+ source: [
+ [1, 4862.4],
+ [2, 5294.7],
+ [3, 5934.5],
+ [4, 7171.0],
+ [5, 8964.4],
+ [6, 10202.2],
+ [7, 11962.5],
+ [8, 14928.3],
+ [9, 16909.2],
+ [10, 18547.9],
+ [11, 21617.8],
+ [12, 26638.1],
+ [13, 34634.4],
+ [14, 46759.4],
+ [15, 58478.1],
+ [16, 67884.6],
+ [17, 74462.6],
+ [18, 79395.7]
+ ]
+ }, {
+ transform: {
+ type: 'ecStat:regression',
+ config: {
+ method: 'exponential',
+ // 'end' by default
+ // formulaOn: 'start'
+ }
+ }
+ }],
title: {
text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
subtext: 'By ecStat.regression',
@@ -47,16 +53,13 @@ option = {
}
},
xAxis: {
- type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
- },
- splitNumber: 20
+ }
},
yAxis: {
- type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
@@ -66,35 +69,16 @@ option = {
series: [{
name: 'scatter',
type: 'scatter',
- emphasis: {
- label: {
- show: true,
- position: 'left',
- color: 'blue',
- fontSize: 16
- }
- },
- data: data
- }, {
+ datasetIndex: 0
+ },{
name: 'line',
type: 'line',
- showSymbol: false,
smooth: true,
- data: myRegression.points,
- markPoint: {
- itemStyle: {
- color: 'transparent'
- },
- label: {
- show: true,
- position: 'left',
- formatter: myRegression.expression,
- color: '#333',
- fontSize: 14
- },
- data: [{
- coord: myRegression.points[myRegression.points.length - 1]
- }]
- }
+ datasetIndex: 1,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
}]
};
diff --git a/public/data/scatter-linear-regression.js b/public/data/scatter-linear-regression.js
index f2144e9..6fff303 100644
--- a/public/data/scatter-linear-regression.js
+++ b/public/data/scatter-linear-regression.js
@@ -5,6 +5,9 @@ titleCN: 线性回归（使用统计插件）
difficulty: 2
*/
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.regression);
+
var data = [
[0.067732, 3.176513],
[0.42781, 3.816464],
@@ -208,20 +211,24 @@ var data = [
[0.116163, 3.129283]
];
-// See https://github.com/ecomfe/echarts-stat
-var myRegression = ecStat.regression('linear', data);
-
-myRegression.points.sort(function(a, b) {
- return a[0] - b[0];
-});
option = {
+ dataset: [{
+ source: data
+ }, {
+ transform: {
+ type: 'ecStat:regression'
+ // 'linear' by default.
+ // config: { method: 'linear', formulaOn: 'end'}
+ }
+ }],
title: {
text: 'Linear Regression',
subtext: 'By ecStat.regression',
sublink: 'https://github.com/ecomfe/echarts-stat',
left: 'center'
},
+ legend: {},
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -229,7 +236,6 @@ option = {
}
},
xAxis: {
- type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
@@ -237,8 +243,6 @@ option = {
},
},
yAxis: {
- type: 'value',
- min: 3,
splitLine: {
lineStyle: {
type: 'dashed'
@@ -247,35 +251,15 @@ option = {
},
series: [{
name: 'scatter',
- type: 'scatter',
- emphasis: {
- label: {
- show: true,
- position: 'left',
- color: 'blue',
- fontSize: 16
- }
- },
- data: data
+ type: 'scatter'
}, {
name: 'line',
type: 'line',
- showSymbol: false,
- data: myRegression.points,
- markPoint: {
- itemStyle: {
- color: 'transparent'
- },
- label: {
- show: true,
- position: 'left',
- formatter: myRegression.expression,
- color: '#333',
- fontSize: 14
- },
- data: [{
- coord: myRegression.points[myRegression.points.length - 1]
- }]
- }
+ datasetIndex: 1,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
}]
-};
\ No newline at end of file
+};
diff --git a/public/data/scatter-logarithmic-regression.js b/public/data/scatter-logarithmic-regression.js
index 048cbc7..cca273a 100644
--- a/public/data/scatter-logarithmic-regression.js
+++ b/public/data/scatter-logarithmic-regression.js
@@ -5,119 +5,86 @@ titleCN: 对数回归（使用统计插件）
difficulty: 16
*/
-var data0 = [
- [28604, 77, 17096869, 'Australia', 1990],
- [31163, 77.4, 27662440, 'Canada', 1990],
- [1516, 68, 1154605773, 'China', 1990],
- [13670, 74.7, 10582082, 'Cuba', 1990],
- [28599, 75, 4986705, 'Finland', 1990],
- [29476, 77.1, 56943299, 'France', 1990],
- [31476, 75.4, 78958237, 'Germany', 1990],
- [28666, 78.1, 254830, 'Iceland', 1990],
- [1777, 57.7, 870601776, 'India', 1990],
- [29550, 79.1, 122249285, 'Japan', 1990],
- [2076, 67.9, 20194354, 'North Korea', 1990],
- [12087, 72, 42972254, 'South Korea', 1990],
- [24021, 75.4, 3397534, 'New Zealand', 1990],
- [43296, 76.8, 4240375, 'Norway', 1990],
- [10088, 70.8, 38195258, 'Poland', 1990],
- [19349, 69.6, 147568552, 'Russia', 1990],
- [10670, 67.3, 53994605, 'Turkey', 1990],
- [26424, 75.7, 57110117, 'United Kingdom', 1990],
- [37062, 75.4, 252847810, 'United States', 1990]
-];
-
-var data1 = [
- [44056, 81.8, 23968973, 'Australia', 2015],
- [43294, 81.7, 35939927, 'Canada', 2015],
- [13334, 76.9, 1376048943, 'China', 2015],
- [21291, 78.5, 11389562, 'Cuba', 2015],
- [38923, 80.8, 5503457, 'Finland', 2015],
- [37599, 81.9, 64395345, 'France', 2015],
- [44053, 81.1, 80688545, 'Germany', 2015],
- [42182, 82.8, 329425, 'Iceland', 2015],
- [5903, 66.8, 1311050527, 'India', 2015],
- [36162, 83.5, 126573481, 'Japan', 2015],
- [1390, 71.4, 25155317, 'North Korea', 2015],
- [34644, 80.7, 50293439, 'South Korea', 2015],
- [34186, 80.6, 4528526, 'New Zealand', 2015],
- [64304, 81.6, 5210967, 'Norway', 2015],
- [24787, 77.3, 38611794, 'Poland', 2015],
- [23038, 73.13, 143456918, 'Russia', 2015],
- [19360, 76.5, 78665830, 'Turkey', 2015],
- [38225, 81.4, 64715810, 'United Kingdom', 2015],
- [53354, 79.1, 321773631, 'United States', 2015]
-];
-
-var data = [
- [28604, 77],
- [31163, 77.4],
- [1516, 68],
- [13670, 74.7],
- [28599, 75],
- [29476, 77.1],
- [31476, 75.4],
- [28666, 78.1],
- [1777, 57.7],
- [29550, 79.1],
- [2076, 67.9],
- [12087, 72],
- [24021, 75.4],
- [43296, 76.8],
- [10088, 70.8],
- [19349, 69.6],
- [10670, 67.3],
- [26424, 75.7],
- [37062, 75.4],
- [44056, 81.8],
- [43294, 81.7],
- [13334, 76.9],
- [21291, 78.5],
- [38923, 80.8],
- [37599, 81.9],
- [44053, 81.1],
- [42182, 82.8],
- [5903, 66.8],
- [36162, 83.5],
- [1390, 71.4],
- [34644, 80.7],
- [34186, 80.6],
- [64304, 81.6],
- [24787, 77.3],
- [23038, 73.13],
- [19360, 76.5],
- [38225, 81.4],
- [53354, 79.1]
-];
// See https://github.com/ecomfe/echarts-stat
-var myRegression = ecStat.regression('logarithmic', data);
-
-myRegression.points.sort(function(a, b) {
- return a[0] - b[0];
-});
+echarts.registerTransform(ecStat.transform.regression);
option = {
- legend: {
- data: ['1990', '2015'],
- bottom: 20
- },
+ dataset: [{
+ source: [
+ [28604,77,17096869,'Australia',1990],
+ [31163,77.4,27662440,'Canada',1990],
+ [1516,68,1154605773,'China',1990],
+ [13670,74.7,10582082,'Cuba',1990],
+ [28599,75,4986705,'Finland',1990],
+ [29476,77.1,56943299,'France',1990],
+ [31476,75.4,78958237,'Germany',1990],
+ [28666,78.1,254830,'Iceland',1990],
+ [1777,57.7,870601776,'India',1990],
+ [29550,79.1,122249285,'Japan',1990],
+ [2076,67.9,20194354,'North Korea',1990],
+ [12087,72,42972254,'South Korea',1990],
+ [24021,75.4,3397534,'New Zealand',1990],
+ [43296,76.8,4240375,'Norway',1990],
+ [10088,70.8,38195258,'Poland',1990],
+ [19349,69.6,147568552,'Russia',1990],
+ [10670,67.3,53994605,'Turkey',1990],
+ [26424,75.7,57110117,'United Kingdom',1990],
+ [37062,75.4,252847810,'United States',1990],
+ [44056,81.8,23968973,'Australia',2015],
+ [43294,81.7,35939927,'Canada',2015],
+ [13334,76.9,1376048943,'China',2015],
+ [21291,78.5,11389562,'Cuba',2015],
+ [38923,80.8,5503457,'Finland',2015],
+ [37599,81.9,64395345,'France',2015],
+ [44053,81.1,80688545,'Germany',2015],
+ [42182,82.8,329425,'Iceland',2015],
+ [5903,66.8,1311050527,'India',2015],
+ [36162,83.5,126573481,'Japan',2015],
+ [1390,71.4,25155317,'North Korea',2015],
+ [34644,80.7,50293439,'South Korea',2015],
+ [34186,80.6,4528526,'New Zealand',2015],
+ [64304,81.6,5210967,'Norway',2015],
+ [24787,77.3,38611794,'Poland',2015],
+ [23038,73.13,143456918,'Russia',2015],
+ [19360,76.5,78665830,'Turkey',2015],
+ [38225,81.4,64715810,'United Kingdom',2015],
+ [53354,79.1,321773631,'United States',2015]
+ ]
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 4, eq: 1990 }
+ }
+ }, {
+ transform: {
+ type: 'filter',
+ config: { dimension: 4, eq: 2015 }
+ }
+ }, {
+ transform: {
+ type: 'ecStat:regression',
+ config: {
+ method: 'logarithmic'
+ }
+ }
+ }],
title: {
text: '1990 and 2015 per capita life expectancy and GDP',
subtext: 'By ecStat.regression',
sublink: 'https://github.com/ecomfe/echarts-stat',
left: 'center'
},
+ legend: {
+ data: ['1990', '2015'],
+ bottom: 10
+ },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
- grid: {
- top: 80,
- bottom: 90
- },
xAxis: {
type: 'value',
splitLine: {
@@ -134,86 +101,33 @@ option = {
}
},
},
+ visualMap: {
+ show: false,
+ dimension: 2,
+ min: 20000,
+ max: 1500000000,
+ seriesIndex: [0, 1],
+ inRange: {
+ symbolSize: [10, 70]
+ }
+ },
series: [{
name: '1990',
type: 'scatter',
- symbolSize: function(data) {
- return Math.sqrt(data[2]) / 5e2;
- },
- emphasis: {
- label: {
- show: true,
- formatter: function(param) {
- return param.data[3];
- },
- position: 'top'
- }
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: 'rgba(120, 36, 50, 0.5)',
- shadowOffsetY: 5,
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: 'rgb(251, 118, 123)'
- }, {
- offset: 1,
- color: 'rgb(204, 46, 72)'
- }])
- },
- data: data0
- }, {
+ datasetIndex: 1
+ },{
name: '2015',
type: 'scatter',
- symbolSize: function(data) {
- return Math.sqrt(data[2]) / 5e2;
- },
- emphasis: {
- label: {
- show: true,
- formatter: function(param) {
- return param.data[3];
- },
- position: 'top'
- }
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: 'rgba(25, 100, 150, 0.5)',
- shadowOffsetY: 5,
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
- offset: 0,
- color: 'rgb(129, 227, 238)'
- }, {
- offset: 1,
- color: 'rgb(25, 183, 207)'
- }])
- },
- data: data1
- }, {
+ datasetIndex: 2
+ }, {
name: 'line',
type: 'line',
- lineStyle: {
- normal: {
- color: '#2f4554'
- }
- },
smooth: true,
- showSymbol: false,
- data: myRegression.points,
- markPoint: {
- itemStyle: {
- color: 'transparent'
- },
- label: {
- show: true,
- position: 'left',
- formatter: myRegression.expression,
- fontSize: 14
- },
- data: [{
- coord: myRegression.points[myRegression.points.length - 1]
- }]
- }
+ datasetIndex: 3,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
}]
-};
\ No newline at end of file
+}
diff --git a/public/data/scatter-polynomial-regression.js b/public/data/scatter-polynomial-regression.js
index 440f442..a3dc55f 100644
--- a/public/data/scatter-polynomial-regression.js
+++ b/public/data/scatter-polynomial-regression.js
@@ -5,6 +5,9 @@ titleCN: 多项式回归（使用统计插件）
difficulty: 2
*/
+// See https://github.com/ecomfe/echarts-stat
+echarts.registerTransform(ecStat.transform.regression);
+
var data = [
[96.24, 11.35],
[33.09, 85.11],
@@ -26,21 +29,15 @@ var data = [
[81.31, 108.68]
];
-// See https://github.com/ecomfe/echarts-stat
-var myRegression = ecStat.regression('polynomial', data, 3);
-
-myRegression.points.sort(function(a, b) {
- return a[0] - b[0];
-});
-
option = {
-
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
+ dataset: [{
+ source: data
+ }, {
+ transform: {
+ type: 'ecStat:regression',
+ config: { method: 'polynomial', order: 3 }
}
- },
+ }],
title: {
text: '18 companies net profit and main business income (million)',
subtext: 'By ecStat.regression',
@@ -48,8 +45,13 @@ option = {
left: 'center',
top: 16
},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
xAxis: {
- type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
@@ -58,7 +60,6 @@ option = {
splitNumber: 20
},
yAxis: {
- type: 'value',
min: -40,
splitLine: {
lineStyle: {
@@ -66,41 +67,18 @@ option = {
}
}
},
- grid: {
- top: 90
- },
series: [{
name: 'scatter',
- type: 'scatter',
- emphasis: {
- label: {
- show: true,
- position: 'right',
- color: 'blue',
- fontSize: 16
- }
- },
- data: data
- }, {
+ type: 'scatter'
+ }, {
name: 'line',
type: 'line',
smooth: true,
- showSymbol: false,
- data: myRegression.points,
- markPoint: {
- itemStyle: {
- color: 'transparent'
- },
- label: {
- show: true,
- position: 'left',
- formatter: myRegression.expression,
- color: '#333',
- fontSize: 14
- },
- data: [{
- coord: myRegression.points[myRegression.points.length - 1]
- }]
- }
+ datasetIndex: 1,
+ symbolSize: 0.1,
+ symbol: 'circle',
+ label: { show: true, fontSize: 16 },
+ labelLayout: { dx: -20 },
+ encode: { label: 2, tooltip: 1 }
}]
-};
\ No newline at end of file
+};
diff --git a/public/screenshot.html b/public/screenshot.html
index 23aa3cb..18208c6 100644
--- a/public/screenshot.html
+++ b/public/screenshot.html
@@ -12,7 +12,7 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-beta.2/dist/extension/dataTool.js?_v_=1510583857922"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-beta.2/dist/extension/bmap.js?_v_=1510583857922"></script>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
<script type="text/javascript" src="../tool/seedrandom.js"></script>
<style>
html, body {
diff --git a/src/common/config.js b/src/common/config.js
index f20503c..ce0c0d7 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -122,7 +122,7 @@ export const SCRIPT_URLS = {
localEChartsMinJS: 'http://localhost/echarts-next/dist/echarts.js',
echartsMinJS: 'https://cdn.jsdelivr.net/npm/echarts@5.0.0-beta.2/dist/echarts.min.js',
echartsDir: 'https://cdn.jsdelivr.net/npm/echarts@5.0.0-beta.2',
- echartsStatMinJS: 'https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js',
+ echartsStatMinJS: 'https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js',
echartsGLMinJS: 'https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js',
datGUIMinJS: 'https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js',
monacoDir: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org