diff --git a/src/component/visualMap/PiecewiseView.ts b/src/component/visualMap/PiecewiseView.ts
index d94b0ed758..93cf0e7c76 100644
--- a/src/component/visualMap/PiecewiseView.ts
+++ b/src/component/visualMap/PiecewiseView.ts
@@ -23,7 +23,7 @@ import * as graphic from '../../util/graphic';
import {createSymbol} from '../../util/symbol';
import * as layout from '../../util/layout';
import * as helper from './helper';
-import PiecewiseModel from './PiecewiseModel';
+import PiecewiseModel, { PiecewiseVisualMapOption } from './PiecewiseModel';
import { TextAlign } from 'zrender/src/core/types';
import { VisualMappingOption } from '../../visual/VisualMapping';
import { createTextStyle } from '../../label/labelStyle';
@@ -43,6 +43,7 @@ class PiecewiseVisualMapView extends VisualMapView {
const visualMapModel = this.visualMapModel;
const textGap = visualMapModel.get('textGap');
+ const selectMode = visualMapModel.get('selectedMode');
const textStyleModel = visualMapModel.textStyleModel;
const textFont = textStyleModel.getFont();
const textFill = textStyleModel.getTextColor();
@@ -68,13 +69,12 @@ class PiecewiseVisualMapView extends VisualMapView {
const representValue = visualMapModel.getRepresentValue(piece) as number;
this._createItemSymbol(
- itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]]
+ itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]], selectMode
);
if (showLabel) {
const visualState = this.visualMapModel.getValueState(representValue);
-
- itemGroup.add(new graphic.Text({
+ const itemText = new graphic.Text({
style: {
x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
y: itemSize[1] / 2,
@@ -83,9 +83,11 @@ class PiecewiseVisualMapView extends VisualMapView {
align: itemAlign as TextAlign,
font: textFont,
fill: textFill,
- opacity: visualState === 'outOfRange' ? 0.5 : 1
+ opacity: visualState === 'outOfRange' ? 0.5 : 1,
}
- }));
+ });
+ itemText.silent = !selectMode;
+ itemGroup.add(itemText);
}
thisGroup.add(itemGroup);
@@ -199,15 +201,18 @@ class PiecewiseVisualMapView extends VisualMapView {
private _createItemSymbol(
group: graphic.Group,
representValue: number,
- shapeParam: number[]
+ shapeParam: number[],
+ selectMode: PiecewiseVisualMapOption['selectedMode'],
) {
- group.add(createSymbol(
+ const itemSymbol = createSymbol(
// symbol will be string
this.getControllerVisual(representValue, 'symbol') as string,
shapeParam[0], shapeParam[1], shapeParam[2], shapeParam[3],
// color will be string
this.getControllerVisual(representValue, 'color') as string
- ));
+ );
+ itemSymbol.silent = !selectMode;
+ group.add(itemSymbol);
}
private _onItemClick(
@@ -241,4 +246,4 @@ class PiecewiseVisualMapView extends VisualMapView {
}
}
-export default PiecewiseVisualMapView;
\ No newline at end of file
+export default PiecewiseVisualMapView;
diff --git a/test/visualMap-selectMode.html b/test/visualMap-selectMode.html
new file mode 100644
index 0000000000..b254e0ea50
--- /dev/null
+++ b/test/visualMap-selectMode.html
@@ -0,0 +1,144 @@
+<!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/simpleRequire.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>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ h1 {
+ line-height: 60px;
+ height: 60px;
+ background: #a60;
+ text-align: center;
+ font-weight: bold;
+ color: #eee;
+ font-size: 14px;
+ }
+ .chart {
+ height: 500px;
+ }
+ </style>
+
+ <div class="chart" id="line-symbol"></div>
+ <div class="chart" id="line-symbol1"></div>
+
+ <script>
+ require(["echarts"], function (echarts) {
+ option = {
+ visualMap: [
+ {
+ type: "piecewise",
+ pieces: [
+ { min: 200, label: "≥ 200", color: "green" },
+ {
+ min: 150,
+ max: 199,
+ label: "150-199",
+ color: "blue",
+ },
+ { max: 149, label: "< 150", color: "red" },
+ ],
+ right: 0,
+ top: 0,
+ itemWidth: 16,
+ itemHeight: 16,
+ itemGap: 15,
+ textGap: 5,
+ orient: "horizontal",
+ },
+ ],
+ xAxis: {
+ type: "category",
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: "line",
+ },
+ ],
+ };
+ const chart = testHelper.create(echarts, "line-symbol", {
+ title: "mouse on visualMap should be **pointer**",
+ option,
+ });
+ });
+ </script>
+
+ <script>
+ require(["echarts"], function (echarts) {
+ option = {
+ visualMap: [
+ {
+ type: "piecewise",
+ selectedMode: false,
+ pieces: [
+ { min: 200, label: "≥ 200", color: "green" },
+ {
+ min: 150,
+ max: 199,
+ label: "150-199",
+ color: "blue",
+ },
+ { max: 149, label: "< 150", color: "red" },
+ ],
+ right: 0,
+ top: 0,
+ itemWidth: 16,
+ itemHeight: 16,
+ itemGap: 15,
+ textGap: 5,
+ orient: "horizontal",
+ },
+ ],
+ xAxis: {
+ type: "category",
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: "line",
+ },
+ ],
+ };
+ const chart = testHelper.create(echarts, "line-symbol1", {
+ title: "mouse on visualMap should be **default**",
+ option,
+ });
+ });
+ </script>
+ </body>
+</html>