echarts 4.5.0-rc.2 → 4.8.0

package/lib/component/axis/axisSplitHelper.js

@@ -0,0 +1,132 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var zrUtil = require("zrender/lib/core/util");
+
+var graphic = require("../../util/graphic");
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function rectCoordAxisBuildSplitArea(axisView, axisGroup, axisModel, gridModel) {
+  var axis = axisModel.axis;
+
+  if (axis.scale.isBlank()) {
+    return;
+  }
+
+  var splitAreaModel = axisModel.getModel('splitArea');
+  var areaStyleModel = splitAreaModel.getModel('areaStyle');
+  var areaColors = areaStyleModel.get('color');
+  var gridRect = gridModel.coordinateSystem.getRect();
+  var ticksCoords = axis.getTicksCoords({
+    tickModel: splitAreaModel,
+    clamp: true
+  });
+
+  if (!ticksCoords.length) {
+    return;
+  } // For Making appropriate splitArea animation, the color and anid
+  // should be corresponding to previous one if possible.
+
+
+  var areaColorsLen = areaColors.length;
+  var lastSplitAreaColors = axisView.__splitAreaColors;
+  var newSplitAreaColors = zrUtil.createHashMap();
+  var colorIndex = 0;
+
+  if (lastSplitAreaColors) {
+    for (var i = 0; i < ticksCoords.length; i++) {
+      var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+
+      if (cIndex != null) {
+        colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+        break;
+      }
+    }
+  }
+
+  var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+  var areaStyle = areaStyleModel.getAreaStyle();
+  areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
+
+  for (var i = 1; i < ticksCoords.length; i++) {
+    var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+    var x;
+    var y;
+    var width;
+    var height;
+
+    if (axis.isHorizontal()) {
+      x = prev;
+      y = gridRect.y;
+      width = tickCoord - x;
+      height = gridRect.height;
+      prev = x + width;
+    } else {
+      x = gridRect.x;
+      y = prev;
+      width = gridRect.width;
+      height = tickCoord - y;
+      prev = y + height;
+    }
+
+    var tickValue = ticksCoords[i - 1].tickValue;
+    tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+    axisGroup.add(new graphic.Rect({
+      anid: tickValue != null ? 'area_' + tickValue : null,
+      shape: {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      style: zrUtil.defaults({
+        fill: areaColors[colorIndex]
+      }, areaStyle),
+      silent: true
+    }));
+    colorIndex = (colorIndex + 1) % areaColorsLen;
+  }
+
+  axisView.__splitAreaColors = newSplitAreaColors;
+}
+
+function rectCoordAxisHandleRemove(axisView) {
+  axisView.__splitAreaColors = null;
+}
+
+exports.rectCoordAxisBuildSplitArea = rectCoordAxisBuildSplitArea;
+exports.rectCoordAxisHandleRemove = rectCoordAxisHandleRemove;

package/lib/component/brush/BrushView.js

@@ -24,6 +24,10 @@ var zrUtil = require("zrender/lib/core/util");
 
 var BrushController = require("../helper/BrushController");
 
+var _visualEncoding = require("./visualEncoding");
+
+var layoutCovers = _visualEncoding.layoutCovers;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -81,7 +85,13 @@ var _default = echarts.extendComponentView({
   /**
    * @override
    */
-  updateTransform: updateController,
+  updateTransform: function (brushModel, ecModel) {
+    // PENDING: `updateTransform` is a little tricky, whose layout need
+    // to be calculate mandatorily and other stages will not be performed.
+    // Take care the correctness of the logic. See #11754 .
+    layoutCovers(ecModel);
+    return updateController.apply(this, arguments);
+  },
 
   /**
    * @override

package/lib/component/brush/visualEncoding.js

@@ -65,14 +65,23 @@ echarts.registerLayout(PRIORITY_BRUSH, function (ecModel, api, payload) {
     payload && payload.type === 'takeGlobalCursor' && brushModel.setBrushOption(payload.key === 'brush' ? payload.brushOption : {
       brushType: false
     });
+  });
+  layoutCovers(ecModel);
+});
+
+function layoutCovers(ecModel) {
+  ecModel.eachComponent({
+    mainType: 'brush'
+  }, function (brushModel) {
     var brushTargetManager = brushModel.brushTargetManager = new BrushTargetManager(brushModel.option, ecModel);
     brushTargetManager.setInputRanges(brushModel.areas, ecModel);
   });
-});
+}
 /**
  * Register the visual encoding if this modules required.
  */
 
+
 echarts.registerVisual(PRIORITY_BRUSH, function (ecModel, api, payload) {
   var brushSelected = [];
   var throttleType;
@@ -314,4 +323,6 @@ var boundingRectBuilders = {
 
 function getBoundingRectFromMinMax(minMax) {
   return new BoundingRect(minMax[0][0], minMax[1][0], minMax[0][1] - minMax[0][0], minMax[1][1] - minMax[1][0]);
-}
+}
+
+exports.layoutCovers = layoutCovers;

package/lib/component/dataZoom/SliderZoomView.js

@@ -435,10 +435,6 @@ var SliderZoomView = DataZoomView.extend({
       draggable: true,
       cursor: getCursor(this._orient),
       drift: bind(this._onDragMove, this, 'all'),
-      onmousemove: function (e) {
-        // Fot mobile devicem, prevent screen slider on the button.
-        eventTool.stop(e.event);
-      },
       ondragstart: bind(this._showDataInfo, this, true),
       ondragend: bind(this._onDragEnd, this),
       onmouseover: bind(this._showDataInfo, this, true),
@@ -469,10 +465,6 @@ var SliderZoomView = DataZoomView.extend({
         cursor: getCursor(this._orient),
         draggable: true,
         drift: bind(this._onDragMove, this, handleIndex),
-        onmousemove: function (e) {
-          // Fot mobile devicem, prevent screen slider on the button.
-          eventTool.stop(e.event);
-        },
         ondragend: bind(this._onDragEnd, this),
         onmouseover: bind(this._showDataInfo, this, true),
         onmouseout: bind(this._showDataInfo, this, false)
@@ -647,8 +639,10 @@ var SliderZoomView = DataZoomView.extend({
     handleLabels[0].attr('invisible', !showOrHide);
     handleLabels[1].attr('invisible', !showOrHide);
   },
-  _onDragMove: function (handleIndex, dx, dy) {
-    this._dragging = true; // Transform dx, dy to bar coordination.
+  _onDragMove: function (handleIndex, dx, dy, event) {
+    this._dragging = true; // For mobile device, prevent screen slider on the button.
+
+    eventTool.stop(event.event); // Transform dx, dy to bar coordination.
 
     var barTransform = this._displayables.barGroup.getLocalTransform();
 

package/lib/component/helper/BrushController.js

@@ -153,12 +153,6 @@ function BrushController(zr) {
    */
 
   this._dragging;
-  /**
-   * @private
-   * @type {Object}
-   */
-
-  this._lastMouseMovePoint = {};
   /**
    * @private
    * @type {Array}
@@ -200,7 +194,7 @@ function BrushController(zr) {
    */
 
   this._handlers = {};
-  each(mouseHandlers, function (handler, eventName) {
+  each(pointerHandlers, function (handler, eventName) {
     this._handlers[eventName] = zrUtil.bind(handler, this);
   }, this);
 }
@@ -351,9 +345,7 @@ function doEnableBrush(controller, brushOption) {
     interactionMutex.take(zr, MUTEX_RESOURCE_KEY, controller._uid);
   }
 
-  each(controller._handlers, function (handler, eventName) {
-    zr.on(eventName, handler);
-  });
+  mountHandlers(zr, controller._handlers);
   controller._brushType = brushOption.brushType;
   controller._brushOption = zrUtil.merge(zrUtil.clone(DEFAULT_BRUSH_OPT), brushOption, true);
 }
@@ -361,10 +353,20 @@ function doEnableBrush(controller, brushOption) {
 function doDisableBrush(controller) {
   var zr = controller._zr;
   interactionMutex.release(zr, MUTEX_RESOURCE_KEY, controller._uid);
-  each(controller._handlers, function (handler, eventName) {
+  unmountHandlers(zr, controller._handlers);
+  controller._brushType = controller._brushOption = null;
+}
+
+function mountHandlers(zr, handlers) {
+  each(handlers, function (handler, eventName) {
+    zr.on(eventName, handler);
+  });
+}
+
+function unmountHandlers(zr, handlers) {
+  each(handlers, function (handler, eventName) {
     zr.off(eventName, handler);
   });
-  controller._brushType = controller._brushOption = null;
 }
 
 function createCover(controller, brushOption) {
@@ -667,8 +669,11 @@ function pointsToRect(points) {
 }
 
 function resetCursor(controller, e, localCursorPoint) {
-  // Check active
-  if (!controller._brushType) {
+  if ( // Check active
+  !controller._brushType // resetCursor should be always called when mouse is in zr area,
+  // but not called when mouse is out of zr area to avoid bad influence
+  // if `mousemove`, `mouseup` are triggered from `document` event.
+  || isOutsideZrArea(controller, e)) {
     return;
   }
 
@@ -758,7 +763,7 @@ function determineBrushType(brushType, panel) {
   return brushType;
 }
 
-var mouseHandlers = {
+var pointerHandlers = {
   mousedown: function (e) {
     if (this._dragging) {
       // In case some browser do not support globalOut,
@@ -777,10 +782,9 @@ var mouseHandlers = {
     }
   },
   mousemove: function (e) {
-    var lastPoint = this._lastMouseMovePoint;
-    lastPoint.x = e.offsetX;
-    lastPoint.y = e.offsetY;
-    var localCursorPoint = this.group.transformCoordToLocal(lastPoint.x, lastPoint.y);
+    var x = e.offsetX;
+    var y = e.offsetY;
+    var localCursorPoint = this.group.transformCoordToLocal(x, y);
     resetCursor(this, e, localCursorPoint);
 
     if (this._dragging) {
@@ -791,34 +795,15 @@ var mouseHandlers = {
   },
   mouseup: function (e) {
     handleDragEnd(this, e);
-  },
-  globalout: function (e) {
-    handleDragEnd(this, e, true);
   }
 };
 
-function handleDragEnd(controller, e, isGlobalOut) {
+function handleDragEnd(controller, e) {
   if (controller._dragging) {
-    // Just be worried about bring some side effect to the world
-    // out of echarts, we do not `preventDefault` for globalout.
-    !isGlobalOut && preventDefault(e);
-    var pointerX = e.offsetX;
-    var pointerY = e.offsetY;
-    var lastPoint = controller._lastMouseMovePoint;
-
-    if (isGlobalOut) {
-      pointerX = lastPoint.x;
-      pointerY = lastPoint.y;
-    }
-
-    var localCursorPoint = controller.group.transformCoordToLocal(pointerX, pointerY); // FIXME
-    // Here `e` is used only in `onIrrelevantElement` finally. And it's OK
-    // that pass the `e` of `globalout` to `onIrrelevantElement`. But it is
-    // not a good design of these interfaces. However, we do not refactor
-    // these code now because the implementation of `onIrrelevantElement`
-    // need to be discussed and probably be changed in future, becuase it
-    // slows down the performance of zrender in some cases.
-
+    preventDefault(e);
+    var x = e.offsetX;
+    var y = e.offsetY;
+    var localCursorPoint = controller.group.transformCoordToLocal(x, y);
     var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true);
     controller._dragging = false;
     controller._track = [];
@@ -827,6 +812,11 @@ function handleDragEnd(controller, e, isGlobalOut) {
     eventParams && trigger(controller, eventParams);
   }
 }
+
+function isOutsideZrArea(controller, x, y) {
+  var zr = controller._zr;
+  return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight();
+}
 /**
  * key: brushType
  * @type {Object}

package/lib/component/helper/MapDraw.js

@@ -36,6 +36,8 @@ var _component = require("../../util/component");
 
 var getUID = _component.getUID;
 
+var Transformable = require("zrender/lib/mixin/Transformable");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -206,14 +208,29 @@ MapDraw.prototype = {
 
     var regionsGroup = this._regionsGroup;
     var group = this.group;
+    var transformInfo = geo.getTransformInfo(); // No animation when first draw or in action
+
+    var isFirstDraw = !regionsGroup.childAt(0) || payload;
+    var targetScale;
 
-    if (geo._roamTransformable.transform) {
-      group.transform = geo._roamTransformable.transform.slice();
+    if (isFirstDraw) {
+      group.transform = transformInfo.roamTransform;
       group.decomposeTransform();
+      group.dirty();
+    } else {
+      var target = new Transformable();
+      target.transform = transformInfo.roamTransform;
+      target.decomposeTransform();
+      var props = {
+        scale: target.scale,
+        position: target.position
+      };
+      targetScale = target.scale;
+      graphic.updateProps(group, props, mapOrGeoModel);
     }
 
-    var scale = geo._rawTransformable.scale;
-    var position = geo._rawTransformable.position;
+    var scale = transformInfo.rawScale;
+    var position = transformInfo.rawPosition;
     regionsGroup.removeAll();
     var itemStyleAccessPath = ['itemStyle'];
     var hoverItemStyleAccessPath = ['emphasis', 'itemStyle'];
@@ -333,6 +350,15 @@ MapDraw.prototype = {
           textAlign: 'center',
           textVerticalAlign: 'middle'
         });
+
+        if (!isFirstDraw) {
+          // Text animation
+          var textScale = [1 / targetScale[0], 1 / targetScale[1]];
+          graphic.updateProps(textEl, {
+            scale: textScale
+          }, mapOrGeoModel);
+        }
+
         regionGroup.add(textEl);
       } // setItemGraphicEl, setHoverStyle after all polygons and labels
       // are added to the rigionGroup

package/lib/component/legend/LegendModel.js

@@ -131,9 +131,9 @@ var LegendModel = echarts.extendComponentModel({
       availableNames.push(seriesName);
       var isPotential;
 
-      if (seriesModel.legendDataProvider) {
-        var data = seriesModel.legendDataProvider();
-        var names = data.mapArray(data.getName);
+      if (seriesModel.legendVisualProvider) {
+        var provider = seriesModel.legendVisualProvider;
+        var names = provider.getAllNames();
 
         if (!ecModel.isSeriesFiltered(seriesModel)) {
           availableNames = availableNames.concat(names);

package/lib/component/legend/LegendView.js

@@ -191,7 +191,7 @@ var _default = echarts.extendComponentView({
       if (legendDrawnMap.get(name)) {
         // Have been drawed
         return;
-      } // Series legend
+      } // Legend to control series.
 
 
       if (seriesModel) {
@@ -216,32 +216,32 @@ var _default = echarts.extendComponentView({
 
         var itemGroup = this._createItem(name, dataIndex, itemModel, legendModel, legendSymbolType, symbolType, itemAlign, color, borderColor, selectMode);
 
-        itemGroup.on('click', curry(dispatchSelectAction, name, api)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
+        itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
         legendDrawnMap.set(name, true);
       } else {
-        // Data legend of pie, funnel
+        // Legend to control data. In pie and funnel.
         ecModel.eachRawSeries(function (seriesModel) {
           // In case multiple series has same data name
           if (legendDrawnMap.get(name)) {
             return;
           }
 
-          if (seriesModel.legendDataProvider) {
-            var data = seriesModel.legendDataProvider();
-            var idx = data.indexOfName(name);
+          if (seriesModel.legendVisualProvider) {
+            var provider = seriesModel.legendVisualProvider;
 
-            if (idx < 0) {
+            if (!provider.containName(name)) {
               return;
             }
 
-            var color = data.getItemVisual(idx, 'color');
-            var borderColor = data.getItemVisual(idx, 'borderColor');
+            var idx = provider.indexOfName(name);
+            var color = provider.getItemVisual(idx, 'color');
+            var borderColor = provider.getItemVisual(idx, 'borderColor');
             var legendSymbolType = 'roundRect';
 
             var itemGroup = this._createItem(name, dataIndex, itemModel, legendModel, legendSymbolType, null, itemAlign, color, borderColor, selectMode); // FIXME: consider different series has items with the same name.
 
 
-            itemGroup.on('click', curry(dispatchSelectAction, name, api)) // Should not specify the series name, consider legend controls
+            itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId)) // Should not specify the series name, consider legend controls
             // more than one pie series.
             .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
             legendDrawnMap.set(name, true);
@@ -442,11 +442,15 @@ function setSymbolStyle(symbol, symbolType, legendModelItemStyle, borderColor, i
   return symbol.setStyle(itemStyle);
 }
 
-function dispatchSelectAction(name, api) {
+function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
+  // downplay before unselect
+  dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
   api.dispatchAction({
     type: 'legendToggleSelect',
-    name: name
-  });
+    name: seriesName != null ? seriesName : dataName
+  }); // highlight after select
+
+  dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
 }
 
 function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {

package/lib/component/legend/ScrollableLegendView.js

@@ -418,28 +418,28 @@ var ScrollableLegendView = LegendView.extend({
     }
   },
   _findTargetItemIndex: function (targetDataIndex) {
+    if (!this._showController) {
+      return 0;
+    }
+
     var index;
     var contentGroup = this.getContentGroup();
     var defaultIndex;
+    contentGroup.eachChild(function (child, idx) {
+      var legendDataIdx = child.__legendDataIndex; // FIXME
+      // If the given targetDataIndex (from model) is illegal,
+      // we use defualtIndex. But the index on the legend model and
+      // action payload is still illegal. That case will not be
+      // changed until some scenario requires.
+
+      if (defaultIndex == null && legendDataIdx != null) {
+        defaultIndex = idx;
+      }
 
-    if (this._showController) {
-      contentGroup.eachChild(function (child, idx) {
-        var legendDataIdx = child.__legendDataIndex; // FIXME
-        // If the given targetDataIndex (from model) is illegal,
-        // we use defualtIndex. But the index on the legend model and
-        // action payload is still illegal. That case will not be
-        // changed until some scenario requires.
-
-        if (defaultIndex == null && legendDataIdx != null) {
-          defaultIndex = idx;
-        }
-
-        if (legendDataIdx === targetDataIndex) {
-          index = idx;
-        }
-      });
-    }
-
+      if (legendDataIdx === targetDataIndex) {
+        index = idx;
+      }
+    });
     return index != null ? index : defaultIndex;
   }
 });

package/lib/component/marker/MarkLineModel.js

@@ -52,7 +52,8 @@ var _default = MarkerModel.extend({
     },
     label: {
       show: true,
-      position: 'end'
+      position: 'end',
+      distance: 5
     },
     lineStyle: {
       type: 'dashed'

package/lib/component/marker/markerHelper.js

@@ -85,7 +85,8 @@ function markerTypeCalculatorWithExtent(mlType, data, otherDataDim, targetDataDi
   var value = numCalculate(data, calcDataDim, mlType);
   var dataIndex = data.indicesOfNearest(calcDataDim, value)[0];
   coordArr[otherCoordIndex] = data.get(otherDataDim, dataIndex);
-  coordArr[targetCoordIndex] = data.get(targetDataDim, dataIndex); // Make it simple, do not visit all stacked value to count precision.
+  coordArr[targetCoordIndex] = data.get(calcDataDim, dataIndex);
+  var coordArrValue = data.get(targetDataDim, dataIndex); // Make it simple, do not visit all stacked value to count precision.
 
   var precision = numberUtil.getPrecision(data.get(targetDataDim, dataIndex));
   precision = Math.min(precision, 20);
@@ -94,7 +95,7 @@ function markerTypeCalculatorWithExtent(mlType, data, otherDataDim, targetDataDi
     coordArr[targetCoordIndex] = +coordArr[targetCoordIndex].toFixed(precision);
   }
 
-  return coordArr;
+  return [coordArr, coordArrValue];
 }
 
 var curry = zrUtil.curry; // TODO Specified percent
@@ -151,9 +152,11 @@ function dataTransform(seriesModel, item) {
     if (item.type && markerTypeCalculator[item.type] && axisInfo.baseAxis && axisInfo.valueAxis) {
       var otherCoordIndex = indexOf(dims, axisInfo.baseAxis.dim);
       var targetCoordIndex = indexOf(dims, axisInfo.valueAxis.dim);
-      item.coord = markerTypeCalculator[item.type](data, axisInfo.baseDataDim, axisInfo.valueDataDim, otherCoordIndex, targetCoordIndex); // Force to use the value of calculated value.
+      var coordInfo = markerTypeCalculator[item.type](data, axisInfo.baseDataDim, axisInfo.valueDataDim, otherCoordIndex, targetCoordIndex);
+      item.coord = coordInfo[0]; // Force to use the value of calculated value.
+      // let item use the value without stack.
 
-      item.value = item.coord[targetCoordIndex];
+      item.value = coordInfo[1];
     } else {
       // FIXME Only has one of xAxis and yAxis.
       var coord = [item.xAxis != null ? item.xAxis : item.radiusAxis, item.yAxis != null ? item.yAxis : item.angleAxis]; // Each coord support max, min, average

package/lib/component/title.js

@@ -28,6 +28,10 @@ var _layout = require("../util/layout");
 
 var getLayoutRect = _layout.getLayoutRect;
 
+var _format = require("../util/format");
+
+var windowOpen = _format.windowOpen;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -150,13 +154,13 @@ echarts.extendComponentView({
 
     if (link) {
       textEl.on('click', function () {
-        window.open(link, '_' + titleModel.get('target'));
+        windowOpen(link, '_' + titleModel.get('target'));
       });
     }
 
     if (sublink) {
       subTextEl.on('click', function () {
-        window.open(sublink, '_' + titleModel.get('subtarget'));
+        windowOpen(link, '_' + titleModel.get('subtarget'));
       });
     }
 

package/lib/component/toolbox/ToolboxView.js

@@ -78,7 +78,11 @@ var _default = echarts.extendComponentView({
       var oldName = featureNames[oldIndex];
       var featureOpt = featureOpts[featureName];
       var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
-      var feature;
+      var feature; // FIX#11236, merge feature title from MagicType newOption. TODO: consider seriesIndex ?
+
+      if (payload && payload.newTitle != null && payload.featureName === featureName) {
+        featureOpt.title = payload.newTitle;
+      }
 
       if (featureName && !oldName) {
         // Create