echarts 4.5.0 → 4.9.0

package/lib/chart/line/LineSeries.js

@@ -48,7 +48,9 @@ var _default = SeriesModel.extend({
   type: 'series.line',
   dependencies: ['grid', 'polar'],
   getInitialData: function (option, ecModel) {
-    return createListFromArray(this.getSource(), this);
+    return createListFromArray(this.getSource(), this, {
+      useEncodeDefaulter: true
+    });
   },
   defaultOption: {
     zlevel: 0,

package/lib/chart/line/LineView.js

@@ -24,6 +24,10 @@ var __DEV__ = _config.__DEV__;
 
 var zrUtil = require("zrender/lib/core/util");
 
+var _bbox = require("zrender/lib/core/bbox");
+
+var fromPoints = _bbox.fromPoints;
+
 var SymbolDraw = require("../helper/SymbolDraw");
 
 var SymbolClz = require("../helper/Symbol");
@@ -87,6 +91,17 @@ function isPointsSame(points1, points2) {
   return true;
 }
 
+function getBoundingDiff(points1, points2) {
+  var min1 = [];
+  var max1 = [];
+  var min2 = [];
+  var max2 = [];
+  fromPoints(points1, min1, max1);
+  fromPoints(points2, min2, max2); // Get a max value from each corner of two boundings.
+
+  return Math.max(Math.abs(min1[0] - min2[0]), Math.abs(min1[1] - min2[1]), Math.abs(max1[0] - max2[0]), Math.abs(max1[1] - max2[1]));
+}
+
 function getSmooth(smooth) {
   return typeof smooth === 'number' ? smooth : smooth ? 0.5 : 0;
 }
@@ -368,7 +383,7 @@ var _default = ChartView.extend({
     var step = !isCoordSysPolar && seriesModel.get('step');
     var clipShapeForSymbol;
 
-    if (coordSys && coordSys.getArea) {
+    if (coordSys && coordSys.getArea && seriesModel.get('clip', true)) {
       clipShapeForSymbol = coordSys.getArea(); // Avoid float number rounding error for symbol on the edge of axis extent.
       // See #7913 and `test/dataZoom-clip.html`.
 
@@ -381,8 +396,9 @@ var _default = ChartView.extend({
         clipShapeForSymbol.r0 -= 0.5;
         clipShapeForSymbol.r1 += 0.5;
       }
-    } // Initialization animation or coordinate system changed
+    }
 
+    this._clipShapeForSymbol = clipShapeForSymbol; // Initialization animation or coordinate system changed
 
     if (!(polyline && prevCoordSys.type === coordSys.type && step === this._step)) {
       showSymbol && symbolDraw.updateData(data, {
@@ -509,6 +525,11 @@ var _default = ChartView.extend({
         if (!pt) {
           // Null data
           return;
+        } // fix #11360: should't draw symbol outside clipShapeForSymbol
+
+
+        if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(pt[0], pt[1])) {
+          return;
         }
 
         symbol = new SymbolClz(data, dataIndex);
@@ -624,6 +645,24 @@ var _default = ChartView.extend({
       stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, coordSys, step);
       next = turnPointsIntoStep(diff.next, coordSys, step);
       stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step);
+    } // Don't apply animation if diff is large.
+    // For better result and avoid memory explosion problems like
+    // https://github.com/apache/incubator-echarts/issues/12229
+
+
+    if (getBoundingDiff(current, next) > 3000 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3000) {
+      polyline.setShape({
+        points: next
+      });
+
+      if (polygon) {
+        polygon.setShape({
+          points: next,
+          stackedOnPoints: stackedOnNext
+        });
+      }
+
+      return;
     } // `diff.current` is subset of `current` (which should be ensured by
     // turnPointsIntoStep), so points in `__points` can be updated when
     // points in `current` are update during animation.

package/lib/chart/lines/LinesSeries.js

@@ -106,8 +106,6 @@ var LinesSeries = SeriesModel.extend({
     LinesSeries.superApply(this, 'init', arguments);
   },
   mergeOption: function (option) {
-    // The input data may be null/undefined.
-    option.data = option.data || [];
     compatEc2(option);
 
     if (option.data) {

package/lib/chart/map/MapSeries.js

@@ -37,6 +37,10 @@ var retrieveRawAttr = _dataProvider.retrieveRawAttr;
 
 var geoSourceManager = require("../../coord/geo/geoSourceManager");
 
+var _sourceHelper = require("../../data/helper/sourceHelper");
+
+var makeSeriesEncodeForNameBased = _sourceHelper.makeSeriesEncodeForNameBased;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -72,7 +76,10 @@ var MapSeries = SeriesModel.extend({
    */
   seriesGroup: [],
   getInitialData: function (option) {
-    var data = createListSimply(this, ['value']);
+    var data = createListSimply(this, {
+      coordDimensions: ['value'],
+      encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this)
+    });
     var valueDim = data.mapDimension('value');
     var dataNameMap = zrUtil.createHashMap();
     var selectTargetList = [];
@@ -88,7 +95,7 @@ var MapSeries = SeriesModel.extend({
       });
     }
 
-    var geoSource = geoSourceManager.load(this.getMapType(), this.option.nameMap);
+    var geoSource = geoSourceManager.load(this.getMapType(), this.option.nameMap, this.option.nameProperty);
     zrUtil.each(geoSource.regions, function (region) {
       var name = region.name;
 
@@ -146,7 +153,7 @@ var MapSeries = SeriesModel.extend({
    *
    * @param {number} dataIndex
    */
-  formatTooltip: function (dataIndex) {
+  formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) {
     // FIXME orignalData and data is a bit confusing
     var data = this.getData();
     var formattedValue = addCommas(this.getRawValue(dataIndex));
@@ -163,7 +170,8 @@ var MapSeries = SeriesModel.extend({
       }
     }
 
-    return seriesNames.join(', ') + '<br />' + encodeHTML(name + ' : ' + formattedValue);
+    var newLine = renderMode === 'html' ? '<br/>' : '\n';
+    return seriesNames.join(', ') + newLine + encodeHTML(name + ' : ' + formattedValue);
   },
 
   /**
@@ -249,7 +257,8 @@ var MapSeries = SeriesModel.extend({
       itemStyle: {
         areaColor: 'rgba(255,215,0,0.8)'
       }
-    }
+    },
+    nameProperty: 'name'
   }
 });
 zrUtil.mixin(MapSeries, dataSelectableMixin);

package/lib/chart/pie/PieSeries.js

@@ -36,6 +36,12 @@ var _dataProvider = require("../../data/helper/dataProvider");
 
 var retrieveRawAttr = _dataProvider.retrieveRawAttr;
 
+var _sourceHelper = require("../../data/helper/sourceHelper");
+
+var makeSeriesEncodeForNameBased = _sourceHelper.makeSeriesEncodeForNameBased;
+
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -61,10 +67,7 @@ var PieSeries = echarts.extendSeriesModel({
     PieSeries.superApply(this, 'init', arguments); // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendDataProvider = function () {
-      return this.getRawData();
-    };
-
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this));
     this.updateSelectedMap(this._createSelectableList());
 
     this._defaultLabelLine(option);
@@ -75,7 +78,10 @@ var PieSeries = echarts.extendSeriesModel({
     this.updateSelectedMap(this._createSelectableList());
   },
   getInitialData: function (option, ecModel) {
-    return createListSimply(this, ['value']);
+    return createListSimply(this, {
+      coordDimensions: ['value'],
+      encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this)
+    });
   },
   _createSelectableList: function () {
     var data = this.getRawData();
@@ -144,12 +150,27 @@ var PieSeries = echarts.extendSeriesModel({
     // If still show when all data zero.
     stillShowZeroSum: true,
     // cursor: null,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: null,
+    height: null,
     label: {
       // If rotate around circle
       rotate: false,
       show: true,
       // 'outer', 'inside', 'center'
-      position: 'outer' // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+      position: 'outer',
+      // 'none', 'labelLine', 'edge'. Works only when position is 'outer'
+      alignTo: 'none',
+      // Closest distance between label and chart edge.
+      // Works only position is 'outer' and alignTo is 'edge'.
+      margin: '25%',
+      // Works only position is 'outer' and alignTo is not 'edge'.
+      bleedMargin: 10,
+      // Distance between text and label line.
+      distanceToLabelLine: 5 // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
       // 默认使用全局文本样式，详见TEXTSTYLE
       // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
 

package/lib/chart/pie/PieView.js

@@ -159,33 +159,40 @@ piePieceProto.updateData = function (data, idx, firstCreate) {
   var cursorStyle = itemModel.getShallow('cursor');
   cursorStyle && sector.attr('cursor', cursorStyle); // Toggle selected
 
-  toggleItemSelected(this, data.getItemLayout(idx), seriesModel.isSelected(null, idx), seriesModel.get('selectedOffset'), seriesModel.get('animation')); // Label and text animation should be applied only for transition type animation when update
+  toggleItemSelected(this, data.getItemLayout(idx), seriesModel.isSelected(data.getName(idx)), seriesModel.get('selectedOffset'), seriesModel.get('animation')); // Label and text animation should be applied only for transition type animation when update
 
   var withAnimation = !firstCreate && animationTypeUpdate === 'transition';
 
   this._updateLabel(data, idx, withAnimation);
 
-  this.highDownOnUpdate = itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled() ? function (fromState, toState) {
+  this.highDownOnUpdate = !seriesModel.get('silent') ? function (fromState, toState) {
+    var hasAnimation = seriesModel.isAnimationEnabled() && itemModel.get('hoverAnimation');
+
     if (toState === 'emphasis') {
       labelLine.ignore = labelLine.hoverIgnore;
       labelText.ignore = labelText.hoverIgnore; // Sector may has animation of updating data. Force to move to the last frame
       // Or it may stopped on the wrong shape
 
-      sector.stopAnimation(true);
-      sector.animateTo({
-        shape: {
-          r: layout.r + seriesModel.get('hoverOffset')
-        }
-      }, 300, 'elasticOut');
+      if (hasAnimation) {
+        sector.stopAnimation(true);
+        sector.animateTo({
+          shape: {
+            r: layout.r + seriesModel.get('hoverOffset')
+          }
+        }, 300, 'elasticOut');
+      }
     } else {
       labelLine.ignore = labelLine.normalIgnore;
       labelText.ignore = labelText.normalIgnore;
-      sector.stopAnimation(true);
-      sector.animateTo({
-        shape: {
-          r: layout.r
-        }
-      }, 300, 'elasticOut');
+
+      if (hasAnimation) {
+        sector.stopAnimation(true);
+        sector.animateTo({
+          shape: {
+            r: layout.r
+          }
+        }, 300, 'elasticOut');
+      }
     }
   } : null;
   graphic.setHoverStyle(this);
@@ -242,7 +249,7 @@ piePieceProto._updateLabel = function (data, idx, withAnimation) {
   graphic.setLabelStyle(labelText.style, labelText.hoverStyle = {}, labelModel, labelHoverModel, {
     labelFetcher: data.hostModel,
     labelDataIndex: idx,
-    defaultText: data.getName(idx),
+    defaultText: labelLayout.text,
     autoColor: visualColor,
     useInsideStyle: !!labelLayout.inside
   }, {

package/lib/chart/pie/labelLayout.js

@@ -20,6 +20,10 @@
 
 var textContain = require("zrender/lib/contain/text");
 
+var _number = require("../../util/number");
+
+var parsePercent = _number.parsePercent;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -41,13 +45,17 @@ var textContain = require("zrender/lib/contain/text");
 // FIXME emphasis label position is not same with normal label position
 var RADIAN = Math.PI / 180;
 
-function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
+function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight, viewLeft, viewTop, farthestX) {
   list.sort(function (a, b) {
     return a.y - b.y;
   });
 
   function shiftDown(start, end, delta, dir) {
     for (var j = start; j < end; j++) {
+      if (list[j].y + delta > viewTop + viewHeight) {
+        break;
+      }
+
       list[j].y += delta;
 
       if (j > start && j + 1 < end && list[j + 1].y > list[j].y + list[j].height) {
@@ -61,6 +69,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
 
   function shiftUp(end, delta) {
     for (var j = end; j >= 0; j--) {
+      if (list[j].y - delta < viewTop) {
+        break;
+      }
+
       list[j].y -= delta;
 
       if (j > 0 && list[j].y > list[j - 1].y + list[j - 1].height) {
@@ -78,6 +90,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
     : 0; // up
 
     for (var i = 0, l = list.length; i < l; i++) {
+      if (list[i].labelAlignTo !== 'none') {
+        continue;
+      }
+
       var deltaY = Math.abs(list[i].y - cy);
       var length = list[i].len;
       var length2 = list[i].len2;
@@ -105,6 +121,12 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
   var downList = [];
 
   for (var i = 0; i < len; i++) {
+    if (list[i].position === 'outer' && list[i].labelAlignTo === 'labelLine') {
+      var dx = list[i].x - farthestX;
+      list[i].linePoints[1][0] += dx;
+      list[i].x = farthestX;
+    }
+
     delta = list[i].y - lastY;
 
     if (delta < 0) {
@@ -130,9 +152,11 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
   changeX(downList, true, cx, cy, r, dir);
 }
 
-function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
+function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop) {
   var leftList = [];
   var rightList = [];
+  var leftmostX = Number.MAX_VALUE;
+  var rightmostX = -Number.MAX_VALUE;
 
   for (var i = 0; i < labelLayoutList.length; i++) {
     if (isPositionCenter(labelLayoutList[i])) {
@@ -140,33 +164,72 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
     }
 
     if (labelLayoutList[i].x < cx) {
+      leftmostX = Math.min(leftmostX, labelLayoutList[i].x);
       leftList.push(labelLayoutList[i]);
     } else {
+      rightmostX = Math.max(rightmostX, labelLayoutList[i].x);
       rightList.push(labelLayoutList[i]);
     }
   }
 
-  adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight);
-  adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight);
+  adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight, viewLeft, viewTop, rightmostX);
+  adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight, viewLeft, viewTop, leftmostX);
 
   for (var i = 0; i < labelLayoutList.length; i++) {
-    if (isPositionCenter(labelLayoutList[i])) {
+    var layout = labelLayoutList[i];
+
+    if (isPositionCenter(layout)) {
       continue;
     }
 
-    var linePoints = labelLayoutList[i].linePoints;
+    var linePoints = layout.linePoints;
 
     if (linePoints) {
+      var isAlignToEdge = layout.labelAlignTo === 'edge';
+      var realTextWidth = layout.textRect.width;
+      var targetTextWidth;
+
+      if (isAlignToEdge) {
+        if (layout.x < cx) {
+          targetTextWidth = linePoints[2][0] - layout.labelDistance - viewLeft - layout.labelMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - layout.labelMargin - linePoints[2][0] - layout.labelDistance;
+        }
+      } else {
+        if (layout.x < cx) {
+          targetTextWidth = layout.x - viewLeft - layout.bleedMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - layout.x - layout.bleedMargin;
+        }
+      }
+
+      if (targetTextWidth < layout.textRect.width) {
+        layout.text = textContain.truncateText(layout.text, targetTextWidth, layout.font);
+
+        if (layout.labelAlignTo === 'edge') {
+          realTextWidth = textContain.getWidth(layout.text, layout.font);
+        }
+      }
+
       var dist = linePoints[1][0] - linePoints[2][0];
 
-      if (labelLayoutList[i].x < cx) {
-        linePoints[2][0] = labelLayoutList[i].x + 3;
+      if (isAlignToEdge) {
+        if (layout.x < cx) {
+          linePoints[2][0] = viewLeft + layout.labelMargin + realTextWidth + layout.labelDistance;
+        } else {
+          linePoints[2][0] = viewLeft + viewWidth - layout.labelMargin - realTextWidth - layout.labelDistance;
+        }
       } else {
-        linePoints[2][0] = labelLayoutList[i].x - 3;
+        if (layout.x < cx) {
+          linePoints[2][0] = layout.x + layout.labelDistance;
+        } else {
+          linePoints[2][0] = layout.x - layout.labelDistance;
+        }
+
+        linePoints[1][0] = linePoints[2][0] + dist;
       }
 
-      linePoints[1][1] = linePoints[2][1] = labelLayoutList[i].y;
-      linePoints[1][0] = linePoints[2][0] + dist;
+      linePoints[1][1] = linePoints[2][1] = layout.y;
     }
   }
 }
@@ -176,7 +239,7 @@ function isPositionCenter(layout) {
   return layout.position === 'center';
 }
 
-function _default(seriesModel, r, viewWidth, viewHeight, sum) {
+function _default(seriesModel, r, viewWidth, viewHeight, viewLeft, viewTop) {
   var data = seriesModel.getData();
   var labelLayoutList = [];
   var cx;
@@ -189,9 +252,16 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
     var labelModel = itemModel.getModel('label'); // Use position in normal or emphasis
 
     var labelPosition = labelModel.get('position') || itemModel.get('emphasis.label.position');
+    var labelDistance = labelModel.get('distanceToLabelLine');
+    var labelAlignTo = labelModel.get('alignTo');
+    var labelMargin = parsePercent(labelModel.get('margin'), viewWidth);
+    var bleedMargin = labelModel.get('bleedMargin');
+    var font = labelModel.getFont();
     var labelLineModel = itemModel.getModel('labelLine');
     var labelLineLen = labelLineModel.get('length');
+    labelLineLen = parsePercent(labelLineLen, viewWidth);
     var labelLineLen2 = labelLineModel.get('length2');
+    labelLineLen2 = parsePercent(labelLineLen2, viewWidth);
 
     if (layout.angle < minShowLabelRadian) {
       return;
@@ -206,6 +276,8 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
     var textAlign;
     cx = layout.cx;
     cy = layout.cy;
+    var text = seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx);
+    var textRect = textContain.getBoundingRect(text, font, textAlign, 'top');
     var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
 
     if (labelPosition === 'center') {
@@ -224,15 +296,21 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
         var y2 = y1 + dy * (labelLineLen + r - layout.r);
         var x3 = x2 + (dx < 0 ? -1 : 1) * labelLineLen2;
         var y3 = y2;
-        textX = x3 + (dx < 0 ? -5 : 5);
+
+        if (labelAlignTo === 'edge') {
+          // Adjust textX because text align of edge is opposite
+          textX = dx < 0 ? viewLeft + labelMargin : viewLeft + viewWidth - labelMargin;
+        } else {
+          textX = x3 + (dx < 0 ? -labelDistance : labelDistance);
+        }
+
         textY = y3;
         linePoints = [[x1, y1], [x2, y2], [x3, y3]];
       }
 
-      textAlign = isLabelInside ? 'center' : dx > 0 ? 'left' : 'right';
+      textAlign = isLabelInside ? 'center' : labelAlignTo === 'edge' ? dx > 0 ? 'right' : 'left' : dx > 0 ? 'left' : 'right';
     }
 
-    var font = labelModel.getFont();
     var labelRotate;
     var rotate = labelModel.get('rotate');
 
@@ -242,8 +320,6 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
       labelRotate = rotate ? dx < 0 ? -midAngle + Math.PI : -midAngle : 0;
     }
 
-    var text = seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx);
-    var textRect = textContain.getBoundingRect(text, font, textAlign, 'top');
     hasLabelRotate = !!labelRotate;
     layout.label = {
       x: textX,
@@ -256,7 +332,14 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
       textAlign: textAlign,
       verticalAlign: 'middle',
       rotation: labelRotate,
-      inside: isLabelInside
+      inside: isLabelInside,
+      labelDistance: labelDistance,
+      labelAlignTo: labelAlignTo,
+      labelMargin: labelMargin,
+      bleedMargin: bleedMargin,
+      textRect: textRect,
+      text: text,
+      font: font
     }; // Not layout the inside label
 
     if (!isLabelInside) {
@@ -265,7 +348,7 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
   });
 
   if (!hasLabelRotate && seriesModel.get('avoidLabelOverlap')) {
-    avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight);
+    avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop);
   }
 }
 

package/lib/chart/pie/pieLayout.js

@@ -23,6 +23,8 @@ var _number = require("../../util/number");
 var parsePercent = _number.parsePercent;
 var linearMap = _number.linearMap;
 
+var layout = require("../../util/layout");
+
 var labelLayout = require("./labelLayout");
 
 var zrUtil = require("zrender/lib/core/util");
@@ -48,10 +50,18 @@ var zrUtil = require("zrender/lib/core/util");
 var PI2 = Math.PI * 2;
 var RADIAN = Math.PI / 180;
 
+function getViewRect(seriesModel, api) {
+  return layout.getLayoutRect(seriesModel.getBoxLayoutParams(), {
+    width: api.getWidth(),
+    height: api.getHeight()
+  });
+}
+
 function _default(seriesType, ecModel, api, payload) {
   ecModel.eachSeriesByType(seriesType, function (seriesModel) {
     var data = seriesModel.getData();
     var valueDim = data.mapDimension('value');
+    var viewRect = getViewRect(seriesModel, api);
     var center = seriesModel.get('center');
     var radius = seriesModel.get('radius');
 
@@ -63,11 +73,11 @@ function _default(seriesType, ecModel, api, payload) {
       center = [center, center];
     }
 
-    var width = api.getWidth();
-    var height = api.getHeight();
+    var width = parsePercent(viewRect.width, api.getWidth());
+    var height = parsePercent(viewRect.height, api.getHeight());
     var size = Math.min(width, height);
-    var cx = parsePercent(center[0], width);
-    var cy = parsePercent(center[1], height);
+    var cx = parsePercent(center[0], width) + viewRect.x;
+    var cy = parsePercent(center[1], height) + viewRect.y;
     var r0 = parsePercent(radius[0], size / 2);
     var r = parsePercent(radius[1], size / 2);
     var startAngle = -seriesModel.get('startAngle') * RADIAN;
@@ -102,7 +112,8 @@ function _default(seriesType, ecModel, api, payload) {
           cx: cx,
           cy: cy,
           r0: r0,
-          r: roseType ? NaN : r
+          r: roseType ? NaN : r,
+          viewRect: viewRect
         });
         return;
       } // FIXME 兼容 2.0 但是 roseType 是 area 的时候才是这样？
@@ -130,7 +141,8 @@ function _default(seriesType, ecModel, api, payload) {
         cx: cx,
         cy: cy,
         r0: r0,
-        r: roseType ? linearMap(value, extent, [r0, r]) : r
+        r: roseType ? linearMap(value, extent, [r0, r]) : r,
+        viewRect: viewRect
       });
       currentAngle = endAngle;
     }); // Some sector is constrained by minAngle
@@ -164,7 +176,7 @@ function _default(seriesType, ecModel, api, payload) {
       }
     }
 
-    labelLayout(seriesModel, r, width, height);
+    labelLayout(seriesModel, r, viewRect.width, viewRect.height, viewRect.x, viewRect.y);
   });
 }
 

package/lib/chart/radar/RadarSeries.js

@@ -28,6 +28,8 @@ var _format = require("../../util/format");
 
 var encodeHTML = _format.encodeHTML;
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -54,9 +56,7 @@ var RadarSeries = SeriesModel.extend({
     RadarSeries.superApply(this, 'init', arguments); // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendDataProvider = function () {
-      return this.getRawData();
-    };
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this));
   },
   getInitialData: function (option, ecModel) {
     return createListSimply(this, {
@@ -64,15 +64,36 @@ var RadarSeries = SeriesModel.extend({
       generateCoordCount: Infinity
     });
   },
-  formatTooltip: function (dataIndex) {
+  formatTooltip: function (dataIndex, multipleSeries, dataType, renderMode) {
     var data = this.getData();
     var coordSys = this.coordinateSystem;
     var indicatorAxes = coordSys.getIndicatorAxes();
     var name = this.getData().getName(dataIndex);
-    return encodeHTML(name === '' ? this.name : name) + '<br/>' + zrUtil.map(indicatorAxes, function (axis, idx) {
+    var newLine = renderMode === 'html' ? '<br/>' : '\n';
+    return encodeHTML(name === '' ? this.name : name) + newLine + zrUtil.map(indicatorAxes, function (axis, idx) {
       var val = data.get(data.mapDimension(axis.dim), dataIndex);
       return encodeHTML(axis.name + ' : ' + val);
-    }).join('<br />');
+    }).join(newLine);
+  },
+
+  /**
+   * @implement
+   */
+  getTooltipPosition: function (dataIndex) {
+    if (dataIndex != null) {
+      var data = this.getData();
+      var coordSys = this.coordinateSystem;
+      var values = data.getValues(zrUtil.map(coordSys.dimensions, function (dim) {
+        return data.mapDimension(dim);
+      }), dataIndex, true);
+
+      for (var i = 0, len = values.length; i < len; i++) {
+        if (!isNaN(values[i])) {
+          var indicatorAxes = coordSys.getIndicatorAxes();
+          return coordSys.coordToPoint(indicatorAxes[i].dataToCoord(values[i]), i);
+        }
+      }
+    }
   },
   defaultOption: {
     zlevel: 0,