Improve legend symbol

src/ExtensionAPI.js

@@ -16,6 +16,7 @@ define(function(require) {
 
     // Mix graphic api
     zrUtil.merge(ExtensionAPI.prototype, require('./util/graphic'));
+    zrUtil.merge(ExtensionAPI.prototype, require('./util/symbol'));
 
     return ExtensionAPI;
 });
\ No newline at end of file

src/chart/bar.js

@@ -6,12 +6,10 @@ define(function (require) {
     require('./bar/BarView');
     require('./bar/barLayoutGrid');
 
-    // Series visual coding
+    // Visual coding for legend
     require('../echarts').registerVisualCoding(function (ecModel) {
-        ecModel.eachSeriesByType('bar', function (series) {
-            if (series.type === 'bar') {
-                series.setVisual('legendSymbol', 'roundRect');
-            }
+        ecModel.eachSeriesByType('bar', function (seriesSymbol) {
+            seriesSymbol.setVisual('legendSymbol', 'roundRect');
         });
     });
 });
\ No newline at end of file

src/chart/line.js

@@ -3,4 +3,14 @@ define(function (require) {
     require('./line/LineSeries');
     require('./line/LineView');
     require('./line/lineLayoutGrid');
+
+    require('../echarts').registerVisualCoding(function (ecModel) {
+        ecModel.eachSeriesByType('line', function (seriesModel) {
+            seriesModel.setVisual('legendSymbol', 'line');
+            var legendSymbol = seriesModel.get('symbol');
+            if (legendSymbol !== 'none') {
+                seriesModel.setVisual('symbol', legendSymbol);
+            }
+        });
+    });
 });
\ No newline at end of file

src/chart/line/LineSeries.js

+define(function(require) {
+
+    'use strict';
+
+    var List = require('../../data/List');
+
+    return require('../../echarts').extendSeriesModel({
+
+        type: 'line',
+
+        getInitialData: function (option) {
+            return List.fromArray(option.data, 1, this);
+        },
+
+        defaultOption: {
+            zlevel: 0,                  // 一级层叠
+            z: 2,                       // 二级层叠
+            coordinateSystem: 'cartesian2d',
+            clickable: true,
+            legendHoverLink: true,
+            // stack: null
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            gridIndex: 0,
+            // 'nearest', 'min', 'max', 'average'
+            dataFilter: 'nearest',
+            itemStyle: {
+                normal: {
+                    // color: 各异,
+                    label: {
+                        show: false
+                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    },
+                    lineStyle: {
+                        width: 2,
+                        type: 'solid',
+                        shadowColor: 'rgba(0,0,0,0)', //默认透明
+                        shadowBlur: 0,
+                        shadowOffsetX: 0,
+                        shadowOffsetY: 0
+                    }
+                },
+                emphasis: {
+                    // color: 各异,
+                    label: {
+                        show: false
+                        // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调
+                        // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+                        //           'inside'|'left'|'right'|'top'|'bottom'
+                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
+                    }
+                }
+            },
+            // smooth: false,
+            symbol: 'emptyCircle',         // 拐点图形类型
+            symbolSize: 2,           // 拐点图形大小
+            // symbolRotate: null,   // 拐点图形旋转控制
+            showAllSymbol: false     // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
+        }
+    });
+});
\ No newline at end of file

src/chart/line/LineView.js

@@ -18,6 +18,12 @@ define(function(require) {
             var data = seriesModel.getData();
             var lineStyleNormalModel = seriesModel.getModel('itemStyle.normal.lineStyle');
 
+            var points = data.map(function (dataItem) {
+                var layout = dataItem.layout;
+                if (layout) {
+                    return [layout.x, layout.y];
+                }
+            });
             // Initialization animation
             if (! this._data) {
                 var cartesian = seriesModel.coordinateSystem;
@@ -46,13 +52,6 @@ define(function(require) {
                     })
                     .start();
 
-                var points = data.map(function (dataItem) {
-                    var layout = dataItem.layout;
-                    if (layout) {
-                        return [layout.x, layout.y];
-                    }
-                });
-
                 var polyline = new api.Polyline({
                     shape: {
                         points: points
@@ -63,6 +62,15 @@ define(function(require) {
                     }
                 });
                 this.group.add(polyline);
+
+                this._polyline = polyline;
+            }
+            else {
+                this._polyline.animateShape()
+                    .when(500, {
+                        points: points
+                    })
+                    .start('cubicOut');
             }
 
             this._data = data;

src/component/axis.js

+// TODO Split line interval
+// TODO Axis tick interval
 define(function(require) {
     'use strict';
 
@@ -23,23 +25,23 @@ define(function(require) {
 
             this._axisLinePosition = this._getAxisLinePosition(axisModel, gridModel);
 
-            if (axisModel.get('axisLine.show')) {
-                this._renderAxisLine(axisModel, gridModel, api);
-            }
-            if (axisModel.get('axisTick.show')) {
-                this._renderAxisTick(axisModel, gridModel, api);
-            }
             var labelShowList;
             if (axisModel.get('axisLabel.show')) {
                 labelShowList = this._renderAxisLabel(axisModel, gridModel, api);
             }
-
             if (axisModel.get('splitLine.show')) {
                 this._renderSplitLine(axisModel, gridModel, api, labelShowList);
             }
             if (axisModel.get('splitArea.show')) {
                 this._renderSplitArea(axisModel, gridModel, api, labelShowList);
             }
+
+            if (axisModel.get('axisLine.show')) {
+                this._renderAxisLine(axisModel, gridModel, api);
+            }
+            if (axisModel.get('axisTick.show')) {
+                this._renderAxisTick(axisModel, gridModel, api);
+            }
         },
 
         _getAxisLinePosition: function (axisModel, gridModel) {

src/component/legend/LegendView.js

 define(function (require) {
 
     var numberUtil = require('../../util/number');
-    var symbols = require('../../util/symbol');
+    var symbolCreator = require('../../util/symbol');
 
     return require('../../echarts').extendComponentView({
 
@@ -29,6 +29,9 @@ define(function (require) {
             var x = padding[3];
             var y = padding[0];
 
+            var width = 20;
+            var height = 10;
+
             legendModel.getData().each(function (dataItem) {
                 var seriesName = dataItem.name;
                 var seriesModel = ecModel.getSeriesByName(seriesName);
@@ -36,19 +39,10 @@ define(function (require) {
                     ? seriesModel.getVisual('color')
                     : '#ccc';
 
-                // Using rect symbol defaultly
-                var legendSymbolType = seriesModel.getVisual('legendSymbol')
-                    || seriesModel.getVisual('symbol')
-                    || 'roundRect';
-
-                var width = 20;
-                var height = 10;
-
-                var symbolCreator = symbols[legendSymbolType] || symbols.roundRect;
-                var legendSymbol = symbolCreator(x, y, width, height);
-
+                var legendSymbol = this._createSymbol(seriesModel, x, y, width, height, api);
                 legendSymbol.style.set({
-                    fill: color
+                    fill: color,
+                    stroke: color
                 });
 
                 var text = new api.Text({
@@ -77,10 +71,31 @@ define(function (require) {
                     legendModel.toggleSelected(seriesName);
                     api.update();
                 });
-            });
+            }, this);
 
             var groupRect = group.getBoundingRect();
             group.position[0] -= groupRect.width / 2;
+        },
+
+        _createSymbol: function (seriesModel, x, y, width, height, api) {
+
+            // Using rect symbol defaultly
+            var legendSymbolType = seriesModel.getVisual('legendSymbol')
+                || 'roundRect';
+            var symbolType = seriesModel.getVisual('symbol');
+
+            var legendSymbolShape = symbolCreator.create(legendSymbolType, x, y, width, height);
+
+            // Compose symbols
+            if (symbolType && symbolType !== legendSymbolType) {
+                var size = height * 0.8;
+                // Put symbol in the center
+                var symbolShape = symbolCreator.create(symbolType, x + (width - size) / 2, y + (height - size) / 2, size, size);
+
+                legendSymbolShape = api.mergePath([legendSymbolShape, symbolShape]);
+            }
+
+            return legendSymbolShape;
         }
     });
 });
\ No newline at end of file

src/util/symbol.js

@@ -23,6 +23,17 @@ define(function(require) {
     });
 
     var symbols = {
+        line: function (x, y, w, h) {
+            return new graphic.Line({
+                shape: {
+                    x1: x,
+                    y1: y + h / 2,
+                    x2: x + w,
+                    y2: y + h / 2
+                }
+            });
+        },
+
         rect: function (x, y, w, h) {
             return new graphic.Rect({
                 shape: {
@@ -57,12 +68,12 @@ define(function(require) {
             });
         },
 
-        circle: function (x, y, r) {
+        circle: function (x, y, size) {
             return new graphic.Circle({
                 shape: {
-                    cx: x + r,
-                    cy: y + r,
-                    r: r
+                    cx: x + size / 2,
+                    cy: y + size / 2,
+                    r: size / 2
                 }
             });
         },
@@ -95,5 +106,22 @@ define(function(require) {
         }
     };
 
-    return symbols;
+    return {
+        create: function (symbolType, x, y, w, h) {
+            if (symbolType.indexOf('image://') === 0) {
+                return symbols.image(symbolType.slice(8), x, y, w, h);
+            }
+            else if (symbolType.indexOf('path://') === 0) {
+                return symbols.image(symbolType.slice(7), x, y, w, h);
+            }
+            else {
+                if (symbols[symbolType]) {
+                    return symbols[symbolType](x, y, w, h);
+                }
+                else {
+                    return symbols.rect(x, y, w, h);
+                }
+            }
+        }
+    };
 });
\ No newline at end of file

test/bar.html

@@ -31,7 +31,7 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 10; i++) {
+                for (var i = 0; i < 20; i++) {
                     xAxisData.push('类目' + i);
                     data1.push(Math.random() * 5);
                     data2.push(Math.random());
@@ -41,7 +41,6 @@
                 console.profile('setOption');
                 chart.setOption({
                     legend: {
-                        // TODO First bar unclickable
                         data: [{
                             name: 'bar',
                             itemStyle: {
@@ -55,7 +54,6 @@
                         }
                     },
                     xAxis: {
-                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
                         data: xAxisData
                     },
                     yAxis: {
@@ -63,17 +61,14 @@
                     series: [{
                         name: 'bar',
                         type: 'bar',
-                        // data: [0, 1, 2, 3, 4]
                         data: data1
                     }, {
                         name: 'bar2',
                         type: 'bar',
-                        // data: [0, 1, 2, 3, 4]
                         data: data2
                     }, {
                         name: 'bar3',
                         type: 'bar',
-                        // data: [0, 1, 2, 3, 4]
                         data: data3
                     }]
                 });