From 0ce5122ae8c14f1f6a5d35e33d961013d31aab61 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Fri, 16 Oct 2020 19:37:54 +0800 Subject: [PATCH] 1.change anchorSize to size 2.pointer.icon support img/circle/rect/... 3.delete progress.slent 4.delete the code of removing in renderPointer 5.fix code style --- src/chart/gauge/GaugeSeries.ts | 8 +-- src/chart/gauge/GaugeView.ts | 104 ++++++++++++++------------------- test/gauge-distance.html | 6 +- test/gauge-pointer.html | 12 ++-- 4 files changed, 55 insertions(+), 75 deletions(-) diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts index e1e1946ec..bfe4b3608 100644 --- a/src/chart/gauge/GaugeSeries.ts +++ b/src/chart/gauge/GaugeSeries.ts @@ -55,7 +55,7 @@ interface PointerOption { interface AnchorOption { show?: boolean showAbove?: boolean - anchorSize?: number + size?: number icon?: string offsetCenter?: (number | string)[] keepAspect?: boolean @@ -67,7 +67,6 @@ interface ProgressOption { overlap?: boolean width?: number roundCap?: boolean - silent?: boolean clip?: boolean itemStyle?: ItemStyleOption } @@ -207,7 +206,6 @@ class GaugeSeriesModel extends SeriesModel { overlap: true, width: 10, roundCap: false, - silent: false, clip: true }, // 分隔线 @@ -248,7 +246,7 @@ class GaugeSeriesModel extends SeriesModel { fontSize: 12 }, pointer: { - icon: 'default', + icon: null, offsetCenter: [0, 0], show: true, length: '60%', @@ -258,7 +256,7 @@ class GaugeSeriesModel extends SeriesModel { anchor: { show: false, showAbove: false, - anchorSize: 6, + size: 6, icon: 'circle', offsetCenter: [0, 0], keepAspect: false, diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index a7f4b69c3..8592e1bf1 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -176,7 +176,7 @@ class GaugeView extends ChartView { this._renderTitleAndDetail( seriesModel, ecModel, api, getColor, posInfo - ) + ); this._renderAnchor(seriesModel, posInfo); @@ -349,12 +349,13 @@ class GaugeView extends ChartView { const pointerModel = itemModel.getModel('pointer'); const pointerWidth = parsePercent(pointerModel.get('width'), posInfo.r); const pointerLength = parsePercent(pointerModel.get('length'), posInfo.r); - const pointerStr = seriesModel.get(['pointer', 'icon']); const pointerOffset = pointerModel.get('offsetCenter'); const pointerKeepAspect = pointerModel.get('keepAspect'); + let pointer; - if (pointerStr.indexOf('path://') === 0) { + // not exist icon type will be set 'rect' + if (pointerStr) { pointer = createSymbol( pointerStr, parsePercent(pointerOffset[0], posInfo.r) - pointerWidth / 2, @@ -372,7 +373,7 @@ class GaugeView extends ChartView { width: parsePercent(pointerModel.get('width'), posInfo.r), r: parsePercent(pointerModel.get('length'), posInfo.r) } - }) + }); } pointer.rotation = -(angle + Math.PI / 2); pointer.x = posInfo.cx; @@ -388,7 +389,6 @@ class GaugeView extends ChartView { const progressWidth = isOverlap ? progressModel.get('width') : axisLineWidth / data.count(); const r0 = isOverlap ? posInfo.r - progressWidth : posInfo.r - (idx + 1) * progressWidth; const r = isOverlap ? posInfo.r : posInfo.r - idx * progressWidth; - const progressSilent = progressModel.get('silent'); const progress = new ProgressPath({ shape: { startAngle: startAngle, @@ -398,9 +398,7 @@ class GaugeView extends ChartView { clockwise: clockwise, r0: r0, r: r - }, - // 是否相应鼠标事件 - silent: progressSilent + } }); isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal); return progress; @@ -412,7 +410,8 @@ class GaugeView extends ChartView { if (showPointer) { const pointer = createPointer(idx, startAngle); graphic.initProps(pointer, { - rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2) + rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + + Math.PI / 2) }, seriesModel); group.add(pointer); data.setItemGraphicEl(idx, pointer); @@ -433,41 +432,39 @@ class GaugeView extends ChartView { .update(function (newIdx, oldIdx) { if (showPointer) { const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath; - const previousRotate = previousPointer.rotation; - group.remove(previousPointer); - const pointer = createPointer(newIdx, previousRotate); - pointer.rotation = previousRotate; - graphic.updateProps(pointer, { - rotation: -(linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + Math.PI / 2) - }, seriesModel); - group.add(pointer); - data.setItemGraphicEl(newIdx, pointer); + if (previousPointer) { + const previousRotate = previousPointer.rotation; + group.remove(previousPointer); + const pointer = createPointer(newIdx, previousRotate); + pointer.rotation = previousRotate; + graphic.updateProps(pointer, { + rotation: -( + linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + + Math.PI / 2 + ) + }, seriesModel); + group.add(pointer); + data.setItemGraphicEl(newIdx, pointer); + } } if (showProgress) { const previousProgress = oldProgressData[oldIdx]; - const previousEndAngle = previousProgress.shape.endAngle; - group.remove(previousProgress); - const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector; - const isClip = progressModel.get('clip'); - graphic.updateProps(progress, { - shape: { - endAngle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, isClip) - } - }, seriesModel); - group.add(progress); - progressList[newIdx] = progress; - } - }) - .remove(function (idx) { - if (showPointer) { - const pointer = oldData.getItemGraphicEl(idx); - group.remove(pointer); - } - - if (showProgress) { - const progress = oldProgressData[idx]; - group.remove(progress); + if (previousProgress) { + const previousEndAngle = previousProgress.shape.endAngle; + group.remove(previousProgress); + const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector; + const isClip = progressModel.get('clip'); + graphic.updateProps(progress, { + shape: { + endAngle: linearMap( + data.get(valueDim, newIdx) as number, valueExtent, angleExtent, isClip + ) + } + }, seriesModel); + group.add(progress); + progressList[newIdx] = progress; + } } }) .execute(); @@ -484,8 +481,8 @@ class GaugeView extends ChartView { linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) )); } - - (pointer as ECElement).z2EmphasisLift = 0 + + (pointer as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(pointer, itemModel); enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope')); } @@ -502,21 +499,6 @@ class GaugeView extends ChartView { this._data = data; this._progressData = progressList; } - else { - if (!showPointer) { - // Remove old element - oldData && oldData.eachItemGraphicEl(function (el) { - group.remove(el); - }); - } - - if (!showProgress) { - // Remove old element - oldProgressData && oldProgressData.forEach(function (el) { - group.remove(el); - }); - } - } } _renderAnchor( @@ -526,7 +508,7 @@ class GaugeView extends ChartView { const anchorModel = seriesModel.getModel('anchor'); const showAnchor = anchorModel.get('show'); if (showAnchor) { - const anchorSize = anchorModel.get('anchorSize'); + const anchorSize = anchorModel.get('size'); const anchorType = anchorModel.get('icon'); const offsetCenter = anchorModel.get('offsetCenter'); const anchorKeepAspect = anchorModel.get('keepAspect'); @@ -557,12 +539,12 @@ class GaugeView extends ChartView { const minVal = +seriesModel.get('min'); const maxVal = +seriesModel.get('max'); - const contentGroup = new graphic.Group; + const contentGroup = new graphic.Group(); - data.each(function(idx) { + data.each(function (idx) { const itemModel = data.getItemModel(idx); const value = data.get(valueDim, idx) as number; - const itemGroup = new graphic.Group; + const itemGroup = new graphic.Group(); const autoColor = getColor( linearMap(value, [minVal, maxVal], [0, 1], true) ); diff --git a/test/gauge-distance.html b/test/gauge-distance.html index e40a7e5e6..6d51d59cc 100644 --- a/test/gauge-distance.html +++ b/test/gauge-distance.html @@ -128,7 +128,7 @@ under the License. anchor: { show: true, showAbove: true, - anchorSize: 25, + size: 25, itemStyle: { borderWidth: 10 } @@ -478,7 +478,7 @@ under the License. }, anchor: { show: true, - anchorSize: 20, + size: 20, itemStyle: { borderColor: '#000', borderWidth: 2 @@ -530,7 +530,7 @@ under the License. }, anchor: { show: true, - anchorSize: 14, + size: 14, itemStyle: { color: '#000' // borderColor: '#000', diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index f07b4ed91..4656d98bb 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -150,7 +150,7 @@ under the License. }, anchor: { show: true, - anchorSize: 8, + size: 8, itemStyle: { color: '#5470c6' } @@ -194,7 +194,7 @@ under the License. }, anchor: { show: true, - anchorSize: 8, + size: 8, itemStyle: { color: '#5470c6' } @@ -239,7 +239,7 @@ under the License. }, anchor: { show: true, - anchorSize: 8, + size: 8, showAbove: true, itemStyle: { // borderColor: '#5470c6' @@ -350,7 +350,7 @@ under the License. icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z', showAbove: false, offsetCenter: [0, '-35%'], - anchorSize: 120, + size: 120, keepAspect: true, itemStyle: { color: '#707177' @@ -416,7 +416,7 @@ under the License. }, anchor: { show: true, - anchorSize: 20, + size: 20, showAbove: false, itemStyle: { borderWidth: 15, @@ -475,7 +475,7 @@ under the License. }, anchor: { show: true, - anchorSize: 15, + size: 15, showAbove: true, itemStyle: { color: '#C0911F', -- GitLab