feat(state): support blur scope to be coordinateSystem

src/chart/bar/PictorialBarView.ts

@@ -144,7 +144,7 @@ class PictorialBarView extends ChartView {
         const cartesian = seriesModel.coordinateSystem;
         const baseAxis = cartesian.getBaseAxis();
         const isHorizontal = baseAxis.isHorizontal();
-        const coordSysRect = cartesian.grid.getRect();
+        const coordSysRect = cartesian.master.getRect();
 
         const opt: CreateOpts = {
             ecSize: {width: api.getWidth(), height: api.getHeight()},

src/component/helper/BrushTargetManager.ts

@@ -396,7 +396,7 @@ const panelRectBuilders: Record<BrushTargetBuilderKey, PanelRectBuilder> = {
 
     grid: function (this: BrushTargetInfoCartesian2D) {
         // grid is not Transformable.
-        return this.coordSys.grid.getRect().clone();
+        return this.coordSys.master.getRect().clone();
     },
 
     geo: function (this: BrushTargetInfoGeo) {

src/coord/CoordinateSystem.ts

@@ -99,6 +99,12 @@ export interface CoordinateSystem {
 
     type: string
 
+    /**
+     * Master of coordinate system. For example:
+     * Grid is master of cartesian.
+     */
+    master?: CoordinateSystemMaster
+
     // Should be the same as its coordinateSystemCreator.
     dimensions: DimensionName[];
 

src/coord/cartesian/Cartesian2D.ts

@@ -23,8 +23,8 @@ import Cartesian from './Cartesian';
 import { ScaleDataValue } from '../../util/types';
 import Axis2D from './Axis2D';
 import { CoordinateSystem } from '../CoordinateSystem';
-import Grid from './Grid';
 import GridModel from './GridModel';
+import Grid from './Grid';
 
 export const cartesian2DDimensions = ['x', 'y'];
 
@@ -34,10 +34,10 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
 
     readonly dimensions = cartesian2DDimensions;
 
-    // Injected
-    grid: Grid;
     model: GridModel;
 
+    master: Grid;
+
     /**
      * Base axis will be used on stacking.
      */

src/coord/cartesian/Grid.ts

@@ -333,12 +333,12 @@ class Grid implements CoordinateSystemMaster {
         this._axesMap = axesMap;
 
         /// Create cartesian2d
-        each(axesMap.x, function (xAxis, xAxisIndex) {
-            each(axesMap.y, function (yAxis, yAxisIndex) {
+        each(axesMap.x, (xAxis, xAxisIndex) => {
+            each(axesMap.y, (yAxis, yAxisIndex) => {
                 const key = 'x' + xAxisIndex + 'y' + yAxisIndex;
                 const cartesian = new Cartesian2D(key);
 
-                cartesian.grid = this;
+                cartesian.master = this;
                 cartesian.model = gridModel;
 
                 this._coordsMap[key] = cartesian;
@@ -346,8 +346,8 @@ class Grid implements CoordinateSystemMaster {
 
                 cartesian.addAxis(xAxis);
                 cartesian.addAxis(yAxis);
-            }, this);
-        }, this);
+            });
+        });
 
         function createAxisCreator(dimName: Cartesian2DDimensionName) {
             return function (axisModel: CartesianAxisModel, idx: number): void {

src/coord/cartesian/prepareCustom.ts

@@ -34,7 +34,7 @@ function dataToCoordSize(this: Cartesian2D, dataSize: number[], dataItem: number
 }
 
 export default function (coordSys: Cartesian2D) {
-    const rect = coordSys.grid.getRect();
+    const rect = coordSys.master.getRect();
     return {
         coordSys: {
             // The name exposed to user is always 'cartesian2d' but not 'grid'.

src/layout/barGrid.ts

@@ -548,7 +548,7 @@ export const largeLayout: StageHandler = {
 
         const data = seriesModel.getData();
         const cartesian = seriesModel.coordinateSystem as Cartesian2D;
-        const coordLayout = cartesian.grid.getRect();
+        const coordLayout = cartesian.master.getRect();
         const baseAxis = cartesian.getBaseAxis();
         const valueAxis = cartesian.getOtherAxis(baseAxis);
         const valueDim = data.mapDimension(valueAxis.dim);

src/util/states.ts

@@ -16,6 +16,8 @@ import {
 import * as colorTool from 'zrender/src/tool/color';
 import { EChartsType } from '../echarts';
 import List from '../data/List';
+import SeriesModel from '../model/Series';
+import { CoordinateSystemMaster, CoordinateSystem } from '../coord/CoordinateSystem';
 
 // Reserve 0 as default.
 export let _highlightNextDigit = 1;
@@ -315,11 +317,25 @@ export function toggleSeriesBlurStates(
         }
     }
 
+    const targetSeriesModel = model.getSeriesByIndex(targetSeriesIndex);
+    let targetCoordSys: CoordinateSystemMaster | CoordinateSystem = targetSeriesModel.coordinateSystem;
+    if (targetCoordSys && (targetCoordSys as CoordinateSystem).master) {
+        targetCoordSys = (targetCoordSys as CoordinateSystem).master;
+    }
+
     model.eachSeries(function (seriesModel) {
-        const sameSeries = targetSeriesIndex === seriesModel.seriesIndex;
+        const sameSeries = targetSeriesModel === seriesModel;
+        let coordSys: CoordinateSystemMaster | CoordinateSystem = seriesModel.coordinateSystem;
+        if (coordSys && (coordSys as CoordinateSystem).master) {
+            coordSys = (coordSys as CoordinateSystem).master;
+        }
         if (!(
-            blurScope === 'series' && !sameSeries   // Not blur other series if blurScope series
-          || focus === 'series' && sameSeries   // Not blur self series if focus is series.
+            // Not blur other series if blurScope series
+            blurScope === 'series' && !sameSeries
+            // Not blur other coordinate system if blurScope is coordinateSystem
+          || blurScope === 'coordinateSystem' && !(coordSys && targetCoordSys && coordSys === targetCoordSys)
+            // Not blur self series if focus is series.
+          || focus === 'series' && sameSeries
           // TODO blurScope: coordinate system
         )) {
             const view = ecIns.getViewOfSeriesModel(seriesModel);

test/hoverFocus2.html

+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
+
+
+
+
+        <script>
+            function makeToggleChartButtons(changeFocus) {
+                return  [{
+                    text: 'Set focus: series',
+                    onclick: function () {
+                        changeFocus({ focus: 'series' });
+                    }
+                }, {
+                    text: 'Set focus: self',
+                    onclick: function () {
+                        changeFocus({ focus: 'self' });
+                    }
+                }, {
+                    text: 'Set blurScope: series',
+                    onclick: function () {
+                        changeFocus({ blurScope: 'series' });
+                    }
+                }, {
+                    text: 'Set blurScope: coordinateSystem',
+                    onclick: function () {
+                        changeFocus({ blurScope: 'coordinateSystem' });
+                    }
+                }, {
+                    text: 'Set blurScope: all',
+                    onclick: function () {
+                        changeFocus({ blurScope: 'all' });
+                    }
+                }];
+            }
+        </script>
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                grid: {
+                    right: '20%'
+                },
+                legend: {
+                    data: ['蒸发量', '降水量', '平均温度']
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisTick: {
+                            alignWithLabel: true
+                        },
+                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '蒸发量',
+                        min: 0,
+                        max: 250,
+                        position: 'right',
+                        axisLabel: {
+                            formatter: '{value} ml'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '降水量',
+                        min: 0,
+                        max: 250,
+                        position: 'right',
+                        offset: 80,
+                        axisLabel: {
+                            formatter: '{value} ml'
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '温度',
+                        min: 0,
+                        max: 25,
+                        position: 'left',
+                        axisLabel: {
+                            formatter: '{value} °C'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '蒸发量',
+                        type: 'bar',
+                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+                    },
+                    {
+                        name: '降水量',
+                        type: 'bar',
+                        yAxisIndex: 1,
+                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+                    },
+                    {
+                        name: '平均温度',
+                        type: 'line',
+                        yAxisIndex: 2,
+                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+                    }
+                ]
+            };
+
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Multiple series on same grid'
+                ],
+                buttons: makeToggleChartButtons(function (newOpt) {
+                    option.series.forEach(function (seriesOpt) {
+                        seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
+                    });
+                    chart.setOption(option);
+                }),
+                option: option
+            });
+        });
+        </script>
+
+
+        <script>
+            require(['echarts'/*, 'map/js/china' */], function (echarts) {
+                var dataAll = [
+                    [
+                        [10.0, 8.04],
+                        [8.0, 6.95],
+                        [13.0, 7.58],
+                        [9.0, 8.81],
+                        [11.0, 8.33],
+                        [14.0, 9.96],
+                        [6.0, 7.24],
+                        [4.0, 4.26],
+                        [12.0, 10.84],
+                        [7.0, 4.82],
+                        [5.0, 5.68]
+                    ],
+                    [
+                        [10.0, 9.14],
+                        [8.0, 8.14],
+                        [13.0, 8.74],
+                        [9.0, 8.77],
+                        [11.0, 9.26],
+                        [14.0, 8.10],
+                        [6.0, 6.13],
+                        [4.0, 3.10],
+                        [12.0, 9.13],
+                        [7.0, 7.26],
+                        [5.0, 4.74]
+                    ],
+                    [
+                        [10.0, 7.46],
+                        [8.0, 6.77],
+                        [13.0, 12.74],
+                        [9.0, 7.11],
+                        [11.0, 7.81],
+                        [14.0, 8.84],
+                        [6.0, 6.08],
+                        [4.0, 5.39],
+                        [12.0, 8.15],
+                        [7.0, 6.42],
+                        [5.0, 5.73]
+                    ],
+                    [
+                        [8.0, 6.58],
+                        [8.0, 5.76],
+                        [8.0, 7.71],
+                        [8.0, 8.84],
+                        [8.0, 8.47],
+                        [8.0, 7.04],
+                        [8.0, 5.25],
+                        [19.0, 12.50],
+                        [8.0, 5.56],
+                        [8.0, 7.91],
+                        [8.0, 6.89]
+                    ]
+                ];
+
+                var markLineOpt = {
+                    animation: false,
+                    label: {
+                        formatter: 'y = 0.5 * x + 3',
+                        align: 'right'
+                    },
+                    lineStyle: {
+                        type: 'solid'
+                    },
+                    tooltip: {
+                        formatter: 'y = 0.5 * x + 3'
+                    },
+                    data: [[{
+                        coord: [0, 3],
+                        symbol: 'none'
+                    }, {
+                        coord: [20, 13],
+                        symbol: 'none'
+                    }]]
+                };
+
+                option = {
+                    title: {
+                        text: 'Anscombe\'s quartet',
+                        left: 'center',
+                        top: 0
+                    },
+                    grid: [
+                        {x: '7%', y: '7%', width: '38%', height: '38%'},
+                        {x2: '7%', y: '7%', width: '38%', height: '38%'},
+                        {x: '7%', y2: '7%', width: '38%', height: '38%'},
+                        {x2: '7%', y2: '7%', width: '38%', height: '38%'}
+                    ],
+                    tooltip: {
+                        formatter: 'Group {a}: ({c})'
+                    },
+                    xAxis: [
+                        {gridIndex: 0, min: 0, max: 20},
+                        {gridIndex: 1, min: 0, max: 20},
+                        {gridIndex: 2, min: 0, max: 20},
+                        {gridIndex: 3, min: 0, max: 20}
+                    ],
+                    yAxis: [
+                        {gridIndex: 0, min: 0, max: 15},
+                        {gridIndex: 1, min: 0, max: 15},
+                        {gridIndex: 2, min: 0, max: 15},
+                        {gridIndex: 3, min: 0, max: 15}
+                    ],
+                    series: [
+                        {
+                            name: 'I',
+                            type: 'scatter',
+                            xAxisIndex: 0,
+                            yAxisIndex: 0,
+                            data: dataAll[0],
+                            symbolSize: 20,
+                            markLine: markLineOpt
+                        },
+                        {
+                            name: 'II',
+                            type: 'scatter',
+                            xAxisIndex: 1,
+                            yAxisIndex: 1,
+                            data: dataAll[1],
+                            symbolSize: 20,
+                            markLine: markLineOpt
+                        },
+                        {
+                            name: 'III',
+                            type: 'scatter',
+                            xAxisIndex: 2,
+                            yAxisIndex: 2,
+                            data: dataAll[2],
+                            symbolSize: 20,
+                            markLine: markLineOpt
+                        },
+                        {
+                            name: 'IV',
+                            type: 'scatter',
+                            xAxisIndex: 3,
+                            yAxisIndex: 3,
+                            data: dataAll[3],
+                            symbolSize: 20,
+                            markLine: markLineOpt
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'Multiple grid'
+                    ],
+                    buttons: makeToggleChartButtons(function (newOpt) {
+                        option.series.forEach(function (seriesOpt) {
+                            seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
+                        });
+                        chart.setOption(option);
+                    }),
+                    option: option
+                });
+            });
+            </script>
+
+    </body>
+</html>
+