Legend selectedMode, more label formatter

src/chart/bar/BarView.js

@@ -5,9 +5,6 @@ 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({

src/chart/helper/DataSymbol.js

@@ -69,7 +69,7 @@ define(function (require) {
             return this._data;
         },
 
-        updateData: function (data, enableAnimation) {
+        updateData: function (data, seriesModel, enableAnimation) {
 
             var group = this.group;
             var oldData = this._data;
@@ -193,7 +193,8 @@ define(function (require) {
                     var lastDim = data.dimensions[data.dimensions.length - 1];
                     el.setStyle({
                         // FIXME
-                        text: data.get(lastDim, idx),
+                        text: seriesModel.getFormattedLabel(idx, 'normal')
+                            || data.get(lastDim, idx),
                         textFont: labelModel.getModel('textStyle').getFont(),
                         textPosition: labelPosition,
                         textFill: labelColor

src/chart/line/LineView.js

@@ -115,7 +115,7 @@ define(function(require) {
                 && prevCoordSys.type === coordSys.type
                 && hasAnimation)
             ) {
-                dataSymbol.updateData(data, hasAnimation);
+                dataSymbol.updateData(data, seriesModel, hasAnimation);
 
                 polyline = this._newPolyline(group, points, coordSys, hasAnimation);
                 if (isAreaChart) {
@@ -128,7 +128,7 @@ define(function(require) {
             }
             else {
 
-                dataSymbol.updateData(data, false);
+                dataSymbol.updateData(data, seriesModel, false);
 
                 // Update clipPath
                 // FIXME Clip path used by more than one elements

src/chart/scatter/ScatterView.js

@@ -13,7 +13,7 @@ define(function (require) {
 
         render: function (seriesModel, ecModel) {
             this._dataSymbol.updateData(
-                seriesModel.getData(), ecModel.get('animation')
+                seriesModel.getData(), seriesModel, ecModel.get('animation')
             );
         },
 

src/component/legend/LegendModel.js

@@ -39,6 +39,9 @@ define(function(require) {
              * @private
              */
             this._availableNames = availableNames;
+
+            // Try select the first if selectedMode is single
+            this.select(availableNames[0]);
         },
 
         /**
@@ -52,14 +55,24 @@ define(function(require) {
          * @param {string} name
          */
         select: function (name) {
-            this.option.selected[name] = true;
+            var selected = this.option.selected;
+            var selectedMode = this.get('selectedMode');
+            if (selectedMode === 'single') {
+                var availableNames = this._availableNames;
+                zrUtil.each(availableNames, function (name) {
+                    selected[name] = false;
+                });
+            }
+            selected[name] = true;
         },
 
         /**
          * @param {string} name
          */
         unSelect: function (name) {
-            this.option.selected[name] = false;
+            if (this.get('selectedMode') !== 'single') {
+                this.option.selected[name] = false;
+            }
         },
 
         /**
@@ -71,7 +84,7 @@ define(function(require) {
             if (!(name in selected)) {
                 selected[name] = true;
             }
-            selected[name] = !selected[name];
+            this[selected[name] ? 'unSelect' : 'select'](name);
         },
 
         /**
@@ -80,7 +93,7 @@ define(function(require) {
         isSelected: function (name) {
             var selected = this.option.selected;
             return !((name in selected) && !selected[name])
-                && this._availableNames.indexOf(name) >= 0;
+                && zrUtil.indexOf(this._availableNames, name) >= 0;
         },
 
         defaultOption: {

src/component/marker/MarkPointView.js

@@ -73,7 +73,7 @@ define(function (require) {
             });
 
             // TODO Text are wrong
-            dataSymbol.updateData(mpData, true);
+            dataSymbol.updateData(mpData, seriesModel, true);
 
             this.group.add(dataSymbol.group);
 

src/coord/polar/polarCreator.js

@@ -72,7 +72,7 @@ define(function (require) {
                 var polarIndex = seriesModel.get('polarIndex') || 0;
 
                 var polar = polarList[polarIndex];
-                if (! polar) {
+                if (!polar) {
                     // api.log('Polar configuration not exist for series ' + seriesModel.name + '.');
                     return;
                 }
@@ -117,11 +117,6 @@ define(function (require) {
                 setAxis(radiusAxis, radiusAxisModel);
                 setAxis(angleAxis, angleAxisModel);
 
-                if (angleAxis.type === 'category' && ! angleAxis.onBand) {
-                    var angle = 360 - 360 / (angleAxis.scale.count() + 1);
-                    angleAxis.setExtent(0, angle);
-                }
-
                 polar.resize(polarModel, api);
                 polarList.push(polar);
 
@@ -130,6 +125,15 @@ define(function (require) {
 
             setPolarAxisFromSeries(polarList, ecModel, api);
 
+            // Fix extent of category angle axis
+            zrUtil.each(polarList, function (polar) {
+                var angleAxis = polar.getAngleAxis();
+                if (angleAxis.type === 'category' && !angleAxis.onBand) {
+                    var angle = 360 - 360 / (angleAxis.scale.count() + 1);
+                    angleAxis.setExtent(0, angle);
+                }
+            });
+
             return polarList;
         }
     };

test/selectedMode.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+            #main {
+                width: 1000px;
+                background: #fff;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/bar',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+                var data4 = [];
+
+                for (var i = 0; i < 10; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push((Math.random() * 5).toFixed(2));
+                    data2.push(-Math.random().toFixed(2));
+                    data3.push((Math.random() + 0.5).toFixed(2));
+                    data4.push((Math.random() + 0.3).toFixed(2));
+                }
+
+                var itemStyle = {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside'
+                        }
+                    },
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0,
+                        shadowColor: 'rgba(0,0,0,0.5)'
+                    }
+                };
+
+                console.profile('setOption');
+                chart.setOption({
+                    legend: {
+                        data: [{
+                            name: 'bar'
+                        }, 'bar2', 'bar3', 'bar4'],
+                        selected: {
+                            // 'bar': false
+                        },
+                        selectedMode: 'single',
+                        orient: 'vertical',
+                        x: 'right',
+                        y: 'bottom',
+                        align: 'right'
+                    },
+                    tooltip: {},
+                    xAxis: {
+                        data: xAxisData,
+                        axisLine: {
+                            onZero: true
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        splitArea: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        inverse: true,
+                        splitArea: {
+                            show: false
+                        }
+                    },
+                    series: [{
+                        name: 'bar',
+                        type: 'bar',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                        data: data1
+                    }, {
+                        name: 'bar2',
+                        type: 'bar',
+                        stack: 'one',
+                        itemStyle: itemStyle,
+                        data: data2
+                    }, {
+                        name: 'bar3',
+                        type: 'bar',
+                        stack: 'two',
+                        itemStyle: itemStyle,
+                        data: data3
+                    }, {
+                        name: 'bar4',
+                        type: 'bar',
+                        stack: 'two',
+                        itemStyle: itemStyle,
+                        data: data4
+                    }]
+                });
+                console.profileEnd('setOption');
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file