echarts 4.5.0 → 4.9.0

package/lib/echarts.js

@@ -101,9 +101,9 @@ var each = zrUtil.each;
 var isFunction = zrUtil.isFunction;
 var isObject = zrUtil.isObject;
 var parseClassType = ComponentModel.parseClassType;
-var version = '4.5.0';
+var version = '4.9.0';
 var dependencies = {
-  zrender: '4.1.2'
+  zrender: '4.3.2'
 };
 var TEST_FRAME_REMAIN_TIME = 1;
 var PRIORITY_PROCESSOR_FILTER = 1000;
@@ -498,7 +498,7 @@ echartsProto.getRenderedCanvas = function (opts) {
  */
 
 
-echartsProto.getSvgDataUrl = function () {
+echartsProto.getSvgDataURL = function () {
   if (!env.svgSupported) {
     return;
   }
@@ -509,7 +509,7 @@ echartsProto.getSvgDataUrl = function () {
   zrUtil.each(list, function (el) {
     el.stopAnimation(true);
   });
-  return zr.painter.pathToDataUrl();
+  return zr.painter.toDataURL();
 };
 /**
  * @return {string}
@@ -544,7 +544,7 @@ echartsProto.getDataURL = function (opts) {
       }
     });
   });
-  var url = this._zr.painter.getType() === 'svg' ? this.getSvgDataUrl() : this.getRenderedCanvas(opts).toDataURL('image/' + (opts && opts.type || 'png'));
+  var url = this._zr.painter.getType() === 'svg' ? this.getSvgDataURL() : this.getRenderedCanvas(opts).toDataURL('image/' + (opts && opts.type || 'png'));
   each(excludesComponentViews, function (view) {
     view.group.ignore = false;
   });
@@ -569,6 +569,7 @@ echartsProto.getConnectedDataURL = function (opts) {
     return;
   }
 
+  var isSvg = opts.type === 'svg';
   var groupId = this.group;
   var mathMin = Math.min;
   var mathMax = Math.max;
@@ -583,7 +584,7 @@ echartsProto.getConnectedDataURL = function (opts) {
     var dpr = opts && opts.pixelRatio || 1;
     zrUtil.each(instances, function (chart, id) {
       if (chart.group === groupId) {
-        var canvas = chart.getRenderedCanvas(zrUtil.clone(opts));
+        var canvas = isSvg ? chart.getZr().painter.getSvgDom().innerHTML : chart.getRenderedCanvas(zrUtil.clone(opts));
         var boundingRect = chart.getDom().getBoundingClientRect();
         left = mathMin(boundingRect.left, left);
         top = mathMin(boundingRect.top, top);
@@ -603,36 +604,58 @@ echartsProto.getConnectedDataURL = function (opts) {
     var width = right - left;
     var height = bottom - top;
     var targetCanvas = zrUtil.createCanvas();
-    targetCanvas.width = width;
-    targetCanvas.height = height;
-    var zr = zrender.init(targetCanvas); // Background between the charts
-
-    if (opts.connectedBackgroundColor) {
-      zr.add(new graphic.Rect({
-        shape: {
-          x: 0,
-          y: 0,
-          width: width,
-          height: height
-        },
-        style: {
-          fill: opts.connectedBackgroundColor
-        }
-      }));
-    }
+    var zr = zrender.init(targetCanvas, {
+      renderer: isSvg ? 'svg' : 'canvas'
+    });
+    zr.resize({
+      width: width,
+      height: height
+    });
 
-    each(canvasList, function (item) {
-      var img = new graphic.Image({
-        style: {
-          x: item.left * dpr - left,
-          y: item.top * dpr - top,
-          image: item.dom
-        }
+    if (isSvg) {
+      var content = '';
+      each(canvasList, function (item) {
+        var x = item.left - left;
+        var y = item.top - top;
+        content += '<g transform="translate(' + x + ',' + y + ')">' + item.dom + '</g>';
       });
-      zr.add(img);
-    });
-    zr.refreshImmediately();
-    return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png'));
+      zr.painter.getSvgRoot().innerHTML = content;
+
+      if (opts.connectedBackgroundColor) {
+        zr.painter.setBackgroundColor(opts.connectedBackgroundColor);
+      }
+
+      zr.refreshImmediately();
+      return zr.painter.toDataURL();
+    } else {
+      // Background between the charts
+      if (opts.connectedBackgroundColor) {
+        zr.add(new graphic.Rect({
+          shape: {
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+          },
+          style: {
+            fill: opts.connectedBackgroundColor
+          }
+        }));
+      }
+
+      each(canvasList, function (item) {
+        var img = new graphic.Image({
+          style: {
+            x: item.left * dpr - left,
+            y: item.top * dpr - top,
+            image: item.dom
+          }
+        });
+        zr.add(img);
+      });
+      zr.refreshImmediately();
+      return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png'));
+    }
   } else {
     return this.getDataURL(opts);
   }

package/lib/langEN.js

@@ -84,6 +84,32 @@ var _default = {
       lang: ['Right Click to Save Image']
     }
   },
+  series: {
+    typeNames: {
+      pie: 'Pie chart',
+      bar: 'Bar chart',
+      line: 'Line chart',
+      scatter: 'Scatter plot',
+      effectScatter: 'Ripple scatter plot',
+      radar: 'Radar chart',
+      tree: 'Tree',
+      treemap: 'Treemap',
+      boxplot: 'Boxplot',
+      candlestick: 'Candlestick',
+      k: 'K line chart',
+      heatmap: 'Heat map',
+      map: 'Map',
+      parallel: 'Parallel coordinate map',
+      lines: 'Line graph',
+      graph: 'Relationship graph',
+      sankey: 'Sankey diagram',
+      funnel: 'Funnel chart',
+      gauge: 'Guage',
+      pictorialBar: 'Pictorial bar',
+      themeRiver: 'Theme River Map',
+      sunburst: 'Sunburst'
+    }
+  },
   aria: {
     general: {
       withTitle: 'This is a chart about "{title}"',

package/lib/layout/barGrid.js

@@ -263,7 +263,6 @@ function doCalBarWidthAndOffset(seriesInfoList) {
     // will be shared by series. Consider that they have default values,
     // only the attributes set on the last series will work.
     // Do not change this fact unless there will be a break change.
-    // TODO
 
     var barWidth = seriesInfo.barWidth;
 
@@ -317,7 +316,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
 
         if (finalWidth !== autoWidth) {
           column.width = finalWidth;
-          remainedWidth -= finalWidth;
+          remainedWidth -= finalWidth + barGapPercent * finalWidth;
           autoWidthCount--;
         }
       } else {
@@ -336,7 +335,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
         }
 
         column.width = finalWidth;
-        remainedWidth -= finalWidth;
+        remainedWidth -= finalWidth + barGapPercent * finalWidth;
         autoWidthCount--;
       }
     }); // Recalculate width again
@@ -428,12 +427,7 @@ function layout(seriesType, ecModel) {
 
     for (var idx = 0, len = data.count(); idx < len; idx++) {
       var value = data.get(valueDim, idx);
-      var baseValue = data.get(baseDim, idx); // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
-
-      if (isNaN(value) || isNaN(baseValue)) {
-        continue;
-      }
-
+      var baseValue = data.get(baseDim, idx);
       var sign = value >= 0 ? 'p' : 'n';
       var baseCoord = valueAxisStart; // Because of the barMinHeight, we can not use the value in
       // stackResultDimension directly.
@@ -467,9 +461,12 @@ function layout(seriesType, ecModel) {
 
         if (Math.abs(width) < barMinHeight) {
           width = (width < 0 ? -1 : 1) * barMinHeight;
-        }
+        } // Ignore stack from NaN value
+
 
-        stacked && (lastStackCoords[stackId][baseValue][sign] += width);
+        if (!isNaN(width)) {
+          stacked && (lastStackCoords[stackId][baseValue][sign] += width);
+        }
       } else {
         var coord = cartesian.dataToPoint([baseValue, value]);
         x = coord[0] + columnOffset;
@@ -480,9 +477,12 @@ function layout(seriesType, ecModel) {
         if (Math.abs(height) < barMinHeight) {
           // Include zero to has a positive bar
           height = (height <= 0 ? -1 : 1) * barMinHeight;
-        }
+        } // Ignore stack from NaN value
 
-        stacked && (lastStackCoords[stackId][baseValue][sign] += height);
+
+        if (!isNaN(height)) {
+          stacked && (lastStackCoords[stackId][baseValue][sign] += height);
+        }
       }
 
       data.setItemLayout(idx, {
@@ -506,6 +506,7 @@ var largeLayout = {
 
     var data = seriesModel.getData();
     var cartesian = seriesModel.coordinateSystem;
+    var coordLayout = cartesian.grid.getRect();
     var baseAxis = cartesian.getBaseAxis();
     var valueAxis = cartesian.getOtherAxis(baseAxis);
     var valueDim = data.mapDimension(valueAxis.dim);
@@ -526,6 +527,7 @@ var largeLayout = {
     function progress(params, data) {
       var count = params.count;
       var largePoints = new LargeArr(count * 2);
+      var largeBackgroundPoints = new LargeArr(count * 2);
       var largeDataIndices = new LargeArr(count);
       var dataIndex;
       var coord = [];
@@ -538,7 +540,9 @@ var largeLayout = {
         valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
         coord = cartesian.dataToPoint(valuePair, null, coord); // Data index might not be in order, depends on `progressiveChunkMode`.
 
+        largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
         largePoints[pointsOffset++] = coord[0];
+        largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
         largePoints[pointsOffset++] = coord[1];
         largeDataIndices[idxOffset++] = dataIndex;
       }
@@ -546,8 +550,10 @@ var largeLayout = {
       data.setLayout({
         largePoints: largePoints,
         largeDataIndices: largeDataIndices,
+        largeBackgroundPoints: largeBackgroundPoints,
         barWidth: barWidth,
         valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
+        backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
         valueAxisHorizontal: valueAxisHorizontal
       });
     }

package/lib/layout/barPolar.js

@@ -91,16 +91,11 @@ function barLayoutPolar(seriesType, ecModel, api) {
     /*, baseDim*/
     );
     var clampLayout = baseAxis.dim !== 'radius' || !seriesModel.get('roundCap', true);
-    var valueAxisStart = valueAxis.getExtent()[0];
+    var valueAxisStart = valueAxis.dim === 'radius' ? valueAxis.dataToRadius(0) : valueAxis.dataToAngle(0);
 
     for (var idx = 0, len = data.count(); idx < len; idx++) {
       var value = data.get(valueDim, idx);
       var baseValue = data.get(baseDim, idx);
-
-      if (isNaN(value)) {
-        continue;
-      }
-
       var sign = value >= 0 ? 'p' : 'n';
       var baseCoord = valueAxisStart; // Because of the barMinHeight, we can not use the value in
       // stackResultDimension directly.

package/lib/loading/default.js

@@ -22,6 +22,8 @@ var zrUtil = require("zrender/lib/core/util");
 
 var graphic = require("../util/graphic");
 
+var textContain = require("zrender/lib/contain/text");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -54,11 +56,16 @@ function _default(api, opts) {
   opts = opts || {};
   zrUtil.defaults(opts, {
     text: 'loading',
-    color: '#c23531',
     textColor: '#000',
+    fontSize: '12px',
     maskColor: 'rgba(255, 255, 255, 0.8)',
+    showSpinner: true,
+    color: '#c23531',
+    spinnerRadius: 10,
+    lineWidth: 5,
     zlevel: 0
   });
+  var group = new graphic.Group();
   var mask = new graphic.Rect({
     style: {
       fill: opts.maskColor
@@ -66,24 +73,13 @@ function _default(api, opts) {
     zlevel: opts.zlevel,
     z: 10000
   });
-  var arc = new graphic.Arc({
-    shape: {
-      startAngle: -PI / 2,
-      endAngle: -PI / 2 + 0.1,
-      r: 10
-    },
-    style: {
-      stroke: opts.color,
-      lineCap: 'round',
-      lineWidth: 5
-    },
-    zlevel: opts.zlevel,
-    z: 10001
-  });
+  group.add(mask);
+  var font = opts.fontSize + ' sans-serif';
   var labelRect = new graphic.Rect({
     style: {
       fill: 'none',
       text: opts.text,
+      font: font,
       textPosition: 'right',
       textDistance: 10,
       textFill: opts.textColor
@@ -91,25 +87,45 @@ function _default(api, opts) {
     zlevel: opts.zlevel,
     z: 10001
   });
-  arc.animateShape(true).when(1000, {
-    endAngle: PI * 3 / 2
-  }).start('circularInOut');
-  arc.animateShape(true).when(1000, {
-    startAngle: PI * 3 / 2
-  }).delay(300).start('circularInOut');
-  var group = new graphic.Group();
-  group.add(arc);
   group.add(labelRect);
-  group.add(mask); // Inject resize
+
+  if (opts.showSpinner) {
+    var arc = new graphic.Arc({
+      shape: {
+        startAngle: -PI / 2,
+        endAngle: -PI / 2 + 0.1,
+        r: opts.spinnerRadius
+      },
+      style: {
+        stroke: opts.color,
+        lineCap: 'round',
+        lineWidth: opts.lineWidth
+      },
+      zlevel: opts.zlevel,
+      z: 10001
+    });
+    arc.animateShape(true).when(1000, {
+      endAngle: PI * 3 / 2
+    }).start('circularInOut');
+    arc.animateShape(true).when(1000, {
+      startAngle: PI * 3 / 2
+    }).delay(300).start('circularInOut');
+    group.add(arc);
+  } // Inject resize
+
 
   group.resize = function () {
-    var cx = api.getWidth() / 2;
+    var textWidth = textContain.getWidth(opts.text, font);
+    var r = opts.showSpinner ? opts.spinnerRadius : 0; // cx = (containerWidth - arcDiameter - textDistance - textWidth) / 2
+    // textDistance needs to be calculated when both animation and text exist
+
+    var cx = (api.getWidth() - r * 2 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2 // only show the text
+    - (opts.showSpinner ? 0 : textWidth / 2);
     var cy = api.getHeight() / 2;
-    arc.setShape({
+    opts.showSpinner && arc.setShape({
       cx: cx,
       cy: cy
     });
-    var r = arc.shape.r;
     labelRect.setShape({
       x: cx - r,
       y: cy - r,

package/lib/model/Series.js

@@ -95,11 +95,11 @@ var SeriesModel = ComponentModel.extend({
   defaultOption: null,
 
   /**
-   * Data provided for legend
-   * @type {Function}
+   * legend visual provider to the legend component
+   * @type {Object}
    */
   // PENDING
-  legendDataProvider: null,
+  legendVisualProvider: null,
 
   /**
    * Access path of color for visual
@@ -569,7 +569,7 @@ function dataTaskReset(context) {
 
 function dataTaskProgress(param, context) {
   // Avoid repead cloneShallow when data just created in reset.
-  if (param.end > context.outputData.count()) {
+  if (context.outputData && param.end > context.outputData.count()) {
     context.model.getRawData().cloneShallow(context.outputData);
   }
 } // TODO refactor

package/lib/model/referHelper.js

@@ -56,7 +56,8 @@ var each = _util.each;
 // check: "modelHelper" of tooltip and "BrushTargetManager".
 
 /**
- * @return {Object} For example:
+ * @class
+ * For example:
  * {
  *     coordSysName: 'cartesian2d',
  *     coordSysDims: ['x', 'y', ...],
@@ -68,19 +69,46 @@ var each = _util.each;
  *         x: xAxisModel,
  *         y: undefined
  *     }),
- *     // It also indicate that whether there is category axis.
+ *     // The index of the first category axis in `coordSysDims`.
+ *     // `null/undefined` means no category axis exists.
  *     firstCategoryDimIndex: 1,
  *     // To replace user specified encode.
  * }
  */
-function getCoordSysDefineBySeries(seriesModel) {
+function CoordSysInfo(coordSysName) {
+  /**
+   * @type {string}
+   */
+  this.coordSysName = coordSysName;
+  /**
+   * @type {Array.<string>}
+   */
+
+  this.coordSysDims = [];
+  /**
+   * @type {module:zrender/core/util#HashMap}
+   */
+
+  this.axisMap = createHashMap();
+  /**
+   * @type {module:zrender/core/util#HashMap}
+   */
+
+  this.categoryAxisMap = createHashMap();
+  /**
+   * @type {number}
+   */
+
+  this.firstCategoryDimIndex = null;
+}
+/**
+ * @return {module:model/referHelper#CoordSysInfo}
+ */
+
+
+function getCoordSysInfoBySeries(seriesModel) {
   var coordSysName = seriesModel.get('coordinateSystem');
-  var result = {
-    coordSysName: coordSysName,
-    coordSysDims: [],
-    axisMap: createHashMap(),
-    categoryAxisMap: createHashMap()
-  };
+  var result = new CoordSysInfo(coordSysName);
   var fetch = fetchers[coordSysName];
 
   if (fetch) {
@@ -104,7 +132,7 @@ var fetchers = {
 
     if (isCategory(yAxisModel)) {
       categoryAxisMap.set('y', yAxisModel);
-      result.firstCategoryDimIndex = 1;
+      result.firstCategoryDimIndex == null & (result.firstCategoryDimIndex = 1);
     }
   },
   singleAxis: function (seriesModel, result, axisMap, categoryAxisMap) {
@@ -132,7 +160,7 @@ var fetchers = {
 
     if (isCategory(angleAxisModel)) {
       categoryAxisMap.set('angle', angleAxisModel);
-      result.firstCategoryDimIndex = 1;
+      result.firstCategoryDimIndex == null && (result.firstCategoryDimIndex = 1);
     }
   },
   geo: function (seriesModel, result, axisMap, categoryAxisMap) {
@@ -159,4 +187,4 @@ function isCategory(axisModel) {
   return axisModel.get('type') === 'category';
 }
 
-exports.getCoordSysDefineBySeries = getCoordSysDefineBySeries;
+exports.getCoordSysInfoBySeries = getCoordSysInfoBySeries;

package/lib/processor/dataSample.js

@@ -106,7 +106,7 @@ function _default(seriesType) {
         var valueAxis = coordSys.getOtherAxis(baseAxis);
         var extent = baseAxis.getExtent(); // Coordinste system has been resized
 
-        var size = extent[1] - extent[0];
+        var size = Math.abs(extent[1] - extent[0]);
         var rate = Math.round(data.count() / size);
 
         if (rate > 1) {

package/lib/scale/Interval.js

@@ -97,10 +97,95 @@ var IntervalScale = Scale.extend({
   },
 
   /**
+   * @param {boolean} [expandToNicedExtent=false] If expand the ticks to niced extent.
    * @return {Array.<number>}
    */
-  getTicks: function () {
-    return helper.intervalScaleGetTicks(this._interval, this._extent, this._niceExtent, this._intervalPrecision);
+  getTicks: function (expandToNicedExtent) {
+    var interval = this._interval;
+    var extent = this._extent;
+    var niceTickExtent = this._niceExtent;
+    var intervalPrecision = this._intervalPrecision;
+    var ticks = []; // If interval is 0, return [];
+
+    if (!interval) {
+      return ticks;
+    } // Consider this case: using dataZoom toolbox, zoom and zoom.
+
+
+    var safeLimit = 10000;
+
+    if (extent[0] < niceTickExtent[0]) {
+      if (expandToNicedExtent) {
+        ticks.push(roundNumber(niceTickExtent[0] - interval, intervalPrecision));
+      } else {
+        ticks.push(extent[0]);
+      }
+    }
+
+    var tick = niceTickExtent[0];
+
+    while (tick <= niceTickExtent[1]) {
+      ticks.push(tick); // Avoid rounding error
+
+      tick = roundNumber(tick + interval, intervalPrecision);
+
+      if (tick === ticks[ticks.length - 1]) {
+        // Consider out of safe float point, e.g.,
+        // -3711126.9907707 + 2e-10 === -3711126.9907707
+        break;
+      }
+
+      if (ticks.length > safeLimit) {
+        return [];
+      }
+    } // Consider this case: the last item of ticks is smaller
+    // than niceTickExtent[1] and niceTickExtent[1] === extent[1].
+
+
+    var lastNiceTick = ticks.length ? ticks[ticks.length - 1] : niceTickExtent[1];
+
+    if (extent[1] > lastNiceTick) {
+      if (expandToNicedExtent) {
+        ticks.push(roundNumber(lastNiceTick + interval, intervalPrecision));
+      } else {
+        ticks.push(extent[1]);
+      }
+    }
+
+    return ticks;
+  },
+
+  /**
+   * @param {number} [splitNumber=5]
+   * @return {Array.<Array.<number>>}
+   */
+  getMinorTicks: function (splitNumber) {
+    var ticks = this.getTicks(true);
+    var minorTicks = [];
+    var extent = this.getExtent();
+
+    for (var i = 1; i < ticks.length; i++) {
+      var nextTick = ticks[i];
+      var prevTick = ticks[i - 1];
+      var count = 0;
+      var minorTicksGroup = [];
+      var interval = nextTick - prevTick;
+      var minorInterval = interval / splitNumber;
+
+      while (count < splitNumber - 1) {
+        var minorTick = numberUtil.round(prevTick + (count + 1) * minorInterval); // For the first and last interval. The count may be less than splitNumber.
+
+        if (minorTick > extent[0] && minorTick < extent[1]) {
+          minorTicksGroup.push(minorTick);
+        }
+
+        count++;
+      }
+
+      minorTicks.push(minorTicksGroup);
+    }
+
+    return minorTicks;
   },
 
   /**

package/lib/scale/Log.js

@@ -67,13 +67,14 @@ var LogScale = Scale.extend({
   },
 
   /**
+   * @param {boolean} [expandToNicedExtent=false] If expand the ticks to niced extent.
    * @return {Array.<number>}
    */
-  getTicks: function () {
+  getTicks: function (expandToNicedExtent) {
     var originalScale = this._originalScale;
     var extent = this._extent;
     var originalExtent = originalScale.getExtent();
-    return zrUtil.map(intervalScaleProto.getTicks.call(this), function (val) {
+    return zrUtil.map(intervalScaleProto.getTicks.call(this, expandToNicedExtent), function (val) {
       var powVal = numberUtil.round(mathPow(this.base, val)); // Fix #4158
 
       powVal = val === extent[0] && originalScale.__fixMin ? fixRoundingError(powVal, originalExtent[0]) : powVal;
@@ -82,6 +83,12 @@ var LogScale = Scale.extend({
     }, this);
   },
 
+  /**
+   * @param {number} splitNumber
+   * @return {Array.<Array.<number>>}
+   */
+  getMinorTicks: intervalScaleProto.getMinorTicks,
+
   /**
    * @param {number} val
    * @return {string}