diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index 09b3c1876016680b0ed82530aa6ca091216fcff7..489456e818d7a6280f8748d5f3839f46aa5d384c 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -30,7 +30,10 @@ import { ColorString, ECElement } from '../../util/types'; import List from '../../data/List'; import Sausage from '../../util/shape/sausage'; import {createSymbol} from '../../util/symbol'; -import type Displayable from 'zrender/src/graphic/Displayable'; +import ZRImage from 'zrender/src/graphic/Image'; +import {extend} from 'zrender/src/core/util'; + +type ECSymbol = ReturnType; interface PosInfo { cx: number @@ -477,9 +480,39 @@ class GaugeView extends ChartView { const itemModel = data.getItemModel(idx); const emphasisModel = itemModel.getModel('emphasis'); if (showPointer) { - const pointer = data.getItemGraphicEl(idx) as Displayable; - pointer.type !== 'image' && pointer.useStyle(data.getItemVisual(idx, 'style')); + const pointer = data.getItemGraphicEl(idx) as ECSymbol; + const symbolStyle = data.getItemVisual(idx, 'style'); + const visualColor = symbolStyle.fill; + if (pointer instanceof ZRImage) { + const pathStyle = pointer.style; + pointer.useStyle(extend({ + // TODO other properties like x, y ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, symbolStyle)); + } + else { + if (pointer.__isEmptyBrush) { + // fill and stroke will be swapped if it's empty. + // So we cloned a new style to avoid it affecting the original style in visual storage. + // TODO Better implementation. No empty logic! + pointer.useStyle(extend({}, symbolStyle)); + } + else { + pointer.useStyle(symbolStyle); + } + if (pointer.type !== 'pointer') { + // Disable decal because symbol scale will been applied on the decal. + pointer.style.decal = null; + pointer.setColor(visualColor); + pointer.style.strokeNoScale = true; + } + } + 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) diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html index 079f01e43c51ff310a55ce0c93bddf299fa6cce9..3c318c4c011b531416d8e5a02dc794f688468cab 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -46,6 +46,7 @@ under the License.
+
@@ -590,6 +591,44 @@ under the License. // recordCanvas: true, }); + var option9 = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + toolbox: { + feature: { + restore: {}, + saveAsImage: {} + } + }, + series: [ + { + name: '业务指标', + type: 'gauge', + pointer: { + icon: 'emptyCircle', + itemStyle: { + borderWidth: 10, + borderColor: '#f00' + }, + }, + anchor: { + // show: true + }, + detail: {formatter: '{value}%'}, + data: [{value: 58.46, name: '完成率'}] + } + ] + }; + + var chart9 = testHelper.create(echarts, 'main9', { + title: [ + 'pointer.icon: emptyCircle', + 'anchor.show: false' + ], + option: option9 + }); + });