echarts 3.5.1 → 3.6.0

package/lib/chart/custom.js

@@ -0,0 +1,442 @@
+
+
+    var echarts = require('../echarts');
+    var zrUtil = require('zrender/lib/core/util');
+    var graphicUtil = require('../util/graphic');
+    var labelHelper = require('./helper/labelHelper');
+    var createListFromArray = require('./helper/createListFromArray');
+    var barGrid = require('../layout/barGrid');
+
+    var ITEM_STYLE_NORMAL_PATH = ['itemStyle', 'normal'];
+    var ITEM_STYLE_EMPHASIS_PATH = ['itemStyle', 'emphasis'];
+    var LABEL_NORMAL = ['label', 'normal'];
+    var LABEL_EMPHASIS = ['label', 'emphasis'];
+
+    /**
+     * To reduce total package size of each coordinate systems, the modules `prepareCustom`
+     * of each coordinate systems are not required by each coordinate systems directly, but
+     * required by the module `custom`.
+     *
+     * prepareInfoForCustomSeries {Function}: optional
+     *     @return {Object} {coordSys: {...}, api: {
+     *         coord: function (data, clamp) {}, // return point in global.
+     *         size: function (dataSize, dataItem) {} // return size of each axis in coordSys.
+     *     }}
+     */
+    var prepareCustoms = {
+        cartesian2d: require('../coord/cartesian/prepareCustom'),
+        geo: require('../coord/geo/prepareCustom'),
+        singleAxis: require('../coord/single/prepareCustom'),
+        polar: require('../coord/polar/prepareCustom'),
+        calendar: require('../coord/calendar/prepareCustom')
+    };
+
+    // ------
+    // Model
+    // ------
+
+    echarts.extendSeriesModel({
+
+        type: 'series.custom',
+
+        dependencies: ['grid', 'polar', 'geo', 'singleAxis', 'calendar'],
+
+        defaultOption: {
+            coordinateSystem: 'cartesian2d',
+            zlevel: 0,
+            z: 2,
+            legendHoverLink: true
+
+            // Cartesian coordinate system
+            // xAxisIndex: 0,
+            // yAxisIndex: 0,
+
+            // Polar coordinate system
+            // polarIndex: 0,
+
+            // Geo coordinate system
+            // geoIndex: 0,
+
+            // label: {}
+            // itemStyle: {}
+        },
+
+        getInitialData: function (option, ecModel) {
+            return createListFromArray(option.data, this, ecModel);
+        }
+    });
+
+    // -----
+    // View
+    // -----
+
+    echarts.extendChartView({
+
+        type: 'custom',
+
+        /**
+         * @private
+         * @type {module:echarts/data/List}
+         */
+        _data: null,
+
+        /**
+         * @override
+         */
+        render: function (customSeries, ecModel, api) {
+            var oldData = this._data;
+            var data = customSeries.getData();
+            var group = this.group;
+            var renderItem = makeRenderItem(customSeries, data, ecModel, api);
+
+            data.diff(oldData)
+                .add(function (newIdx) {
+                    data.hasValue(newIdx) && createOrUpdate(
+                        null, newIdx, renderItem(newIdx), customSeries, group, data
+                    );
+                })
+                .update(function (newIdx, oldIdx) {
+                    var el = oldData.getItemGraphicEl(oldIdx);
+                    data.hasValue(newIdx)
+                        ? createOrUpdate(
+                            el, newIdx, renderItem(newIdx), customSeries, group, data
+                        )
+                        : (el && group.remove(el));
+                })
+                .remove(function (oldIdx) {
+                    var el = oldData.getItemGraphicEl(oldIdx);
+                    el && group.remove(el);
+                })
+                .execute();
+
+            this._data = data;
+        }
+    });
+
+
+    function createEl(elOption) {
+        var graphicType = elOption.type;
+        var el;
+
+        if (graphicType === 'path') {
+            var shape = elOption.shape;
+            el = graphicUtil.makePath(
+                shape.pathData,
+                null,
+                {
+                    x: shape.x || 0,
+                    y: shape.y || 0,
+                    width: shape.width || 0,
+                    height: shape.height || 0
+                },
+                'center'
+            );
+            el.__customPathData = elOption.pathData;
+        }
+        else if (graphicType === 'image') {
+            el = new graphicUtil.Image({
+            });
+            el.__customImagePath = elOption.style.image;
+        }
+        else if (graphicType === 'text') {
+            el = new graphicUtil.Text({
+            });
+            el.__customText = elOption.style.text;
+        }
+        else {
+            var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+
+            if (__DEV__) {
+                zrUtil.assert(Clz, 'graphic type "' + graphicType + '" can not be found.');
+            }
+
+            el = new Clz();
+        }
+
+        el.__customGraphicType = graphicType;
+
+        return el;
+    }
+
+    function updateEl(el, dataIndex, elOption, animatableModel, data, isInit) {
+        var targetProps = {};
+        var elOptionStyle = elOption.style || {};
+
+        elOption.shape && (targetProps.shape = zrUtil.clone(elOption.shape));
+        elOption.position && (targetProps.position = elOption.position.slice());
+        elOption.scale && (targetProps.scale = elOption.scale.slice());
+        elOption.origin && (targetProps.origin = elOption.origin.slice());
+        elOption.rotation && (targetProps.rotation = elOption.rotation);
+
+        if (el.type === 'image' && elOption.style) {
+            var targetStyle = targetProps.style = {};
+            zrUtil.each(['x', 'y', 'width', 'height'], function (prop) {
+                prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+            });
+        }
+
+        if (el.type === 'text' && elOption.style) {
+            var targetStyle = targetProps.style = {};
+            zrUtil.each(['x', 'y'], function (prop) {
+                prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+            });
+        }
+
+        if (el.type !== 'group') {
+            el.useStyle(elOptionStyle);
+
+            // Init animation.
+            if (isInit) {
+                el.style.opacity = 0;
+                var targetOpacity = elOptionStyle.opacity;
+                targetOpacity == null && (targetOpacity = 1);
+                graphicUtil.initProps(el, {style: {opacity: targetOpacity}}, animatableModel, dataIndex);
+            }
+        }
+
+        if (isInit) {
+            el.attr(targetProps);
+        }
+        else {
+            graphicUtil.updateProps(el, targetProps, animatableModel, dataIndex);
+        }
+
+        // z2 must not be null/undefined, otherwise sort error may occur.
+        el.attr({z2: elOption.z2 || 0, silent: elOption.silent});
+
+        el.styleEmphasis !== false && graphicUtil.setHoverStyle(el, el.styleEmphasis);
+    }
+
+    function prepareStyleTransition(prop, targetStyle, elOptionStyle, oldElStyle, isInit) {
+        if (elOptionStyle[prop] != null && !isInit) {
+            targetStyle[prop] = elOptionStyle[prop];
+            elOptionStyle[prop] = oldElStyle[prop];
+        }
+    }
+
+    function makeRenderItem(customSeries, data, ecModel, api) {
+        var renderItem = customSeries.get('renderItem');
+        var coordSys = customSeries.coordinateSystem;
+
+        if (__DEV__) {
+            zrUtil.assert(renderItem, 'series.render is required.');
+            zrUtil.assert(prepareCustoms[coordSys.type], 'This coordSys does not support custom series.');
+        }
+
+        var prepareResult = prepareCustoms[coordSys.type](coordSys);
+
+        var userAPI = zrUtil.defaults({
+            getWidth: api.getWidth,
+            getHeight: api.getHeight,
+            getZr: api.getZr,
+            getDevicePixelRatio: api.getDevicePixelRatio,
+            value: value,
+            style: style,
+            styleEmphasis: styleEmphasis,
+            visual: visual,
+            barLayout: barLayout,
+            currentSeriesIndices: currentSeriesIndices,
+            font: font
+        }, prepareResult.api);
+
+        var userParams = {
+            context: {},
+            seriesId: customSeries.id,
+            seriesName: customSeries.name,
+            seriesIndex: customSeries.seriesIndex,
+            coordSys: prepareResult.coordSys,
+            dataInsideLength: data.count(),
+            encode: wrapEncodeDef(customSeries.getData())
+        };
+
+        // Do not support call `api` asynchronously without dataIndexInside input.
+        var currDataIndexInside;
+        var currDirty = true;
+        var currItemModel;
+        var currLabelNormalModel;
+        var currLabelEmphasisModel;
+        var currLabelValueDim;
+        var currVisualColor;
+
+        return function (dataIndexInside) {
+            currDataIndexInside = dataIndexInside;
+            currDirty = true;
+            return renderItem && renderItem(
+                zrUtil.defaults({
+                    dataIndexInside: dataIndexInside,
+                    dataIndex: data.getRawIndex(dataIndexInside)
+                }, userParams),
+                userAPI
+            ) || {};
+        };
+
+        // Do not update cache until api called.
+        function updateCache(dataIndexInside) {
+            dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+            if (currDirty) {
+                currItemModel = data.getItemModel(dataIndexInside);
+                currLabelNormalModel = currItemModel.getModel(LABEL_NORMAL);
+                currLabelEmphasisModel = currItemModel.getModel(LABEL_EMPHASIS);
+                currLabelValueDim = labelHelper.findLabelValueDim(data);
+                currVisualColor = data.getItemVisual(dataIndexInside, 'color');
+
+                currDirty = false;
+            }
+        }
+
+        /**
+         * @public
+         * @param {nubmer|string} dim
+         * @param {number} [dataIndexInside=currDataIndexInside]
+         * @return {number|string} value
+         */
+        function value(dim, dataIndexInside) {
+            dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+            return data.get(data.getDimension(dim || 0), dataIndexInside);
+        }
+
+        /**
+         * By default, `visual` is applied to style (to support visualMap).
+         * `visual.color` is applied at `fill`. If user want apply visual.color on `stroke`,
+         * it can be implemented as:
+         * `api.style({stroke: api.visual('color'), fill: null})`;
+         * @public
+         * @param {Object} [extra]
+         * @param {number} [dataIndexInside=currDataIndexInside]
+         */
+        function style(extra, dataIndexInside) {
+            dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+            updateCache(dataIndexInside);
+
+            var itemStyle = currItemModel.getModel(ITEM_STYLE_NORMAL_PATH).getItemStyle();
+
+            currVisualColor != null && (itemStyle.fill = currVisualColor);
+            var opacity = data.getItemVisual(dataIndexInside, 'opacity');
+            opacity != null && (itemStyle.opacity = opacity);
+
+            labelHelper.setTextToStyle(
+                data, dataIndexInside, currLabelValueDim, itemStyle,
+                customSeries, currLabelNormalModel, currVisualColor
+            );
+
+            extra && zrUtil.extend(itemStyle, extra);
+            return itemStyle;
+        }
+
+        /**
+         * @public
+         * @param {Object} [extra]
+         * @param {number} [dataIndexInside=currDataIndexInside]
+         */
+        function styleEmphasis(extra, dataIndexInside) {
+            dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+            updateCache(dataIndexInside);
+
+            var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle();
+
+            labelHelper.setTextToStyle(
+                data, dataIndexInside, currLabelValueDim, itemStyle,
+                customSeries, currLabelEmphasisModel, currVisualColor
+            );
+
+            extra && zrUtil.extend(itemStyle, extra);
+            return itemStyle;
+        }
+
+        /**
+         * @public
+         * @param {string} visualType
+         * @param {number} [dataIndexInside=currDataIndexInside]
+         */
+        function visual(visualType, dataIndexInside) {
+            dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+            return data.getItemVisual(dataIndexInside, visualType);
+        }
+
+        /**
+         * @public
+         * @param {number} opt.count Positive interger.
+         * @param {number} [opt.barWidth]
+         * @param {number} [opt.barMaxWidth]
+         * @param {number} [opt.barGap]
+         * @param {number} [opt.barCategoryGap]
+         * @return {Object} {width, offset, offsetCenter} is not support, return undefined.
+         */
+        function barLayout(opt) {
+            if (coordSys.getBaseAxis) {
+                var baseAxis = coordSys.getBaseAxis();
+                return barGrid.getLayoutOnAxis(zrUtil.defaults({axis: baseAxis}, opt), api);
+            }
+        }
+
+        /**
+         * @public
+         * @return {Array.<number>}
+         */
+        function currentSeriesIndices() {
+            return ecModel.getCurrentSeriesIndices();
+        }
+
+        /**
+         * @public
+         * @param {Object} opt
+         * @param {string} [opt.fontStyle]
+         * @param {number} [opt.fontWeight]
+         * @param {number} [opt.fontSize]
+         * @param {string} [opt.fontFamily]
+         * @return {string} font string
+         */
+        function font(opt) {
+            return graphicUtil.getFont(opt, ecModel);
+        }
+    }
+
+    function wrapEncodeDef(data) {
+        var encodeDef = {};
+        zrUtil.each(data.dimensions, function (dimName, dataDimIndex) {
+            var dimInfo = data.getDimensionInfo(dimName);
+            if (!dimInfo.isExtraCoord) {
+                var coordDim = dimInfo.coordDim;
+                var dataDims = encodeDef[coordDim] = encodeDef[coordDim] || [];
+                dataDims[dimInfo.coordDimIndex] = dataDimIndex;
+            }
+        });
+        return encodeDef;
+    }
+
+    function createOrUpdate(el, dataIndex, elOption, animatableModel, group, data) {
+        el = doCreateOrUpdate(el, dataIndex, elOption, animatableModel, group, data);
+        el && data.setItemGraphicEl(dataIndex, el);
+    }
+
+    function doCreateOrUpdate(el, dataIndex, elOption, animatableModel, group, data) {
+        var elOptionType = elOption.type;
+        if (el
+            && elOptionType !== el.__customGraphicType
+            && (elOptionType !== 'path' || elOption.pathData !== el.__customPathData)
+            && (elOptionType !== 'image' || elOption.style.image !== el.__customImagePath)
+            && (elOptionType !== 'text' || elOption.style.text !== el.__customText)
+        ) {
+            group.remove(el);
+            el = null;
+        }
+
+        // `elOption.type` is undefined when `renderItem` returns nothing.
+        if (elOptionType == null) {
+            return;
+        }
+
+        var isInit = !el;
+        !el && (el = createEl(elOption));
+        updateEl(el, dataIndex, elOption, animatableModel, data, isInit);
+
+        elOptionType === 'group' && zrUtil.each(elOption.children, function (childOption, index) {
+            doCreateOrUpdate(el.childAt(index), dataIndex, childOption, animatableModel, el, data);
+        });
+
+        group.add(el);
+
+        return el;
+    }
+
+

