Label formatter, bar label position

src/chart/bar/BarView.js

@@ -5,6 +5,9 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
 
+    var mathMin = Math.min;
+    var mathMax = Math.max;
+
     zrUtil.extend(require('../../model/Model').prototype, require('./barItemStyle'));
 
     return require('../../echarts').extendChartView({
@@ -91,11 +94,18 @@ define(function (require) {
                 })
                 .execute();
 
+            this._updateStyle(seriesModel, data, isHorizontal);
+
+            this._data = data;
+        },
+
+        _updateStyle: function (seriesModel, data, isHorizontal) {
             data.eachItemGraphicEl(function (rect, idx) {
                 var itemModel = data.getItemModel(idx);
                 var labelModel = itemModel.getModel('itemStyle.normal.label');
                 var color = data.getItemVisual(idx, 'color');
                 var layout = data.getItemLayout(idx);
+
                 rect.setStyle(zrUtil.defaults(
                     {
                         fill: color
@@ -105,24 +115,67 @@ define(function (require) {
                 if (labelModel.get('show')) {
                     var labelPosition = labelModel.get('position') || 'inside';
                     // FIXME
-                    var labelColor = labelPosition === 'inside' ? 'white' : color;
+                    var labelColor = labelPosition.indexOf('inside') === 0 ? 'white' : color;
                     var labelPositionOutside = isHorizontal
                         ? (layout.height > 0 ? 'bottom' : 'top')
                         : (layout.width > 0 ? 'left' : 'right');
 
                     rect.setStyle({
-                        text: data.getRawValue(idx),
+                        text: seriesModel.getFormattedLabel(idx, 'normal')
+                            || data.getRawValue(idx),
                         textFont: labelModel.getModel('textStyle').getFont(),
                         textPosition: labelPosition === 'outside' ? labelPositionOutside : 'inside',
                         textFill: labelColor
                     });
+
+                    // Calculate label layout of insideLeft, insideTop, insideBottom, insideRight
+                    var textX;
+                    var textY;
+                    var textAlign;
+                    var textBaseline;
+                    var gap = 5;
+
+                    var width = Math.abs(layout.width);
+                    var height = Math.abs(layout.height);
+                    switch (labelPosition) {
+                        case 'insideLeft':
+                            textX = gap;
+                            textY = height / 2;
+                            textAlign = 'left';
+                            textBaseline = 'middle';
+                            break;
+                        case 'insideRight':
+                            textX = width - gap;
+                            textY = height / 2;
+                            textAlign = 'right';
+                            textBaseline = 'middle';
+                            break;
+                        case 'insideTop':
+                            textX = width / 2;
+                            textY = gap;
+                            textAlign = 'center';
+                            textBaseline = 'top';
+                            break;
+                        case 'insideBottom':
+                            textX = width / 2;
+                            textY = height - gap;
+                            textAlign = 'center';
+                            textBaseline = 'bottom';
+                            break;
+                    }
+                }
+                if (textX != null) {
+                    rect.setStyle({
+                        textPosition: [textX, textY],
+                        textAlign: textAlign,
+                        textBaseline: textBaseline
+                    });
                 }
+
                 graphic.setHoverStyle(
                     rect, itemModel.getModel('itemStyle.emphasis').getBarItemStyle()
                 );
             });
-
-            this._data = data;
         },
 
         remove: function (ecModel) {

src/chart/pie/PieView.js

@@ -98,8 +98,7 @@ define(function (require) {
                     var layout = data.getItemLayout(idx);
 
                     var sector = createSectorAndLabel(
-                        layout, data.getName(idx),
-                        hasAnimation && !isFirstRender
+                        layout, '', hasAnimation && !isFirstRender
                     );
 
                     sector.on('click', onSectorClick);
@@ -125,7 +124,6 @@ define(function (require) {
                     var labelLine = sector.__labelLine;
                     var labelText = sector.__labelText;
 
-
                     labelLine.animateTo({
                         shape: {
                             points: labelLayout.linePoints
@@ -139,7 +137,6 @@ define(function (require) {
                     }, 300, 'cubicOut');
 
                     labelText.setStyle({
-                        text: data.getName(newIdx),
                         textAlign: labelLayout.textAlign,
                         textBaseline: labelLayout.textBaseline,
                         font: labelLayout.font
@@ -183,20 +180,29 @@ define(function (require) {
             var selectedOffset = seriesModel.get('selectedOffset');
             data.eachItemGraphicEl(function (sector, idx) {
                 var itemModel = data.getItemModel(idx);
+                var itemStyleModel = itemModel.getModel('itemStyle');
 
                 sector.setStyle(
                     zrUtil.extend(
                         {
                             fill: data.getItemVisual(idx, 'color')
                         },
-                        itemModel.getModel('itemStyle.normal').getItemStyle()
+                        itemStyleModel.getModel('normal').getItemStyle()
                     )
                 );
                 graphic.setHoverStyle(
                     sector,
-                    itemModel.getModel('itemStyle.emphasis').getItemStyle()
+                    itemStyleModel.getModel('emphasis').getItemStyle()
                 );
 
+                var labelText = sector.__labelText;
+                if (labelText) {
+                    labelText.setStyle({
+                        text: seriesModel.getFormattedLabel(idx, 'normal')
+                            || data.getName(idx)
+                    });
+                }
+
                 updateSelected(sector, itemModel.get('selected'), selectedOffset);
             });
         },

src/component/dataRange/DataRangeModel.js

@@ -11,7 +11,6 @@ define(function(require) {
     var numberUtil = require('../../util/number');
     var asc = numberUtil.asc;
     var linearMap = numberUtil.linearMap;
-    var parsePercent = require('../../util/number').parsePercent;
 
     return echarts.extendComponentModel({
 

src/model/Series.js

@@ -130,6 +130,53 @@ define(function(require) {
                 : (encodeHTML(this.name) + ' : ' + formattedValue);
         },
 
+        /**
+         * Format label
+         * @param {number} dataIndex
+         * @param {string} [status='normal'] 'normal' or 'emphasis'
+         * @param {Function|string} [formatter] Default use the `itemStyle[status].label.formatter`
+         * @return {string}
+         */
+        getFormattedLabel: function (dataIndex, status, formatter) {
+            var data = this._data;
+            var itemModel = data.getItemModel(dataIndex);
+            var value = data.getRawValue(dataIndex);
+            var rawIndex = data.getRawIndex(dataIndex)
+
+            var seriesOpt = this.option;
+            var dataItemOpt = seriesOpt.data[rawIndex];
+
+            var seriesIndex = this.seriesIndex;
+            var seriesName = this.name;
+
+            var name = data.getName(dataIndex);
+
+            if (!formatter) {
+                formatter = itemModel.get('itemStyle.' + status + '.label.formatter')
+            }
+
+            if (typeof formatter === 'function') {
+                return formatter({
+                    seriesIndex: seriesIndex,
+                    seriesName: seriesName,
+                    series: seriesOpt,
+                    name: name,
+                    value: value,
+                    data: dataItemOpt,
+                    status: status || 'normal'
+                });
+            }
+            else if (typeof formatter === 'string') {
+                // TODO ETPL ?
+                return formatter.replace('{a}','{a0}')
+                                .replace('{b}','{b0}')
+                                .replace('{c}','{c0}')
+                                .replace('{a0}', seriesName)
+                                .replace('{b0}', name)
+                                .replace('{c0}', addCommas(value));
+            }
+        },
+
         restoreData: function () {
             this._data = this._dataBeforeProcessed.cloneShallow();
         }

src/visual/symbol.js

 define(function (require) {
 
     return function (seriesType, defaultSymbolType, legendSymbol, ecModel, api) {
+
+        // Encoding visual for all series include which is filtered for legend drawing
         ecModel.eachSeriesByTypeAll(seriesType, function (seriesModel) {
             var data = seriesModel.getData();