This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch fix-heatmap in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 0f86a100b838fc19ade0962cef6cd5591a8013a2 Author: plainheart <y...@all-my-life.cn> AuthorDate: Mon Nov 7 00:37:07 2022 +0800 fix(heatmap): fix heatmap label may overlap when the dataZoom is enabled --- src/chart/heatmap/HeatmapView.ts | 8 ++- test/heatmap.html | 112 ++++++++++++++++++++++++++++++++++++- test/runTest/actions/__meta__.json | 2 +- test/runTest/actions/heatmap.json | 2 +- 4 files changed, 118 insertions(+), 6 deletions(-) diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts index 88933e278..d0de889ba 100644 --- a/src/chart/heatmap/HeatmapView.ts +++ b/src/chart/heatmap/HeatmapView.ts @@ -33,7 +33,7 @@ import { StageHandlerProgressParams, Dictionary, OptionDataValue } from '../../u import type Cartesian2D from '../../coord/cartesian/Cartesian2D'; import type Calendar from '../../coord/calendar/Calendar'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; -import Element from 'zrender/src/Element'; +import type Element from 'zrender/src/Element'; // Coord can be 'geo' 'bmap' 'amap' 'leaflet'... interface GeoLikeCoordSys extends CoordinateSystem { @@ -94,7 +94,7 @@ function getIsInContinuousRange(dataExtent: number[], range: number[]) { function isGeoCoordSys(coordSys: CoordinateSystem): coordSys is GeoLikeCoordSys { const dimensions = coordSys.dimensions; - // Not use coorSys.type === 'geo' because coordSys maybe extended + // Not use coordSys.type === 'geo' because coordSys maybe extended return dimensions[0] === 'lng' && dimensions[1] === 'lat'; } @@ -235,6 +235,8 @@ class HeatmapView extends ChartView { // Ignore empty data and out of extent data if (isNaN(data.get(dataDims[2], idx) as number) + || isNaN(dataDimX as number) + || isNaN(dataDimY as number) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] || dataDimY < yAxisExtent[0] @@ -271,7 +273,7 @@ class HeatmapView extends ChartView { }); } - // Optimization for large datset + // Optimization for large dataset if (data.hasItemOption) { const itemModel = data.getItemModel<HeatmapDataItemOption>(idx); const emphasisModel = itemModel.getModel('emphasis'); diff --git a/test/heatmap.html b/test/heatmap.html index 36276aad4..a4cacdecd 100644 --- a/test/heatmap.html +++ b/test/heatmap.html @@ -23,6 +23,8 @@ under the License. <meta charset="utf-8"> <script src="lib/simpleRequire.js"></script> <script src="lib/config.js"></script> + <script src="lib/testHelper.js"></script> + <link rel="stylesheet" href="lib/reset.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> @@ -39,6 +41,7 @@ under the License. </style> <div id="main"></div> <div id="main2"></div> + <div id="main3"></div> <script> require([ @@ -162,6 +165,113 @@ under the License. }); </script> + + <script> + require(['echarts'], function (echarts) { + var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, [...] + .map(function (item) { + return [item[1], item[0], item[2] || '-']; + }); + var hours = [ + '12a', + '1a', + '2a', + '3a', + '4a', + '5a', + '6a', + '7a', + '8a', + '9a', + '10a', + '11a', + '12p', + '1p', + '2p', + '3p', + '4p', + '5p', + '6p', + '7p', + '8p', + '9p', + '10p', + '11p' + ]; + var days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday']; + var option = { + tooltip: { + position: 'top' + }, + grid: { + height: '50%', + top: '10%' + }, + xAxis: { + type: 'category', + data: hours, + splitArea: { + show: true + } + }, + yAxis: { + type: 'category', + data: days, + splitArea: { + show: true + } + }, + visualMap: { + min: 0, + max: 10, + calculable: true, + orient: 'horizontal', + left: 'center', + bottom: '15%' + }, + series: [ + { + name: 'Punch Card', + type: 'heatmap', + data: data, + label: { + show: true + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ], + animation: false, + dataZoom: [ + { + type: 'slider', + yAxisIndex: 0, + filterMode: 'empty', + start: 0, + end: 15, + right: 25 + }, + { + type: 'slider', + xAxisIndex: 0, + filterMode: 'empty', + start: 0, + end: 50 + } + ] + }; + var chart = testHelper.create(echarts, 'main3', { + title: [ + 'Operate the slider, heatmap label shouldn\'t overlap' + ], + option: option + }); + }); + </script> </body> -</html> \ No newline at end of file +</html> diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index a72207f78..fa5ae814f 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -105,7 +105,7 @@ "graphic-cases": 2, "graphic-draggable": 1, "graphic-transition": 3, - "heatmap": 1, + "heatmap": 2, "heatmap-gap-bug": 1, "heatmap-map": 1, "homepage3": 1, diff --git a/test/runTest/actions/heatmap.json b/test/runTest/actions/heatmap.json index 671b155d2..d8b1813dd 100644 --- a/test/runTest/actions/heatmap.json +++ b/test/runTest/actions/heatmap.json @@ -1 +1 @@ -[{"name":"Action 1","ops":[{"type":"mousedown","time":264,"x":12,"y":447},{"type":"mousemove","time":324,"x":12,"y":447},{"type":"mousemove","time":535,"x":13,"y":491},{"type":"mouseup","time":703,"x":13,"y":491},{"time":704,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":740,"x":13,"y":491},{"type":"mousemove","time":941,"x":12,"y":583},{"type":"mousemove","time":1142,"x":12,"y":584},{"type":"mousemove","time":1358,"x":13,"y":589},{"type":"mousedown","time":1366,"x":13, [...] \ No newline at end of file +[{"name":"Action 1","ops":[{"type":"mousedown","time":264,"x":12,"y":447},{"type":"mousemove","time":324,"x":12,"y":447},{"type":"mousemove","time":535,"x":13,"y":491},{"type":"mouseup","time":703,"x":13,"y":491},{"time":704,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":740,"x":13,"y":491},{"type":"mousemove","time":941,"x":12,"y":583},{"type":"mousemove","time":1142,"x":12,"y":584},{"type":"mousemove","time":1358,"x":13,"y":589},{"type":"mousedown","time":1366,"x":13, [...] \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org