package/lib/chart/funnel/funnelLayout.js

@@ -23,9 +23,15 @@
         for (var i = 0, len = data.count(); i < len; i++) {
             indices[i] = i;
         }
-        indices.sort(function (a, b) {
-            return isAscending ? valueArr[a] - valueArr[b] : valueArr[b] - valueArr[a];
-        });
+
+        // Add custom sortable function & none sortable opetion by "options.sort"
+        if (typeof sort === 'function') {
+            indices.sort(sort);
+        } else if (sort !== 'none') {
+            indices.sort(function (a, b) {
+                return isAscending ? valueArr[a] - valueArr[b] : valueArr[b] - valueArr[a];
+            });
+        }
         return indices;
     }
 
@@ -167,3 +173,4 @@
             labelLayout(data);
         });
     };
+

package/lib/chart/gauge/GaugeView.js

@@ -291,7 +291,7 @@
                         }
                     });
 
-                    graphic.updateProps(pointer, {
+                    graphic.initProps(pointer, {
                         shape: {
                             angle: numberUtil.linearMap(data.get('value', idx), valueExtent, angleExtent, true)
                         }

package/lib/chart/graph/GraphView.js

@@ -4,6 +4,8 @@
     var SymbolDraw = require('../helper/SymbolDraw');
     var LineDraw = require('../helper/LineDraw');
     var RoamController = require('../../component/helper/RoamController');
+    var roamHelper = require('../../component/helper/roamHelper');
+    var cursorHelper = require('../../component/helper/cursorHelper');
 
     var graphic = require('../../util/graphic');
     var adjustEdge = require('./adjustEdge');
@@ -25,14 +27,14 @@
             var lineDraw = new LineDraw();
             var group = this.group;
 
-            var controller = new RoamController(api.getZr(), group);
+            this._controller = new RoamController(api.getZr());
+            this._controllerHost = {target: group};
 
             group.add(symbolDraw.group);
             group.add(lineDraw.group);
 
             this._symbolDraw = symbolDraw;
             this._lineDraw = lineDraw;
-            this._controller = controller;
 
             this._firstRender = true;
         },
@@ -71,7 +73,7 @@
 
             this._updateNodeAndLinkScale();
 
-            this._updateController(seriesModel, api);
+            this._updateController(seriesModel, ecModel, api);
 
             clearTimeout(this._layoutTimeout);
             var forceLayout = seriesModel.forceLayout;
@@ -157,6 +159,7 @@
 
         dispose: function () {
             this._controller && this._controller.dispose();
+            this._controllerHost = {};
         },
 
         focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
@@ -254,14 +257,16 @@
             })();
         },
 
