Add line chart

src/chart/line.js

+define(function (require) {
+
+    require('./line/LineSeries');
+    require('./line/LineView');
+    require('./line/lineLayoutGrid');
+});
\ No newline at end of file

src/chart/line/LineView.js

+define(function(require) {
+
+    'use strict';
+
+    return require('../../echarts').extendChartView({
+
+        type: 'line',
+
+        render: function (seriesModel, ecModel, api) {
+
+            if (seriesModel.coordinateSystem.type === 'cartesian2d') {
+                this._renderCartesian(seriesModel, ecModel, api);
+            }
+        },
+
+        _renderCartesian: function (seriesModel, ecModel, api) {
+
+            var data = seriesModel.getData();
+            var lineStyleNormalModel = seriesModel.getModel('itemStyle.normal.lineStyle');
+
+            // Initialization animation
+            if (! this._data) {
+                var cartesian = seriesModel.coordinateSystem;
+                var xAxis = cartesian.getAxis('x');
+                var yAxis = cartesian.getAxis('y');
+                var xExtent = xAxis.getCoordExtent();
+                var yExtent = yAxis.getCoordExtent();
+
+                var clipPath = new api.Rect({
+                    shape: {
+                        x: xExtent[0],
+                        y: yExtent[0],
+                        width: 0,
+                        height: yExtent[1] - yExtent[0]
+                    }
+                });
+
+                this.group.setClipPath(clipPath);
+
+                clipPath.animateShape()
+                    .when(1500, {
+                        x: xExtent[0],
+                        y: yExtent[0],
+                        width: xExtent[1] - xExtent[0],
+                        height: yExtent[1] - yExtent[0]
+                    })
+                    .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
+                    },
+                    style: {
+                        stroke: seriesModel.getVisual('color'),
+                        lineWidth: lineStyleNormalModel.get('width')
+                    }
+                });
+                this.group.add(polyline);
+            }
+
+            this._data = data;
+        }
+    });
+});
\ No newline at end of file

src/chart/line/lineLayoutGrid.js

 define(function (require) {
 
+    require('../../echarts').registerLayout(function (ecModel, api) {
+
+        ecModel.eachSeriesByType('line', function (lineSeries) {
+            var cartesian = lineSeries.coordinateSystem;
+            if (cartesian.type !== 'cartesian2d') {
+                return;
+            }
+
+            var data = lineSeries.getData();
+            var coords = cartesian.dataToCoords(data);
+            data.each(function (dataItem, idx) {
+                var coord = coords[idx];
+                var value = dataItem.getValue();
+
+                if (value != null) {
+                    dataItem.layout = {
+                        x: coord[0],
+                        y: coord[1]
+                    };
+                }
+            });
+        });
+    });
 });
\ No newline at end of file

src/coord/cartesian/AxisModel.js

@@ -69,6 +69,7 @@ define(function(require) {
             z: 0,                       // 二级层叠
             gridIndex: 0,
             position: 'bottom',    // 位置
+            inverse: false,        // 反向坐标轴
             name: '',              // 坐标轴名字，默认为空
             nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
             nameTextStyle: {},     // 坐标轴文字样式，默认取全局样式

src/coord/cartesian/Grid.js

@@ -258,7 +258,7 @@ define(function(require, factory) {
         _updateCartesianFromSeries: function (ecModel) {
             var axisDataMap = {};
 
-            ecModel.eachSeries(function (seriesModel, idx) {
+            ecModel.eachSeries(function (seriesModel) {
                 var coordinateSystem = seriesModel.get('coordinateSystem');
 
                 if (coordinateSystem === 'cartesian2d') {

src/echarts.js

@@ -331,9 +331,9 @@ define(function (require) {
             ecModel.eachSeries(function (seriesModel, idx) {
                 var id = getSeriesId(seriesModel.option, idx);
                 var chart = this._chartsMap[id];
-                // PENDING 这里先添加 group，不然不能配置动画
-                this._zr.add(chart.group);
                 chart.render(seriesModel, ecModel, api);
+
+                this._zr.add(chart.group);
             }, this);
         },
 

test/line.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/axis'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+
+                for (var i = 0; i < 20; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push(Math.random() * 5);
+                    data2.push(Math.random());
+                    data3.push(Math.random());
+                }
+
+                console.profile('setOption');
+                chart.setOption({
+                    legend: {
+                        data: [{
+                            name: 'line',
+                            itemStyle: {
+                                normal: {
+                                    // color: 'blue'
+                                }
+                            }
+                        }, 'line2', 'line3'],
+                        selected: {
+                            // 'line': false
+                        }
+                    },
+                    xAxis: {
+                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        data: xAxisData
+                    },
+                    yAxis: {
+                    },
+                    series: [{
+                        name: 'line',
+                        type: 'line',
+                        data: data1
+                    }, {
+                        name: 'line2',
+                        type: 'line',
+                        data: data2
+                    }, {
+                        name: 'line3',
+                        type: 'line',
+                        data: data3
+                    }]
+                });
+                console.profileEnd('setOption');
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file