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

src/api/ExtensionAPI.js → src/ExtensionAPI.js

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

src/chart/bar/BarSeries.js

@@ -8,9 +8,8 @@ define(function(require) {
 
         type: 'bar',
 
-        getInitialData: function (option, ecModel) {
-            var list = List.fromArray(option.data, 1, this);
-            return list;
+        getInitialData: function (option) {
+            return List.fromArray(option.data, 1, this);
         },
 
         defaultOption: {

src/chart/bar/BarView.js

@@ -17,9 +17,11 @@ define(function (require) {
         _renderCartesian: function (seriesModel, ecModel, api) {
             var group = this.group;
             var data = seriesModel.getData();
+
             data.diff(this.data)
                 .add(function (dataItem, idx) {
                     var layout = dataItem.layout;
+                    var normalItemStyle = dataItem.getModel('itemStyle.normal');
                     var rect = new api.Rect({
                         shape: {
                             x: layout.x,
@@ -28,7 +30,8 @@ define(function (require) {
                         },
                         style: {
                             fill: dataItem.getVisual('color'),
-                            stroke: dataItem.get('itemStyle.normal.borderColor')
+                            stroke: normalItemStyle.get('borderColor'),
+                            lineWidth: normalItemStyle.get('borderWidth')
                         }
                     });
 

src/chart/pie/PieLayout.js

+define(function (require) {
+
+});
\ No newline at end of file

src/component/axis.js

 define(function(require) {
     'use strict';
 
+    var numberUtil = require('../util/number');
+
     require('../coord/cartesian/AxisModel');
 
     var AxisView = require('../echarts').extendComponentView({
@@ -8,30 +10,57 @@ define(function(require) {
         type: 'axis',
 
         render: function (axisModel, ecModel, api) {
+
+            this.group.clear();
+
+            var gridModel = ecModel.getComponent('grid', axisModel.get('gridIndex'));
             if (axisModel.get('axisLine.show')) {
-                this._renderAxisLine(axisModel, api);
+                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);
             }
         },
 
-        _renderAxisLine: function (axisModel, api) {
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisLine: function (axisModel, gridModel, api) {
             var axis = axisModel.axis;
 
             var p1 = [];
             var p2 = [];
 
-            var lineWidth = axisModel.get('axisLine.lineStyle.width');
-            var lineColor = axisModel.get('axisLine.lineStyle.color');
+            var lineStyleModel = axisModel.getModel('axisLine.lineStyle');
+            var lineWidth = lineStyleModel.get('width');
+            var lineColor = lineStyleModel.get('color');
+            var lineType = lineStyleModel.get('type');
+
+            var rect = gridModel.coordinateSystem.getRect();
 
             var otherCoord = axis.otherCoord;
-            var coordExtent = axis.getCoordExtent();
             if (axis.isHorizontal()) {
-                p1[0] = coordExtent[0];
-                p2[0] = coordExtent[1];
+                p1[0] = rect.x;
+                p2[0] = rect.x + rect.width;
                 p1[1] = p2[1] = otherCoord;
             }
             else {
-                p1[1] = coordExtent[0];
-                p2[1] = coordExtent[1];
+                p1[1] = rect.y;
+                p2[1] = rect.y + rect.height;
                 p1[0] = p2[0] = otherCoord;
             }
 
@@ -46,10 +75,401 @@ define(function(require) {
                 },
                 style: {
                     stroke: lineColor,
-                    lineWidth: lineWidth
+                    lineWidth: lineWidth,
+                    lineCap: 'round',
+                    lineType: lineType
                 },
-                z: axisModel.get('z')
+                z: axisModel.get('z'),
+                silent: true
             }));
+        },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisTick: function (axisModel, gridModel, api) {
+            var axis = axisModel.axis;
+            var tickModel = axisModel.getModel('axisTick');
+
+            var lineStyleModel = tickModel.getModel('lineStyle');
+            var tickLen = tickModel.get('length');
+            var tickColor = lineStyleModel.get('color');
+            var tickLineWidth = lineStyleModel.get('width');
+            var tickInterval = tickModel.get('interval') || 0;
+            var isTickIntervalFunction = typeof tickInterval === 'function';
+            // PENDING Axis tick don't have the situation that don't have enough space to place
+            if (tickInterval === 'auto') {
+                tickInterval = 0;
+            }
+
+            var isOrdinalAxis = axis.scale.type === 'ordinal';
+
+            var axisPosition = axis.position;
+            var ticksCoords = isOrdinalAxis && axis.boundaryGap
+                ? axis.getBandsCoords(true) : axis.getTicksCoords();
+
+            var tickLines = [];
+            for (var i = 0; i < ticksCoords.length; i++) {
+                // Only ordinal scale support tick interval
+                if (isOrdinalAxis) {
+                    if (isTickIntervalFunction) {
+                        if (!tickInterval(i, axis.scale.getItem(i))) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (i % (tickInterval + 1)) {
+                            continue;
+                        }
+                    }
+                }
+
+                var tickCoord = ticksCoords[i];
+
+                var x;
+                var y;
+                var offX = 0;
+                var offY = 0;
+
+                if (axis.isHorizontal()) {
+                    x = tickCoord;
+                    y = axis.otherCoord;
+                    offY = axisPosition === 'top' ? -tickLen : tickLen;
+                }
+                else {
+                    x = axis.otherCoord;
+                    y = tickCoord;
+                    offX = axisPosition === 'left' ? -tickLen : tickLen;
+                }
+                if (tickModel.get('inside')) {
+                    offX = -offX;
+                    offY = -offY;
+                }
+                var p1 = [x, y];
+                var p2 = [x + offX, y + offY];
+                api.subPixelOptimizeLine(p1, p2, tickLineWidth);
+                // Tick line
+                tickLines.push(new api.Line({
+                    shape: {
+                        x1: p1[0],
+                        y1: p1[1],
+                        x2: p2[0],
+                        y2: p2[1]
+                    }
+                }));
+            }
+            var tickEl = api.mergePath(tickLines, {
+                style: {
+                    stroke: tickColor,
+                    lineWidth: tickLineWidth
+                },
+                silent: true,
+                z: axisModel.get('z')
+            });
+            this.group.add(tickEl);
+        },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @private
+         */
+        _renderAxisLabel: function (axisModel, gridModel, api) {
+            var axis = axisModel.axis;
+
+            var labelModel = axisModel.getModel('axisLabel');
+            var textStyleModel = labelModel.getModel('textStyle');
+
+            var labelFormatter = labelModel.get('formatter');
+            if (!labelFormatter) {
+               // Default formatter
+               switch (axisModel.get('type')) {
+                   // TODO
+                   case 'log':
+                       break;
+                   case 'category':
+                       labelFormatter = function (val) {return val;};
+                       break;
+                   default:
+                       labelFormatter = function (val) {
+                           return numberUtil.addCommas(numberUtil.round(val));
+                       }
+                       break;
+               }
+            }
+            else if (typeof labelFormatter === 'string') {
+                labelFormatter = (function (tpl) {
+                   return function (val) {
+                       return tpl.replace('{value}', val);
+                   };
+               })(labelFormatter);
+            }
+
+            var gridRect = gridModel.coordinateSystem.getRect();
+
+            var ticks = axis.scale.getTicks();
+            var labelMargin = labelModel.get('margin');
+            var labelRotate = labelModel.get('rotate');
+            var labelInterval = labelModel.get('interval') || 0;
+            var isLabelIntervalFunction = typeof labelInterval === 'function';
+
+            var labelShowList = [];
+
+            var textSpaceTakenRect;
+            var needsCheckTextSpace;
+
+            for (var i = 0; i < ticks.length; i++) {
+                // Default is false
+                labelShowList[i] = false;
+
+                needsCheckTextSpace = false;
+
+                // Only ordinal scale support label interval
+                if (axis.scale.type === 'ordinal') {
+                    if (labelInterval === 'auto') {
+                        needsCheckTextSpace = true;
+                    }
+                    else if (isLabelIntervalFunction) {
+                        if (!labelInterval(tick, axis.scale.getItem(tick))) {
+                            continue;
+                        }
+                    }
+                    else {
+                        if (tick % (labelInterval + 1)) {
+                            continue;
+                        }
+                    }
+                }
+
+                var x;
+                var y;
+                var tick = ticks[i];
+                var tickCoord = axis.dataToCoord(tick);
+                var labelTextAlign = 'center';
+                var labelTextBaseline = 'middle';
+
+                var label = tick;
+                switch (axis.type) {
+                    case 'category':
+                        label = axis.scale.getItem(tick);
+                        break;
+                    case 'time':
+                        // TODO
+                }
+
+                switch (axis.position) {
+                    case 'top':
+                        y = gridRect.y - labelMargin;
+                        x = tickCoord;
+                        labelTextBaseline = 'bottom';
+                        break;
+                    case 'bottom':
+                        x = tickCoord;
+                        y = gridRect.y + gridRect.height + labelMargin;
+                        labelTextBaseline = 'top';
+                        break;
+                    case 'left':
+                        x = gridRect.x - labelMargin;
+                        y = tickCoord;
+                        labelTextAlign = 'right';
+                        break;
+                    case 'right':
+                        x = gridRect.x + gridRect.width + labelMargin;
+                        y = tickCoord;
+                        labelTextAlign = 'left';
+                }
+                if (axis.isHorizontal()) {
+                    if (labelRotate) {
+                        labelTextAlign = labelRotate > 0 ? 'left' : 'right';
+                    }
+                }
+
+                var textEl = new api.Text({
+                    style: {
+                        x: x,
+                        y: y,
+                        text: labelFormatter(label),
+                        textAlign: labelTextAlign,
+                        textBaseline: labelTextBaseline
+                    },
+                    rotation: labelRotate * Math.PI / 180,
+                    origin: [x, y],
+                    silent: true,
+                    z: axisModel.get('z')
+                });
+
+                if (needsCheckTextSpace && !labelRotate) {
+                    var rect = textEl.getBoundingRect();
+                    if (!textSpaceTakenRect) {
+                        textSpaceTakenRect = rect;
+                    }
+                    else {
+                        // There is no space for current label;
+                        if (textSpaceTakenRect.intersect(rect)) {
+                            continue;
+                        }
+                        else {
+                            textSpaceTakenRect.union(rect);
+                        }
+                    }
+                }
+
+                labelShowList[i] = true;
+
+                this.group.add(textEl);
+             }
+         },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @param {Array.<boolean>} showList
+         * @private
+         */
+        _renderSplitLine: function (axisModel, gridModel, api, showList) {
+            var axis = axisModel.axis;
+
+            var splitLineModel = axisModel.getModel('splitLine');
+            var lineStyleModel = splitLineModel.getModel('lineStyle');
+            var lineWidth = lineStyleModel.get('width');
+            var lineColors = lineStyleModel.get('color');
+            var lineType = lineStyleModel.get('type');
+
+            lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+
+            var gridRect = gridModel.coordinateSystem.getRect();
+            var isHorizontal = axis.isHorizontal();
+
+            var splitLines = [];
+            var lineCount = 0;
+
+            var isOrdinalAxis = axis.scale.type === 'ordinal';
+            var ticksCoords = isOrdinalAxis && axis.boundaryGap
+                ? axis.getBandsCoords(true) : axis.getTicksCoords();
+
+            var p1 = [];
+            var p2 = [];
+            for (var i = 0; i < ticksCoords.length; i++) {
+                var tickCoord = ticksCoords[i];
+
+                if (isHorizontal) {
+                    p1[0] = tickCoord;
+                    p1[1] = gridRect.y;
+                    p2[0] = tickCoord;
+                    p2[1] = gridRect.y + gridRect.height;
+                }
+                else {
+                    p1[0] = gridRect.x;
+                    p1[1] = tickCoord;
+                    p2[0] = gridRect.x + gridRect.width;
+                    p2[1] = tickCoord;
+                }
+                api.subPixelOptimizeLine(p1, p2, lineWidth);
+
+                var colorIndex = (lineCount++) % lineColors.length;
+                splitLines[colorIndex] = splitLines[colorIndex] || [];
+                splitLines[colorIndex].push(new api.Line({
+                    shape: {
+                        x1: p1[0],
+                        y1: p1[1],
+                        x2: p2[0],
+                        y2: p2[1]
+                    }
+                }));
+            }
+
+            // 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: lineType,
+                        lineWidth: lineWidth
+                    },
+                    silent: true,
+                    z: axisModel.get('z')
+                }));
+            }
+        },
+
+        /**
+         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+         * @param {module:echarts/coord/cartesian/GridModel} gridModel
+         * @param {module:echarts/ExtensionAPI} api
+         * @param {Array.<boolean>} showList
+         * @private
+         */
+        _renderSplitArea: function (axisModel, gridModel, api, showList) {
+            var axis = axisModel.axis;
+
+            var splitAreaModel = axisModel.getModel('splitArea');
+            var areaColors = splitAreaModel.get('areaStyle.color');
+
+            var gridRect = gridModel.coordinateSystem.getRect();
+            var isOrdinalAxis = axis.scale.type === 'ordinal';
+            var ticksCoords = isOrdinalAxis && axis.boundaryGap
+                ? axis.getBandsCoords(true) : axis.getTicksCoords();
+
+            var prevX;
+            var prevY;
+
+            var splitAreaRects = [];
+            var count = 0;
+
+            areaColors = areaColors instanceof Array ? areaColors : [areaColors];
+
+            for (var i = 1; i < ticksCoords.length; i++) {
+                var tickCoord = ticksCoords[i];
+
+                var x;
+                var y;
+                var width;
+                var height;
+                if (axis.isHorizontal()) {
+                    x = prevX;
+                    y = gridRect.y;
+                    width = tickCoord - x;
+                    height = gridRect.height;
+                }
+                else {
+                    x = gridRect.x;
+                    y = prevY;
+                    width = gridRect.width;
+                    height = tickCoord - y;
+                }
+
+                var colorIndex = (count++) % areaColors.length;
+                splitAreaRects[colorIndex] = splitAreaRects[colorIndex] || [];
+                splitAreaRects[colorIndex].push(new api.Rect({
+                    shape: {
+                        x: x,
+                        y: y,
+                        width: width,
+                        height: height
+                    }
+                }));
+
+                prevX = x;
+                prevY = y;
+            }
+
+            // Simple optimization
+            // Batching the rects if color are the same
+            for (var i = 0; i < splitAreaRects.length; i++) {
+                this.group.add(api.mergePath(splitAreaRects[i], {
+                    style: {
+                        fill: areaColors[i % areaColors.length]
+                    },
+                    silent: true,
+                    z: axisModel.get('z')
+                }));
+            }
         }
     });
 

src/component/grid.js

@@ -17,7 +17,8 @@ define(function(require) {
                         stroke: gridModel.get('borderColor'),
                         lineWidth: gridModel.get('borderWidth'),
                         fill: gridModel.get('backgroundColor')
-                    }
+                    },
+                    silent: true
                 }));
             }
         }

src/coord/cartesian/Axis.js

@@ -57,21 +57,23 @@ define(function (require) {
         /**
          * Map a data to coord. Data is the rank if it has a ordinal scale
          * @param {number} data
+         * @param  {boolean} clamp
          * @return {number}
          */
-        dataToCoord: function (data) {
+        dataToCoord: function (data, clamp) {
             data = this.scale.normalize(data);
 
-            return linearMap(data, [0, 1], this._coordExtent);
+            return linearMap(data, [0, 1], this._coordExtent, clamp);
         },
 
         /**
          * Map a coord to data. Data is the rank if it has a ordinal scale
          * @param {number} coord
+         * @param  {boolean} clamp
          * @return {number}
          */
-        coordToData: function (coord) {
-            var t = linearMap(coord, this._coordExtent, [0, 1]);
+        coordToData: function (coord, clamp) {
+            var t = linearMap(coord, this._coordExtent, [0, 1], clamp);
 
             return this.scale.scale(t);
         },

src/coord/cartesian/Grid.js

@@ -62,6 +62,7 @@ define(function(require, factory) {
             var gridY2 = parsePercent(gridModel.get('y2'), viewportHeight);
             var gridWidth = parsePercent(gridModel.get('width'), viewportWidth);
             var gridHeight = parsePercent(gridModel.get('height'), viewportHeight);
+
             if (isNaN(gridWidth)) {
                 gridWidth = viewportWidth - gridX2 - gridX;
             }
@@ -123,7 +124,7 @@ define(function(require, factory) {
             zrUtil.each(this._axesList, function (axis) {
                 var otherAxis = axis.otherAxis;
                 if (axis.onZero && otherAxis.type !== 'category') {
-                    axis.otherCoord = otherAxis.dataToCoord(0);
+                    axis.otherCoord = otherAxis.dataToCoord(0, true);
                 }
             });
         },
@@ -235,7 +236,9 @@ define(function(require, factory) {
                         axisData = axisDataMap[cartesian.name] = {
                             x: [],
                             y: [],
-                            cartesian: cartesian
+                            cartesian: cartesian,
+                            xModel: ecModel.getComponent('xAxis', xAxisIndex),
+                            yModel: ecModel.getComponent('yAxis', yAxisIndex)
                         };
                     }
 
@@ -264,9 +267,15 @@ define(function(require, factory) {
                 var xAxis = cartesian.getAxis('x');
                 var yAxis = cartesian.getAxis('y');
                 if (axisData.x.length) {
+                    if (axisData.xModel.get('scale')) {
+                        axisData.x.push(0);
+                    }
                     xAxis.scale.setExtentFromData(axisData.x);
                 }
                 if (axisData.y.length) {
+                    if (axisData.yModel.get('scale')) {
+                        axisData.y.push(0);
+                    }
                     yAxis.scale.setExtentFromData(axisData.y);
                 }
             });

src/echarts.js

@@ -7,7 +7,7 @@
 define(function (require) {
 
     var GlobalModel = require('./model/Global');
-    var ExtensionAPI = require('./api/ExtensionAPI');
+    var ExtensionAPI = require('./ExtensionAPI');
     var CoordinateSystemManager = require('./CoordinateSystem');
 
     var ComponentModel = require('./model/Component');
@@ -70,7 +70,7 @@ define(function (require) {
         this._componentsMap = {};
 
         /**
-         * @type {module:echarts/api/ExtensionAPI}
+         * @type {module:echarts/ExtensionAPI}
          * @private
          */
         this._extensionAPI = new ExtensionAPI(this);

src/model/Model.js

@@ -36,8 +36,6 @@ define(function (require) {
 
         constructor: Model,
 
-        _prefix: '',
-
         /**
          * visual properties after visual coding
          * @type {Object}
@@ -58,24 +56,19 @@ define(function (require) {
             zrUtil.merge(this.option, option);
         },
 
-        /**
-         * Set getter path prefix
-         * @param {string} prefix
-         */
-        withPrefix: function (prefix) {
-            this._prefix = prefix || '';
-            return this;
-        },
-
         /**
          * @param {string} path
          * @return {*}
          */
-        get: function (path) {
+        get: function (path, parentModel) {
             if (typeof path == 'string') {
-                path = this._prefix + path;
+                // path = this._prefix + path;
                 path = path.split('.');
             }
+            if (this.option == null) {
+                return;
+            }
+
             var obj = this.option;
             for (var i = 0; i < path.length; i++) {
                 obj = obj[path[i]];
@@ -89,6 +82,16 @@ define(function (require) {
             return obj;
         },
 
+        /**
+         * @param {string} path
+         * @return {module:echarts/model/Model}
+         */
+        getModel: function (path) {
+            var obj = this.get(path);
+            var parentModel = this.parentModel;
+            return new Model(obj, parentModel && parentModel.getModel(path));
+        },
+
         /**
          * Get visual property.
          */

src/api/graphic.js → src/util/graphic.js

@@ -37,6 +37,8 @@ define(function(require) {
             return path;
         },
 
+        mergePath: pathTool.mergePath,
+
         /**
          * Resize a path to fit the rect
          */
@@ -57,14 +59,14 @@ define(function(require) {
             path.applyTransform(m);
         },
 
-        subPixelOptimizeLine: function (p0, p1, lineWidth) {
+        subPixelOptimizeLine: function (p1, p2, lineWidth) {
             var round = Math.round;
             // Sub pixel optimize
             var offset = lineWidth % 2 / 2;
-            var x1 = round(p0[0]);
-            var y1 = round(p0[1]);
-            var x2 = round(p1[0]);
-            var y2 = round(p1[1]);
+            var x1 = round(p1[0]);
+            var y1 = round(p1[1]);
+            var x2 = round(p2[0]);
+            var y2 = round(p2[1]);
 
             if (x1 === x2) {
                 x1 += offset;

src/util/number.js

@@ -88,12 +88,37 @@ define(function (require) {
         return val;
     }
 
+    /**
+     * 每三位默认加,格式化
+     * @type {string|number} x
+     */
+    function addCommas(x) {
+        if (isNaN(x)) {
+            return '-';
+        }
+        x = (x + '').split('.');
+        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
+               + (x.length > 1 ? ('.' + x[1]) : '');
+    }
+
+    /**
+     * Fix rounding error of float numbers
+     */
+    function round(x) {
+        // PENDING
+        return +(+x).toFixed(10);
+    }
+
     return {
 
         linearMap: linearMap,
 
         parsePercent: parsePercent,
 
-        normalizeCssArray: normalizeCssArray
+        normalizeCssArray: normalizeCssArray,
+
+        addCommas: addCommas,
+
+        round: round
     };
 });
\ No newline at end of file

test/bar.html

@@ -31,9 +31,9 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 20; i++) {
-                    xAxisData.push(Math.random());
-                    data1.push(Math.random());
+                for (var i = 0; i < 100; i++) {
+                    xAxisData.push('类目' + i);
+                    data1.push(Math.random() * 5);
                     data2.push(Math.random());
                     data3.push(Math.random());
                 }