feat: matrix coordinate

package.json

@@ -173,6 +173,7 @@
     "./lib/component/axisPointer": "./lib/component/axisPointer.js",
     "./lib/component/brush": "./lib/component/brush.js",
     "./lib/component/calendar": "./lib/component/calendar.js",
+    "./lib/component/matrix": "./lib/component/matrix.js",
     "./lib/component/dataZoom": "./lib/component/dataZoom.js",
     "./lib/component/dataZoomInside": "./lib/component/dataZoomInside.js",
     "./lib/component/dataZoomSelect": "./lib/component/dataZoomSelect.js",

src/chart/custom/CustomView.ts

@@ -50,6 +50,7 @@ import prepareGeo from '../../coord/geo/prepareCustom';
 import prepareSingleAxis from '../../coord/single/prepareCustom';
 import preparePolar from '../../coord/polar/prepareCustom';
 import prepareCalendar from '../../coord/calendar/prepareCustom';
+import prepareMatrix from '../../coord/matrix/prepareCustom';
 import SeriesData, { DefaultDataVisual } from '../../data/SeriesData';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../core/ExtensionAPI';
@@ -166,7 +167,8 @@ const prepareCustoms: Dictionary<PrepareCustomInfo> = {
     geo: prepareGeo,
     single: prepareSingleAxis,
     polar: preparePolar,
-    calendar: prepareCalendar
+    calendar: prepareCalendar,
+    matrix: prepareMatrix
 };
 
 

src/chart/heatmap/HeatmapView.ts

