This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/dev by this push:
new 1d54d0eb matrix: add and fix test case.
1d54d0eb is described below
commit 1d54d0eb8d68c4421d9af49af8a454412ce124dd
Author: 100pah <[email protected]>
AuthorDate: Mon Jun 30 10:35:12 2025 +0800
matrix: add and fix test case.
---
README.md | 12 +-
public/examples/ts/matrix-confusion.ts | 11 +-
public/examples/ts/matrix-grid-layout.ts | 190 +++++++++++++++++++++++++++++++
3 files changed, 202 insertions(+), 11 deletions(-)
diff --git a/README.md b/README.md
index ef992da1..e3a4e662 100644
--- a/README.md
+++ b/README.md
@@ -144,11 +144,13 @@ exe_something > 1.log 2>&1
If you are testing a new version of echarts or zrender, which are not released
in github yet, you need run e2e test with local dependent repos.
-Firstly, make sure the dependent repos listed in `dir` attributes in
`echarts-examples/e2e/config.js` existing and having release built.
-
-Note: the commands below will execute `npm install` in these local directories.
+1. Make sure the dependent repos listed in `dir` attributes in
`echarts-examples/e2e/config.js` existing. (If using `npm run test:e2e:local`
or `npm run test:e2e:esbuild:local`, the local repo will be fetched from the
`dir` attributes. Otherwise, download the remote repo from the `git`
attributes.)
+2. Make sure the local repos have release build, typically, `npm run release`
has been performed.
+3. Start e2e test:
```shell
+# Notice: the commands below will execute `npm install` in these local
directories.
+
# run e2e using local dependent repos and webpack.
npm run test:e2e:local > result.log 2>&1
# run e2e using local dependent repos and esbuild, which is much faster.
@@ -157,9 +159,9 @@ npm run test:e2e:esbuild:local > result.log 2>&1
### Run e2e test using remote dependent repos
-Note: the commands below will download the repos listed in
`echarts-examples/e2e/config.js` to a temporary folder.
-
```shell
+# Notice: the commands below will download the repos listed in
`echarts-examples/e2e/config.js` to a temporary folder.
+
# run e2e using remote dependent repos and webpack.
npm run test:e2e > result.log 2>&1
# run e2e using remote dependent repos and esbuild, which is much faster.
diff --git a/public/examples/ts/matrix-confusion.ts
b/public/examples/ts/matrix-confusion.ts
index 51714f1d..3f014a21 100644
--- a/public/examples/ts/matrix-confusion.ts
+++ b/public/examples/ts/matrix-confusion.ts
@@ -65,15 +65,14 @@ option = {
renderItem: function (params, api) {
const x = api.value(0);
const y = api.value(1);
- const center = api.coord([x, y]);
- const size = api.size([x, y]);
+ const rect = api.layout([x, y]).rect;
return {
type: 'rect',
shape: {
- x: center[0] - size[0] / 2,
- y: center[1] - size[1] / 2,
- width: size[0],
- height: size[1]
+ x: rect.x,
+ y: rect.y,
+ width: rect.width,
+ height: rect.height,
},
style: api.style({
fill: x === y ? '#8f8' : '#f88'
diff --git a/public/examples/ts/matrix-grid-layout.ts
b/public/examples/ts/matrix-grid-layout.ts
new file mode 100644
index 00000000..0703c121
--- /dev/null
+++ b/public/examples/ts/matrix-grid-layout.ts
@@ -0,0 +1,190 @@
+/*
+title: Tiny Charts in Matrix (Line Charts)
+category: matrix
+titleCN: 矩阵坐标系中的微型折线图
+difficulty: 2
+*/
+
+const _matrixDimensionData = {
+ x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+ y: [
+ {value: '8:00\n~\n10:00'},
+ {value: '10:00\n~\n12:00'},
+ {value: '12:00\n~\n14:00', size: 55},
+ {value: '14:00\n~\n16:00'},
+ {value: '16:00\n~\n18:00'},
+ {value: '18:00\n~\n20:00'},
+ ]
+};
+const _yBreakTimeIndex = 2; // '12:00 - 14:00',
+const _seriesFakeDataLength = 365;
+
+
+option = {
+ matrix: {
+ x: {
+ data: _matrixDimensionData.x,
+ levelSize: 40,
+ label: {
+ fontSize: 16,
+ color: '#555'
+ }
+ },
+ y: {
+ data: _matrixDimensionData.y,
+ levelSize: 70,
+ label: {
+ fontSize: 14,
+ color: '#777'
+ }
+ },
+ corner: {
+ data: [
+ {
+ coord: [-1, -1],
+ value: 'Time'
+ }
+ ],
+ label: {
+ fontSize: 16,
+ color: '#777'
+ }
+ },
+ body: {
+ data: [
+ {
+ coord: [null, _yBreakTimeIndex],
+ mergeCells: true,
+ value: 'Break',
+ label: {
+ color: '#999',
+ fontSize: 16
+ }
+ }
+ ]
+ },
+ top: 30,
+ bottom: 80,
+ width: '90%',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: {
+ type: 'slider',
+ xAxisIndex: 'all',
+ left: '10%',
+ right: '10%',
+ bottom: 30,
+ height: 30,
+ throttle: 120
+ },
+ grid: [], // Fill it for each matrix cell below
+ xAxis: [], // Fill it for each matrix cell below
+ yAxis: [], // Fill it for each matrix cell below
+ series: [], // Fill it for each matrix cell below
+};
+
+eachMatrixCell((xval, yval, xidx, yidx) => {
+ const id = makeId(xidx, yidx);
+ option.grid.push({
+ id: id,
+ coordinateSystem: 'matrix',
+ coord: [xval, yval],
+ top: 10,
+ bottom: 10,
+ left: 'center',
+ width: '90%',
+ containLabel: true
+ });
+
+ option.xAxis.push({
+ type: 'category',
+ id: id,
+ gridId: id,
+ scale: true,
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ axisLine: { show: false },
+ splitLine: { show: false }
+ });
+
+ option.yAxis.push({
+ id: id,
+ gridId: id,
+ interval: Number.MAX_SAFE_INTEGER,
+ scale: true,
+ axisLabel: {
+ showMaxLabel: true,
+ fontSize: 9
+ },
+ axisLine: { show: false },
+ axisTick: { show: false }
+ });
+
+ option.series.push({
+ xAxisId: id,
+ yAxisId: id,
+ type: 'line',
+ symbol: 'none',
+ lineStyle: {
+ lineWidth: 1
+ },
+ data: generateFakeSeriesData(_seriesFakeDataLength, xidx, yidx),
+ });
+});
+
+
+// ------ Helpers Start ------
+function makeId(xidx: number, yidx: number): string {
+ return `${xidx}|${yidx}`;
+}
+
+function eachMatrixCell(
+ cb: (xval: string, yval: string, xidx: number, yidx: number) => void
+): void {
+ _matrixDimensionData.y.forEach((yvalItem, yidx) => {
+ const yval = yvalItem.value;
+ if (yidx === _yBreakTimeIndex) {
+ return;
+ }
+ _matrixDimensionData.x.forEach((xval, xidx) => {
+ cb(xval, yval, xidx, yidx);
+ });
+ });
+}
+
+function generateFakeSeriesData(dayCount: number, xidx: number, yidx: number) {
+ const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday
+ dayStart.setDate(xidx + 5);
+ const timeStart = dayStart.getTime();
+ const sevenDay = 7 * 1000 * 3600 * 24;
+ const cellData = [];
+ let lastVal = +(Math.random() * 300).toFixed(0);
+
+ let turnCount = null;
+ let sign = -1;
+ for (let idx = 0; idx < dayCount; idx++) {
+ if (turnCount == null || idx >= turnCount) {
+ turnCount =
+ idx + Math.round((dayCount / 4) * ((Math.random() - 0.5) * 0.1));
+ sign = -sign;
+ }
+ const deltaMag = 50;
+ const delta = +(
+ Math.random() * deltaMag -
+ deltaMag / 2 +
+ (sign * deltaMag) / 3
+ ).toFixed(0);
+ const val = Math.max(0, (lastVal += delta));
+ const xTime = timeStart + idx * sevenDay;
+ const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}');
+ cellData.push([dataXVal, val]);
+ }
+
+ return cellData;
+}
+// ------ Helpers End ------
+
+export {};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
