Add visual coding

src/chart/bar/BarView.js

@@ -30,7 +30,7 @@ define(function (require) {
                     style: {
                         fill: dataItem
                                 .withPrefix('itemStyle.normal.')
-                                .get('color') || 'black',
+                                .get('color'),
                         stroke: dataItem.get('borderColor')
                     }
                 });

src/coord/cartesian/Grid.js

 /**
  * Grid is a region which contains at most 4 cartesian systems
+ *
+ * TODO Axis Scale
  */
 define(function(require, factory) {
 

src/echarts.js

@@ -9,6 +9,12 @@ define(function (require) {
 
     var zrender = require('zrender');
 
+    /**
+     * @inner
+     */
+    function getSeriesId(series, seriesIndex) {
+        return series.type + '_' + (series.name ||  seriesIndex);
+    }
     /**
      * @module echarts~ECharts
      */
@@ -77,6 +83,8 @@ define(function (require) {
 
             this._coordinateSystem.update(ecModel, this._extensionAPI);
 
+            this._doVisualCoding(ecModel);
+
             this._doLayout(ecModel);
 
             this._doRender(ecModel);
@@ -92,16 +100,10 @@ define(function (require) {
             this._doRender(ecModel);
         },
 
-        _doLayout: function (model) {
-            zrUtil.each(this._layouts, function (layout) {
-                layout.run(model);
-            });
-        },
-
         _prepareCharts: function (ecModel) {
             var chartUsedMap = {};
             zrUtil.each(ecModel.get('series'), function (series, idx) {
-                var id = series.type + '_' + (series.name || idx);
+                var id = getSeriesId(series, idx);
                 chartUsedMap[id] = true;
 
                 var chart = this._chartsMap[id];
@@ -160,23 +162,57 @@ define(function (require) {
             }, this);
         },
 
+        /**
+         * Processor data in each series
+         *
+         * @param {module:echarts/model/Global} ecModel
+         * @private
+         */
         _processData: function (ecModel) {
-            zrUtil.each(processorList, function (processor) {
+            zrUtil.each(dataProcessorFuncs, function (processor) {
                 processor(ecModel);
             });
         },
 
-        _doRender: function (optionModel, stateModel) {
+        /**
+         * Layout before each chart render there series after visual coding and data processing
+         *
+         * @param {module:echarts/model/Global} ecModel
+         * @private
+         */
+        _doLayout: function (ecModel) {
+            zrUtil.each(this._layouts, function (layout) {
+                layout.run(ecModel);
+            });
+        },
+
+        /**
+         * Code visual infomation from data after data processing
+         *
+         * @param {module:echarts/model/Global} ecModel
+         * @private
+         */
+        _doVisualCoding: function (ecModel) {
+            zrUtil.each(visualCodingFuncs, function (visualCoding) {
+                visualCoding(ecModel);
+            });
+        },
+
+        /**
+         * Render each chart and component
+         *
+         */
+        _doRender: function (ecModel, stateModel) {
             var api = this._extensionAPI;
             // Render all components
             zrUtil.each(this._components, function (component) {
-                component.render(optionModel, stateModel, api);
+                component.render(ecModel, stateModel, api);
             }, this);
             // Render all charts
-            optionModel.eachSeries(function (seriesModel, idx) {
-                var id = seriesModel.get('type') + '_' + (seriesModel.get('name') || idx);
+            ecModel.eachSeries(function (seriesModel, idx) {
+                var id = getSeriesId(seriesModel.option, idx);
                 var chart = this._chartsMap[id];
-                var group = chart.render(seriesModel, optionModel, api);
+                var group = chart.render(seriesModel, ecModel, api);
                 this._zr.add(group);
             }, this);
             // TODO
@@ -196,10 +232,12 @@ define(function (require) {
     };
 
 
-    var processorList = [];
+    var dataProcessorFuncs = [];
 
     var layoutClasses = [];
 
+    var visualCodingFuncs = [];
+
     /**
      * @module echarts
      */
@@ -209,26 +247,40 @@ define(function (require) {
             return new ECharts(dom, theme);
         },
 
-        registerProcessor: function (processor) {
-            if (zrUtil.indexOf(processorList, processor) < 0) {
-                processorList.push(processor);
+        /**
+         * @param {Function}
+         */
+        registerProcessor: function (processorFunc) {
+            if (zrUtil.indexOf(dataProcessorFuncs, processorFunc) < 0) {
+                dataProcessorFuncs.push(processorFunc);
             }
         },
 
+        /**
+         * @param {string} type
+         * @param {*} CoordinateSystem
+         */
         registerCoordinateSystem: function (type, CoordinateSystem) {
             CoordinateSystemManager.register(type, CoordinateSystem);
         },
 
+        /**
+         * @param {*} layout
+         */
         registerLayout: function (layout) {
             if (zrUtil.indexOf(layoutClasses, layout) < 0) {
                 layoutClasses.push(layout);
             }
         },
 
-        registerVisualCoding: function () {
 
+        registerVisualCoding: function (visualCodingFunc) {
+            visualCodingFuncs.push(visualCodingFunc);
         }
     };
 
+
+    echarts.registerVisualCoding(require('./visual/defaultColor'));
+
     return echarts;
 });
\ No newline at end of file

src/model/Global.js

@@ -12,6 +12,8 @@ define(function (require) {
     var SeriesModel = require('./Series');
     var ComponentModel = require('./Component');
 
+    var globalDefault = require('./globalDefault');
+
     /**
      * @alias module:echarts/model/Global
      *
@@ -51,9 +53,33 @@ define(function (require) {
              */
             this._theme = new Model(theme || {});
 
+            this._mergeTheme(option, theme);
+
+            zrUtil.merge(option, globalDefault, false);
+
             this.mergeOption(option);
         },
 
+        /**
+         * @private
+         */
+        _mergeTheme: function (option, theme) {
+            for (var name in theme) {
+                // 如果有 component model 则把具体的 merge 逻辑交给该 model 处理
+                if (! ComponentModel.has[name]) {
+                    if (typeof theme[name] === 'object') {
+                        zrUtil.merge(option[name], theme[name]);
+                    }
+                    else {
+                        option[name] = theme[name];
+                    }
+                }
+            }
+        },
+
+        /**
+         * @protected
+         */
         mergeOption: function (newOption) {
 
             var option = this.option;
@@ -81,7 +107,7 @@ define(function (require) {
             var components = this._components;
             for (var name in newOption) {
                 var componentOption = newOption[name];
-                // 如果不存在对应的 model 则直接 merge
+                // 如果不存在对应的 component model 则直接 merge
                 if (! ComponentModel.has(name)) {
                     if (typeof componentOption === 'object') {
                         componentOption = zrUtil.merge(option[name] || {}, componentOption);
@@ -126,10 +152,16 @@ define(function (require) {
             }
         },
 
+        /**
+         * @return {module:echarts/model/Model}
+         */
         getTheme: function () {
             return this._theme;
         },
 
+        /**
+         * @return {module:echarts/model/Component}
+         */
         getComponent: function (type, idx) {
             var list = this._components[type];
             if (list) {
@@ -145,6 +177,10 @@ define(function (require) {
             return this._seriesMap[name];
         },
 
+        /**
+         * @param {string} type
+         * @return {Array.<module:echarts/model/Series>}
+         */
         getSeriesByType: function (type) {
             return zrUtil.filter(this._series, function (series) {
                 return series.type === type;

src/model/globalDefault.js

+define({
+    // 全图默认背景
+    backgroundColor: 'rgba(0,0,0,0)',
+
+    // 默认色板
+    color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
+            '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
+            '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+            '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
+
+    EVENT: {
+        // -------全局通用
+        REFRESH: 'refresh',
+        RESTORE: 'restore',
+        RESIZE: 'resize',
+        CLICK: 'click',
+        DBLCLICK: 'dblclick',
+        HOVER: 'hover',
+        MOUSEOUT: 'mouseout',
+        // -------业务交互逻辑
+        DATA_CHANGED: 'dataChanged',
+        DATA_ZOOM: 'dataZoom',
+        DATA_RANGE: 'dataRange',
+        DATA_RANGE_SELECTED: 'dataRangeSelected',
+        DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
+        LEGEND_SELECTED: 'legendSelected',
+        LEGEND_HOVERLINK: 'legendHoverLink',
+        MAP_SELECTED: 'mapSelected',
+        PIE_SELECTED: 'pieSelected',
+        MAGIC_TYPE_CHANGED: 'magicTypeChanged',
+        DATA_VIEW_CHANGED: 'dataViewChanged',
+        TIMELINE_CHANGED: 'timelineChanged',
+        MAP_ROAM: 'mapRoam',
+        FORCE_LAYOUT_END: 'forceLayoutEnd',
+        // -------内部通信
+        TOOLTIP_HOVER: 'tooltipHover',
+        TOOLTIP_IN_GRID: 'tooltipInGrid',
+        TOOLTIP_OUT_GRID: 'tooltipOutGrid',
+        ROAMCONTROLLER: 'roamController'
+    },
+    // 主题，默认标志图形类型列表
+    symbolList: [
+        'circle', 'rectangle', 'triangle', 'diamond',
+        'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
+    ],
+    animation: true,                // 过渡动画是否开启
+    addDataAnimation: true,         // 动态数据接口是否开启动画效果
+    animationThreshold: 2000,       // 动画元素阀值，产生的图形原素超过2000不出动画
+    animationDuration: 2000,        // 过渡动画参数：进入
+    animationDurationUpdate: 500,   // 过渡动画参数：更新
+    animationEasing: 'ExponentialOut'    //BounceOut
+});
\ No newline at end of file

src/visual/defaultColor.js

+define(function (require) {
+
+    return function (ecModel) {
+        ecModel.eachSeries(function (seriesModel, idx) {
+            var colorList = ecModel.get('color');
+            seriesModel.visual = seriesModel.visual || {};
+            seriesModel.visual.color = seriesModel.get('itemStyle.normal.color') || colorList[idx];
+        });
+    }
+});
\ No newline at end of file

src/visual/legendColor.js

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