From 485bcf7d1c102ae2f4de23dada2d9e0472335e5e Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Wed, 30 Sep 2020 22:04:42 +0800 Subject: [PATCH 01/14] 1. add splitLine.distance & axisTick.distance 2. add anchor 3. support svg of pointer 4. add progress --- src/chart/gauge/GaugeSeries.ts | 91 ++++-- src/chart/gauge/GaugeView.ts | 300 ++++++++++++----- src/theme/dark.ts | 13 +- src/util/types.ts | 1 + test/gauge-distance.html | 569 +++++++++++++++++++++++++++++++++ test/gauge-pointer.html | 313 ++++++++++++++++++ test/gauge-progress.html | 320 ++++++++++++++++++ test/gauge.html | 97 +++++- 8 files changed, 1597 insertions(+), 107 deletions(-) create mode 100644 test/gauge-distance.html create mode 100644 test/gauge-pointer.html create mode 100644 test/gauge-progress.html diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts index 5910081d37..f3521e8609 100644 --- a/src/chart/gauge/GaugeSeries.ts +++ b/src/chart/gauge/GaugeSeries.ts @@ -40,14 +40,33 @@ interface LabelFormatter { } interface PointerOption { + icon?: string show?: boolean + keepAspect?: boolean + itemStyle?: ItemStyleOption /** * Can be percent */ + offsetCenter?: (number | string)[] length?: number | string width?: number } +interface AnchorOption { + show?: boolean + anchorSize?: number + itemStyle?: ItemStyleOption +} + +interface ProgressOption { + show?: boolean + overlap?: boolean + width?: number + roundCap?: boolean + silent?: boolean + itemStyle?: ItemStyleOption +} + export interface GaugeStateOption { itemStyle?: ItemStyleOption } @@ -56,6 +75,7 @@ export interface GaugeDataItemOption extends GaugeStateOption, StatesOptionMixin name?: string value?: OptionDataValueNumeric pointer?: PointerOption + progress?: ProgressOption } export interface GaugeSeriesOption extends SeriesOption, GaugeStateOption, CircleLayoutOptionMixin { @@ -73,19 +93,25 @@ export interface GaugeSeriesOption extends SeriesOption, Gauge splitNumber?: number + itemStyle?: ItemStyleOption + axisLine?: { show?: boolean + roundCap?: boolean lineStyle: Omit & { color: GaugeColorStop[] } }, + progress?: ProgressOption + splitLine?: { show?: boolean /** * Can be percent */ length?: number + distance?: number lineStyle?: LineStyleOption } @@ -96,6 +122,7 @@ export interface GaugeSeriesOption extends SeriesOption, Gauge * Can be percent */ length?: number | string + distance?: number lineStyle?: LineStyleOption } @@ -104,6 +131,7 @@ export interface GaugeSeriesOption extends SeriesOption, Gauge } pointer?: PointerOption + anchor?: AnchorOption title?: LabelOption & { /** @@ -128,6 +156,9 @@ class GaugeSeriesModel extends SeriesModel { static type = 'series.gauge' as const; type = GaugeSeriesModel.type; + visualStyleAccessPath = 'itemStyle'; + useColorPaletteOnData = true; + getInitialData(option: GaugeSeriesOption, ecModel: GlobalModel): List { return createListSimply(this, ['value']); } @@ -152,21 +183,32 @@ class GaugeSeriesModel extends SeriesModel { axisLine: { // 默认显示，属性show控制显示与否 show: true, + roundCap: false, lineStyle: { // 属性lineStyle控制线条样式 - color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']], - width: 30 + color: [[1, '#E6EBF8']], + width: 10 } }, + // 坐标轴线 + progress: { + // 默认显示，属性show控制显示与否 + show: false, + overlap: true, + width: 10, + roundCap: false, + silent: false + }, // 分隔线 splitLine: { // 默认显示，属性show控制显示与否 show: true, // 属性length控制线长 - length: 30, + length: 10, + distance: 10, // 属性lineStyle（详见lineStyle）控制线条样式 lineStyle: { - color: '#eee', - width: 2, + color: '#63677A', + width: 3, type: 'solid' } }, @@ -177,35 +219,46 @@ class GaugeSeriesModel extends SeriesModel { // 每份split细分多少段 splitNumber: 5, // 属性length控制线长 - length: 8, + length: 6, + distance: 10, // 属性lineStyle控制线条样式 lineStyle: { - color: '#eee', + color: '#63677A', width: 1, type: 'solid' } }, axisLabel: { show: true, - distance: 5, + distance: 15, // formatter: null, - color: 'auto' + color: '#464646', + fontSize: 12 }, pointer: { + icon: 'default', + offsetCenter: [0, 0], show: true, - length: '80%', - width: 8 + length: '60%', + width: 6, + keepAspect: false }, - itemStyle: { - color: 'auto' + anchor: { + show: false, + anchorSize: 6, + itemStyle: { + color: '#fff', + borderWidth: 0, + borderColor: '#5470c6' + } }, title: { show: true, // x, y，单位px - offsetCenter: [0, '-40%'], + offsetCenter: [0, '20%'], // 其余属性默认使用全局文本样式，详见TEXTSTYLE - color: '#333', - fontSize: 15 + color: '#464646', + fontSize: 16 }, detail: { show: true, @@ -219,8 +272,10 @@ class GaugeSeriesModel extends SeriesModel { offsetCenter: [0, '40%'], // formatter: null, // 其余属性默认使用全局文本样式，详见TEXTSTYLE - color: 'auto', - fontSize: 30 + color: '#464646', + fontSize: 30, + fontWeight: 'bold', + lineHeight: 30 } }; } diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index acd83fa17c..c3be885758 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -28,6 +28,8 @@ import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../ExtensionAPI'; import { ColorString } from '../../util/types'; import List from '../../data/List'; +import Sausage from '../../util/shape/sausage'; +import {createSymbol} from '../../util/symbol'; interface PosInfo { cx: number @@ -72,6 +74,7 @@ class GaugeView extends ChartView { type = GaugeView.type; private _data: List; + private _progressData: graphic.Path[]; render(seriesModel: GaugeSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) { @@ -95,25 +98,26 @@ class GaugeView extends ChartView { posInfo: PosInfo ) { const group = this.group; - - const axisLineModel = seriesModel.getModel('axisLine'); - const lineStyleModel = axisLineModel.getModel('lineStyle'); - const clockwise = seriesModel.get('clockwise'); let startAngle = -seriesModel.get('startAngle') / 180 * Math.PI; let endAngle = -seriesModel.get('endAngle') / 180 * Math.PI; + const axisLineModel = seriesModel.getModel('axisLine'); + + const roundCap = axisLineModel.get('roundCap'); + const MainPath = roundCap ? Sausage : graphic.Sector; + const showAxis = axisLineModel.get('show'); + const lineStyleModel = axisLineModel.getModel('lineStyle'); + const axisLineWidth = lineStyleModel.get('width'); const angleRangeSpan = (endAngle - startAngle) % PI2; let prevEndAngle = startAngle; - const axisLineWidth = lineStyleModel.get('width'); - const showAxis = axisLineModel.get('show'); for (let i = 0; showAxis && i < colorList.length; i++) { // Clamp const percent = Math.min(Math.max(colorList[i][0], 0), 1); endAngle = startAngle + angleRangeSpan * percent; - const sector = new graphic.Sector({ + const sector = new MainPath({ shape: { startAngle: prevEndAngle, endAngle: endAngle, @@ -166,14 +170,16 @@ class GaugeView extends ChartView { this._renderTicks( seriesModel, ecModel, api, getColor, posInfo, - startAngle, endAngle, clockwise + startAngle, endAngle, clockwise, axisLineWidth ); this._renderPointer( seriesModel, ecModel, api, getColor, posInfo, - startAngle, endAngle, clockwise + startAngle, endAngle, clockwise, axisLineWidth ); + this._renderAnchor(seriesModel, posInfo); + this._renderTitle( seriesModel, ecModel, api, getColor, posInfo ); @@ -190,7 +196,8 @@ class GaugeView extends ChartView { posInfo: PosInfo, startAngle: number, endAngle: number, - clockwise: boolean + clockwise: boolean, + axisLineWidth: number ) { const group = this.group; const cx = posInfo.cx; @@ -221,6 +228,8 @@ class GaugeView extends ChartView { const splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle(); const tickLineStyle = tickModel.getModel('lineStyle').getLineStyle(); + const splitLineDistance = splitLineModel.get('distance'); + let unitX; let unitY; @@ -229,12 +238,13 @@ class GaugeView extends ChartView { unitY = Math.sin(angle); // Split line if (splitLineModel.get('show')) { + const distance = splitLineDistance ? splitLineDistance + axisLineWidth : axisLineWidth; const splitLine = new graphic.Line({ shape: { - x1: unitX * r + cx, - y1: unitY * r + cy, - x2: unitX * (r - splitLineLen) + cx, - y2: unitY * (r - splitLineLen) + cy + x1: unitX * (r - distance) + cx, + y1: unitY * (r - distance) + cy, + x2: unitX * (r - splitLineLen - distance) + cx, + y2: unitY * (r - splitLineLen - distance) + cy }, style: splitLineStyle, silent: true @@ -250,11 +260,12 @@ class GaugeView extends ChartView { // Label if (labelModel.get('show')) { + const distance = labelModel.get('distance') + splitLineDistance; + const label = formatLabel( round(i / splitNumber * (maxVal - minVal) + minVal), labelModel.get('formatter') ); - const distance = labelModel.get('distance'); const autoColor = getColor(i / splitNumber); group.add(new graphic.Text({ @@ -273,15 +284,18 @@ class GaugeView extends ChartView { // Axis tick if (tickModel.get('show') && i !== splitNumber) { + let distance = tickModel.get('distance'); + distance = distance ? distance + axisLineWidth : axisLineWidth; + for (let j = 0; j <= subSplitNumber; j++) { unitX = Math.cos(angle); unitY = Math.sin(angle); const tickLine = new graphic.Line({ shape: { - x1: unitX * r + cx, - y1: unitY * r + cy, - x2: unitX * (r - tickLen) + cx, - y2: unitY * (r - tickLen) + cy + x1: unitX * (r - distance) + cx, + y1: unitY * (r - distance) + cy, + x2: unitX * (r - tickLen - distance) + cx, + y2: unitY * (r - tickLen - distance) + cy }, silent: true, style: tickLineStyle @@ -312,89 +326,207 @@ class GaugeView extends ChartView { posInfo: PosInfo, startAngle: number, endAngle: number, - clockwise: boolean + clockwise: boolean, + axisLineWidth: number ) { const group = this.group; const oldData = this._data; + const oldProgressData = this._progressData; + const progressList = [] as graphic.Path[]; - if (!seriesModel.get(['pointer', 'show'])) { - // Remove old element - oldData && oldData.eachItemGraphicEl(function (el) { - group.remove(el); - }); - return; - } - - const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')]; - const angleExtent = [startAngle, endAngle]; + const showPointer = seriesModel.get(['pointer', 'show']); + const progressModel = seriesModel.getModel('progress'); + const showProgress = progressModel.get('show'); - const data = seriesModel.getData(); - const valueDim = data.mapDimension('value'); + if (showProgress || showPointer) { + const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')]; + const angleExtent = [startAngle, endAngle]; - data.diff(oldData) - .add(function (idx) { - const pointer = new PointerPath({ - shape: { - angle: startAngle + const data = seriesModel.getData(); + const valueDim = data.mapDimension('value'); + + data.diff(oldData) + .add(function (idx) { + if (showPointer) { + const itemModel = data.getItemModel(idx); + 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) { + pointer = createSymbol( + pointerStr, + parsePercent(pointerOffset[0], posInfo.r) - pointerWidth / 2, + parsePercent(pointerOffset[1], posInfo.r) - pointerLength, + pointerWidth, + pointerLength, + null, + pointerKeepAspect + ) as graphic.Path; + } + else { + pointer = new PointerPath({ + shape: { + angle: -Math.PI / 2 + } + }) + } + pointer.rotation = -(startAngle + Math.PI / 2); + pointer.x = posInfo.cx; + pointer.y = posInfo.cy; + graphic.initProps(pointer, { + rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2) + }, seriesModel); + group.add(pointer); + data.setItemGraphicEl(idx, pointer); } - }); - graphic.initProps(pointer, { - shape: { - angle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + if (showProgress) { + const roundCap = progressModel.get('roundCap'); + const ProgressPath = roundCap ? Sausage : graphic.Sector; + + const isOverlap = progressModel.get('overlap'); + 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, + endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true), + cx: posInfo.cx, + cy: posInfo.cy, + clockwise: clockwise, + r0: r0, + r: r + }, + // 是否相应鼠标事件 + silent: progressSilent + }); + group.add(progress); + progressList[idx] = progress; + } + }) + .update(function (newIdx, oldIdx) { + if (showPointer) { + const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath; + + graphic.updateProps(pointer, { + rotation: -(linearMap(data.get(valueDim, oldIdx) as number, valueExtent, angleExtent, true) + Math.PI / 2) + }, seriesModel); + group.add(pointer); + data.setItemGraphicEl(newIdx, pointer); } - }, seriesModel); - group.add(pointer); - data.setItemGraphicEl(idx, pointer); - }) - .update(function (newIdx, oldIdx) { - const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath; + if (showProgress) { + const progress = oldProgressData[oldIdx]; + graphic.updateProps(progress, { + shape: { + endAngle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + } + }, seriesModel); + group.add(progress); + progressList[newIdx] = progress; + } + }) + .remove(function (idx) { + if (showPointer) { + const pointer = oldData.getItemGraphicEl(idx); + group.remove(pointer); + } - graphic.updateProps(pointer, { - shape: { - angle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + if (showProgress) { + const progress = oldProgressData[idx]; + group.remove(progress); } - }, seriesModel); - - group.add(pointer); - data.setItemGraphicEl(newIdx, pointer); - }) - .remove(function (idx) { - const pointer = oldData.getItemGraphicEl(idx); - group.remove(pointer); - }) - .execute(); - - data.eachItemGraphicEl(function (pointer: PointerPath, idx) { - const itemModel = data.getItemModel(idx); - const pointerModel = itemModel.getModel('pointer'); - const emphasisModel = itemModel.getModel('emphasis'); - - pointer.setShape({ - x: posInfo.cx, - y: posInfo.cy, - width: parsePercent( - pointerModel.get('width'), posInfo.r - ), - r: parsePercent(pointerModel.get('length'), posInfo.r) - }); + }) + .execute(); + + data.each(function (idx) { + const itemModel = data.getItemModel(idx); + const emphasisModel = itemModel.getModel('emphasis'); + + if (showPointer) { + const pointer = data.getItemGraphicEl(idx) as PointerPath; + const pointerModel = itemModel.getModel('pointer'); + pointer.setShape({ + width: parsePercent(pointerModel.get('width'), posInfo.r), + r: parsePercent(pointerModel.get('length'), posInfo.r) + }); + pointer.x = posInfo.cx; + pointer.y = posInfo.cy; + + pointer.useStyle(data.getItemVisual(idx, 'style')); + pointer.setStyle(itemModel.getModel(['pointer', 'itemStyle']).getItemStyle()); + if (pointer.style.fill === 'auto') { + pointer.setStyle('fill', getColor( + linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) + )); + } + + setStatesStylesFromModel(pointer, itemModel); + enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + } - pointer.useStyle(itemModel.getModel('itemStyle').getItemStyle()); + if (showProgress) { + const progress = progressList[idx]; + progress.useStyle(data.getItemVisual(idx, 'style')); + progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); + progress.setShape({ + cx: posInfo.cx, + cy: posInfo.cy + }); + progress.z2 = +seriesModel.get('max') - (data.get(valueDim, idx) as number); + setStatesStylesFromModel(progress, itemModel); + enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + } + }); - if (pointer.style.fill === 'auto') { - pointer.setStyle('fill', getColor( - linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) - )); + 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); + }); + } + } + } - setStatesStylesFromModel(pointer, itemModel); - enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope')); - }); - - this._data = data; + _renderAnchor( + seriesModel: GaugeSeriesModel, + posInfo: PosInfo + ) { + const anchorModel = seriesModel.getModel('anchor'); + const showAnchor = anchorModel.get('show'); + if (showAnchor) { + const anchorSize = anchorModel.get('anchorSize'); + const symbol = createSymbol( + 'circle', + posInfo.cx - anchorSize / 2, + posInfo.cy - anchorSize / 2, + anchorSize, + anchorSize, + null, + true + ) as graphic.Path; + symbol.setStyle(anchorModel.getModel('itemStyle').getItemStyle()); + this.group.add(symbol); + } } _renderTitle( diff --git a/src/theme/dark.ts b/src/theme/dark.ts index 073e70d16d..b2f146a65d 100644 --- a/src/theme/dark.ts +++ b/src/theme/dark.ts @@ -186,9 +186,18 @@ const theme = { }, gauge: { title: { - textStyle: { - color: contrastColor + color: contrastColor + }, + axisLine: { + lineStyle: { + color: [[1, 'rgba(207,212,219,0.2)']] } + }, + axisLabel: { + color: contrastColor + }, + detail: { + color: '#EEF1FA' } }, candlestick: { diff --git a/src/util/types.ts b/src/util/types.ts index d57e6b3c9d..5be32592c8 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -795,6 +795,7 @@ export interface LineStyleOption extends ShadowOptionMixin { join?: CanvasLineJoin dashOffset?: number miterLimit?: number + roundCap?: boolean } /** diff --git a/test/gauge-distance.html b/test/gauge-distance.html new file mode 100644 index 0000000000..6c4342fa0a --- /dev/null +++ b/test/gauge-distance.html @@ -0,0 +1,569 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html new file mode 100644 index 0000000000..51762a41e1 --- /dev/null +++ b/test/gauge-pointer.html @@ -0,0 +1,313 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/test/gauge-progress.html b/test/gauge-progress.html new file mode 100644 index 0000000000..b2e207556a --- /dev/null +++ b/test/gauge-progress.html @@ -0,0 +1,320 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/test/gauge.html b/test/gauge.html index 8a9aa5925e..76dd474c09 100644 --- a/test/gauge.html +++ b/test/gauge.html @@ -30,10 +30,95 @@ -
+
+
+
+ + + + + + + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + From 5027432b5c4e360fb0b86ce0f76691fdbc29e688 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Fri, 9 Oct 2020 20:56:00 +0800 Subject: [PATCH 04/14] support data[i].title/data[i].detail & add test --- src/chart/gauge/GaugeSeries.ts | 47 ++- src/chart/gauge/GaugeView.ts | 152 ++------- test/gauge-group-title-detail.html | 292 ++++++++++++------ test/gauge-simple.html | 2 +- test/runTest/actions/gauge-distance.json | 1 + .../actions/gauge-group-title-detail.json | 1 + test/runTest/actions/gauge-pointer.json | 1 + test/runTest/actions/gauge-progress.json | 1 + test/runTest/actions/gauge.json | 1 + 9 files changed, 242 insertions(+), 256 deletions(-) create mode 100644 test/runTest/actions/gauge-distance.json create mode 100644 test/runTest/actions/gauge-group-title-detail.json create mode 100644 test/runTest/actions/gauge-pointer.json create mode 100644 test/runTest/actions/gauge-progress.json create mode 100644 test/runTest/actions/gauge.json diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts index 6ca9d5e9f0..0a78136358 100644 --- a/src/chart/gauge/GaugeSeries.ts +++ b/src/chart/gauge/GaugeSeries.ts @@ -67,12 +67,20 @@ interface ProgressOption { itemStyle?: ItemStyleOption } -interface TitleDetailItemOption { - isCombination?: boolean - orient?: 'vertical' | 'horizontal' - width?: number - height?: number - itemGap?: number +interface TitleOption extends LabelOption { + /** + * [x, y] offset + */ + offsetCenter?: (number | string)[] + formatter?: LabelFormatter | string +} + +interface DetailOption extends LabelOption { + /** + * [x, y] offset + */ + offsetCenter?: (number | string)[] + formatter?: LabelFormatter | string } export interface GaugeStateOption { @@ -84,6 +92,8 @@ export interface GaugeDataItemOption extends GaugeStateOption, StatesOptionMixin value?: OptionDataValueNumeric pointer?: PointerOption progress?: ProgressOption + title?: TitleOption + detail?: DetailOption } export interface GaugeSeriesOption extends SeriesOption, GaugeStateOption, CircleLayoutOptionMixin { @@ -140,22 +150,9 @@ export interface GaugeSeriesOption extends SeriesOption, Gauge pointer?: PointerOption anchor?: AnchorOption - titleDetailItem?: TitleDetailItemOption - title?: LabelOption & { - /** - * [x, y] offset - */ - offsetCenter?: (number | string)[] - formatter?: LabelFormatter | string - } - detail?: LabelOption & { - /** - * [x, y] offset - */ - offsetCenter?: (number | string)[] - formatter?: LabelFormatter | string - } + title?: TitleOption + detail?: DetailOption data?: (OptionDataValueNumeric | GaugeDataItemOption)[] } @@ -262,14 +259,6 @@ class GaugeSeriesModel extends SeriesModel { } }, - titleDetailItem: { - isCombination: false, - orient: 'horizontal', - width: 0, - height: 0, - itemGap: 10 - }, - title: { show: true, // x, y，单位px diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index d6f1dfce28..ef657e4380 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -181,19 +181,9 @@ class GaugeView extends ChartView { this._renderAnchor(seriesModel, posInfo); - // if (isRenderTogather) { - this._renderTitleAndDetail( - seriesModel, ecModel, api, getColor, posInfo - ) - // } - // else { - // this._renderTitle( - // seriesModel, ecModel, api, getColor, posInfo - // ); - // this._renderDetail( - // seriesModel, ecModel, api, getColor, posInfo - // ); - // } + this._renderTitleAndDetail( + seriesModel, ecModel, api, getColor, posInfo + ) } _renderTicks( @@ -557,45 +547,29 @@ class GaugeView extends ChartView { getColor: (percent: number) => ColorString, posInfo: PosInfo ) { - const titleDetailModel = seriesModel.getModel('titleDetailItem'); - const titleModel = seriesModel.getModel('title'); - const detailModel = seriesModel.getModel('detail'); - const showTogather = titleDetailModel.get('isCombination'); - const showTitle = titleModel.get('show'); - const showDetail = detailModel.get('show'); - if (!showDetail && !showTitle && !showTogather) { - return; - } const data = seriesModel.getData(); const valueDim = data.mapDimension('value'); - const minVal = +seriesModel.get('min'); const maxVal = +seriesModel.get('max'); const contentGroup = new graphic.Group; - const titleOffsetCenter = titleModel.get('offsetCenter'); - const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r); - const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r); - - const detailOffsetCenter = detailModel.get('offsetCenter'); - const detailX = posInfo.cx + parsePercent(detailOffsetCenter[0], posInfo.r); - const detailY = posInfo.cy + parsePercent(detailOffsetCenter[1], posInfo.r); - const width = parsePercent(detailModel.get('width'), posInfo.r); - const height = parsePercent(detailModel.get('height'), posInfo.r); - data.each(function(idx) { - const itemGroup = new graphic.Group; - const value = data.get(valueDim, idx) as number; const itemModel = data.getItemModel(idx); + const value = data.get(valueDim, idx) as number; + const itemGroup = new graphic.Group; const autoColor = getColor( linearMap(value, [minVal, maxVal], [0, 1], true) ); - if (showTitle || showTogather) { + const itemTitleModel = itemModel.getModel('title'); + if (itemTitleModel.get('show')) { + const titleOffsetCenter = itemTitleModel.get('offsetCenter'); + const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r); + const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r); itemGroup.add(new graphic.Text({ silent: true, - style: createTextStyle(titleModel, { + style: createTextStyle(itemTitleModel, { x: titleX, y: titleY, text: data.getName(idx), @@ -605,115 +579,37 @@ class GaugeView extends ChartView { })); } - if (showDetail || showTogather) { - const progressColor = data.getItemVisual(idx, 'style').fill as string; + const itemDetailModel = itemModel.getModel('detail'); + if (itemDetailModel.get('show')) { + const detailOffsetCenter = itemDetailModel.get('offsetCenter'); + const detailX = posInfo.cx + parsePercent(detailOffsetCenter[0], posInfo.r); + const detailY = posInfo.cy + parsePercent(detailOffsetCenter[1], posInfo.r); + const width = parsePercent(itemDetailModel.get('width'), posInfo.r); + const height = parsePercent(itemDetailModel.get('height'), posInfo.r); + const detailColor = ( + seriesModel.get(['progress', 'show']) ? data.getItemVisual(idx, 'style').fill : autoColor + ) as string; itemGroup.add(new graphic.Text({ silent: true, - style: createTextStyle(detailModel, { + style: createTextStyle(itemDetailModel, { x: detailX, y: detailY, text: formatLabel( - value, detailModel.get('formatter') + value, itemDetailModel.get('formatter') ), width: isNaN(width) ? null : width, height: isNaN(height) ? null : height, align: 'center', verticalAlign: 'middle' - }, {inheritColor: showTogather ? progressColor : autoColor}) + }, {inheritColor: detailColor}) })); } contentGroup.add(itemGroup); }); - - if (showTogather) { - layoutUtil.box( - titleDetailModel.get('orient'), - contentGroup, - titleDetailModel.get('itemGap'), - titleDetailModel.get('width'), - titleDetailModel.get('height') - ); - } this.group.add(contentGroup); } - - _renderTitle( - seriesModel: GaugeSeriesModel, - ecModel: GlobalModel, - api: ExtensionAPI, - getColor: (percent: number) => ColorString, - posInfo: PosInfo - ) { - const data = seriesModel.getData(); - const valueDim = data.mapDimension('value'); - const titleModel = seriesModel.getModel('title'); - if (titleModel.get('show')) { - const offsetCenter = titleModel.get('offsetCenter'); - const x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r); - const y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r); - - const minVal = +seriesModel.get('min'); - const maxVal = +seriesModel.get('max'); - const value = seriesModel.getData().get(valueDim, 0) as number; - const autoColor = getColor( - linearMap(value, [minVal, maxVal], [0, 1], true) - ); - - this.group.add(new graphic.Text({ - silent: true, - style: createTextStyle(titleModel, { - x: x, - y: y, - // FIXME First data name ? - text: data.getName(0), - align: 'center', - verticalAlign: 'middle' - }, {inheritColor: autoColor}) - })); - } - } - - _renderDetail( - seriesModel: GaugeSeriesModel, - ecModel: GlobalModel, - api: ExtensionAPI, - getColor: (percent: number) => ColorString, - posInfo: PosInfo - ) { - const detailModel = seriesModel.getModel('detail'); - const minVal = +seriesModel.get('min'); - const maxVal = +seriesModel.get('max'); - if (detailModel.get('show')) { - const offsetCenter = detailModel.get('offsetCenter'); - const x = posInfo.cx + parsePercent(offsetCenter[0], posInfo.r); - const y = posInfo.cy + parsePercent(offsetCenter[1], posInfo.r); - const width = parsePercent(detailModel.get('width'), posInfo.r); - const height = parsePercent(detailModel.get('height'), posInfo.r); - const data = seriesModel.getData(); - const value = data.get(data.mapDimension('value'), 0) as number; - const autoColor = getColor( - linearMap(value, [minVal, maxVal], [0, 1], true) - ); - - this.group.add(new graphic.Text({ - silent: true, - style: createTextStyle(detailModel, { - x: x, - y: y, - text: formatLabel( - // FIXME First data name ? - value, detailModel.get('formatter') - ), - width: isNaN(width) ? null : width, - height: isNaN(height) ? null : height, - align: 'center', - verticalAlign: 'middle' - }, {inheritColor: autoColor}) - })); - } - } } ChartView.registerClass(GaugeView); diff --git a/test/gauge-group-title-detail.html b/test/gauge-group-title-detail.html index 924790c68e..a60b4fd6da 100644 --- a/test/gauge-group-title-detail.html +++ b/test/gauge-group-title-detail.html @@ -80,19 +80,39 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '20%'] + }, + detail: { + offsetCenter: ['-40%', '35%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '20%'] + }, + detail: { + offsetCenter: ['0%', '35%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '20%'] + }, + detail: { + offsetCenter: ['40%', '35%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'horizontal', - width: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['-40%', '20%'] + fontSize: 14 }, detail: { width: 30, @@ -103,19 +123,15 @@ borderWidth: 1, borderRadius: 3, formatter: '{value}%', - offsetCenter: ['-40%', '35%'] }, } ] }; var chart = testHelper.create(echarts, 'main0', { title: [ - 'default style' + 'detail with border' ], option: option - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -150,27 +166,46 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '20%'] + }, + detail: { + offsetCenter: ['-40%', '35%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '20%'] + }, + detail: { + offsetCenter: ['0%', '35%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '20%'] + }, + detail: { + offsetCenter: ['40%', '35%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'horizontal', - width: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['-40%', '20%'] + fontSize: 14 }, detail: { width: 30, height: 12, fontSize: 12, color: 'auto', - formatter: '{value}%', - offsetCenter: ['-40%', '35%'] + formatter: '{value}%' } } ] @@ -180,9 +215,6 @@ 'detail without border' ], option: option1 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -217,19 +249,39 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '20%'] + }, + detail: { + offsetCenter: ['-40%', '35%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '20%'] + }, + detail: { + offsetCenter: ['0%', '35%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '20%'] + }, + detail: { + offsetCenter: ['40%', '35%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'horizontal', - width: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['-40%', '20%'] + fontSize: 14 }, detail: { width: 30, @@ -238,20 +290,16 @@ color: '#fff', backgroundColor: 'auto', borderRadius: 3, - formatter: '{value}%', - offsetCenter: ['-40%', '35%'] + formatter: '{value}%' } } ] }; var chart2 = testHelper.create(echarts, 'main2', { title: [ - 'detail with backgroundColor' + 'detail with backgroundColor (not recommended)' ], option: option2 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -286,19 +334,39 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['0%', '20%'] + }, + detail: { + offsetCenter: ['0%', '35%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '55%'] + }, + detail: { + offsetCenter: ['0%', '70%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['0%', '90%'] + }, + detail: { + offsetCenter: ['0%', '105%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'vertical', - height: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['0', '20%'] + fontSize: 14 }, detail: { width: 30, @@ -308,20 +376,16 @@ borderColor: 'auto', borderRadius: 3, borderWidth: 1, - formatter: '{value}%', - offsetCenter: ['0', '35%'] + formatter: '{value}%' }, } ] }; var chart3 = testHelper.create(echarts, 'main3', { title: [ - 'the orient is vertical (not recommended)' + 'the orient is vertical' ], option: option3 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -356,19 +420,39 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '80%'] + }, + detail: { + offsetCenter: ['-40%', '95%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '80%'] + }, + detail: { + offsetCenter: ['0%', '95%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '80%'] + }, + detail: { + offsetCenter: ['40%', '95%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'horizontal', - width: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['-40%', '80%'] + fontSize: 14 }, detail: { width: 30, @@ -379,8 +463,7 @@ borderColor: 'auto', borderWidth: 1, // backgroundColor: 'auto', - formatter: '{value}%', - offsetCenter: ['-40%', '95%'] + formatter: '{value}%' }, } ] @@ -390,9 +473,6 @@ 'out of gauge' ], option: option4 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -427,19 +507,39 @@ roundCap: true }, data: [ - {value: 20, name: '完成率'}, - {value: 40, name: '达标率'}, - {value: 60, name: '优秀率'} + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '80%'] + }, + detail: { + offsetCenter: ['-40%', '95%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '80%'] + }, + detail: { + offsetCenter: ['0%', '95%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '80%'] + }, + detail: { + offsetCenter: ['40%', '95%'] + } + } ], - titleDetailItem: { - isCombination: true, - orient: 'horizontal', - width: '100%', - itemGap: 10 - }, title: { - fontSize: 14, - offsetCenter: ['-40%', '80%'] + fontSize: 14 }, detail: { width: 30, @@ -448,8 +548,7 @@ color: '#fff', backgroundColor: 'auto', borderRadius: 3, - formatter: '{value}%', - offsetCenter: ['-40%', '95%'] + formatter: '{value}%' }, } ] @@ -459,9 +558,6 @@ 'out of gauge, detail with backgroundColor' ], option: option5 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; diff --git a/test/gauge-simple.html b/test/gauge-simple.html index 53c0931fa8..1fb46f49ff 100644 --- a/test/gauge-simple.html +++ b/test/gauge-simple.html @@ -140,7 +140,7 @@ { name: 'Pressure', type: 'gauge', - data: [] + data: [{}] } ] }; diff --git a/test/runTest/actions/gauge-distance.json b/test/runTest/actions/gauge-distance.json new file mode 100644 index 0000000000..04dd9c9613 --- /dev/null +++ b/test/runTest/actions/gauge-distance.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"screenshot","time":3170}],"scrollY":0,"scrollX":0,"timestamp":1602246267936},{"name":"Action 2","ops":[{"type":"screenshot","time":2585}],"scrollY":714,"scrollX":0,"timestamp":1602246285822},{"name":"Action 3","ops":[{"type":"screenshot","time":2051}],"scrollY":1693,"scrollX":0,"timestamp":1602246296183},{"name":"Action 4","ops":[{"type":"screenshot","time":1388}],"scrollY":2476,"scrollX":0,"timestamp":1602246309308},{"name":"Action 5","ops":[{"type":"screenshot","time":1445}],"scrollY":3584,"scrollX":0,"timestamp":1602246320327},{"name":"Action 6","ops":[{"type":"screenshot","time":1831}],"scrollY":4544,"scrollX":0,"timestamp":1602246332115}] \ No newline at end of file diff --git a/test/runTest/actions/gauge-group-title-detail.json b/test/runTest/actions/gauge-group-title-detail.json new file mode 100644 index 0000000000..dd9b9a1d90 --- /dev/null +++ b/test/runTest/actions/gauge-group-title-detail.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"screenshot","time":3413}],"scrollY":0,"scrollX":0,"timestamp":1602246421396},{"name":"Action 2","ops":[{"type":"screenshot","time":1686}],"scrollY":458,"scrollX":0,"timestamp":1602246432833},{"name":"Action 3","ops":[{"type":"screenshot","time":1853}],"scrollY":911,"scrollX":0,"timestamp":1602246445097},{"name":"Action 4","ops":[{"type":"screenshot","time":1876}],"scrollY":1374,"scrollX":0,"timestamp":1602246452846},{"name":"Action 5","ops":[{"type":"screenshot","time":1764}],"scrollY":1832,"scrollX":0,"timestamp":1602246460967},{"name":"Action 6","ops":[{"type":"screenshot","time":2066}],"scrollY":2148,"scrollX":0,"timestamp":1602246468649}] \ No newline at end of file diff --git a/test/runTest/actions/gauge-pointer.json b/test/runTest/actions/gauge-pointer.json new file mode 100644 index 0000000000..2f45a7832b --- /dev/null +++ b/test/runTest/actions/gauge-pointer.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"screenshot","time":1824}],"scrollY":0,"scrollX":0,"timestamp":1602246538416},{"name":"Action 2","ops":[{"type":"screenshot","time":1348}],"scrollY":481,"scrollX":0,"timestamp":1602246547107},{"name":"Action 3","ops":[{"type":"screenshot","time":1242}],"scrollY":952,"scrollX":0,"timestamp":1602246555653},{"name":"Action 4","ops":[{"type":"screenshot","time":1149}],"scrollY":1432,"scrollX":0,"timestamp":1602246561913},{"name":"Action 5","ops":[{"type":"screenshot","time":1278}],"scrollY":1925,"scrollX":0,"timestamp":1602246567775},{"name":"Action 6","ops":[{"type":"screenshot","time":1155}],"scrollY":2292,"scrollX":0,"timestamp":1602246574297}] \ No newline at end of file diff --git a/test/runTest/actions/gauge-progress.json b/test/runTest/actions/gauge-progress.json new file mode 100644 index 0000000000..19e102dd73 --- /dev/null +++ b/test/runTest/actions/gauge-progress.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"screenshot","time":1573}],"scrollY":0,"scrollX":0,"timestamp":1602246699614},{"name":"Action 2","ops":[{"type":"screenshot","time":1145}],"scrollY":460,"scrollX":0,"timestamp":1602246707775},{"name":"Action 3","ops":[{"type":"screenshot","time":1198}],"scrollY":910,"scrollX":0,"timestamp":1602246714393},{"name":"Action 4","ops":[{"type":"screenshot","time":1279}],"scrollY":1378,"scrollX":0,"timestamp":1602246720625},{"name":"Action 5","ops":[{"type":"screenshot","time":1430}],"scrollY":1708,"scrollX":0,"timestamp":1602246726107}] \ No newline at end of file diff --git a/test/runTest/actions/gauge.json b/test/runTest/actions/gauge.json new file mode 100644 index 0000000000..23e29eca47 --- /dev/null +++ b/test/runTest/actions/gauge.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"screenshot","time":3972}],"scrollY":0,"scrollX":0,"timestamp":1602245762818},{"name":"Action 2","ops":[{"type":"screenshot","time":2806}],"scrollY":605,"scrollX":0,"timestamp":1602246030112},{"name":"Action 3","ops":[{"type":"screenshot","time":2428}],"scrollY":1008,"scrollX":0,"timestamp":1602246050732}] \ No newline at end of file From 59d00d3eb975ebc277fc279741300cb3e1bf20ab Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Sat, 10 Oct 2020 19:38:55 +0800 Subject: [PATCH 05/14] fix order of render configuration of gauge & add test of clock --- src/chart/gauge/GaugeView.ts | 12 +- src/label/LabelManager.ts | 3 +- test/gauge-pointer.html | 224 +++++++++++++++++++++++++++++++++++ 3 files changed, 232 insertions(+), 7 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index ef657e4380..bac1066a49 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -174,16 +174,16 @@ class GaugeView extends ChartView { startAngle, endAngle, clockwise, axisLineWidth ); + this._renderTitleAndDetail( + seriesModel, ecModel, api, getColor, posInfo + ) + + this._renderAnchor(seriesModel, posInfo); + this._renderPointer( seriesModel, ecModel, api, getColor, posInfo, startAngle, endAngle, clockwise, axisLineWidth ); - - this._renderAnchor(seriesModel, posInfo); - - this._renderTitleAndDetail( - seriesModel, ecModel, api, getColor, posInfo - ) } _renderTicks( diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts index 09112e0c08..7362949042 100644 --- a/src/label/LabelManager.ts +++ b/src/label/LabelManager.ts @@ -393,7 +393,8 @@ class LabelManager { label.draggable = true; label.cursor = 'move'; if (hostEl) { - let hostModel: Model = labelItem.seriesModel as SeriesModel; + let hostModel: Model = + labelItem.seriesModel as SeriesModel; if (labelItem.dataIndex != null) { const data = labelItem.seriesModel.getData(labelItem.dataType); hostModel = data.getItemModel(labelItem.dataIndex); diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index 51762a41e1..bf921a827c 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -44,6 +44,7 @@
+
@@ -304,6 +305,229 @@ option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; chart5.setOption(option5, true); }, 2000); + + + var option7 = { + series: [ + { + name: 'hour', + type: 'gauge', + startAngle: 89.95, + endAngle: -270.04, + min: 0, + max: 12, + splitNumber: 12, + axisLine: { + lineStyle: { + width: 15, + color: [[1, 'rgba(0,0,0,0.7)']], + shadowColor: 'rgba(0, 0, 0, 0.5)', + shadowBlur: 15 + } + }, + axisLabel: { + fontSize: 50, + distance: 20, + formatter: function(value) { + if (value === 0) { + return ''; + } + return value; + } + }, + anchor: { + show: true, + anchorSize: 20, + itemStyle: { + borderWidth: 15, + borderColor: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 12, + length: '55%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: [0, '30%'] + }, + data: [ + { + value: 0, + name: 'Powered by ECharts' + } + ] + }, + { + name: 'minute', + type: 'gauge', + z2: 3, + startAngle: 89.95, + endAngle: -270.04, + min: 0, + max: 60, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 8, + length: '70%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: false + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 0, + name: '' + } + ] + }, + { + name: 'second', + type: 'gauge', + z2: 4, + startAngle: 89.95, + endAngle: -270.04, + min: 0, + max: 60, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 4, + length: '85%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: true, + anchorSize: 15, + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 0, + name: '' + } + ] + } + ] + }; + + var chart7 = testHelper.create(echarts, 'main7', { + title: [ + 'clock' + ], + option: option7, + height: 600 + }); + + const timeUpdatedStatus = { + second: false, + minute: false, + hour: false + } + + function updateSeries(time, series, type) { + let isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1); + if (isCritical && timeUpdatedStatus[type] === true) { + timeUpdatedStatus[type] = false; + series.data[0].value = 0 + series.clockwise = true; + option7.animationDurationUpdate = 0; + chart7.setOption(option7, true); + } + series.data[0].value = time; + series.clockwise = true; + if (time === 0) { + timeUpdatedStatus[type] = true; + series.clockwise = false; + } + } + + setInterval(function () { + let date = new Date(); + let second = date.getSeconds(); + let minute = date.getMinutes() + second / 60; + let hour = date.getHours() % 12 + minute / 60; + + updateSeries(second, option7.series[2], 'second'); + updateSeries(minute, option7.series[1], 'minute'); + updateSeries(hour, option7.series[0], 'hour'); + + option7.animationDurationUpdate = 300; + chart7.setOption(option7, true); + date = null; + }, 1000); + }); From 2033777589a5f98c160d5f0daaaad6a672880652 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Mon, 12 Oct 2020 13:29:56 +0800 Subject: [PATCH 06/14] delete the useless code --- src/util/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/util/types.ts b/src/util/types.ts index f6eee3d5e8..0c3617ff1b 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -795,7 +795,6 @@ export interface LineStyleOption extends ShadowOptionMixin { join?: CanvasLineJoin dashOffset?: number miterLimit?: number - roundCap?: boolean } /** From 09c42f1b97279c48d5e8220e60e82a695ddf4fe9 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Mon, 12 Oct 2020 14:34:45 +0800 Subject: [PATCH 07/14] fix: gauge.axisLine can not be circle --- src/chart/gauge/GaugeView.ts | 3 ++- test/gauge-pointer.html | 12 ++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index bac1066a49..20504d9a1a 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -110,7 +110,8 @@ class GaugeView extends ChartView { const showAxis = axisLineModel.get('show'); const lineStyleModel = axisLineModel.getModel('lineStyle'); const axisLineWidth = lineStyleModel.get('width'); - const angleRangeSpan = (endAngle - startAngle) % PI2; + const angleRangeSpan = !((endAngle - startAngle) % PI2) && endAngle !== startAngle + ? PI2 : (endAngle - startAngle) % PI2; let prevEndAngle = startAngle; diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index bf921a827c..c067fcda39 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -312,8 +312,8 @@ { name: 'hour', type: 'gauge', - startAngle: 89.95, - endAngle: -270.04, + startAngle: 90, + endAngle: -270, min: 0, max: 12, splitNumber: 12, @@ -377,8 +377,8 @@ name: 'minute', type: 'gauge', z2: 3, - startAngle: 89.95, - endAngle: -270.04, + startAngle: 90, + endAngle: -270, min: 0, max: 60, axisLine: { @@ -426,8 +426,8 @@ name: 'second', type: 'gauge', z2: 4, - startAngle: 89.95, - endAngle: -270.04, + startAngle: 90, + endAngle: -270, min: 0, max: 60, axisLine: { From d283b9f8f67c540777901b23f6e462360b25a1b3 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Tue, 13 Oct 2020 11:33:27 +0800 Subject: [PATCH 08/14] fix:the progress can draw when current value is greater than max value --- src/chart/gauge/GaugeView.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index 20504d9a1a..d4522d5ea6 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -420,7 +420,7 @@ class GaugeView extends ChartView { const progress = createProgress(idx, endAngle) as graphic.Sector; graphic.initProps(progress, { shape: { - endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, false) } }, seriesModel); group.add(progress); @@ -487,10 +487,10 @@ class GaugeView extends ChartView { progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); graphic.updateProps(progress, { shape: { - endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, false) } }, seriesModel); - progress.z2 = +seriesModel.get('max') - (data.get(valueDim, idx) as number); + progress.z2 = (data.get(valueDim, idx) as number) % seriesModel.get('max'); group.add(progress); progressList[idx] = progress; From 2d6e7828c97283f3105ed2366720d7a2795dd83c Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Tue, 13 Oct 2020 12:00:02 +0800 Subject: [PATCH 09/14] modify the test case of clock --- test/gauge-pointer.html | 1 + 1 file changed, 1 insertion(+) diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index c067fcda39..a8c630aa70 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -430,6 +430,7 @@ endAngle: -270, min: 0, max: 60, + animationEasingUpdate: 'bounceOut', axisLine: { show: false }, From c92c8f5e029c62b383abd1f1b6d92b3f74071900 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Tue, 13 Oct 2020 17:51:40 +0800 Subject: [PATCH 10/14] add clip to progress --- src/chart/gauge/GaugeSeries.ts | 4 +- src/chart/gauge/GaugeView.ts | 6 ++- test/gauge-progress.html | 67 ++++++++++++++++++++++++++-------- 3 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts index 0a78136358..bcf1cb2315 100644 --- a/src/chart/gauge/GaugeSeries.ts +++ b/src/chart/gauge/GaugeSeries.ts @@ -64,6 +64,7 @@ interface ProgressOption { width?: number roundCap?: boolean silent?: boolean + clip?: boolean itemStyle?: ItemStyleOption } @@ -202,7 +203,8 @@ class GaugeSeriesModel extends SeriesModel { overlap: true, width: 10, roundCap: false, - silent: false + silent: false, + clip: true }, // 分隔线 splitLine: { diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index d4522d5ea6..f2f6e2e41f 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -418,9 +418,10 @@ class GaugeView extends ChartView { if (showProgress) { const progress = createProgress(idx, endAngle) as graphic.Sector; + const isClip = progressModel.get('clip'); graphic.initProps(progress, { shape: { - endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, false) + endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, isClip) } }, seriesModel); group.add(progress); @@ -485,9 +486,10 @@ class GaugeView extends ChartView { const progress = createProgress(idx, previousEndAngle) as graphic.Sector; progress.useStyle(data.getItemVisual(idx, 'style')); progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); + const isClip = progressModel.get('clip'); graphic.updateProps(progress, { shape: { - endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, false) + endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, isClip) } }, seriesModel); progress.z2 = (data.get(valueDim, idx) as number) % seriesModel.get('max'); diff --git a/test/gauge-progress.html b/test/gauge-progress.html index b2e207556a..92db406de5 100644 --- a/test/gauge-progress.html +++ b/test/gauge-progress.html @@ -42,6 +42,8 @@
+
+
@@ -89,9 +91,6 @@ 'axisLine.roundCap: false, progress.roundCap: false, data.length: 1' ], option: option0 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option0.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -136,9 +135,6 @@ 'axisLine.roundCap: true, progress.roundCap: true, data.length: 1' ], option: option1 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -191,9 +187,6 @@ 'axisLine.roundCap: true, progress.roundCap: true, overlap: true, data.length: 3, detail.show: false' ], option: option2 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -242,9 +235,6 @@ 'axisLine.roundCap: false, progress.roundCap: true, overlap: false, data.length: 3, detail.show: false' ], option: option3 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; @@ -299,9 +289,6 @@ 'axisLine.roundCap: true, progress.roundCap: true, overlap: false, data.length: 3, detail.show: false, title.show: false' ], option: option4 - // height: 300, - // buttons: [{text: 'btn-txt', onclick: function () {}}], - // recordCanvas: true, }); setInterval(function () { option4.series[0].pointer.show = false; @@ -311,6 +298,56 @@ chart4.setOption(option4, true); }, 2000); + + var option5 = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + toolbox: { + feature: { + restore: {}, + saveAsImage: {} + } + }, + series: [ + { + name: '业务指标', + type: 'gauge', + startAngle: 90, + endAngle: -270, + pointer: { + show: false + }, + progress: { + show: true, + clip: false, + roundCap: true, + itemStyle: { + color: '#ff9933', + borderColor: '#7e0023', + borderWidth: 1 + } + }, + data: [ + {value: 120, name: '本月跑步'} + ], + detail: { + formatter: '{value} km' + }, + } + ] + }; + var chart5 = testHelper.create(echarts, 'main5', { + title: [ + 'progress.roundCap: true, click the button to change progress.clip' + ], + option: option5, + buttons: [{text: 'change progress.clip', onclick: function () { + option5.series[0].progress.clip = !option5.series[0].progress.clip; + chart5.setOption(option5, true); + }}] + }); + }); From 87c1365d341bd8a4757748c46146dd4c1c765bbe Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Wed, 14 Oct 2020 16:36:28 +0800 Subject: [PATCH 11/14] adjust order of rendering anchor & pointer --- src/chart/gauge/GaugeView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index f2f6e2e41f..e1e6351c1b 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -179,12 +179,12 @@ class GaugeView extends ChartView { seriesModel, ecModel, api, getColor, posInfo ) - this._renderAnchor(seriesModel, posInfo); - this._renderPointer( seriesModel, ecModel, api, getColor, posInfo, startAngle, endAngle, clockwise, axisLineWidth ); + + this._renderAnchor(seriesModel, posInfo); } _renderTicks( From 622c033a2da58410713bc139bf9233dfc08a5527 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Fri, 16 Oct 2020 11:45:04 +0800 Subject: [PATCH 12/14] 1. create path when data updating 2. add showAbove/icon/offsetCenter to anchor 3. adjust the verticalAlign of label --- src/chart/gauge/GaugeSeries.ts | 8 ++++ src/chart/gauge/GaugeView.ts | 86 +++++++++++++++++----------------- test/gauge-distance.html | 1 + test/gauge-pointer.html | 44 ++++++++++++----- test/gauge.html | 58 ++++++++++++++++++++--- 5 files changed, 135 insertions(+), 62 deletions(-) diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts index bcf1cb2315..e1e1946ec6 100644 --- a/src/chart/gauge/GaugeSeries.ts +++ b/src/chart/gauge/GaugeSeries.ts @@ -54,7 +54,11 @@ interface PointerOption { interface AnchorOption { show?: boolean + showAbove?: boolean anchorSize?: number + icon?: string + offsetCenter?: (number | string)[] + keepAspect?: boolean itemStyle?: ItemStyleOption } @@ -253,7 +257,11 @@ class GaugeSeriesModel extends SeriesModel { }, anchor: { show: false, + showAbove: false, anchorSize: 6, + icon: 'circle', + offsetCenter: [0, 0], + keepAspect: false, itemStyle: { color: '#fff', borderWidth: 0, diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index e1e6351c1b..a7f4b69c3b 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -26,11 +26,10 @@ import {parsePercent, round, linearMap} from '../../util/number'; import GaugeSeriesModel, { GaugeDataItemOption } from './GaugeSeries'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../ExtensionAPI'; -import { ColorString } from '../../util/types'; +import { ColorString, ECElement } from '../../util/types'; import List from '../../data/List'; import Sausage from '../../util/shape/sausage'; import {createSymbol} from '../../util/symbol'; -import * as layoutUtil from '../../util/layout'; interface PosInfo { cx: number @@ -179,12 +178,12 @@ class GaugeView extends ChartView { seriesModel, ecModel, api, getColor, posInfo ) + this._renderAnchor(seriesModel, posInfo); + this._renderPointer( seriesModel, ecModel, api, getColor, posInfo, startAngle, endAngle, clockwise, axisLineWidth ); - - this._renderAnchor(seriesModel, posInfo); } _renderTicks( @@ -272,7 +271,7 @@ class GaugeView extends ChartView { text: label, x: unitX * (r - splitLineLen - distance) + cx, y: unitY * (r - splitLineLen - distance) + cy, - verticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'), + verticalAlign: unitY < -0.8 ? 'top' : (unitY > 0.8 ? 'bottom' : 'middle'), align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center') }, { inheritColor: autoColor @@ -340,10 +339,12 @@ class GaugeView extends ChartView { const data = seriesModel.getData(); const valueDim = data.mapDimension('value'); - const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')]; + const minVal = +seriesModel.get('min'); + const maxVal = +seriesModel.get('max'); + const valueExtent = [minVal, maxVal]; const angleExtent = [startAngle, endAngle]; - function createPointer(idx: number) { + function createPointer(idx: number, angle: number) { const itemModel = data.getItemModel(idx); const pointerModel = itemModel.getModel('pointer'); const pointerWidth = parsePercent(pointerModel.get('width'), posInfo.r); @@ -373,7 +374,7 @@ class GaugeView extends ChartView { } }) } - pointer.rotation = -(startAngle + Math.PI / 2); + pointer.rotation = -(angle + Math.PI / 2); pointer.x = posInfo.cx; pointer.y = posInfo.cy; return pointer; @@ -401,6 +402,7 @@ class GaugeView extends ChartView { // 是否相应鼠标事件 silent: progressSilent }); + isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal); return progress; } @@ -408,7 +410,7 @@ class GaugeView extends ChartView { data.diff(oldData) .add(function (idx) { if (showPointer) { - const pointer = createPointer(idx); + const pointer = createPointer(idx, startAngle); graphic.initProps(pointer, { rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2) }, seriesModel); @@ -417,7 +419,7 @@ class GaugeView extends ChartView { } if (showProgress) { - const progress = createProgress(idx, endAngle) as graphic.Sector; + const progress = createProgress(idx, startAngle) as graphic.Sector; const isClip = progressModel.get('clip'); graphic.initProps(progress, { shape: { @@ -430,13 +432,29 @@ class GaugeView extends ChartView { }) .update(function (newIdx, oldIdx) { if (showPointer) { - const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath; + 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 (showProgress) { - const progress = oldProgressData[oldIdx]; + 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; } @@ -458,16 +476,7 @@ class GaugeView extends ChartView { const itemModel = data.getItemModel(idx); const emphasisModel = itemModel.getModel('emphasis'); if (showPointer) { - let previousRotate = data.getItemGraphicEl(idx).rotation; - group.remove(data.getItemGraphicEl(idx) as PointerPath); - const pointer = createPointer(idx); - pointer.rotation = previousRotate; - graphic.updateProps(pointer, { - rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2) - }, seriesModel); - group.add(pointer); - data.setItemGraphicEl(idx, pointer); - + const pointer = data.getItemGraphicEl(idx) as PointerPath; pointer.useStyle(data.getItemVisual(idx, 'style')); pointer.setStyle(itemModel.getModel(['pointer', 'itemStyle']).getItemStyle()); if (pointer.style.fill === 'auto') { @@ -476,26 +485,15 @@ class GaugeView extends ChartView { )); } + (pointer as ECElement).z2EmphasisLift = 0 setStatesStylesFromModel(pointer, itemModel); enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope')); } if (showProgress) { - let previousEndAngle = progressList[idx].shape.endAngle; - group.remove(progressList[idx]); - const progress = createProgress(idx, previousEndAngle) as graphic.Sector; + const progress = progressList[idx]; progress.useStyle(data.getItemVisual(idx, 'style')); progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); - const isClip = progressModel.get('clip'); - graphic.updateProps(progress, { - shape: { - endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, isClip) - } - }, seriesModel); - progress.z2 = (data.get(valueDim, idx) as number) % seriesModel.get('max'); - group.add(progress); - progressList[idx] = progress; - setStatesStylesFromModel(progress, itemModel); enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope')); } @@ -529,17 +527,21 @@ class GaugeView extends ChartView { const showAnchor = anchorModel.get('show'); if (showAnchor) { const anchorSize = anchorModel.get('anchorSize'); - const symbol = createSymbol( - 'circle', - posInfo.cx - anchorSize / 2, - posInfo.cy - anchorSize / 2, + const anchorType = anchorModel.get('icon'); + const offsetCenter = anchorModel.get('offsetCenter'); + const anchorKeepAspect = anchorModel.get('keepAspect'); + const anchor = createSymbol( + anchorType, + posInfo.cx - anchorSize / 2 + parsePercent(offsetCenter[0], posInfo.r), + posInfo.cy - anchorSize / 2 + parsePercent(offsetCenter[1], posInfo.r), anchorSize, anchorSize, null, - true + anchorKeepAspect ) as graphic.Path; - symbol.setStyle(anchorModel.getModel('itemStyle').getItemStyle()); - this.group.add(symbol); + anchor.z2 = anchorModel.get('showAbove') ? 1 : 0; + anchor.setStyle(anchorModel.getModel('itemStyle').getItemStyle()); + this.group.add(anchor); } } diff --git a/test/gauge-distance.html b/test/gauge-distance.html index 6c4342fa0a..e40a7e5e60 100644 --- a/test/gauge-distance.html +++ b/test/gauge-distance.html @@ -127,6 +127,7 @@ }, anchor: { show: true, + showAbove: true, anchorSize: 25, itemStyle: { borderWidth: 10 diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index a8c630aa70..f07b4ed918 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -71,7 +71,8 @@ name: '业务指标', type: 'gauge', anchor: { - show: true + show: true, + showAbove: true }, detail: {formatter: '{value}%'}, data: [{value: 58.46, name: '完成率'}] @@ -239,6 +240,7 @@ anchor: { show: true, anchorSize: 8, + showAbove: true, itemStyle: { // borderColor: '#5470c6' borderWidth: 1 @@ -325,9 +327,17 @@ shadowBlur: 15 } }, + splitLine: { + lineStyle: { + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 3, + shadowOffsetX: 1, + shadowOffsetY: 2 + } + }, axisLabel: { fontSize: 50, - distance: 20, + distance: 25, formatter: function(value) { if (value === 0) { return ''; @@ -337,14 +347,13 @@ }, anchor: { show: true, - anchorSize: 20, + 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, + keepAspect: true, itemStyle: { - borderWidth: 15, - borderColor: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 + color: '#707177' } }, pointer: { @@ -369,14 +378,13 @@ data: [ { value: 0, - name: 'Powered by ECharts' + name: '' } ] }, { name: 'minute', type: 'gauge', - z2: 3, startAngle: 90, endAngle: -270, min: 0, @@ -407,7 +415,17 @@ } }, anchor: { - show: false + show: true, + anchorSize: 20, + showAbove: false, + itemStyle: { + borderWidth: 15, + borderColor: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } }, detail: { show: false @@ -425,7 +443,6 @@ { name: 'second', type: 'gauge', - z2: 4, startAngle: 90, endAngle: -270, min: 0, @@ -459,6 +476,7 @@ anchor: { show: true, anchorSize: 15, + showAbove: true, itemStyle: { color: '#C0911F', shadowColor: 'rgba(0, 0, 0, 0.3)', diff --git a/test/gauge.html b/test/gauge.html index 76dd474c09..1e1810ec58 100644 --- a/test/gauge.html +++ b/test/gauge.html @@ -62,6 +62,7 @@ show: true }, anchor:{ + showAbove: true, show: true }, roundCap: true, @@ -105,16 +106,59 @@ color: ['#f00', '#0f0'] }, anchor: { - show: true + show: true, + showAbove: true + }, + detail: { + formatter: '{value}%' }, - detail: {formatter: '{value}%'}, data: [ - {value: 30, name: '完成率'}, - {value: 50, name: '成率'}, - {value: 60, name: '达标率'} - ] + { + value: 20, + name: '完成率', + title: { + offsetCenter: ['-40%', '20%'] + }, + detail: { + offsetCenter: ['-40%', '35%'] + } + }, + { + value: 40, + name: '达标率', + title: { + offsetCenter: ['0%', '20%'] + }, + detail: { + offsetCenter: ['0%', '35%'] + } + }, + { + value: 60, + name: '优秀率', + title: { + offsetCenter: ['40%', '20%'] + }, + detail: { + offsetCenter: ['40%', '35%'] + } + } + ], + title: { + fontSize: 14 + }, + detail: { + width: 30, + height: 12, + fontSize: 12, + color: 'auto', + borderColor: 'auto', + borderWidth: 1, + borderRadius: 3, + formatter: '{value}%', + } } - ] + ], }; chart2.setOption(option2); }) 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 13/14] 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 e1e1946ec6..bfe4b36086 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 a7f4b69c3b..8592e1bf18 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 e40a7e5e60..6d51d59cc6 100644 --- a/test/gauge-distance.html +++ b/test/gauge-distance.html @@ -128,7 +128,7 @@ anchor: { show: true, showAbove: true, - anchorSize: 25, + size: 25, itemStyle: { borderWidth: 10 } @@ -478,7 +478,7 @@ }, anchor: { show: true, - anchorSize: 20, + size: 20, itemStyle: { borderColor: '#000', borderWidth: 2 @@ -530,7 +530,7 @@ }, 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 f07b4ed918..4656d98bba 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -150,7 +150,7 @@ }, anchor: { show: true, - anchorSize: 8, + size: 8, itemStyle: { color: '#5470c6' } @@ -194,7 +194,7 @@ }, anchor: { show: true, - anchorSize: 8, + size: 8, itemStyle: { color: '#5470c6' } @@ -239,7 +239,7 @@ }, anchor: { show: true, - anchorSize: 8, + size: 8, showAbove: true, itemStyle: { // borderColor: '#5470c6' @@ -350,7 +350,7 @@ 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 @@ }, anchor: { show: true, - anchorSize: 20, + size: 20, showAbove: false, itemStyle: { borderWidth: 15, @@ -475,7 +475,7 @@ }, anchor: { show: true, - anchorSize: 15, + size: 15, showAbove: true, itemStyle: { color: '#C0911F', From 3729431b57cba219d43bbc439760626a7ecd1502 Mon Sep 17 00:00:00 2001 From: yufeng04 <740135965@qq.com> Date: Fri, 16 Oct 2020 23:10:40 +0800 Subject: [PATCH 14/14] fix:the logic of code in data.update --- src/chart/gauge/GaugeView.ts | 37 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index 8592e1bf18..c4d7208a9e 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -432,39 +432,33 @@ class GaugeView extends ChartView { .update(function (newIdx, oldIdx) { if (showPointer) { const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath; - if (previousPointer) { - const previousRotate = previousPointer.rotation; - group.remove(previousPointer); - const pointer = createPointer(newIdx, previousRotate); + const previousRotate = previousPointer ? previousPointer.rotation : startAngle; + 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 + + Math.PI / 2 ) }, seriesModel); group.add(pointer); data.setItemGraphicEl(newIdx, pointer); - } } if (showProgress) { const previousProgress = oldProgressData[oldIdx]; - 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; - } + const previousEndAngle = previousProgress ? previousProgress.shape.endAngle : startAngle; + 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(); @@ -491,6 +485,7 @@ class GaugeView extends ChartView { const progress = progressList[idx]; progress.useStyle(data.getItemVisual(idx, 'style')); progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); + (progress as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(progress, itemModel); enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope')); }