(1) enable min max on category axis

(2) category axis default show all axis.data event if no series.data
(3) when no series.data, do not show axisTick/axisLabel/splitLine/splitArea (if min/max not specified)

src/component/axis/AngleAxisView.js

@@ -40,7 +40,9 @@ define(function (require) {
             }
 
             zrUtil.each(elementList, function (name) {
-                if (angleAxisModel.get(name +'.show')) {
+                if (angleAxisModel.get(name +'.show')
+                    && (!angleAxis.isBlank() || name === 'axisLine')
+                ) {
                     this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent);
                 }
             }, this);

src/component/axis/AxisBuilder.js

@@ -171,12 +171,12 @@ define(function (require) {
          */
         axisTick: function () {
             var axisModel = this.axisModel;
+            var axis = axisModel.axis;
 
-            if (!axisModel.get('axisTick.show')) {
+            if (!axisModel.get('axisTick.show') || axis.isBlank()) {
                 return;
             }
 
-            var axis = axisModel.axis;
             var tickModel = axisModel.getModel('axisTick');
             var opt = this.opt;
 
@@ -240,13 +240,13 @@ define(function (require) {
         axisLabel: function () {
             var opt = this.opt;
             var axisModel = this.axisModel;
+            var axis = axisModel.axis;
             var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));
 
-            if (!show) {
+            if (!show || axis.isBlank()) {
                 return;
             }
 
-            var axis = axisModel.axis;
             var labelModel = axisModel.getModel('axisLabel');
             var textStyleModel = labelModel.getModel('textStyle');
             var labelMargin = labelModel.get('margin');
@@ -331,23 +331,22 @@ define(function (require) {
                     return firstRect.intersect(nextRect);
                 }
             }
-            if (axis.type !== 'category') {
-                // If min or max are user set, we need to check
-                // If the tick on min(max) are overlap on their neighbour tick
-                // If they are overlapped, we need to hide the min(max) tick label
-                if (axisModel.getMin ? axisModel.getMin() : axisModel.get('min')) {
-                    var firstLabel = textEls[0];
-                    var nextLabel = textEls[1];
-                    if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
-                        firstLabel.ignore = true;
-                    }
+
+            // If min or max are user set, we need to check
+            // If the tick on min(max) are overlap on their neighbour tick
+            // If they are overlapped, we need to hide the min(max) tick label
+            if (axisModel.getMin() != null) {
+                var firstLabel = textEls[0];
+                var nextLabel = textEls[1];
+                if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
+                    firstLabel.ignore = true;
                 }
-                if (axisModel.getMax ? axisModel.getMax() : axisModel.get('max')) {
-                    var lastLabel = textEls[textEls.length - 1];
-                    var prevLabel = textEls[textEls.length - 2];
-                    if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
-                        lastLabel.ignore = true;
-                    }
+            }
+            if (axisModel.getMax() != null) {
+                var lastLabel = textEls[textEls.length - 1];
+                var prevLabel = textEls[textEls.length - 2];
+                if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
+                    lastLabel.ignore = true;
                 }
             }
         },

src/component/axis/AxisView.js

@@ -66,6 +66,10 @@ define(function (require) {
         _splitLine: function (axisModel, gridModel, labelInterval) {
             var axis = axisModel.axis;
 
+            if (axis.isBlank()) {
+                return;
+            }
+
             var splitLineModel = axisModel.getModel('splitLine');
             var lineStyleModel = splitLineModel.getModel('lineStyle');
             var lineColors = lineStyleModel.get('color');
@@ -136,6 +140,10 @@ define(function (require) {
         _splitArea: function (axisModel, gridModel, labelInterval) {
             var axis = axisModel.axis;
 
+            if (axis.isBlank()) {
+                return;
+            }
+
             var splitAreaModel = axisModel.getModel('splitArea');
             var areaStyleModel = splitAreaModel.getModel('areaStyle');
             var areaColors = areaStyleModel.get('color');

src/component/axis/RadiusAxisView.js

@@ -36,7 +36,7 @@ define(function (require) {
             this.group.add(axisBuilder.getGroup());
 
             zrUtil.each(selfBuilderAttrs, function (name) {
-                if (radiusAxisModel.get(name +'.show')) {
+                if (radiusAxisModel.get(name +'.show') && !radiusAxis.isBlank()) {
                     this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords);
                 }
             }, this);

src/component/axis/SingleAxisView.js

@@ -37,6 +37,11 @@ define(function (require) {
 
         _splitLine: function(axisModel, labelInterval) {
             var axis = axisModel.axis;
+
+            if (axis.isBlank()) {
+                return;
+            }
+
             var splitLineModel = axisModel.getModel('splitLine');
             var lineStyleModel = splitLineModel.getModel('lineStyle');
             var lineWidth = lineStyleModel.get('width');

src/component/dataZoom/AxisProxy.js

@@ -77,14 +77,7 @@ define(function(require) {
         },
 
         /**
-         * @return {Array.<number>}
-         */
-        getDataExtent: function () {
-            return this._dataExtent.slice();
-        },
-
-        /**
-         * @return {Array.<number>}
+         * @return {Array.<number>} Value can only be NaN or finite value.
          */
         getDataValueWindow: function () {
             return this._valueWindow.slice();
@@ -155,16 +148,16 @@ define(function(require) {
         },
 
         /**
-         * Only calculate by given range and dataExtent, do not change anything.
+         * Only calculate by given range and this._dataExtent, do not change anything.
          *
          * @param {Object} opt
          * @param {number} [opt.start]
          * @param {number} [opt.end]
          * @param {number} [opt.startValue]
          * @param {number} [opt.endValue]
-         * @param {Array.<number>} dataExtent
          */
-        calculateDataWindow: function (opt, dataExtent) {
+        calculateDataWindow: function (opt) {
+            var dataExtent = this._dataExtent;
             var axisModel = this.getAxisModel();
             var scale = axisModel.axis.scale;
             var percentExtent = [0, 100];
@@ -178,14 +171,10 @@ define(function(require) {
             // window should be based on min/max/0, but should not be
             // based on the extent of filtered data.
             dataExtent = dataExtent.slice();
-            fixExtendByAxis(dataExtent, axisModel, scale);
+            fixExtentByAxis(dataExtent, axisModel);
 
             each(['startValue', 'endValue'], function (prop) {
-                valueWindow.push(
-                    opt[prop] != null
-                        ? scale.parse(opt[prop])
-                        : null
-                );
+                valueWindow.push(opt[prop] != null ? scale.parse(opt[prop]) : null);
             });
 
             // Normalize bound.
@@ -236,10 +225,10 @@ define(function(require) {
             }
 
             // Culculate data window and data extent, and record them.
-            var dataExtent = this._dataExtent = calculateDataExtent(
+            this._dataExtent = calculateDataExtent(
                 this._dimName, this.getTargetSeriesModels()
             );
-            var dataWindow = this.calculateDataWindow(dataZoomModel.option, dataExtent);
+            var dataWindow = this.calculateDataWindow(dataZoomModel.option);
             this._valueWindow = dataWindow.valueWindow;
             this._percentWindow = dataWindow.percentWindow;
 
@@ -326,17 +315,22 @@ define(function(require) {
             }
         }, this);
 
+        if (dataExtent[1] < dataExtent[0]) {
+            dataExtent = [NaN, NaN];
+        }
+
         return dataExtent;
     }
 
-    function fixExtendByAxis(dataExtent, axisModel, scale) {
-        each(['min', 'max'], function (minMax, index) {
-            var axisMax = axisModel.get(minMax, true);
-            // Consider 'dataMin', 'dataMax'
-            if (axisMax != null && (axisMax + '').toLowerCase() !== 'data' + minMax) {
-                dataExtent[index] = scale.parse(axisMax);
-            }
-        });
+    function fixExtentByAxis(dataExtent, axisModel) {
+        var min = axisModel.getMin(true);
+        if (min != null && min !== 'dataMin') {
+            dataExtent[0] = min;
+        }
+        var max = axisModel.getMax(true);
+        if (max != null && max !== 'dataMax') {
+            dataExtent[1] = max;
+        }
 
         if (!axisModel.get('scale', true)) {
             dataExtent[0] > 0 && (dataExtent[0] = 0);
@@ -356,15 +350,12 @@ define(function(require) {
             return;
         }
 
-        var isFull = isRestore || (percentWindow[0] === 0 && percentWindow[1] === 100);
         // [0, 500]: arbitrary value, guess axis extent.
-        var precision = !isRestore && numberUtil.getPixelPrecision(valueWindow, [0, 500]);
-        // toFixed() digits argument must be between 0 and 20
-        var invalidPrecision = !isRestore && !(precision < 20 && precision >= 0);
-
-        var useOrigin = isRestore || isFull || invalidPrecision;
+        var precision = numberUtil.getPixelPrecision(valueWindow, [0, 500]);
+        // isRestore or isFull
+        var useOrigin = isRestore || (percentWindow[0] === 0 && percentWindow[1] === 100);
 
-        axisModel.setRange && axisModel.setRange(
+        axisModel.setRange(
             useOrigin ? null : +valueWindow[0].toFixed(precision),
             useOrigin ? null : +valueWindow[1].toFixed(precision)
         );

src/component/dataZoom/DataZoomModel.js

@@ -413,7 +413,7 @@ define(function(require) {
          *
          * @param {string} [axisDimName]
          * @param {number} [axisIndex]
-         * @return {Array.<number>} [startValue, endValue]
+         * @return {Array.<number>} [startValue, endValue] value can only be '-' or finite number.
          */
         getValueRange: function (axisDimName, axisIndex) {
             if (axisDimName == null && axisIndex == null) {

src/component/dataZoom/SliderZoomView.js

@@ -576,10 +576,9 @@ define(function (require) {
 
                     var dataInterval = nonRealtime
                         // See #4434, data and axis are not processed and reset yet in non-realtime mode.
-                        ? axisProxy.calculateDataWindow(
-                            {start: range[0], end: range[1]},
-                            axisProxy.getDataExtent()
-                        ).valueWindow
+                        ? axisProxy.calculateDataWindow({
+                            start: range[0], end: range[1]
+                        }).valueWindow
                         : axisProxy.getDataValueWindow();
 
                     labelTexts = [
@@ -634,7 +633,7 @@ define(function (require) {
                 labelPrecision = axis.getPixelPrecision();
             }
 
-            var valueStr = (value == null && isNaN(value))
+            var valueStr = (value == null || isNaN(value))
                 ? ''
                 // FIXME Glue code
                 : (axis.type === 'category' || axis.type === 'time')

src/component/tooltip/TooltipView.js

@@ -612,12 +612,18 @@ define(function (require) {
                 var dimensions = coordSys.dimensions;
                 var value = coordSys.pointToData(point, true);
                 point = coordSys.dataToPoint(value);
+
                 var baseAxis = coordSys.getBaseAxis();
                 var axisType = axisPointerModel.get('axis');
                 if (axisType === 'auto') {
                     axisType = baseAxis.dim;
                 }
 
+                if (baseAxis.isBlank() || zrUtil.eqNaN(point[0]) || zrUtil.eqNaN(point[1])) {
+                    this._hideAxisPointer(coordSys.name);
+                    return;
+                }
+
                 var contentNotChange = false;
                 var lastHover = this._lastHover;
                 if (axisPointerType === 'cross') {

src/coord/Axis.js

@@ -213,7 +213,24 @@ define(function (require) {
             var size = Math.abs(axisExtent[1] - axisExtent[0]);
 
             return Math.abs(size) / len;
+        },
+
+        /**
+         * When axis extent depends on data and no data exists,
+         * axis ticks should not be drawn, which is named 'blank'.
+         */
+        isBlank: function () {
+            return this._isBlank;
+        },
+
+        /**
+         * When axis extent depends on data and no data exists,
+         * axis ticks should not be drawn, which is named 'blank'.
+         */
+        setBlank: function (isBlank) {
+            this._isBlank = isBlank;
         }
+
     };
 
     return Axis;

src/coord/axisHelper.js

@@ -13,49 +13,59 @@ define(function (require) {
 
     /**
      * Get axis scale extent before niced.
+     * Item of returned array can only be number (including Infinity and NaN).
      */
     axisHelper.getScaleExtent = function (axis, model) {
         var scale = axis.scale;
+        var scaleType = scale.type;
+
+        var min = model.getMin();
+        var max = model.getMax();
+        var fixMin = min != null;
+        var fixMax = max != null;
         var originalExtent = scale.getExtent();
-        var span = originalExtent[1] - originalExtent[0];
-        if (scale.type === 'ordinal') {
-            // If series has no data, scale extent may be wrong
-            if (!isFinite(span)) {
-                return [0, 0];
-            }
-            else {
-                return originalExtent;
+
+        var axisDataLen;
+        var boundaryGap;
+        var span;
+        if (scaleType === 'ordinal') {
+            axisDataLen = (model.get('data') || []).length;
+        }
+        else {
+            boundaryGap = model.get('boundaryGap');
+            if (!zrUtil.isArray(boundaryGap)) {
+                boundaryGap = [boundaryGap || 0, boundaryGap || 0];
             }
+            boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], 1);
+            boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], 1);
+            span = originalExtent[1] - originalExtent[0];
         }
-        var min = model.getMin ? model.getMin() : model.get('min');
-        var max = model.getMax ? model.getMax() : model.get('max');
-        var crossZero = model.getNeedCrossZero
-            ? model.getNeedCrossZero() : !model.get('scale');
-        var boundaryGap = model.get('boundaryGap');
-        if (!zrUtil.isArray(boundaryGap)) {
-            boundaryGap = [boundaryGap || 0, boundaryGap || 0];
-        }
-        boundaryGap[0] = numberUtil.parsePercent(boundaryGap[0], 1);
-        boundaryGap[1] = numberUtil.parsePercent(boundaryGap[1], 1);
-        var fixMin = true;
-        var fixMax = true;
-        // Add boundary gap
+
         if (min == null) {
-            min = originalExtent[0] - boundaryGap[0] * span;
-            fixMin = false;
+            min = scaleType === 'ordinal'
+                ? (axisDataLen ? 0 : NaN)
+                : originalExtent[0] - boundaryGap[0] * span;
         }
         if (max == null) {
-            max = originalExtent[1] + boundaryGap[1] * span;
-            fixMax = false;
+            max = scaleType === 'ordinal'
+                ? (axisDataLen ? axisDataLen - 1 : NaN)
+                : originalExtent[1] + boundaryGap[1] * span;
         }
+
         if (min === 'dataMin') {
             min = originalExtent[0];
         }
         if (max === 'dataMax') {
             max = originalExtent[1];
         }
+
+        (min == null || !isFinite(min)) && (min = NaN);
+        (max == null || !isFinite(max)) && (max = NaN);
+
+        axis.setBlank(zrUtil.eqNaN(min) || zrUtil.eqNaN(max));
+
         // Evaluate if axis needs cross zero
-        if (crossZero) {
+        if (model.getNeedCrossZero()) {
             // Axis is over zero and min is not set
             if (min > 0 && max > 0 && !fixMin) {
                 min = 0;
@@ -65,14 +75,15 @@ define(function (require) {
                 max = 0;
             }
         }
+
         return [min, max];
     };
 
     axisHelper.niceScaleExtent = function (axis, model) {
         var scale = axis.scale;
         var extent = axisHelper.getScaleExtent(axis, model);
-        var fixMin = (model.getMin ? model.getMin() : model.get('min')) != null;
-        var fixMax = (model.getMax ? model.getMax() : model.get('max')) != null;
+        var fixMin = model.getMin() != null;
+        var fixMax = model.getMax() != null;
         var splitNumber = model.get('splitNumber');
 
         if (scale.type === 'log') {

src/coord/axisModelCommonMixin.js

@@ -11,29 +11,86 @@ define(function (require) {
             return obj;
         }
     }
-    /**
-     * Get categories
-     */
-    function getCategories() {
-        return this.get('type') === 'category'
-            && zrUtil.map(this.get('data'), getName);
-    }
-
-    /**
-     * Format labels
-     * @return {Array.<string>}
-     */
-    function getFormattedLabels() {
-        return axisHelper.getFormattedLabels(
-            this.axis,
-            this.get('axisLabel.formatter')
-        );
-    }
 
     return {
 
-        getFormattedLabels: getFormattedLabels,
+        /**
+         * Format labels
+         * @return {Array.<string>}
+         */
+        getFormattedLabels: function () {
+            return axisHelper.getFormattedLabels(
+                this.axis,
+                this.get('axisLabel.formatter')
+            );
+        },
+
+        /**
+         * Get categories
+         */
+        getCategories: function () {
+            return this.get('type') === 'category'
+                && zrUtil.map(this.get('data'), getName);
+        },
+
+        /**
+         * @public
+         * @param {boolean} origin
+         * @return {number|string} min value or 'dataMin' or null/undefined (means auto) or NaN
+         */
+        getMin: function (origin) {
+            var option = this.option;
+            var min = (!origin && option.rangeStart != null)
+                ? option.rangeStart : option.min;
+
+            if (min != null && min !== 'dataMin' && !zrUtil.eqNaN(min)) {
+                min = this.axis.scale.parse(min);
+            }
+            return min;
+        },
 
-        getCategories: getCategories
+        /**
+         * @public
+         * @param {boolean} origin
+         * @return {number|string} max value or 'dataMax' or null/undefined (means auto) or NaN
+         */
+        getMax: function (origin) {
+            var option = this.option;
+            var max = (!origin && option.rangeEnd != null)
+                ? option.rangeEnd : option.max;
+
+            if (max != null && max !== 'dataMax' && !zrUtil.eqNaN(max)) {
+                max = this.axis.scale.parse(max);
+            }
+            return max;
+        },
+
+        /**
+         * @public
+         * @return {boolean}
+         */
+        getNeedCrossZero: function () {
+            var option = this.option;
+            return (option.rangeStart != null || option.rangeEnd != null)
+                ? false : !option.scale;
+        },
+
+        /**
+         * @public
+         * @param {number} rangeStart Can only be finite number or null/undefined or NaN.
+         * @param {number} rangeEnd Can only be finite number or null/undefined or NaN.
+         */
+        setRange: function (rangeStart, rangeEnd) {
+            this.option.rangeStart = rangeStart;
+            this.option.rangeEnd = rangeEnd;
+        },
+
+        /**
+         * @public
+         */
+        resetRange: function () {
+            // rangeStart and rangeEnd is readonly.
+            this.option.rangeStart = this.option.rangeEnd = null;
+        }
     };
 });
\ No newline at end of file

src/coord/axisModelZoomMixin.js

-define(function (require) {
-
-    return {
-
-        /**
-         * @public
-         * @return {Array.<number|string|Date>}
-         */
-        getMin: function () {
-            var option = this.option;
-            var min = option.rangeStart != null ? option.rangeStart : option.min;
-            // In case of axis.type === 'time', Date should be converted to timestamp.
-            // In other cases, min/max should be a number or null/undefined or 'dataMin/Max'.
-            if (min instanceof Date) {
-                min = +min;
-            }
-            return min;
-        },
-
-        /**
-         * @public
-         * @return {Array.<number|string|Date>}
-         */
-        getMax: function () {
-            var option = this.option;
-            var max = option.rangeEnd != null ? option.rangeEnd : option.max;
-            // In case of axis.type === 'time', Date should be converted to timestamp.
-            // In other cases, min/max should be a number or null/undefined or 'dataMin/Max'.
-            if (max instanceof Date) {
-                max = +max;
-            }
-            return max;
-        },
-
-        /**
-         * @public
-         * @return {boolean}
-         */
-        getNeedCrossZero: function () {
-            var option = this.option;
-            return (option.rangeStart != null || option.rangeEnd != null)
-                ? false : !option.scale;
-        },
-
-        /**
-         * @public
-         * @param {number} rangeStart
-         * @param {number} rangeEnd
-         */
-        setRange: function (rangeStart, rangeEnd) {
-            this.option.rangeStart = rangeStart;
-            this.option.rangeEnd = rangeEnd;
-        },
-
-        /**
-         * @public
-         */
-        resetRange: function () {
-            // rangeStart and rangeEnd is readonly.
-            this.option.rangeStart = this.option.rangeEnd = null;
-        }
-    };
-
-});
\ No newline at end of file

src/coord/cartesian/AxisModel.js

@@ -58,7 +58,6 @@ define(function(require) {
     }
 
     zrUtil.merge(AxisModel.prototype, require('../axisModelCommonMixin'));
-    zrUtil.merge(AxisModel.prototype, require('../axisModelZoomMixin'));
 
     var extraOption = {
         // gridIndex: 0,

src/coord/polar/AxisModel.js

@@ -18,7 +18,6 @@ define(function(require) {
     });
 
     zrUtil.merge(PolarAxisModel.prototype, require('../axisModelCommonMixin'));
-    zrUtil.merge(PolarAxisModel.prototype, require('../axisModelZoomMixin'));
 
     var polarAxisDefaultExtendedOption = {
         angle: {

test/axis-extrema.html

+<!DOCTYPE>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="reset.css">
+    </head>
+    <body>
+        <style>
+            body {
+            }
+            .chart {
+                position: relative;
+                height: 300px;
+            }
+            h2 {
+                text-align: center;
+                font-size: 16px;
+                line-height: 30px;
+                font-weight: normal;
+                background: #A3AEFF;
+            }
+        </style>
+
+        <h2>cartesian category axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
+        <div class="chart" id="main1"></div>
+
+        <h2>cartesian category axis | xAxis: {min: undefined, max: undefined}</h2>
+        <div class="chart" id="main1.1"></div>
+
+        <h2>cartesian category axis | xAxis.data is empty</h2>
+        <div class="chart" id="main1.2"></div>
+
+        <h2>cartesian category axis | xAxis: {min: -10, max: 10}</h2>
+        <div class="chart" id="main2"></div>
+
+        <h2>cartesian value axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
+        <div class="chart" id="main3"></div>
+
+        <h2>cartesian value axis | xAxis: {min: -10, max: 10}</h2>
+        <div class="chart" id="main4"></div>
+
+        <h2>cartesian time axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
+        <div class="chart" id="main5"></div>
+
+        <h2>cartesian time axis | xAxis: {min: '2012-08-12', max: '2012-10-01'}</h2>
+        <div class="chart" id="main6"></div>
+
+        <h2>polar category axis | radiuAxis: {min: 'dataMin', max: 'dataMax'}</h2>
+        <div class="chart" id="main90.1"></div>
+
+        <h2>parallel category axis | parallelAxis: {min: undefined, max: undefined}</h2>
+        <div class="chart" id="main91.1"></div>
+
+        <h2>single category axis | singleAxis: {min: 'dataMin', max: 'dataMax'}</h2>
+        <div class="chart" id="main92.1"></div>
+
+
+        <script>
+
+            function makeChart(id, option, noDataZoom) {
+                require([
+                    'echarts',
+                    'echarts/chart/line',
+                    'echarts/chart/scatter',
+                    'echarts/chart/parallel',
+                    'echarts/component/polar',
+                    'echarts/component/grid',
+                    'echarts/component/legend',
+                    'echarts/component/singleAxis',
+                    'echarts/component/tooltip',
+                    'echarts/component/dataZoom'
+                ], function (echarts) {
+                    var main = document.getElementById(id);
+                    if (main) {
+                        var chartMain = document.createElement('div');
+                        chartMain.style.cssText = 'height:100%';
+                        main.appendChild(chartMain);
+                        var chart = echarts.init(chartMain);
+                        chart.setOption(option);
+
+                        if (!noDataZoom) {
+                            var controller = document.createElement('div');
+                            controller.style.cssText = 'position: absolute; right: 10px; top: 10px;';
+                            main.appendChild(controller);
+                            controller.innerHTML = [
+                                '<button>Add DataZoom</button>',
+                                '<button>Remove DataZoom</button>'
+                            ].join('');
+
+                            var btns = $(controller).children();
+                            $(btns[0]).on('click', function () {
+                                option.dataZoom = [{type: 'inside'}, {type: 'slider'}];
+                                chart.setOption(option, true);
+                            });
+                            $(btns[1]).on('click', function () {
+                                delete option.dataZoom;
+                                chart.setOption(option, true);
+                            });
+                        }
+                    }
+                });
+            }
+
+        </script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        <script>
+            makeChart('main1', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {
+                    data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
+                    min: 'dataMin',
+                    max: 'dataMax'
+                },
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [43]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [43, 99]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+        <script>
+            makeChart('main1.1', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {
+                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
+                },
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [43]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [43, 99]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+
+        <script>
+            makeChart('main1.2', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {
+                    data: []
+                },
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [43]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [43, 99]
+                }]
+            });
+        </script>
+
+
+
+
+
+        <script>
+            makeChart('main2', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                grid: {
+                    containLabel: true
+                },
+                xAxis: {
+                    data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
+                    min: -10,
+                    max: 10,
+                    axisTick: {
+                        interval: 0
+                    },
+                    axisLabel: {
+                        interval: 0
+                    }
+                },
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [43]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [43, 99]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+        <script>
+            makeChart('main3', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {},
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [[2, 43]]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [[2, 43], [4, 99]]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+
+        <script>
+            makeChart('main4', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {min: -10, max: 10},
+                yAxis: {},
+                series: [{
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'line',
+                    data: [[2, 43]]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [[2, 43], [4, 99]]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+        <script>
+            makeChart('main5', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {type: 'time'},
+                yAxis: {},
+                series: [{
+                    name: 'one point',
+                    type: 'line',
+                    data: [
+                        [new Date('2011-11-11'), 2112]
+                    ]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [
+                        [new Date('2011-11-11'), 2112],
+                        [new Date('2012-11-12'), 122]
+                    ]
+                }, {
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }]
+            });
+        </script>
+
+
+
+
+
+
+        <script>
+            makeChart('main6', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'line'
+                    }
+                },
+                xAxis: {
+                    type: 'time',
+                    min: '2012-8-12',
+                    max: '2012-10-01'
+                },
+                yAxis: {},
+                series: [{
+                    name: 'one point',
+                    type: 'line',
+                    data: [
+                        [new Date('2012-9-12'), 11]
+                    ]
+                }, {
+                    name: 'two points',
+                    type: 'line',
+                    data: [
+                        ['2012-9-12', 11],
+                        ['2012-9-18', 14]
+                    ]
+                }, {
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }]
+            });
+        </script>
+
+
+
+
+
+
+
+        <script>
+            makeChart('main90.1', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                polar: {},
+                radiusAxis: {
+                    min: 'dataMin',
+                    max: 'dataMax',
+                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
+                },
+                angleAxis: {},
+                series: [{
+                    coordinateSystem: 'polar',
+                    name: 'no point',
+                    type: 'line',
+                    data: []
+                }, {
+                    coordinateSystem: 'polar',
+                    name: 'one point',
+                    type: 'line',
+                    data: [43]
+                }, {
+                    coordinateSystem: 'polar',
+                    name: 'two points',
+                    type: 'line',
+                    data: [43, 99]
+                }]
+            });
+        </script>
+
+
+
+
+
+
+
+
+        <script>
+            makeChart('main91.1', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                parallelAxis: [{
+                    type: 'value',
+                    dim: 0
+                }, {
+                    dim: 1,
+                    type: 'category',
+                    data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
+                }],
+                parallel: {
+                },
+                series: [{
+                    name: 'no point',
+                    type: 'parallel',
+                    data: []
+                }, {
+                    name: 'one point',
+                    type: 'parallel',
+                    data: [[43, '良']]
+                }, {
+                    name: 'two points',
+                    type: 'parallel',
+                    data: [[43, '良'], [99, '重度污染']]
+                }]
+            }, true);
+        </script>
+
+
+
+
+
+
+
+
+        <script>
+            makeChart('main92.1', {
+                legend: {
+                    data: ['no point', 'one point', 'two points'],
+                    selectedMode: 'single'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                singleAxis: {
+                    type: 'category',
+                    min: 'dataMin',
+                    max: 'dataMax',
+                    data: ['类目1', '类目2', '类目3', '类目4', '类目5']
+                },
+                series: [{
+                    coordinateSystem: 'singleAxis',
+                    name: 'no point',
+                    type: 'scatter',
+                    symbolSize: 20,
+                    data: []
+                }, {
+                    coordinateSystem: 'singleAxis',
+                    name: 'one point',
+                    type: 'scatter',
+                    symbolSize: 20,
+                    data: [[2]]
+                }, {
+                    coordinateSystem: 'singleAxis',
+                    name: 'two points',
+                    type: 'scatter',
+                    symbolSize: 20,
+                    data: [[2], [4]]
+                }]
+            }, true);
+        </script>
+
+
+
+
+
+
+
+
+    </body>
+</html>
\ No newline at end of file