Merge branch 'master' of https://github.com/apache/echarts into fix-linear-gradient

src/chart/effectScatter/EffectScatterSeries.ts

@@ -71,6 +71,7 @@ export interface EffectScatterSeriesOption extends SeriesOption<EffectScatterSta
      * When to show the effect
      */
     showEffectOn?: 'render' | 'emphasis'
+    clip?: boolean
 
     /**
      * Ripple effect config
@@ -107,6 +108,7 @@ class EffectScatterSeriesModel extends SeriesModel<EffectScatterSeriesOption> {
 
         // When to show the effect, option: 'render'|'emphasis'
         showEffectOn: 'render',
+        clip: true,
 
         // Ripple effect config
         rippleEffect: {

src/chart/effectScatter/EffectScatterView.ts

@@ -41,10 +41,16 @@ class EffectScatterView extends ChartView {
     render(seriesModel: EffectScatterSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
         const effectSymbolDraw = this._symbolDraw;
-        effectSymbolDraw.updateData(data);
+        effectSymbolDraw.updateData(data, {clipShape: this._getClipShape(seriesModel)});
         this.group.add(effectSymbolDraw.group);
     }
 
+    _getClipShape(seriesModel: EffectScatterSeriesModel) {
+        const coordSys = seriesModel.coordinateSystem;
+        const clipArea = coordSys && coordSys.getArea && coordSys.getArea();
+        return seriesModel.get('clip', true) ? clipArea : null;
+    }
+
     updateTransform(seriesModel: EffectScatterSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         const data = seriesModel.getData();
 

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<typeof createSymbol>;
 
 interface PosInfo {
     cx: number
@@ -476,9 +480,25 @@ class GaugeView extends ChartView {
                 const itemModel = data.getItemModel<GaugeDataItemOption>(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)

src/chart/helper/Line.ts

@@ -70,7 +70,7 @@ function createSymbol(name: 'fromSymbol' | 'toSymbol', lineData: LineList, idx:
 
     const symbolSize = lineData.getItemVisual(idx, name + 'Size' as 'fromSymbolSize' | 'toSymbolSize');
     const symbolRotate = lineData.getItemVisual(idx, name + 'Rotate' as 'fromSymbolRotate' | 'toSymbolRotate');
-    const symbolOffset = lineData.getItemVisual(idx, name + 'Offset' as 'fromSymbolOffset' | 'toSymbolOffset');
+    const symbolOffset = lineData.getItemVisual(idx, name + 'Offset' as 'fromSymbolOffset' | 'toSymbolOffset') || 0;
     const symbolKeepAspect = lineData.getItemVisual(idx,
         name + 'KeepAspect' as 'fromSymbolKeepAspect' | 'toSymbolKeepAspect');
 

src/chart/line/LineView.ts

@@ -738,7 +738,7 @@ class LineView extends ChartView {
 
         if (polyline.style.lineWidth > 0 && seriesModel.get(['emphasis', 'lineStyle', 'width']) === 'bolder') {
             const emphasisLineStyle = polyline.getState('emphasis').style;
-            emphasisLineStyle.lineWidth = polyline.style.lineWidth + 1;
+            emphasisLineStyle.lineWidth = +polyline.style.lineWidth + 1;
         }
 
         // Needs seriesIndex for focus

test/gauge-pointer.html

@@ -45,6 +45,8 @@ under the License.
         <div id="main5"></div>
         <div id="main6"></div>
         <div id="main7"></div>
+        <div id="main8"></div>
+        <div id="main9"></div>
 
 
 
@@ -547,6 +549,86 @@ under the License.
                 date = null;
             }, 1000);
 
+
+            var option8 = {
+                tooltip: {
+                    formatter: '{a} <br/>{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} <br/>{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
+            });
+
         });
         </script>