enhance custom series.

src/chart/custom.js

@@ -5,12 +5,31 @@ define(function (require) {
     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
@@ -165,10 +184,10 @@ define(function (require) {
 
         if (__DEV__) {
             zrUtil.assert(renderItem, 'series.render is required.');
-            zrUtil.assert(coordSys.prepareInfoForCustomSeries, 'This coordSys does not support custom series.');
+            zrUtil.assert(prepareCustoms[coordSys.type], 'This coordSys does not support custom series.');
         }
 
-        var prepareResult = coordSys.prepareInfoForCustomSeries();
+        var prepareResult = prepareCustoms[coordSys.type](coordSys);
 
         var userAPI = zrUtil.defaults({
             getWidth: api.getWidth,
@@ -178,7 +197,8 @@ define(function (require) {
             value: value,
             style: style,
             styleEmphasis: styleEmphasis,
-            visual: visual
+            visual: visual,
+            barLayout: barLayout
         }, prepareResult.api);
 
         // Do not support call `api` asynchronously without dataIndexInside input.
@@ -287,6 +307,22 @@ define(function (require) {
             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);
+            }
+        }
     }
 
     function wrapEncodeDef(data) {

src/coord/ICoordinateSystem

@@ -41,18 +41,6 @@
  *      @param {boolean} [clamp=false]
  *      @return {Array.<*>} data
  *
- *  + 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.
- *      }}
- *
- *  + dataToCoordSize {Function}: optional
- *      @param {Array.<number>} dataSize [xSize, ySize]
- *      @param {Array.<number>} dataItem [x, y]
- *      @param {boolean} clamp
- *      @return {Array.<number>} coordSize
- *
  *  + containPoint {Function}: mandatory
  *      @param {Array.<number>} point Point in global pixel coordinate system.
  *      @return {boolean}

src/coord/calendar/Calendar.js

@@ -280,27 +280,6 @@ define(function (require) {
          */
         convertFromPixel: zrUtil.curry(doConvert, 'pointToData'),
 
-        /**
-         * @inheritDoc
-         */
-        prepareInfoForCustomSeries: function () {
-            var rect = this.getRect();
-            return {
-                coordSys: {
-                    type: 'geo',
-                    x: rect.x,
-                    y: rect.y,
-                    width: rect.width,
-                    height: rect.height,
-                    cellWidth: this.getCellWidth(),
-                    cellHeight: this.getCellHeight()
-                },
-                api: {
-                    coord: zrUtil.bind(this.dataToPoint, this)
-                }
-            };
-        },
-
         /**
          * initRange
          *

src/coord/calendar/prepareCustom.js

+define(function(require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    function prepareCustom(coordSys) {
+        var rect = coordSys.getRect();
+        return {
+            coordSys: {
+                type: 'geo',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                cellWidth: coordSys.getCellWidth(),
+                cellHeight: coordSys.getCellHeight()
+            },
+            api: {
+                coord: zrUtil.bind(coordSys.dataToPoint, coordSys)
+            }
+        };
+    }
+
+    return prepareCustom;
+});
\ No newline at end of file

src/coord/cartesian/Cartesian2D.js

@@ -103,43 +103,6 @@ define(function(require) {
          */
         getOtherAxis: function (axis) {
             return this.getAxis(axis.dim === 'x' ? 'y' : 'x');
-        },
-
-        /**
-         * @inheritDoc
-         */
-        dataToCoordSize: function (dataSize, dataItem) {
-            // dataItem is necessary in log axis.
-            dataItem = dataItem || [0, 0];
-            return zrUtil.map(['x', 'y'], function (dim, dimIdx) {
-                var axis = this.getAxis(dim);
-                var val = dataItem[dimIdx];
-                var halfSize = dataSize[dimIdx] / 2;
-                return axis.type === 'category'
-                    ? axis.getBandWidth()
-                    : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
-            }, this);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        prepareInfoForCustomSeries: function () {
-            var rect = this.grid.getRect();
-            return {
-                coordSys: {
-                    // The name exposed to user is always 'cartesian2d' but not 'grid'.
-                    type: 'cartesian2d',
-                    x: rect.x,
-                    y: rect.y,
-                    width: rect.width,
-                    height: rect.height
-                },
-                api: {
-                    coord: zrUtil.bind(this.dataToPoint, this),
-                    size: zrUtil.bind(this.dataToCoordSize, this)
-                }
-            };
         }
 
     };

src/coord/cartesian/prepareCustom.js

+define(function(require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    function dataToCoordSize(dataSize, dataItem) {
+        // dataItem is necessary in log axis.
+        dataItem = dataItem || [0, 0];
+        return zrUtil.map(['x', 'y'], function (dim, dimIdx) {
+            var axis = this.getAxis(dim);
+            var val = dataItem[dimIdx];
+            var halfSize = dataSize[dimIdx] / 2;
+            return axis.type === 'category'
+                ? axis.getBandWidth()
+                : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
+        }, this);
+    }
+
+    function prepareCustom(coordSys) {
+        var rect = coordSys.grid.getRect();
+        return {
+            coordSys: {
+                // The name exposed to user is always 'cartesian2d' but not 'grid'.
+                type: 'cartesian2d',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+            },
+            api: {
+                coord: zrUtil.bind(coordSys.dataToPoint, coordSys),
+                size: zrUtil.bind(dataToCoordSize, coordSys)
+            }
+        };
+    }
+
+    return prepareCustom;
+});
\ No newline at end of file

src/coord/geo/Geo.js

@@ -230,43 +230,7 @@ define(function (require) {
         /**
          * @inheritDoc
          */
-        convertFromPixel: zrUtil.curry(doConvert, 'pointToData'),
-
-        /**
-         * @inheritDoc
-         */
-        dataToCoordSize: function (dataSize, dataItem) {
-            return zrUtil.map([0, 1], function (dimIdx) {
-                var val = dataItem[dimIdx];
-                var halfSize = dataSize[dimIdx] / 2;
-                var p1 = [];
-                var p2 = [];
-                p1[dimIdx] = val - halfSize;
-                p2[dimIdx] = val + halfSize;
-                p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
-                return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
-            }, this);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        prepareInfoForCustomSeries: function () {
-            var rect = this.getBoundingRect();
-            return {
-                coordSys: {
-                    type: 'geo',
-                    x: rect.x,
-                    y: rect.y,
-                    width: rect.width,
-                    height: rect.height
-                },
-                api: {
-                    coord: zrUtil.bind(this.dataToPoint, this),
-                    size: zrUtil.bind(this.dataToCoordSize, this)
-                }
-            };
-        }
+        convertFromPixel: zrUtil.curry(doConvert, 'pointToData')
 
     };
 

src/coord/geo/prepareCustom.js

+define(function(require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    function dataToCoordSize(dataSize, dataItem) {
+        return zrUtil.map([0, 1], function (dimIdx) {
+            var val = dataItem[dimIdx];
+            var halfSize = dataSize[dimIdx] / 2;
+            var p1 = [];
+            var p2 = [];
+            p1[dimIdx] = val - halfSize;
+            p2[dimIdx] = val + halfSize;
+            p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
+            return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
+        }, this);
+    }
+
+    function prepareCustom(coordSys) {
+        var rect = coordSys.getBoundingRect();
+        return {
+            coordSys: {
+                type: 'geo',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+            },
+            api: {
+                coord: zrUtil.bind(coordSys.dataToPoint, coordSys),
+                size: zrUtil.bind(dataToCoordSize, coordSys)
+            }
+        };
+    }
+
+    return prepareCustom;
+});
\ No newline at end of file

src/coord/polar/Polar.js

@@ -252,52 +252,6 @@ define(function(require) {
             var y = -Math.sin(radian) * radius + this.cy;
 
             return [x, y];
-        },
-
-        /**
-         * @inheritDoc
-         */
-        dataToCoordSize: function (dataSize, dataItem) {
-            // dataItem is necessary in log axis.
-            return zrUtil.map(['Radius', 'Angle'], function (dim, dimIdx) {
-                var axis = this['get' + dim + 'Axis']();
-                var val = dataItem[dimIdx];
-                var halfSize = dataSize[dimIdx] / 2;
-                var method = 'dataTo' + dim;
-                return axis.type === 'category'
-                    ? axis.getBandWidth()
-                    : Math.abs(axis[method](val - halfSize) - axis[method](val + halfSize));
-            }, this);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        prepareInfoForCustomSeries: function () {
-            var radiusAxis = this.getRadiusAxis();
-            var angleAxis = this.getAngleAxis();
-            var radius = radiusAxis.getExtent();
-            radius[0] > radius[1] && radius.reverse();
-
-            return {
-                coordSys: {
-                    type: 'polar',
-                    cx: this.cx,
-                    cy: this.cy,
-                    r: radius[1],
-                    r0: radius[0]
-                },
-                api: {
-                    coord: zrUtil.bind(function (data) {
-                        var radius = radiusAxis.dataToRadius(data[0]);
-                        var angle = angleAxis.dataToAngle(data[1]);
-                        var coord = this.coordToPoint([radius, angle]);
-                        coord.push(radius, angle);
-                        return coord;
-                    }, this),
-                    size: zrUtil.bind(this.dataToCoordSize, this)
-                }
-            };
         }
 
     };

src/coord/polar/prepareCustom.js

+define(function(require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    function dataToCoordSize(dataSize, dataItem) {
+        // dataItem is necessary in log axis.
+        return zrUtil.map(['Radius', 'Angle'], function (dim, dimIdx) {
+            var axis = this['get' + dim + 'Axis']();
+            var val = dataItem[dimIdx];
+            var halfSize = dataSize[dimIdx] / 2;
+            var method = 'dataTo' + dim;
+            return axis.type === 'category'
+                ? axis.getBandWidth()
+                : Math.abs(axis[method](val - halfSize) - axis[method](val + halfSize));
+        }, this);
+    }
+
+    function prepareCustom(coordSys) {
+        var radiusAxis = coordSys.getRadiusAxis();
+        var angleAxis = coordSys.getAngleAxis();
+        var radius = radiusAxis.getExtent();
+        radius[0] > radius[1] && radius.reverse();
+
+        return {
+            coordSys: {
+                type: 'polar',
+                cx: coordSys.cx,
+                cy: coordSys.cy,
+                r: radius[1],
+                r0: radius[0]
+            },
+            api: {
+                coord: zrUtil.bind(function (data) {
+                    var radius = radiusAxis.dataToRadius(data[0]);
+                    var angle = angleAxis.dataToAngle(data[1]);
+                    var coord = coordSys.coordToPoint([radius, angle]);
+                    coord.push(radius, angle);
+                    return coord;
+                }),
+                size: zrUtil.bind(dataToCoordSize, coordSys)
+            }
+        };
+    }
+
+    return prepareCustom;
+});
\ No newline at end of file

src/coord/single/Single.js

@@ -267,40 +267,6 @@ define(function (require) {
             pt[idx] = axis.toGlobalCoord(axis.dataToCoord(+val));
             pt[1 - idx] = idx === 0 ? (rect.y + rect.height / 2) : (rect.x + rect.width / 2);
             return pt;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        dataToCoordSize: function (dataSize, dataItem) {
-            // dataItem is necessary in log axis.
-            var axis = this.getAxis();
-            var val = dataItem instanceof Array ? dataItem[0] : dataItem;
-            var halfSize = (dataSize instanceof Array ? dataSize[0] : dataSize) / 2;
-            return axis.type === 'category'
-                ? axis.getBandWidth()
-                : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
-        },
-
-        /**
-         * @inheritDoc
-         */
-        prepareInfoForCustomSeries: function () {
-            var rect = this.getRect();
-
-            return {
-                coordSys: {
-                    type: 'singleAxis',
-                    x: rect.x,
-                    y: rect.y,
-                    width: rect.width,
-                    height: rect.height
-                },
-                api: {
-                    coord: zrUtil.bind(this.dataToPoint, this),
-                    size: zrUtil.bind(this.dataToCoordSize, this)
-                }
-            };
         }
 
     };

src/coord/single/prepareCustom.js

+define(function(require) {
+
+    var zrUtil = require('zrender/core/util');
+
+    function dataToCoordSize(dataSize, dataItem) {
+        // dataItem is necessary in log axis.
+        var axis = this.getAxis();
+        var val = dataItem instanceof Array ? dataItem[0] : dataItem;
+        var halfSize = (dataSize instanceof Array ? dataSize[0] : dataSize) / 2;
+        return axis.type === 'category'
+            ? axis.getBandWidth()
+            : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
+    }
+
+    function prepareCustom(coordSys) {
+        var rect = coordSys.getRect();
+
+        return {
+            coordSys: {
+                type: 'singleAxis',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+            },
+            api: {
+                coord: zrUtil.bind(coordSys.dataToPoint, coordSys),
+                size: zrUtil.bind(dataToCoordSize, coordSys)
+            }
+        };
+    }
+
+    return prepareCustom;
+});
\ No newline at end of file

src/layout/barGrid.js

@@ -6,29 +6,96 @@ define(function(require) {
     var numberUtil = require('../util/number');
     var parsePercent = numberUtil.parsePercent;
 
+    var STACK_PREFIX = '__ec_stack_';
+
     function getSeriesStackId(seriesModel) {
-        return seriesModel.get('stack') || '__ec_stack_' + seriesModel.seriesIndex;
+        return seriesModel.get('stack') || STACK_PREFIX + seriesModel.seriesIndex;
     }
 
     function getAxisKey(axis) {
         return axis.dim + axis.index;
     }
 
-    function calBarWidthAndOffset(barSeries, api) {
-        // Columns info on each category axis. Key is cartesian name
-        var columnsMap = {};
+    /**
+     * @param {Object} opt
+     * @param {module:echarts/coord/Axis} opt.axis Only support category axis currently.
+     * @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} If axis.type is not 'category', return undefined.
+     */
+    function getLayoutOnAxis(opt, api) {
+        var params = [];
+        var baseAxis = opt.axis;
+        var axisKey = 'axis0';
+
+        if (baseAxis.type !== 'category') {
+            return;
+        }
+        var bandWidth = baseAxis.getBandWidth();
+
+        for (var i = 0; i < opt.count || 0; i++) {
+            params.push(zrUtil.defaults({
+                bandWidth: bandWidth,
+                axisKey: axisKey,
+                stackId: STACK_PREFIX + i
+            }, opt));
+        }
+        var widthAndOffsets = doCalBarWidthAndOffset(params, api);
+
+        var result = [];
+        for (var i = 0; i < opt.count; i++) {
+            var item = widthAndOffsets[axisKey][STACK_PREFIX + i];
+            item.offsetCenter = item.offset + item.width / 2;
+            result.push(item);
+        }
 
-        zrUtil.each(barSeries, function (seriesModel, idx) {
+        return result;
+    }
+
+    function calBarWidthAndOffset(barSeries, api) {
+        var seriesInfoList = zrUtil.map(barSeries, function (seriesModel) {
             var data = seriesModel.getData();
             var cartesian = seriesModel.coordinateSystem;
-
             var baseAxis = cartesian.getBaseAxis();
             var axisExtent = baseAxis.getExtent();
             var bandWidth = baseAxis.type === 'category'
                 ? baseAxis.getBandWidth()
                 : (Math.abs(axisExtent[1] - axisExtent[0]) / data.count());
 
-            var columnsOnAxis = columnsMap[getAxisKey(baseAxis)] || {
+            var barWidth = parsePercent(
+                seriesModel.get('barWidth'), bandWidth
+            );
+            var barMaxWidth = parsePercent(
+                seriesModel.get('barMaxWidth'), bandWidth
+            );
+            var barGap = seriesModel.get('barGap');
+            var barCategoryGap = seriesModel.get('barCategoryGap');
+
+            return {
+                bandWidth: bandWidth,
+                barWidth: barWidth,
+                barMaxWidth: barMaxWidth,
+                barGap: barGap,
+                barCategoryGap: barCategoryGap,
+                axisKey: getAxisKey(baseAxis),
+                stackId: getSeriesStackId(seriesModel)
+            };
+        });
+
+        return doCalBarWidthAndOffset(seriesInfoList, api);
+    }
+
+    function doCalBarWidthAndOffset(seriesInfoList, api) {
+        // Columns info on each category axis. Key is cartesian name
+        var columnsMap = {};
+
+        zrUtil.each(seriesInfoList, function (seriesInfo, idx) {
+            var axisKey = seriesInfo.axisKey;
+            var bandWidth = seriesInfo.bandWidth;
+            var columnsOnAxis = columnsMap[axisKey] || {
                 bandWidth: bandWidth,
                 remainedWidth: bandWidth,
                 autoWidthCount: 0,
@@ -37,9 +104,9 @@ define(function(require) {
                 stacks: {}
             };
             var stacks = columnsOnAxis.stacks;
-            columnsMap[getAxisKey(baseAxis)] = columnsOnAxis;
+            columnsMap[axisKey] = columnsOnAxis;
 
-            var stackId = getSeriesStackId(seriesModel);
+            var stackId = seriesInfo.stackId;
 
             if (!stacks[stackId]) {
                 columnsOnAxis.autoWidthCount++;
@@ -49,29 +116,24 @@ define(function(require) {
                 maxWidth: 0
             };
 
-            var barWidth = parsePercent(
-                seriesModel.get('barWidth'), bandWidth
-            );
-            var barMaxWidth = parsePercent(
-                seriesModel.get('barMaxWidth'), bandWidth
-            );
-            var barGap = seriesModel.get('barGap');
-            var barCategoryGap = seriesModel.get('barCategoryGap');
-
             // Caution: In a single coordinate system, these barGrid attributes
             // 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;
             if (barWidth && !stacks[stackId].width) {
                 barWidth = Math.min(columnsOnAxis.remainedWidth, barWidth);
                 stacks[stackId].width = barWidth;
                 columnsOnAxis.remainedWidth -= barWidth;
             }
 
+            var barMaxWidth = seriesInfo.barMaxWidth;
             barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+            var barGap = seriesInfo.barGap;
             (barGap != null) && (columnsOnAxis.gap = barGap);
+            var barCategoryGap = seriesInfo.barCategoryGap;
             (barCategoryGap != null) && (columnsOnAxis.categoryGap = barCategoryGap);
         });
 
@@ -247,5 +309,7 @@ define(function(require) {
         }, this);
     }
 
+    barLayoutGrid.getLayoutOnAxis = getLayoutOnAxis;
+
     return barLayoutGrid;
 });
\ No newline at end of file

test/custom.html

@@ -33,6 +33,8 @@
         <div class="chart" id="errorChart-cartesian-bar"></div>
         <h1>Error Chart (Cartesian Scatter)</h1>
         <div class="chart" id="errorChart-cartesian-scatter"></div>
+        <h1>Bar layout</h1>
+        <div class="chart" id="errorChart-cartesian-bar-multi"></div>
         <h1>Cartesian Polygon</h1>
         <!--<div class="chart" id="cartesian-polygon"></div>-->
 
@@ -475,8 +477,6 @@
 
 
 
-
-
         <script>
             require([
                 'echarts',
@@ -632,6 +632,139 @@
 
 
 
+        <script>
+            require([
+                'echarts',
+                'echarts/chart/custom',
+                'echarts/chart/bar',
+                'echarts/component/legend',
+                'echarts/component/tooltip',
+                'echarts/component/visualMap',
+                'echarts/component/dataZoom',
+                'zrender/vml/vml'
+            ], function (echarts) {
+
+                var xAxisData = [];
+                var customData = [];
+                var legendData = [];
+                var dataList = [];
+
+                var yearCount = 9;
+                legendData.push('trend');
+                for (var i = 0; i < yearCount; i++) {
+                    legendData.push((2010 + i) + '');
+                    dataList.push([]);
+                };
+
+                var dataCount = 30;
+                for (var i = 0; i < dataCount; i++) {
+                    var val = Math.random() * 1000;
+                    xAxisData.push('category' + i);
+                    var customVal = [i];
+                    customData.push(customVal);
+
+                    var data = dataList[0];
+                    for (var j = 0; j < dataList.length; j++) {
+                        var value = j === 0
+                            ? echarts.number.round(val, 2)
+                            : echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2);
+                        dataList[j].push(value);
+                        customVal.push(value);
+                    }
+                }
+
+                function renderItem(params, api) {
+                    var xValue = api.value(0);
+                    var barLayout = api.barLayout({
+                        barGap: '30%', barCategoryGap: '20%', count: yearCount
+                    });
+
+                    var points = [];
+                    for (var i = 0; i < yearCount; i++) {
+                        var point = api.coord([xValue, api.value(1 + i)]);
+                        point[0] += barLayout[i].offsetCenter;
+                        point[1] -= 20;
+                        points.push(point);
+                    }
+                    var style = api.style({
+                        stroke: api.visual('color'),
+                        fill: null
+                    });
+
+                    return {
+                        type: 'polyline',
+                        shape: {
+                            points: points
+                        },
+                        style: style
+                    };
+                }
+
+                var barItemStyle = {
+                    normal: {
+                        opacity: 0.5
+                    }
+                };
+
+                var option = {
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    legend: {
+                        data: legendData
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        start: 50,
+                        end: 70
+                    }, {
+                        type: 'inside',
+                        start: 50,
+                        end: 70
+                    }],
+                    xAxis: {
+                        data: xAxisData
+                    },
+                    yAxis: {},
+                    series: [{
+                        type: 'custom',
+                        name: 'trend',
+                        renderItem: renderItem,
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 2
+                            }
+                        },
+                        encode: {
+                            x: 0,
+                            y: [1, 2, 3]
+                        },
+                        data: customData,
+                        z: 100
+                    }].concat(echarts.util.map(dataList, function (data, index) {
+                        return {
+                            type: 'bar',
+                            name: legendData[index + 1],
+                            itemStyle: {
+                                normal: {
+                                    opacity: 0.5
+                                }
+                            },
+                            data: data
+                        };
+                    }))
+                };
+
+                testHelper.createChart(echarts, 'errorChart-cartesian-bar-multi', option);
+            });
+        </script>
+
+
+
+
+
+
+
 
 
         <script>