diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts
index d4aa842a8a..c3ecbc5753 100644
--- a/src/component/visualMap/ContinuousView.ts
+++ b/src/component/visualMap/ContinuousView.ts
@@ -32,7 +32,7 @@ import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import Element, { ElementEvent } from 'zrender/src/Element';
import { TextVerticalAlign, TextAlign } from 'zrender/src/core/types';
-import { ColorString, Payload } from '../../util/types';
+import { ColorString, Payload, VerticalAlign } from '../../util/types';
import { parsePercent } from 'zrender/src/contain/text';
import { setAsHighDownDispatcher } from '../../util/states';
import { createSymbol } from '../../util/symbol';
@@ -601,6 +601,7 @@ class ContinuousView extends VisualMapView {
const handleLabels = shapes.handleLabels;
const itemSize = visualMapModel.itemSize;
const dataExtent = visualMapModel.getExtent();
+ const align = this._applyTransform('left', shapes.mainGroup);
each([0, 1], function (handleIndex) {
const handleThumb = handleThumbs[handleIndex];
@@ -618,6 +619,17 @@ class ContinuousView extends VisualMapView {
shapes.handleLabelPoints[handleIndex],
graphic.getTransform(handleThumb, this.group)
);
+
+ if (this._orient === 'horizontal') {
+ // If visualMap controls symbol size, an additional offset needs to be added to labels to avoid collision at minimum size.
+ // Offset reaches value of 0 at "maximum" position, so maximum position is not altered at all.
+ const minimumOffset = align === 'left' || align === 'top'
+ ? (itemSize[0] - symbolSize) / 2
+ : (itemSize[0] - symbolSize) / -2;
+
+ textPoint[1] += minimumOffset;
+ }
+
handleLabels[handleIndex].setStyle({
x: textPoint[0],
y: textPoint[1],
diff --git a/test/visualMap-continuous.html b/test/visualMap-continuous.html
index 848b510e8a..075f251dd8 100644
--- a/test/visualMap-continuous.html
+++ b/test/visualMap-continuous.html
@@ -36,590 +36,671 @@
font-size: 20px;
}
.main {
- height: 80%;
+ height: 600px;
}
- Color Hue
-
- Color List
-
- Map
-
- Stacked Bar (and inversed)
-
-
-
-
-
-
-
diff --git a/test/visualMap-layout.html b/test/visualMap-layout.html
index eab9325fbc..40c156dcaf 100644
--- a/test/visualMap-layout.html
+++ b/test/visualMap-layout.html
@@ -439,6 +439,96 @@
});
+ // -------------------------------------------
+
+
+ makeChart({
+ show: true,
+ splitNumber: 7,
+ text: ['高2', '低'],
+ backgroundColor: '#eee',
+ inverse: true,
+ padding: [10, 30, 5, 40],
+ calculable: true,
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ left: 200,
+ show: true,
+ inverse: true,
+ text: ['高', '低'],
+ calculable: true,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ right: 0,
+ splitNumber: 5,
+ text: ['高', '低'],
+ calculable: true,
+ dimension: 3,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ left: 0,
+ top: 0,
+ orient: 'horizontal',
+ text: ['高', '低'],
+ splitNumber: 6,
+ calculable: true,
+ inverse: true,
+ dimension: 3,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ right: 0,
+ top: 20,
+ orient: 'horizontal',
+ text: ['高', '低'],
+ splitNumber: 5,
+ align: 'bottom',
+ calculable: true,
+ dimension: 3,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ top: 40,
+ splitNumber: 6,
+ orient: 'horizontal',
+ text: ['高', '低'],
+ calculable: true,
+ dimension: 3,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });
+ makeChart({
+ left: 'center',
+ bottom: 0,
+ orient: 'horizontal',
+ splitNumber: 6,
+ text: ['高', '低'],
+ calculable: true,
+ dimension: 3,
+ backgroundColor: '#eee',
+ inRange: {
+ symbolSize: [10, 20]
+ }
+ });