diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index f155447c9553aadd5fbcd48cbd8c0665b75f003b..b005b53f1518350ce3d17ff1be2d15bfcffb63ca 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -30,6 +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 ZRImage from 'zrender/src/graphic/Image'; +import {extend} from 'zrender/src/core/util'; + +type ECSymbol = ReturnType; interface PosInfo { cx: number @@ -476,9 +480,25 @@ class GaugeView extends ChartView { const itemModel = data.getItemModel(idx); const emphasisModel = itemModel.getModel('emphasis'); if (showPointer) { - const pointer = data.getItemGraphicEl(idx) as PointerPath; - 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({ + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, symbolStyle)); + } + else { + pointer.useStyle(symbolStyle); + pointer.type !== 'pointer' && pointer.setColor(visualColor); + } + 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 4656d98bba160c166e6d1aaf8657fe844b75d199..3c318c4c011b531416d8e5a02dc794f688468cab 100644 --- a/test/gauge-pointer.html +++ b/test/gauge-pointer.html @@ -45,6 +45,8 @@ under the License.
+
+
@@ -547,6 +549,86 @@ under the License. date = null; }, 1000); + + var option8 = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + toolbox: { + feature: { + restore: {}, + saveAsImage: {} + } + }, + series: [ + { + name: '业务指标', + type: 'gauge', + anchor: { + show: true, + icon: "image://https://www.apache.org/img/support-apache.jpg", + size: 50, + showAbove: true + }, + pointer: { + icon: "image://https://www.apache.org/img/support-apache.jpg", + length: "70%" + }, + detail: {formatter: '{value}%'}, + data: [{value: 58.46, name: '完成率'}] + } + ] + }; + + var chart8 = testHelper.create(echarts, 'main8', { + title: [ + 'pointer.icon: "image://url"', + 'anchor.icon: "image://url"' + ], + option: option8 + // height: 1200, + // buttons: [{text: 'btn-txt', onclick: function () {}}], + // 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 + }); + });