Merge branch 'master' of https://github.com/pissang/echarts-next

Conflicts:
	src/chart/line/LineView.js
	src/component/axis.js
	src/util/graphic.js

src/chart/bar/BarView.js

 define(function (require) {
 
+    'use strict';
+
+    var zrUtil = require('zrender/core/util');
+
     return require('../../echarts').extendChartView({
 
         type: 'bar',
@@ -26,18 +30,19 @@ define(function (require) {
                     }
 
                     var layout = dataItem.layout;
-                    var normalItemStyle = dataItem.getModel('itemStyle.normal');
                     var rect = new api.Rect({
                         shape: {
                             x: layout.x,
                             y: layout.y + layout.height,
                             width: layout.width
                         },
-                        style: {
-                            fill: dataItem.getVisual('color'),
-                            stroke: normalItemStyle.get('borderColor'),
-                            lineWidth: normalItemStyle.get('borderWidth')
-                        }
+                        style: zrUtil.merge(
+                            dataItem.getModel('itemStyle.normal').getItemStyle(),
+                            {
+                                fill: dataItem.getVisual('color')
+                            },
+                            true, false
+                        )
                     });
 
                     dataItem.__el = rect;

src/chart/line/LineView.js

@@ -2,19 +2,14 @@ define(function(require) {
 
     'use strict';
 
+    var zrUtil = require('zrender/core/util');
+
     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');
 
@@ -24,43 +19,35 @@ define(function(require) {
                     return [layout.x, layout.y];
                 }
             });
+            var coordinateSystem = seriesModel.coordinateSystem;
+            var isCoordinateSystemPolar = coordinateSystem.type === 'polar';
+
+            // if (isCoordinateSystemPolar && points.length > 2) {
+            //     // Close polyline
+            //     points.push(Array.prototype.slice.call(points[0]));
+            // }
+
             // Initialization animation
             if (!this._data) {
-                var cartesian = seriesModel.coordinateSystem;
-                var xAxis = cartesian.getAxis('x');
-                var yAxis = cartesian.getAxis('y');
-                var xExtent = xAxis.getExtent();
-                var yExtent = yAxis.getExtent();
-
-                var clipPath = new api.Rect({
-                    shape: {
-                        x: xExtent[0],
-                        y: yExtent[0],
-                        width: 0,
-                        height: yExtent[1] - yExtent[0]
-                    }
-                });
+                var clipPath = isCoordinateSystemPolar
+                    ? this._createPolarClipShape(coordinateSystem, api)
+                    : this._createGridClipShape(coordinateSystem, api);
 
                 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 polyline = new api.Polyline({
                     shape: {
                         points: points
                     },
-                    style: {
-                        stroke: seriesModel.getVisual('color'),
-                        lineWidth: lineStyleNormalModel.get('width')
-                    }
+                    style: zrUtil.merge(
+                        lineStyleNormalModel.getLineStyle(),
+                        {
+                            stroke: seriesModel.getVisual('color')
+                        },
+                        true, false
+                    )
                 });
+
                 this.group.add(polyline);
 
                 this._polyline = polyline;
@@ -73,9 +60,65 @@ define(function(require) {
                 //     .start('cubicOut');
                 this._polyline.shape.points = points;
                 this._polyline.dirty(true);
+
+                // Add back
+                this.group.add(this._polyline);
             }
 
             this._data = data;
+        },
+
+        _createGridClipShape: function (cartesian, api) {
+            var xAxis = cartesian.getAxis('x');
+            var yAxis = cartesian.getAxis('y');
+            var xExtent = xAxis.getExtent();
+            var yExtent = yAxis.getExtent();
+
+            var clipPath = new api.Rect({
+                shape: {
+                    x: xExtent[0],
+                    y: yExtent[0],
+                    width: 0,
+                    height: yExtent[1] - yExtent[0]
+                }
+            });
+
+            clipPath.animateTo({
+                shape: {
+                    x: xExtent[0],
+                    y: yExtent[0],
+                    width: xExtent[1] - xExtent[0],
+                    height: yExtent[1] - yExtent[0]
+                }
+            }, 1500);
+
+            return clipPath;
+        },
+
+        _createPolarClipShape: function (polar, api) {
+            // var angleAxis = polar.getAngleAxis();
+            var radiusAxis = polar.getRadiusAxis();
+
+            var radiusExtent = radiusAxis.getExtent();
+
+            var clipPath = new api.Sector({
+                shape: {
+                    cx: polar.cx,
+                    cy: polar.cy,
+                    r0: radiusExtent[0],
+                    r: radiusExtent[1],
+                    startAngle: 0,
+                    endAngle: 0
+                }
+            });
+
+            clipPath.animateTo({
+                shape: {
+                    endAngle: Math.PI * 2
+                }
+            }, 1500);
+
+            return clipPath;
         }
     });
 });
\ No newline at end of file

src/chart/scatter/ScatterView.js

 define(function (require) {
 
+    var zrUtil = require('zrender/core/util');
+
     require('../../echarts').extendChartView({
 
         type: 'scatter',
@@ -31,9 +33,13 @@ define(function (require) {
                     symbolShape.scale = [0.1, 0.1];
                     symbolShape.position = [layout.x, layout.y];
 
-                    symbolShape.style.set({
-                        fill: dataItem.getVisual('color')
-                    });
+                    symbolShape.style.set(zrUtil.merge(
+                        dataItem.getModel('itemStyle.normal').getItemStyle(),
+                        {
+                            fill: dataItem.getVisual('color')
+                        },
+                        true, false
+                    ));
 
                     symbolShape.animateTo({
                         scale: [symbolSize, symbolSize]

src/chart/scatter/scatterVisual.js

@@ -3,7 +3,7 @@ define(function (require) {
     require('../../echarts').registerVisualCoding(function (ecModel) {
 
         ecModel.eachSeriesByType('scatter', function (scatterSeries) {
-            var symbolType = scatterSeries.get('symbol');
+            var symbolType = scatterSeries.get('symbol') || 'circle';
             var symbolSize = scatterSeries.get('symbolSize');
             scatterSeries.setVisual({
                 legendSymbol: symbolType,
@@ -15,8 +15,18 @@ define(function (require) {
             data.each(function (dataItem) {
                 var symbolType = dataItem.get('symbol');
                 var symbolSize = dataItem.get('symbolSize');
-                if (symbolType && symbolType !== 'none') {
-                    scatterSeries.setVisual({
+                if (typeof symbolSize === 'function') {
+                    dataItem.setVisual({
+                        symbol: symbolType,
+                        symbolSize: symbolSize([
+                            dataItem.getX(),
+                            dataItem.getY(),
+                            dataItem.getValue()
+                        ])
+                    });
+                }
+                else if (symbolType && symbolType !== 'none') {
+                    dataItem.setVisual({
                         symbol: symbolType,
                         symbolSize: symbolSize
                     });

src/component/angleAxis.js

@@ -6,25 +6,24 @@ define(function(require) {
 
     var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
 
-    var lineStart = [];
-    var lineEnd = [];
-    var lineDirection = [];
-    var center = [];
-    function getLineShape(cx, cy, r0, r, radian) {
-        center[0] = cx;
-        center[1] = cy;
+    function getPointOnAxisLine(cx, cy, r, radian) {
+        var dx = r * Math.cos(radian);
+        var dy = r * Math.sin(radian);
 
-        lineDirection[0] = Math.cos(radian);
-        lineDirection[1] = Math.sin(radian);
+        return [cx + dx, cy + dy];
+    }
+
+    function getAxisLineShape(cx, cy, r0, r, angle) {
+        var radian = angle / 180 * Math.PI;
 
-        vector.scaleAndAdd(lineStart, center, lineDirection, r0);
-        vector.scaleAndAdd(lineEnd, center, lineDirection, r);
+        var start = getPointOnAxisLine(cx, cy, r0, radian);
+        var end = getPointOnAxisLine(cx, cy, r, radian);
 
         return {
-            x1: lineStart[0],
-            y1: lineStart[1],
-            x2: lineEnd[0],
-            y2: lineEnd[1]
+            x1: start[0],
+            y1: start[1],
+            x2: end[0],
+            y2: end[1]
         };
     }
 
@@ -45,6 +44,12 @@ define(function(require) {
             var cy = polar.cy;
             var radiusExtent = polar.getRadiusAxis().getExtent();
             var ticksAngles = angleAxis.getTicksPositions();
+
+            if (angleAxis.type !== 'category') {
+                // Remove the last tick which will overlap the first tick
+                ticksAngles.pop();
+            }
+
             zrUtil.each(elementList, function (name) {
                 if (angleAxisModel.get(name +'.show')) {
                     this['_' + name](angleAxisModel, ticksAngles, radiusExtent, cx, cy, api);
@@ -58,17 +63,17 @@ define(function(require) {
         _axisLine: function (angleAxisModel, ticksAngles, radiusExtent, cx, cy, api) {
             var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle');
 
-            var arc = new api.Arc({
+            var circle = new api.Circle({
                 shape: {
-                    x: cx,
-                    y: cy,
-                    r0: radiusExtent[0],
+                    cx: cx,
+                    cy: cy,
                     r: radiusExtent[1]
                 },
                 style: lineStyleModel.getLineStyle()
             });
+            circle.style.fill = null;
 
-            this.group.add(arc);
+            this.group.add(circle);
         },
 
         /**
@@ -81,19 +86,53 @@ define(function(require) {
 
             var lines = zrUtil.map(ticksAngles, function (tickAngle) {
                 return new api.Line({
-                    shape: getLineShape(cx, cy, radiusExtent[1], radiusExtent[1] + tickLen, tickAngle)
+                    shape: getAxisLineShape(cx, cy, radiusExtent[1], radiusExtent[1] + tickLen, tickAngle)
                 });
             });
             this.group.add(api.mergePath(
-                lines, tickModel.getModel('lineStyle').getLineStyle())
-            );
+                lines, {
+                    style: tickModel.getModel('lineStyle').getLineStyle()
+                }
+            ));
         },
 
         /**
          * @private
          */
         _axisLabel: function (angleAxisModel, ticksAngles, radiusExtent, cx, cy, api) {
+            var axis = angleAxisModel.axis;
+
+            var labelModel = angleAxisModel.getModel('axisLabel');
+            var textStyleModel = labelModel.getModel('textStyle');
+
+            var labels = angleAxisModel.formatLabels(axis.scale.getTicksLabels());
 
+            var labelMargin = labelModel.get('margin');
+            var labelsAngles = axis.getLabelsPositions();
+
+            // Use length of ticksAngles because it may remove the last tick to avoid overlapping
+            for (var i = 0; i < ticksAngles.length; i++) {
+                var tickAngle = labelsAngles[i] * Math.PI / 180;
+                var r = radiusExtent[1];
+                var p = getPointOnAxisLine(cx, cy, r + labelMargin, tickAngle);
+
+                var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3
+                    ? 'center' : (p[0] > cx ? 'left' : 'right');
+                var labelTextBaseline = Math.abs(p[1] - cy) / r < 0.3
+                    ? 'middle' : (p[1] > cy ? 'top' : 'bottom');
+
+                this.group.add(new api.Text({
+                    style: {
+                        x: p[0],
+                        y: p[1],
+                        text: labels[i],
+                        textAlign: labelTextAlign,
+                        textBaseline: labelTextBaseline,
+                        font: textStyleModel.getFont()
+                    },
+                    silent: true
+                }))
+            }
         },
 
         /**
@@ -114,7 +153,7 @@ define(function(require) {
                 var colorIndex = (lineCount++) % lineColors.length;
                 splitLines[colorIndex] = splitLines[colorIndex] || [];
                 splitLines[colorIndex].push(new api.Line({
-                    shape: getLineShape(cx, cy, radiusExtent[0], radiusExtent[1], tickAngle)
+                    shape: getAxisLineShape(cx, cy, radiusExtent[0], radiusExtent[1], ticksAngles[i])
                 }))
             }
 

src/component/axis.js

@@ -208,6 +208,7 @@ define(function(require) {
             var gridRect = gridModel.coordinateSystem.getRect();
 
             var ticks = axis.scale.getTicks();
+            var labels = axisModel.formatLabels(axis.scale.getTicksLabels());
             var labelMargin = labelModel.get('margin');
             var labelRotate = labelModel.get('rotate');
             var labelInterval = labelModel.get('interval') || 0;
@@ -216,16 +217,6 @@ define(function(require) {
             var textSpaceTakenRect;
             var needsCheckTextSpace;
 
-            var labels;
-            if (axis.scale.type === 'ordinal') {
-                labels = zrUtil.map(ticks, axis.scale.getItem, axis.scale);
-            }
-            else {
-                labels = ticks.slice();
-            }
-
-            labels = axisModel.formatLabels(labels);
-
             for (var i = 0; i < ticks.length; i++) {
                 // Default is false
                 showList[i] = false;

src/component/polar.js

 define(function(require) {
     'use strict';
 
-    require('../coord/polar/Polar');
-
+    require('../coord/polar/polarCreator');
     require('./angleAxis');
     require('./radiusAxis');
 

src/component/radiusAxis.js

-define(function (require) {
+define(function(require) {
+    'use strict';
+
+    var zrUtil = require('zrender/core/util');
+    var vector = require('zrender/core/vector');
+
+    var elementList = ['splitLine', 'splitArea', 'axisLine', 'axisTick', 'axisLabel'];
+
+    function getPointOnAxisLine(cx, cy, r, radian) {
+        var dx = r * Math.cos(radian);
+        var dy = r * Math.sin(radian);
+
+        return [cx + dx, cy + dy];
+    }
+
+    function getAxisLineShape(radiusAxisModel, cx, cy) {
+
+        var radiusAxis = radiusAxisModel.axis;
+        var radius = radiusAxis.getExtent();
+
+        var axisAngle = radiusAxisModel.get('axisAngle');
+
+        var radian = axisAngle / 180 * Math.PI;
+
+        var start = getPointOnAxisLine(cx, cy, radius[0], radian);
+        var end = getPointOnAxisLine(cx, cy, radius[1], radian);
+
+        return {
+            x1: start[0],
+            y1: start[1],
+            x2: end[0],
+            y2: end[1]
+        };
+    }
+
+    require('../coord/polar/polarCreator');
 
     require('../echarts').extendComponentView({
 
         type: 'radiusAxis',
 
         render: function (radiusAxisModel, ecModel, api) {
+            this.group.clear();
+
+            var polarModel = ecModel.getComponent('polar', radiusAxisModel.get('polarIndex'));
+            var radiusAxis = radiusAxisModel.axis;
+            var polar = polarModel.coordinateSystem;
+            var cx = polar.cx;
+            var cy = polar.cy;
+            var angleExtent = polar.getAngleAxis().getExtent();
+            var ticksPositions = radiusAxis.getTicksPositions();
+            zrUtil.each(elementList, function (name) {
+                if (radiusAxisModel.get(name +'.show')) {
+                    this['_' + name](radiusAxisModel, ticksPositions, angleExtent, cx, cy, api);
+                }
+            }, this);
+
+            var z = radiusAxisModel.get('z');
+            this.group.eachChild(function (child) {
+                child.z = z;
+            });
+        },
+
+        /**
+         * @private
+         */
+        _axisLine: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
+            var arc = new api.Line({
+                shape: getAxisLineShape(radiusAxisModel, cx, cy),
+                style: radiusAxisModel.getModel('axisLine.lineStyle').getLineStyle()
+            });
+
+            this.group.add(arc);
+        },
+
+        /**
+         * @private
+         */
+        _axisTick: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
+            var tickModel = radiusAxisModel.getModel('axisTick');
+
+            var lineShape = getAxisLineShape(radiusAxisModel, cx, cy);
+            var start = [lineShape.x1, lineShape.y1];
+            var end = [lineShape.x2, lineShape.y2];
+
+            var len = vector.dist(end, start);
+            var direction = [
+                end[1] - start[1],
+                start[0] - end[0]
+            ];
+            vector.normalize(direction, direction);
+
+            var p1 = [];
+            var p2 = [];
+            var tickLen = tickModel.get('length');
+            var lines = zrUtil.map(ticksPositions, function (tickPosition) {
+                // Get point on axis
+                vector.lerp(p1, start, end, tickPosition / len);
+                vector.scaleAndAdd(p2, p1, direction, tickLen);
+                return new api.Line({
+                    shape: {
+                        x1: p1[0],
+                        y1: p1[1],
+                        x2: p2[0],
+                        y2: p2[1]
+                    }
+                });
+            });
+            this.group.add(api.mergePath(
+                lines, {
+                    style: tickModel.getModel('lineStyle').getLineStyle(),
+                    silent: true
+                }
+            ));
+        },
+
+        /**
+         * @private
+         */
+        _axisLabel: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
+            var axis = radiusAxisModel.axis;
+            var labelModel = radiusAxisModel.getModel('axisLabel');
+            var textStyleModel = labelModel.getModel('textStyle');
+
+            var labels = radiusAxisModel.formatLabels(axis.scale.getTicksLabels());
+
+            var lineShape = getAxisLineShape(radiusAxisModel, cx, cy);
+            var start = [lineShape.x1, lineShape.y1];
+            var end = [lineShape.x2, lineShape.y2];
+
+            var len = vector.dist(end, start);
+            var direction = [
+                start[1] - end[1],
+                end[0] - start[0]
+            ];
+            vector.normalize(direction, direction);
+
+            var p = [];
+            var labelMargin = labelModel.get('margin');
+            var labelsPositions = axis.getLabelsPositions();
+
+            // FIXME Text align and text baseline when axis angle is 90 degree
+            for (var i = 0; i < labelsPositions.length; i++) {
+                // Get point on axis
+                vector.lerp(p, start, end, labelsPositions[i] / len);
+                vector.scaleAndAdd(p, p, direction, labelMargin);
+                this.group.add(new api.Text({
+                    style: {
+                        x: p[0],
+                        y: p[1],
+                        text: labels[i],
+                        textAlign: 'center',
+                        textBaseline: 'top',
+                        font: textStyleModel.getFont()
+                    },
+                    silent: true
+                }));
+            };
+        },
+
+        /**
+         * @private
+         */
+        _splitLine: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
+            var splitLineModel = radiusAxisModel.getModel('splitLine');
+            var lineStyleModel = splitLineModel.getModel('lineStyle');
+            var lineColors = lineStyleModel.get('color');
+            var lineWidth = lineStyleModel.get('width');
+            var lineCount = 0;
+
+            lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+
+            var splitLines = [];
+
+            for (var i = 0; i < ticksPositions.length; i++) {
+                var colorIndex = (lineCount++) % lineColors.length;
+                splitLines[colorIndex] = splitLines[colorIndex] || [];
+                splitLines[colorIndex].push(new api.Circle({
+                    shape: {
+                        cx: cx,
+                        cy: cy,
+                        r: ticksPositions[i]
+                    },
+                    silent: true
+                }))
+            }
+
+            // Simple optimization
+            // Batching the lines if color are the same
+            for (var i = 0; i < splitLines.length; i++) {
+                this.group.add(api.mergePath(splitLines[i], {
+                    style: {
+                        stroke: lineColors[i % lineColors.length],
+                        lineType: lineStyleModel.getLineDash(),
+                        lineWidth: lineWidth,
+                        fill: null
+                    },
+                    silent: true
+                }));
+            }
+        },
+
+        /**
+         * @private
+         */
+        _splitArea: function (radiusAxisModel, ticksPositions, angleExtent, cx, cy, api) {
 
         }
     });

src/coord/Axis.js

@@ -87,7 +87,7 @@ define(function (require) {
             data = this.scale.normalize(data);
 
             var extent = this.getExtent();
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 fixExtentWithBands(extent, this.scale.getExtentSize());
             }
 
@@ -103,7 +103,7 @@ define(function (require) {
         unmapData: function (mapped, clamp) {
             var extent = this.getExtent();
 
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 fixExtentWithBands(extent, this.scale.getExtentSize());
             }
 
@@ -115,20 +115,39 @@ define(function (require) {
          * @return {Array.<number>}
          */
         getTicksPositions: function () {
-            var ticks = this.scale.getTicks();
-            if (this.onBand && this.scale.type === 'ordinal') {
+            if (this.onBand) {
                 var bands = this.getBands();
-                var ret = [];
+                var positions = [];
                 for (var i = 0; i < bands.length; i++) {
-                    ret.push(bands[i][0]);
+                    positions.push(bands[i][0]);
                 }
                 if (bands[i - 1]) {
-                    ret.push(bands[i - 1][1]);
+                    positions.push(bands[i - 1][1]);
                 }
-                return ret;
+                return positions;
             }
             else {
-                return zrUtil.map(ticks, this.mapData, this);
+                return zrUtil.map(this.scale.getTicks(), this.mapData, this);
+            }
+        },
+
+        /**
+         * Positions of labels are on the ticks or on the middle of bands
+         * @return {Array.<number>}
+         */
+        getLabelsPositions: function () {
+            if (this.onBand) {
+                var bands = this.getBands();
+                var positions = [];
+                var band;
+                for (var i = 0; i < bands.length; i++) {
+                    band = bands[i];
+                    positions.push((band[0] + band[1]) / 2);
+                }
+                return positions;
+            }
+            else {
+                return zrUtil.map(this.scale.getTicks(), this.mapData, this);
             }
         },
 

src/coord/cartesian/Grid.js

@@ -197,7 +197,7 @@ define(function(require, factory) {
                     xAxisModel.get('type'),
                     xAxisPosition
                 );
-                axisX.onBand = xAxisModel.get('boundaryGap');
+                axisX.onBand = xAxisModel.get('boundaryGap') && axisX.type === 'category';
                 axisX.inverse = xAxisModel.get('inverse');
 
                 // Inject axis into axisModel

src/coord/polar/AngleAxis.js

@@ -6,7 +6,7 @@ define(function(require) {
 
     function AngleAxis(scale, angleExtent) {
 
-        angleExtent = angleExtent || [0, Math.PI * 2];
+        angleExtent = angleExtent || [0, 360];
 
         Axis.call(this, 'angle', scale, angleExtent);
 

src/coord/polar/AxisModel.js

@@ -25,7 +25,6 @@ define(function(require) {
     zrUtil.merge(PolarAxisModel.prototype, require('../axisModelCommonMixin'));
 
 
-
     // Radius axis
     PolarAxisModel.extend({
 
@@ -37,11 +36,18 @@ define(function(require) {
         axis: null,
 
         init: function (axisOption, parentModel, ecModel) {
-            axisOption.type = axisOption.type || 'value';
-
-            axisOption.polarIndex = axisOption.polarIndex || 0;
+            zrUtil.merge(axisOption, this.defaultOption, false);
 
             mergeDefault(axisOption, ecModel);
+        },
+
+        defaultOption: {
+
+            type: 'value',
+
+            polarIndex: 0,
+
+            axisAngle: 0
         }
     });
 
@@ -56,11 +62,22 @@ define(function(require) {
         axis: null,
 
         init: function (axisOption, parentModel, ecModel) {
-            axisOption.type = axisOption.type || 'category';
-
-            axisOption.polarIndex = axisOption.polarIndex || 0;
+            zrUtil.merge(axisOption, this.defaultOption, false);
 
             mergeDefault(axisOption, ecModel);
+        },
+
+        defaultOption: {
+
+            type: 'category',
+
+            polarIndex: 0,
+
+            clockWise: true,
+
+            axisLabel: {
+                rotate: false
+            }
         }
     });
 });
\ No newline at end of file

src/coord/polar/Polar.js

@@ -86,10 +86,10 @@ define(function(require) {
          */
         dataToCoord: function (data) {
             var radius = this._radiusAxis.dataToRadius(data[0]);
-            var angle = this._angleAxis.dataToAngle(data[1]);
+            var radian = this._angleAxis.dataToAngle(data[1]) / 180 * Math.PI;
 
-            var x = Math.cos(angle) * radius + this.cx;
-            var y = Math.sin(angle) * radius + this.cy;
+            var x = Math.cos(radian) * radius + this.cx;
+            var y = Math.sin(radian) * radius + this.cy;
 
             return [x, y];
         },
@@ -111,7 +111,7 @@ define(function(require) {
 
             return [
                 this._radiusAxis.radiusToData(radius),
-                this._angleAxis.angleToData(angle)
+                this._angleAxis.angleToData(angle) / Math.PI * 180
             ];
         }
     }

src/coord/polar/PolarModel.js

@@ -23,7 +23,7 @@ define(function (require) {
 
             center: ['50%', '50%'],
 
-            radius: ['0%', '75%']
+            radius: ['0%', '80%']
         }
     });
 });
\ No newline at end of file

src/coord/polar/polarCreator.js

@@ -5,10 +5,10 @@ define(function (require) {
     var IntervalScale = require('../../scale/Interval');
     var OrdinalScale = require('../../scale/Ordinal');
     var numberUtil = require('../../util/number');
+    var zrUtil = require('zrender/core/util');
 
-    // 依赖 PolarModel, AxisModel 做预处理
+    // 依赖 PolarModel 做预处理
     require('./PolarModel');
-    require('./AxisModel');
 
     /**
      * Retrieve angle axis or radius axis belongs to the given polar
@@ -49,7 +49,7 @@ define(function (require) {
         this.cy = parsePercent(center[1], height);
 
         var radiusAxis = this.getRadiusAxis();
-        var size = Math.min(width, height);
+        var size = Math.min(width, height) / 2;
         radiusAxis.setExtent(
             parsePercent(radius[0], size),
             parsePercent(radius[1], size)
@@ -79,7 +79,7 @@ define(function (require) {
     function setAxis(axis, axisModel) {
         axis.type = axisModel.get('type');
         axis.scale = createScaleByModel(axisModel);
-        axis.onBand = axisModel.get('boundaryGap');
+        axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
         axis.inverse = axisModel.get('inverse');
 
         // Inject axis instance
@@ -116,6 +116,12 @@ define(function (require) {
                 }
             }
         });
+
+        zrUtil.each(polarList, function (polar) {
+            // PENDING
+            polar.getAngleAxis().scale.niceExtent(12);
+            polar.getRadiusAxis().scale.niceExtent(5);
+        });
     }
 
     var polarCreator = {
@@ -136,6 +142,11 @@ define(function (require) {
                 setAxis(radiusAxis, radiusAxisModel);
                 setAxis(angleAxis, angleAxisModel);
 
+                if (angleAxis.type === 'category' && ! angleAxis.onBand) {
+                    var angle = 360 - 360 / (angleAxis.scale.getExtentSize() + 1);
+                    angleAxis.setExtent(0, angle);
+                }
+
                 polar.resize(polarModel, api);
                 polarList.push(polar);
 

src/data/List.js

@@ -327,7 +327,7 @@ define(function(require) {
             }
         }
         else if (coordinateSystem === 'polar') {
-            function axisFinder(axisModel) {
+            var axisFinder = function (axisModel) {
                 return axisModel.get('polarIndex') === polarIndex;
             }
             var polarIndex = seriesModel.get('polarIndex') || 0;

src/model/mixin/areaStyle.js

 define({
     getAreaStyle: function () {
-        return {
-            fill: this.get('color'),
-            shadowBlur: this.get('shadowBlur'),
-            shadowOffsetX: this.get('shadowOffsetX'),
-            shadowOffsetY: this.get('shadowOffsetY'),
-            shadowColor: this.get('shadowColor')
-        };
+        return require('./makeStyleMapper')(
+            [
+                ['fill', 'color'],
+                ['shadowBlur'],
+                ['shadowOffsetX'],
+                ['shadowOffsetY'],
+                ['shadowColor']
+            ]
+        );
     }
 });
\ No newline at end of file

src/model/mixin/itemStyle.js

-define({
-    getItemStyle: function () {
-        return {
-            fill: this.get('color'),
-            stroke: this.get('borderColor'),
-            lineWidth: this.get('borderWidth'),
-
-            shadowBlur: this.get('shadowBlur'),
-            shadowOffsetX: this.get('shadowOffsetX'),
-            shadowOffsetY: this.get('shadowOffsetY'),
-            shadowColor: this.get('shadowColor')
-        };
-    }
+define(function (require) {
+    return {
+        getItemStyle: require('./makeStyleMapper')(
+            [
+                ['fill', 'color'],
+                ['stroke', 'borderColor'],
+                ['lineWidth', 'borderWidth'],
+                ['opacity'],
+                ['shadowBlur'],
+                ['shadowOffsetX'],
+                ['shadowOffsetY'],
+                ['shadowColor']
+            ]
+        )
+    };
 });
\ No newline at end of file

src/model/mixin/lineStyle.js

-define({
-    getLineStyle: function () {
-        return {
-            lineWidth: this.get('width'),
-            stroke: this.get('color'),
-            lineDash: this.getLineDash(),
-            shadowBlur: this.get('shadowBlur'),
-            shadowOffsetX: this.get('shadowOffsetX'),
-            shadowOffsetY: this.get('shadowOffsetY'),
-            shadowColor: this.get('shadowColor')
-        };
-    },
+define(function (require) {
+    var getLineStyle = require('./makeStyleMapper')(
+        [
+            ['lineWidth', 'width'],
+            ['stroke', 'color'],
+            ['opacity'],
+            ['shadowBlur'],
+            ['shadowOffsetX'],
+            ['shadowOffsetY'],
+            ['shadowColor']
+        ]
+    );
+    return {
+        getLineStyle: function () {
+            var style = getLineStyle.call(this);
+            style.lineDash = this.getLineDash();
+            return style;
+        },
 
-    getLineDash: function () {
-        var type = this.get('type');
-        return type === 'solid' ? null
-            : (type === 'dashed' ? [5, 5] : [1, 1]);
-    }
+        getLineDash: function () {
+            var type = this.get('type');
+            return (type === 'solid' || type == null) ? null
+                : (type === 'dashed' ? [5, 5] : [1, 1]);
+        }
+    };
 });
\ No newline at end of file

src/model/mixin/makeStyleMapper.js

+define(function () {
+    return function (properties) {
+        // Normalize
+        for (var i = 0; i < properties.length; i++) {
+            if (! properties[i][1]) {
+               properties[i][1] = properties[i][0];
+            }
+        }
+        return function () {
+            var obj = {};
+            for (var i = 0; i < properties.length; i++) {
+                var val = this.get(properties[i][1]);
+                if (val != null) {
+                    obj[properties[i][0]] = val;
+                }
+            }
+            return obj;
+        }
+    }
+});
\ No newline at end of file

src/scale/Interval.js

@@ -144,6 +144,18 @@ define(function (require) {
             return ticks;
         },
 
+        /**
+         * @return {Array.<string>}
+         */
+        getTicksLabels: function () {
+            var labels = [];
+            var ticks = this.getTicks();
+            for (var i = 0; i < ticks.length; i++) {
+                labels.push(ticks[i].toString());
+            }
+            return labels;
+        },
+
         /**
          * Update interval and extent of intervals for nice ticks
          * Algorithm from d3.js
@@ -165,9 +177,12 @@ define(function (require) {
             if (err <= .15) {
                 interval *= 10;
             }
-            else if (err <= .35) {
+            else if (err <= .3) {
                 interval *= 5;
             }
+            else if (err <= .5) {
+                interval *= 3;
+            }
             else if (err <= .75) {
                 interval *= 2;
             }
@@ -182,9 +197,10 @@ define(function (require) {
 
         /**
          * Nice extent.
+         * @param  {number} [approxTickNum = 10] Given approx tick number
          */
-        niceExtent: function () {
-            this.niceTicks();
+        niceExtent: function (approxTickNum) {
+            this.niceTicks(approxTickNum);
 
             var extent = this._extent;
             var interval = this._interval;

src/scale/Ordinal.js

@@ -73,8 +73,8 @@ define(function (require) {
          */
         setExtent: function (start, end) {
             var thisExtent = this._extent;
-            thisExtent[0] = start;
-            thisExtent[1] = end;
+            thisExtent[0] = Math.max(start, 0);
+            thisExtent[1] = Math.min(end, this._list.length - 1);
         },
 
         /**
@@ -93,6 +93,21 @@ define(function (require) {
             return ticks;
         },
 
+        /**
+         * @return {Array.<string>}
+         */
+        getTicksLabels: function () {
+            var labels = [];
+            var extent = this._extent;
+            var rank = extent[0];
+
+            while (rank <= extent[1]) {
+                labels.push(this._list[rank]);
+                rank++;
+            }
+            return labels;
+        },
+
         /**
          * @return {number}
          */
@@ -103,7 +118,7 @@ define(function (require) {
         /**
          * Get item on rank n
          */
-        getItem: function (n) {
+        getLabel: function (n) {
             return this._list[n];
         },
 

src/util/number.js

@@ -106,7 +106,7 @@ define(function (require) {
      */
     function round(x) {
         // PENDING
-        return +(+x).toFixed(10);
+        return +(+x).toFixed(12);
     }
 
     return {

src/util/symbol.js

@@ -68,11 +68,13 @@ define(function(require) {
             });
         },
 
-        circle: function (x, y, size) {
+        circle: function (x, y, w, h) {
+            // Put circle in the center of square
+            var size = Math.min(w, h);
             return new graphic.Circle({
                 shape: {
-                    cx: x + size / 2,
-                    cy: y + size / 2,
+                    cx: x + w / 2,
+                    cy: y + h / 2,
                     r: size / 2
                 }
             });

test/polarLine.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/polar'
+            ], 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() * 2);
+                    data2.push(Math.random());
+                    data3.push(Math.random());
+                }
+
+                chart.setOption({
+                    legend: {
+                        data: ['line', 'line2', 'line3']
+                    },
+                    polar: {},
+                    angleAxis: {
+                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        data: xAxisData
+                    },
+                    radiusAxis: {
+                    },
+                    series: [{
+                        coordinateSystem: 'polar',
+                        name: 'line',
+                        type: 'line',
+                        data: data1
+                    }, {
+                        coordinateSystem: 'polar',
+                        name: 'line2',
+                        type: 'line',
+                        data: data2
+                    }, {
+                        coordinateSystem: 'polar',
+                        name: 'line3',
+                        type: 'line',
+                        data: data3
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/polarLine2.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/polar'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var data = [];
+
+                for (var i = 0; i < 300; i++) {
+                    data.push([i, (i * 5) % 360]);
+                }
+
+                chart.setOption({
+                    legend: {
+                        data: ['line']
+                    },
+                    polar: {},
+                    angleAxis: {
+                        type: 'value'
+                    },
+                    radiusAxis: {
+                    },
+                    series: [{
+                        coordinateSystem: 'polar',
+                        name: 'line',
+                        type: 'line',
+                        data: data
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>
\ No newline at end of file

test/polar.html → test/polarScatter.html

@@ -29,10 +29,10 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 20; i++) {
-                    data1.push([Math.random() * 1, Math.random() * Math.PI * 2]);
-                    data2.push([Math.random() * 5, Math.random() * Math.PI * 2]);
-                    data3.push([Math.random() * 10, Math.random() * Math.PI * 2]);
+                for (var i = 0; i < 100; i++) {
+                    data1.push([Math.random() * 5, Math.random() * 360]);
+                    data2.push([Math.random() * 5, Math.random() * 360]);
+                    data3.push([Math.random() * 10, Math.random() * 360]);
                 }
 
                 chart.setOption({
@@ -46,25 +46,25 @@
                         type: 'value'
                     },
                     radiusAxis: {
-
+                        axisAngle: 0
                     },
                     series: [{
                         coordinateSystem: 'polar',
                         name: 'scatter',
                         type: 'scatter',
-                        symbolSize: 20,
+                        symbolSize: 10,
                         data: data1
                     }, {
                         coordinateSystem: 'polar',
                         name: 'scatter2',
                         type: 'scatter',
-                        symbolSize: 20,
+                        symbolSize: 10,
                         data: data2
                     }, {
                         coordinateSystem: 'polar',
                         name: 'scatter3',
                         type: 'scatter',
-                        symbolSize: 20,
+                        symbolSize: 10,
                         data: data3
                     }]
                 });

test/scatter.html

@@ -29,10 +29,10 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 20; i++) {
-                    data1.push([Math.random() * 5, Math.random() * 4]);
-                    data2.push([Math.random() * 10, Math.random() * 5]);
-                    data3.push([Math.random() * 15, Math.random() * 10]);
+                for (var i = 0; i < 100; i++) {
+                    data1.push([Math.random() * 5, Math.random() * 4, Math.random()]);
+                    data2.push([Math.random() * 10, Math.random() * 5, Math.random()]);
+                    data3.push([Math.random() * 15, Math.random() * 10, Math.random()]);
                 }
 
                 chart.setOption({
@@ -40,25 +40,64 @@
                         data: ['scatter', 'scatter2', 'scatter3']
                     },
                     xAxis: {
-                        type: 'value'
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
                     },
                     yAxis: {
-                        type: 'value'
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
                     },
                     series: [{
                         name: 'scatter',
                         type: 'scatter',
-                        symbolSize: 20,
+                        itemStyle: {
+                            normal: {
+                                opacity: 0.8,
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        symbolSize: function (val) {
+                            return val[2] * 40;
+                        },
                         data: data1
                     }, {
                         name: 'scatter2',
                         type: 'scatter',
-                        symbolSize: 20,
+                        itemStyle: {
+                            normal: {
+                                opacity: 0.8,
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        symbolSize: function (val) {
+                            return val[2] * 40;
+                        },
                         data: data2
                     }, {
                         name: 'scatter3',
                         type: 'scatter',
-                        symbolSize: 20,
+                        itemStyle: {
+                            normal: {
+                                opacity: 0.8,
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowOffsetY: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        symbolSize: function (val) {
+                            return val[2] * 40;
+                        },
                         data: data3
                     }]
                 });