-        _updateController: function (seriesModel, api) {
+        _updateController: function (seriesModel, ecModel, api) {
             var controller = this._controller;
+            var controllerHost = this._controllerHost;
             var group = this.group;
 
-            controller.setContainsPoint(function (x, y) {
+            controller.setPointerChecker(function (e, x, y) {
                 var rect = group.getBoundingRect();
                 rect.applyTransform(group.transform);
-                return rect.contain(x, y);
+                return rect.contain(x, y)
+                    && !cursorHelper.onIrrelevantElement(e, api, seriesModel);
             });
 
             if (seriesModel.coordinateSystem.type !== 'view') {
@@ -269,14 +274,14 @@
                 return;
             }
             controller.enable(seriesModel.get('roam'));
-            controller.zoomLimit = seriesModel.get('scaleLimit');
-            // Update zoom from model
-            controller.zoom = seriesModel.coordinateSystem.getZoom();
+            controllerHost.zoomLimit = seriesModel.get('scaleLimit');
+            controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
 
             controller
                 .off('pan')
                 .off('zoom')
                 .on('pan', function (dx, dy) {
+                    roamHelper.updateViewOnPan(controllerHost, dx, dy);
                     api.dispatchAction({
                         seriesId: seriesModel.id,
                         type: 'graphRoam',
@@ -285,6 +290,7 @@
                     });
                 })
                 .on('zoom', function (zoom, mouseX, mouseY) {
+                    roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
                     api.dispatchAction({
                         seriesId: seriesModel.id,
                         type: 'graphRoam',

package/lib/chart/graph/categoryVisual.js

@@ -11,7 +11,8 @@
 
             categoriesData.each(function (idx) {
                 var name = categoriesData.getName(idx);
-                categoryNameIdxMap[name] = idx;
+                // Add prefix to avoid conflict with Object.prototype.
+                categoryNameIdxMap['ec-' + name] = idx;
 
                 var itemModel = categoriesData.getItemModel(idx);
                 var color = itemModel.get('itemStyle.normal.color')
@@ -26,7 +27,7 @@
                     var category = model.getShallow('category');
                     if (category != null) {
                         if (typeof category === 'string') {
-                            category = categoryNameIdxMap[category];
+                            category = categoryNameIdxMap['ec-' + category];
                         }
                         if (!data.getItemVisual(idx, 'color', true)) {
                             data.setItemVisual(

package/lib/chart/heatmap/HeatmapLayer.js

@@ -131,7 +131,7 @@
         _getGradient: function (data, colorFunc, state) {
             var gradientPixels = this._gradientPixels;
             var pixelsSingleState = gradientPixels[state] || (gradientPixels[state] = new Uint8ClampedArray(256 * 4));
-            var color = [];
+            var color = [0, 0, 0, 0];
             var off = 0;
             for (var i = 0; i < 256; i++) {
                 colorFunc[state](i / 255, true, color);