Merge branch 'master' of https://github.com/ecomfe/echarts

extension/bmap/BMapModel.js

@@ -23,9 +23,10 @@ define(function (require) {
         },
 
         defaultOption: {
-            center: null,
 
-            zoom: 1,
+            center: [104.114129, 37.550339],
+
+            zoom: 5,
 
             mapStyle: {},
 

src/chart/helper/EffectSymbol.js

@@ -19,6 +19,19 @@ define(function (require) {
         }
         return symbolSize;
     }
+
+    function updateRipplePath(rippleGroup, effectCfg) {
+        rippleGroup.eachChild(function (ripplePath) {
+            ripplePath.attr({
+                z: effectCfg.z,
+                zlevel: effectCfg.zlevel,
+                style: {
+                    stroke: effectCfg.brushType === 'stroke' ? effectCfg.color : null,
+                    fill: effectCfg.brushType === 'fill' ? effectCfg.color : null
+                }
+            });
+        });
+    }
     /**
      * @constructor
      * @param {module:echarts/data/List} data
@@ -45,12 +58,9 @@ define(function (require) {
         this.childAt(1).removeAll();
     };
 
-    effectSymbolProto.startEffectAnimation = function (
-        period, brushType, rippleScale, effectOffset, z, zlevel
-    ) {
-        var symbolType = this._symbolType;
-        var color = this._color;
-
+    effectSymbolProto.startEffectAnimation = function (effectCfg) {
+        var symbolType = effectCfg.symbolType;
+        var color = effectCfg.color;
         var rippleGroup = this.childAt(1);
 
         for (var i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
@@ -59,27 +69,23 @@ define(function (require) {
             );
             ripplePath.attr({
                 style: {
-                    stroke: brushType === 'stroke' ? color : null,
-                    fill: brushType === 'fill' ? color : null,
                     strokeNoScale: true
                 },
                 z2: 99,
                 silent: true,
-                scale: [1, 1],
-                z: z,
-                zlevel: zlevel
+                scale: [1, 1]
             });
 
-            var delay = -i / EFFECT_RIPPLE_NUMBER * period + effectOffset;
-            // TODO Configurable period
+            var delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
+            // TODO Configurable effectCfg.period
             ripplePath.animate('', true)
-                .when(period, {
-                    scale: [rippleScale, rippleScale]
+                .when(effectCfg.period, {
+                    scale: [effectCfg.rippleScale, effectCfg.rippleScale]
                 })
                 .delay(delay)
                 .start();
             ripplePath.animateStyle(true)
-                .when(period, {
+                .when(effectCfg.period, {
                     opacity: 0
                 })
                 .delay(delay)
@@ -87,6 +93,29 @@ define(function (require) {
 
             rippleGroup.add(ripplePath);
         }
+
+        updateRipplePath(rippleGroup, effectCfg);
+    };
+
+    /**
+     * Update effect symbol
+     */
+    effectSymbolProto.updateEffectAnimation = function (effectCfg) {
+        var oldEffectCfg = this._effectCfg;
+        var rippleGroup = this.childAt(1);
+
+        // Must reinitialize effect if following configuration changed
+        var DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale'];
+        for (var i = 0; i < DIFFICULT_PROPS; i++) {
+            var propName = DIFFICULT_PROPS[i];
+            if (oldEffectCfg[propName] !== effectCfg[propName]) {
+                this.stopEffectAnimation();
+                this.startEffectAnimation(effectCfg);
+                return;
+            }
+        }
+
+        updateRipplePath(rippleGroup, effectCfg);
     };
 
     /**
@@ -135,43 +164,52 @@ define(function (require) {
         }
         rippleGroup.rotation = (itemModel.getShallow('symbolRotate') || 0) * Math.PI / 180 || 0;
 
-        this._symbolType = symbolType;
-        this._color = color;
-
-        var showEffectOn = seriesModel.get('showEffectOn');
-        var rippleScale = itemModel.get('rippleEffect.scale');
-        var brushType = itemModel.get('rippleEffect.brushType');
-        var effectPeriod = itemModel.get('rippleEffect.period') * 1000;
-        var effectOffset = idx / data.count();
-        var z = itemModel.getShallow('z') || 0;
-        var zlevel = itemModel.getShallow('zlevel') || 0;
-
-        this.stopEffectAnimation();
-        if (showEffectOn === 'render') {
-            this.startEffectAnimation(
-                effectPeriod, brushType, rippleScale, effectOffset, z, zlevel
-            );
-        }
-        var symbol = this.childAt(0);
-        function onEmphasis() {
-            symbol.trigger('emphasis');
-            if (showEffectOn !== 'render') {
-                this.startEffectAnimation(
-                    effectPeriod, brushType, rippleScale, effectOffset, z, zlevel
-                );
-            }
+        var effectCfg = {};
+
+        effectCfg.showEffectOn = seriesModel.get('showEffectOn');
+        effectCfg.rippleScale = itemModel.get('rippleEffect.scale');
+        effectCfg.brushType = itemModel.get('rippleEffect.brushType');
+        effectCfg.period = itemModel.get('rippleEffect.period') * 1000;
+        effectCfg.effectOffset = idx / data.count();
+        effectCfg.z = itemModel.getShallow('z') || 0;
+        effectCfg.zlevel = itemModel.getShallow('zlevel') || 0;
+        effectCfg.symbolType = symbolType;
+        effectCfg.color = color;
+
+        this.off('mouseover').off('mouseout').off('emphasis').off('normal');
+
+        if (effectCfg.showEffectOn === 'render') {
+            this._effectCfg
+                ? this.updateEffectAnimation(effectCfg)
+                : this.startEffectAnimation(effectCfg);
+
+            this._effectCfg = effectCfg;
         }
-        function onNormal() {
-            symbol.trigger('normal');
-            if (showEffectOn !== 'render') {
-                this.stopEffectAnimation();
-            }
+        else {
+            // Not keep old effect config
+            this._effectCfg = null;
+
+            this.stopEffectAnimation();
+            var symbol = this.childAt(0);
+            var onEmphasis = function () {
+                symbol.trigger('emphasis');
+                if (effectCfg.showEffectOn !== 'render') {
+                    this.startEffectAnimation(effectCfg);
+                }
+            };
+            var onNormal = function () {
+                symbol.trigger('normal');
+                if (effectCfg.showEffectOn !== 'render') {
+                    this.stopEffectAnimation();
+                }
+            };
+            this.on('mouseover', onEmphasis, this)
+                .on('mouseout', onNormal, this)
+                .on('emphasis', onEmphasis, this)
+                .on('normal', onNormal, this);
         }
-        this.off('mouseover').off('mouseout').off('emphasis').off('normal');
-        this.on('mouseover', onEmphasis, this)
-            .on('mouseout', onNormal, this)
-            .on('emphasis', onEmphasis, this)
-            .on('normal', onNormal, this);
+
+        this._effectCfg = effectCfg;
     };
 
     effectSymbolProto.fadeOut = function (cb) {

src/chart/helper/LargeSymbolDraw.js

@@ -37,6 +37,28 @@ define(function (require) {
                     symbolProxy.buildPath(path, symbolProxyShape, true);
                 }
             }
+        },
+
+        findDataIndex: function (x, y) {
+            var shape = this.shape;
+            var points = shape.points;
+            var sizes = shape.sizes;
+
+            // Not consider transform
+            // Treat each element as a rect
+            // top down traverse
+            for (var i = points.length - 1; i >= 0; i--) {
+                var pt = points[i];
+                var size = sizes[i];
+                var x0 = pt[0] - size[0] / 2;
+                var y0 = pt[1] - size[1] / 2;
+                if (x >= x0 && y >= y0 && x <= x0 + size[0] && y <= y0 + size[1]) {
+                    // i is dataIndex
+                    return i;
+                }
+            }
+
+            return -1;
         }
     });
 
@@ -44,7 +66,8 @@ define(function (require) {
         this.group = new graphic.Group();
 
         this._symbolEl = new LargeSymbolPath({
-            silent: true
+            // rectHover: true,
+            // cursor: 'default'
         });
     }
 
@@ -90,8 +113,20 @@ define(function (require) {
             symbolEl.setColor(visualColor);
         }
 
+        // Enable tooltip
+        // PENDING May have performance issue when path is extremely large
+        symbolEl.seriesIndex = seriesModel.seriesIndex;
+        symbolEl.on('mousemove', function (e) {
+            symbolEl.dataIndex = null;
+            var dataIndex = symbolEl.findDataIndex(e.offsetX, e.offsetY);
+            if (dataIndex > 0) {
+                // Provide dataIndex for tooltip
+                symbolEl.dataIndex = dataIndex;
+            }
+        });
+
         // Add back
-        this.group.add(this._symbolEl);
+        this.group.add(symbolEl);
     };
 
     largeSymbolProto.updateLayout = function (seriesModel) {

src/chart/lines/LinesView.js

@@ -39,12 +39,23 @@ define(function (require) {
                 });
             }
             if (hasEffect && trailLength) {
+                if (__DEV__) {
+                    var notInIndividual = false;
+                    ecModel.eachSeries(function (otherSeriesModel) {
+                        if (otherSeriesModel !== seriesModel && otherSeriesModel.get('zlevel') === zlevel) {
+                            notInIndividual = true;
+                        }
+                    });
+                    notInIndividual && console.warn('Lines with trail effect should have an individual zlevel');
+                }
+
                 zr.configLayer(zlevel, {
                     motionBlur: true,
                     lastFrameAlpha: Math.max(Math.min(trailLength / 10 + 0.9, 1), 0)
                 });
             }
 
+
             this.group.add(lineDraw.group);
 
             lineDraw.updateData(data);

src/chart/radar/RadarView.js

@@ -134,7 +134,7 @@ define(function (require) {
                 group.add(itemGroup);
 
                 polyline.useStyle(
-                    zrUtil.extend(
+                    zrUtil.defaults(
                         itemModel.getModel('lineStyle.normal').getLineStyle(),
                         {
                             fill: 'none',

src/component/dataZoom/SliderZoomView.js

@@ -146,9 +146,10 @@ define(function (require) {
 
             var barGroup = this._displayables.barGroup = new graphic.Group();
 
+            this._renderBackground();
+
             this._renderHandle();
 
-            this._renderBackground();
             this._renderDataShadow();
 
             thisGroup.add(barGroup);
@@ -256,7 +257,8 @@ define(function (require) {
                 },
                 style: {
                     fill: dataZoomModel.get('backgroundColor')
-                }
+                },
+                z2: -40
             }));
         },
 
@@ -462,7 +464,8 @@ define(function (require) {
                         textAlign: 'center',
                         fill: textStyleModel.getTextColor(),
                         textFont: textStyleModel.getFont()
-                    }
+                    },
+                    z2: 10
                 }));
 
             }, this);

test/parallel-nutrients.html

@@ -34,7 +34,7 @@
                 'echarts/component/legend',
                 'echarts/component/tooltip',
                 'echarts/component/toolbox',
-                'echarts/component/visualMap',
+                'echarts/component/visualMap'
             ], function (ec, ct) {
 
                 $.getJSON('./data/nutrients.json', function (data) {
@@ -45,7 +45,9 @@
 
                     chart = myChart = echarts.init(document.getElementById('main'));
 
+                    console.time('render');
                     chart.setOption(getOption(data));
+                    console.timeEnd('render');
 
                     chart.on('axisAreaSelected', function (event) {
                         // var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
@@ -231,7 +233,7 @@
                                 lineStyle: lineStyle,
                                 inactiveOpacity: 0,
                                 activeOpacity: 0.01,
-                                progressive: 100,
+                                progressive: 500,
                                 smooth: true,
                                 data: data
                             }

test/theme.html

@@ -26,7 +26,8 @@
                 'echarts/chart/bar',
                 'echarts/component/legend',
                 'echarts/component/grid',
-                'echarts/component/tooltip'
+                'echarts/component/tooltip',
+                'echarts/component/dataZoom'
             ], function (echarts, theme) {
 
                 var chart = echarts.init(document.getElementById('main'), 'dark');
@@ -75,6 +76,10 @@
                         align: 'right'
                     },
                     tooltip: {},
+                    dataZoom: {
+                        start: 10,
+                        end: 20
+                    },
                     xAxis: {
                         data: xAxisData,
                         axisLine: {