@@ -34,6 +34,7 @@ import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Calendar from '../../coord/calendar/Calendar';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import type Element from 'zrender/src/Element';
+import type Matrix from '../../coord/matrix/Matrix';
 
 // Coord can be 'geo' 'bmap' 'amap' 'leaflet'...
 interface GeoLikeCoordSys extends CoordinateSystem {
@@ -129,8 +130,11 @@ class HeatmapView extends ChartView {
         this.group.removeAll();
 
         const coordSys = seriesModel.coordinateSystem;
-        if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar') {
-            this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
+        if (coordSys.type === 'cartesian2d'
+            || coordSys.type === 'calendar'
+            || coordSys.type === 'matrix'
+        ) {
+            this._renderOnGridLike(seriesModel, api, 0, seriesModel.getData().count());
         }
         else if (isGeoCoordSys(coordSys)) {
             this._renderOnGeo(
@@ -157,7 +161,7 @@ class HeatmapView extends ChartView {
             }
             else {
                 this._progressiveEls = [];
-                this._renderOnCartesianAndCalendar(seriesModel, api, params.start, params.end, true);
+                this._renderOnGridLike(seriesModel, api, params.start, params.end, true);
             }
         }
     }
@@ -166,16 +170,16 @@ class HeatmapView extends ChartView {
         graphic.traverseElements(this._progressiveEls || this.group, cb);
     }
 
-    _renderOnCartesianAndCalendar(
+    _renderOnGridLike(
         seriesModel: HeatmapSeriesModel,
         api: ExtensionAPI,
         start: number,
         end: number,
         incremental?: boolean
     ) {
-
-        const coordSys = seriesModel.coordinateSystem as Cartesian2D | Calendar;
+        const coordSys = seriesModel.coordinateSystem as Cartesian2D | Calendar | Matrix;
         const isCartesian2d = isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d');
+        const isMatrix = isCoordinateSystemType<Matrix>(coordSys, 'matrix');
         let width;
         let height;
         let xAxisExtent;
@@ -214,7 +218,7 @@ class HeatmapView extends ChartView {
         let blurScope = emphasisModel.get('blurScope');
         let emphasisDisabled = emphasisModel.get('disabled');
 
-        const dataDims = isCartesian2d
+        const dataDims = (isCartesian2d || isMatrix)
             ? [
                 data.mapDimension('x'),
                 data.mapDimension('y'),
@@ -260,6 +264,18 @@ class HeatmapView extends ChartView {
                     style
                 });
             }
+            else if (isMatrix) {
+                rect = new graphic.Rect({
+                    z2: 1,
+                    shape: coordSys.dataToRect(
+                        [
+                            data.get(dataDims[0], idx) as string,
+                            data.get(dataDims[1], idx) as string
+                        ]
+                    ),
+                    style
+                });
+            }
             else {
                 // Ignore empty data
                 if (isNaN(data.get(dataDims[1], idx) as number)) {

src/chart/pie/PieSeries.ts

@@ -168,8 +168,9 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
      * @overwrite
      */
     getInitialData(this: PieSeriesModel): SeriesData {
+        const isMatrix = this.option.coordinateSystem === 'matrix';
         return createSeriesDataSimply(this, {
-            coordDimensions: ['value'],
+            coordDimensions: isMatrix ? ['x', 'y', 'value'] : ['value'],
             encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this)
         });
     }

src/component/matrix.ts

@@ -0,0 +1,23 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { use } from '../extension';
+import { install } from './matrix/install';
+
+use(install);

src/component/matrix/MatrixView.ts

@@ -0,0 +1,180 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import MatrixModel from '../../coord/matrix/MatrixModel';
+import ComponentView from '../../view/Component';
+import { createTextStyle } from '../../label/labelStyle';
+import * as graphic from '../../util/graphic';
+
+class MatrixView extends ComponentView {
+
+    static type = 'matrix';
+    type = MatrixView.type;
+
+    render(matrixModel: MatrixModel) {
+
+        const group = this.group;
+
+        group.removeAll();
+
+        this._renderTable(matrixModel);
+    }
+
+    protected _renderTable(matrixModel: MatrixModel) {
+        const coordSys = matrixModel.coordinateSystem;
+        const xDim = coordSys.getDim('x');
+        const yDim = coordSys.getDim('y');
+        const xModel = matrixModel.getModel('x');
+        const yModel = matrixModel.getModel('y');
+        const xLabelModel = xModel.getModel('label');
+        const yLabelModel = yModel.getModel('label');
+        const xItemStyle = xModel.getModel('itemStyle').getItemStyle();
+        const yItemStyle = yModel.getModel('itemStyle').getItemStyle();
+
+        const rect = coordSys.getRect();
+        const xLeavesCnt = xDim.getLeavesCount();
+        const yLeavesCnt = yDim.getLeavesCount();
+        const xCells = xDim.getCells();
+        const xHeight = xDim.getHeight();
+        const yCells = yDim.getCells();
+        const yHeight = yDim.getHeight();
+        const cellWidth = rect.width / (xLeavesCnt + yHeight);
+        const cellHeight = rect.height / (yLeavesCnt + xHeight);
+
+        const xLeft = rect.x + cellWidth * yHeight;
+        if (xModel.get('show')) {
+            for (let i = 0; i < xCells.length; i++) {
+                const cell = xCells[i];
+                const width = cellWidth * cell.colSpan;
+                const height = cellHeight * cell.rowSpan;
+                const left = xLeft + cellWidth * cell.colId;
+                const top = rect.y + cellHeight * cell.rowId;
+
+                const cellRect = new graphic.Rect({
+                    shape: {
+                        x: left,
+                        y: top,
+                        width: width,
+                        height: height
+                    },
+                    style: xItemStyle
+                });
+                this.group.add(cellRect);
+
+                if (xLabelModel.get('show')) {
+                    cellRect.setTextConfig({
+                        position: 'inside'
+                    });
+                    cellRect.setTextContent(
+                        new graphic.Text({
+                            style: createTextStyle(xLabelModel, {
+                                text: cell.value,
+                                verticalAlign: 'middle',
+                                align: 'center'
+                            }),
+                            silent: xLabelModel.get('silent')
+                        })
+                    );
+                }
+            }
+        }
+
+        const yTop = rect.y + cellHeight * xHeight;
+        if (yModel.get('show')) {
+            for (let i = 0; i < yCells.length; i++) {
+                const cell = yCells[i];
+                const width = cellWidth * cell.rowSpan;
+                const height = cellHeight * cell.colSpan;
+                const left = rect.x + cellWidth * cell.rowId;
+                const top = yTop + cellHeight * cell.colId;
+
+                this.group.add(new graphic.Rect({
+                    shape: {
+                        x: left,
+                        y: top,
+                        width: width,
+                        height: height
+                    },
+                    style: yItemStyle
+                }));
+                if (yLabelModel.get('show')) {
+                    this.group.add(new graphic.Text({
+                        style: createTextStyle(yLabelModel, {
+                            text: cell.value,
+                            x: left + width / 2,
+                            y: top + height / 2,
+                            verticalAlign: 'middle',
+                            align: 'center'
+                        })
+                    }));
+                }
+            }
+        }
+
+        // Inner cells
+        const innerBackgroundStyle = matrixModel
+            .getModel('innerBackgroundStyle')
+            .getItemStyle();
+        for (let i = 0; i < xLeavesCnt; i++) {
+            for (let j = 0; j < yLeavesCnt; j++) {
+                const left = xLeft + cellWidth * i;
+                const top = yTop + cellHeight * j;
+                this.group.add(new graphic.Rect({
+                    shape: {
+                        x: left,
+                        y: top,
+                        width: cellWidth,
+                        height: cellHeight
+                    },
+                    style: innerBackgroundStyle
+                }));
+            }
+        }
+
+        // Outer border
+        const backgroundStyle = matrixModel
+            .getModel('backgroundStyle')
+            .getItemStyle();
+        this.group.add(new graphic.Rect({
+            shape: rect,
+            style: backgroundStyle
+        }));
+        // Header border
+        this.group.add(new graphic.Line({
+            shape: {
+                x1: rect.x,
+                y1: yTop,
+                x2: rect.x + rect.width,
+                y2: yTop
+            },
+            style: backgroundStyle
+        }));
+        this.group.add(new graphic.Line({
+            shape: {
+                x1: xLeft,
+                y1: rect.y,
+                x2: xLeft,
+                y2: rect.y + rect.height
+            },
+            style: backgroundStyle
+        }));
+    }
+}
+
+export default MatrixView;

src/component/matrix/install.ts

@@ -0,0 +1,29 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { EChartsExtensionInstallRegisters } from '../../extension';
+import MatrixModel from '../../coord/matrix/MatrixModel';
+import MatrixView from './MatrixView';
+import Matrix from '../../coord/matrix/Matrix';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerComponentModel(MatrixModel);
+    registers.registerComponentView(MatrixView);
+    registers.registerCoordinateSystem('matrix', Matrix);
+}