From 493f54cf8fe589d4328908351751d53da7da91e3 Mon Sep 17 00:00:00 2001 From: quillblue Date: Sun, 19 Jul 2020 11:08:32 +0800 Subject: [PATCH 1/2] fix #12969 - Skip rendering for data out of axis content in heatmap --- src/chart/heatmap/HeatmapView.ts | 7 +- test/heatmap.html | 218 ++++++++++++++++++++----------- 2 files changed, 146 insertions(+), 79 deletions(-) diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts index 3cfae66fab..d5cd460b2b 100644 --- a/src/chart/heatmap/HeatmapView.ts +++ b/src/chart/heatmap/HeatmapView.ts @@ -163,6 +163,8 @@ class HeatmapView extends ChartView { const coordSys = seriesModel.coordinateSystem as Cartesian2D | Calendar; let width; let height; + let xAxisExtent; + let yAxisExtent; if (isCoordinateSystemType(coordSys, 'cartesian2d')) { const xAxis = coordSys.getAxis('x'); @@ -179,6 +181,7 @@ class HeatmapView extends ChartView { width = xAxis.getBandWidth(); height = yAxis.getBandWidth(); + xAxisExtent=xAxis.scale.getExtent(); } const group = this.group; @@ -203,8 +206,8 @@ class HeatmapView extends ChartView { let rect; if (isCoordinateSystemType(coordSys, 'cartesian2d')) { - // Ignore empty data - if (isNaN(data.get(dataDims[2], idx) as number)) { + // Ignore empty data and out of extent data + if (isNaN(data.get(dataDims[2], idx) as number) || data.get(dataDims[0], idx) < xAxisExtent[0] || data.get(dataDims[0], idx) > xAxisExtent[1]) { continue; } diff --git a/test/heatmap.html b/test/heatmap.html index 89c7303d00..fc1456aae0 100644 --- a/test/heatmap.html +++ b/test/heatmap.html @@ -1,4 +1,3 @@ - - - - - - - - - -
- + + + - var chart = echarts.init(document.getElementById('main')); + + +
+
+ + - - \ No newline at end of file From f8031efb797f258f9347d57cfeaf23de8c997753 Mon Sep 17 00:00:00 2001 From: quillblue Date: Sun, 19 Jul 2020 14:42:36 +0800 Subject: [PATCH 2/2] Update HeatmapView.ts according to code review comment --- src/chart/heatmap/HeatmapView.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts index d5cd460b2b..f10d742e6b 100644 --- a/src/chart/heatmap/HeatmapView.ts +++ b/src/chart/heatmap/HeatmapView.ts @@ -17,7 +17,7 @@ * under the License. */ -import {__DEV__} from '../../config'; +import { __DEV__ } from '../../config'; import * as graphic from '../../util/graphic'; import HeatmapLayer from './HeatmapLayer'; import * as zrUtil from 'zrender/src/core/util'; @@ -181,7 +181,8 @@ class HeatmapView extends ChartView { width = xAxis.getBandWidth(); height = yAxis.getBandWidth(); - xAxisExtent=xAxis.scale.getExtent(); + xAxisExtent = xAxis.scale.getExtent(); + yAxisExtent = yAxis.scale.getExtent(); } const group = this.group; @@ -206,14 +207,18 @@ class HeatmapView extends ChartView { let rect; if (isCoordinateSystemType(coordSys, 'cartesian2d')) { + const dataDimX = data.get(dataDims[0], idx); + const dataDimY = data.get(dataDims[1], idx); + // Ignore empty data and out of extent data - if (isNaN(data.get(dataDims[2], idx) as number) || data.get(dataDims[0], idx) < xAxisExtent[0] || data.get(dataDims[0], idx) > xAxisExtent[1]) { + if (isNaN(data.get(dataDims[2], idx) as number) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] + || dataDimY < yAxisExtent[0] || dataDimY > yAxisExtent[1]) { continue; } const point = coordSys.dataToPoint([ - data.get(dataDims[0], idx), - data.get(dataDims[1], idx) + dataDimX, + dataDimY ]); rect = new graphic.Rect({