This is an automated email from the ASF dual-hosted git repository.
ovilia 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 8457b2f8 feat: add example of stacked bar normalization
apache/echarts#14226
8457b2f8 is described below
commit 8457b2f8f50ef31257d49d73bbcfc776e0931773
Author: Ovilia <[email protected]>
AuthorDate: Fri Dec 22 15:09:12 2023 +0800
feat: add example of stacked bar normalization apache/echarts#14226
---
.../bar-stack-normalization-and-variation.png | Bin 0 -> 68925 bytes
.../bar-stack-normalization-and-variation.webp | Bin 0 -> 12636 bytes
public/data/thumb-dark/bar-stack-normalization.png | Bin 0 -> 65024 bytes
.../data/thumb-dark/bar-stack-normalization.webp | Bin 0 -> 12468 bytes
.../bar-stack-normalization-and-variation.png | Bin 0 -> 59127 bytes
.../bar-stack-normalization-and-variation.webp | Bin 0 -> 11416 bytes
public/data/thumb/bar-stack-normalization.png | Bin 0 -> 54652 bytes
public/data/thumb/bar-stack-normalization.webp | Bin 0 -> 11594 bytes
.../ts/bar-stack-normalization-and-variation.ts | 109 +++++++++++++++++++++
public/examples/ts/bar-stack-normalization.ts | 68 +++++++++++++
src/data/chart-list-data.js | 22 +++++
11 files changed, 199 insertions(+)
diff --git a/public/data/thumb-dark/bar-stack-normalization-and-variation.png
b/public/data/thumb-dark/bar-stack-normalization-and-variation.png
new file mode 100644
index 00000000..d03b6469
Binary files /dev/null and
b/public/data/thumb-dark/bar-stack-normalization-and-variation.png differ
diff --git a/public/data/thumb-dark/bar-stack-normalization-and-variation.webp
b/public/data/thumb-dark/bar-stack-normalization-and-variation.webp
new file mode 100644
index 00000000..9d7b75a8
Binary files /dev/null and
b/public/data/thumb-dark/bar-stack-normalization-and-variation.webp differ
diff --git a/public/data/thumb-dark/bar-stack-normalization.png
b/public/data/thumb-dark/bar-stack-normalization.png
new file mode 100644
index 00000000..8793d788
Binary files /dev/null and b/public/data/thumb-dark/bar-stack-normalization.png
differ
diff --git a/public/data/thumb-dark/bar-stack-normalization.webp
b/public/data/thumb-dark/bar-stack-normalization.webp
new file mode 100644
index 00000000..5f0bff19
Binary files /dev/null and
b/public/data/thumb-dark/bar-stack-normalization.webp differ
diff --git a/public/data/thumb/bar-stack-normalization-and-variation.png
b/public/data/thumb/bar-stack-normalization-and-variation.png
new file mode 100644
index 00000000..01f4d50c
Binary files /dev/null and
b/public/data/thumb/bar-stack-normalization-and-variation.png differ
diff --git a/public/data/thumb/bar-stack-normalization-and-variation.webp
b/public/data/thumb/bar-stack-normalization-and-variation.webp
new file mode 100644
index 00000000..926ba912
Binary files /dev/null and
b/public/data/thumb/bar-stack-normalization-and-variation.webp differ
diff --git a/public/data/thumb/bar-stack-normalization.png
b/public/data/thumb/bar-stack-normalization.png
new file mode 100644
index 00000000..fa28ea04
Binary files /dev/null and b/public/data/thumb/bar-stack-normalization.png
differ
diff --git a/public/data/thumb/bar-stack-normalization.webp
b/public/data/thumb/bar-stack-normalization.webp
new file mode 100644
index 00000000..cac40941
Binary files /dev/null and b/public/data/thumb/bar-stack-normalization.webp
differ
diff --git a/public/examples/ts/bar-stack-normalization-and-variation.ts
b/public/examples/ts/bar-stack-normalization-and-variation.ts
new file mode 100644
index 00000000..84691c97
--- /dev/null
+++ b/public/examples/ts/bar-stack-normalization-and-variation.ts
@@ -0,0 +1,109 @@
+/*
+title: Stacked Bar Normalization and Variation
+titleCN: 堆叠柱状图的归一化和变化
+category: bar
+difficulty: 3
+*/
+// There should not be negative values in rawData
+const rawData = [
+ [100, 302, 301, 334, 390, 330, 320],
+ [320, 132, 101, 134, 90, 230, 210],
+ [220, 182, 191, 234, 290, 330, 310],
+ [150, 212, 201, 154, 190, 330, 410],
+ [820, 832, 901, 934, 1290, 1330, 1320]
+];
+const totalData: number[] = [];
+for (let i = 0; i < rawData[0].length; ++i) {
+ let sum = 0;
+ for (let j = 0; j < rawData.length; ++j) {
+ sum += rawData[j][i];
+ }
+ totalData.push(sum);
+}
+
+const grid = {
+ left: 100,
+ right: 100,
+ top: 50,
+ bottom: 50
+};
+const gridWidth = myChart.getWidth() - grid.left - grid.right;
+const gridHeight = myChart.getHeight() - grid.top - grid.bottom;
+const categoryWidth = gridWidth / rawData[0].length;
+const barWidth = categoryWidth * 0.6;
+const barPadding = (categoryWidth - barWidth) / 2;
+
+const series = [
+ 'Direct',
+ 'Mail Ad',
+ 'Affiliate Ad',
+ 'Video Ad',
+ 'Search Engine'
+].map((name, sid) => {
+ return {
+ name,
+ type: 'bar',
+ stack: 'total',
+ barWidth: '60%',
+ label: {
+ show: true,
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+ },
+ data: rawData[sid].map((d, did) =>
+ totalData[did] <= 0 ? 0 : d / totalData[did]
+ )
+ };
+});
+
+const color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
+const elements = [];
+for (let j = 1, jlen = rawData[0].length; j < jlen; ++j) {
+ const leftX = grid.left + categoryWidth * j - barPadding;
+ const rightX = leftX + barPadding * 2;
+ let leftY = grid.top + gridHeight;
+ let rightY = leftY;
+ for (let i = 0, len = series.length; i < len; ++i) {
+ const points = [];
+ const leftBarHeight = (rawData[i][j - 1] / totalData[j - 1]) *
gridHeight;
+ points.push([leftX, leftY]);
+ points.push([leftX, leftY - leftBarHeight]);
+ const rightBarHeight = (rawData[i][j] / totalData[j]) * gridHeight;
+ points.push([rightX, rightY - rightBarHeight]);
+ points.push([rightX, rightY]);
+ points.push([leftX, leftY]);
+
+ leftY -= leftBarHeight;
+ rightY -= rightBarHeight;
+
+ elements.push({
+ type: 'polygon',
+ shape: {
+ points
+ },
+ style: {
+ fill: color[i],
+ opacity: 0.25
+ }
+ });
+ }
+}
+
+option = {
+ legend: {
+ selectedMode: false
+ },
+ grid,
+ yAxis: {
+ type: 'value'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ series,
+ graphic: {
+ elements
+ }
+};
+
+export {};
diff --git a/public/examples/ts/bar-stack-normalization.ts
b/public/examples/ts/bar-stack-normalization.ts
new file mode 100644
index 00000000..0c7ab038
--- /dev/null
+++ b/public/examples/ts/bar-stack-normalization.ts
@@ -0,0 +1,68 @@
+/*
+title: Stacked Bar Normalization
+titleCN: 堆叠柱状图的归一化
+category: bar
+difficulty: 3
+*/
+// There should not be negative values in rawData
+const rawData = [
+ [100, 302, 301, 334, 390, 330, 320],
+ [320, 132, 101, 134, 90, 230, 210],
+ [220, 182, 191, 234, 290, 330, 310],
+ [150, 212, 201, 154, 190, 330, 410],
+ [820, 832, 901, 934, 1290, 1330, 1320]
+];
+const totalData: number[] = [];
+for (let i = 0; i < rawData[0].length; ++i) {
+ let sum = 0;
+ for (let j = 0; j < rawData.length; ++j) {
+ sum += rawData[j][i];
+ }
+ totalData.push(sum);
+}
+
+const grid = {
+ left: 100,
+ right: 100,
+ top: 50,
+ bottom: 50
+};
+
+const series = [
+ 'Direct',
+ 'Mail Ad',
+ 'Affiliate Ad',
+ 'Video Ad',
+ 'Search Engine'
+].map((name, sid) => {
+ return {
+ name,
+ type: 'bar',
+ stack: 'total',
+ barWidth: '60%',
+ label: {
+ show: true,
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
+ },
+ data: rawData[sid].map((d, did) =>
+ totalData[did] <= 0 ? 0 : d / totalData[did]
+ )
+ };
+});
+
+option = {
+ legend: {
+ selectedMode: false
+ },
+ grid,
+ yAxis: {
+ type: 'value'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ series
+};
+
+export {};
diff --git a/src/data/chart-list-data.js b/src/data/chart-list-data.js
index cab04803..6a3f4e9d 100644
--- a/src/data/chart-list-data.js
+++ b/src/data/chart-list-data.js
@@ -801,6 +801,28 @@ export default [
"titleCN": "带圆角的堆积柱状图",
"difficulty": 3
},
+ {
+ "category": [
+ "bar"
+ ],
+ "id": "bar-stack-normalization",
+ "ts": true,
+ "tags": [],
+ "title": "Stacked Bar Normalization",
+ "titleCN": "堆叠柱状图的归一化",
+ "difficulty": 3
+ },
+ {
+ "category": [
+ "bar"
+ ],
+ "id": "bar-stack-normalization-and-variation",
+ "ts": true,
+ "tags": [],
+ "title": "Stacked Bar Normalization and Variation",
+ "titleCN": "堆叠柱状图的归一化和变化",
+ "difficulty": 3
+ },
{
"category": [
"bar"
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
