Toolbox

src/component/toolbox.js

@@ -4,4 +4,5 @@ define(function (require) {
     require('./toolbox/ToolboxView');
 
     require('./toolbox/feature/SaveAsImage');
+    require('./toolbox/feature/MagicType');
 });
\ No newline at end of file

src/component/toolbox/ToolboxModel.js

@@ -12,7 +12,7 @@ define(function (require) {
 
             zrUtil.each(this.option.feature, function (featureOpt, featureName) {
                 var Feature = featureManager.get(featureName);
-                zrUtil.merge(featureOpt, Feature.defaultOption);
+                Feature && zrUtil.merge(featureOpt, Feature.defaultOption);
             });
         },
 
@@ -43,10 +43,19 @@ define(function (require) {
 
             itemGap: 10,
 
-            itemSize: 15,
+            itemSize: 18,
 
-            showTitle: true
+            showTitle: true,
 
+            iconStyle: {
+                normal: {
+                    borderColor: '#000',
+                    color: 'none'
+                },
+                emphasis: {
+                    borderColor: '#3E98C5'
+                }
+            }
             // textStyle: {},
 
             // feature

src/component/toolbox/ToolboxView.js

@@ -19,21 +19,35 @@ define(function (require) {
             }
 
             var itemSize = +toolboxModel.get('itemSize');
+
             zrUtil.each(toolboxModel.get('feature'), function (featureOpt, featureName) {
                 var Feature = featureManager.get(featureName);
+                if (!Feature) {
+                    return;
+                }
+
                 var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
-                var feature = new Feature(featureOpt);
+                var feature = new Feature(featureModel);
                 if (!featureModel.get('show')) {
                     return;
                 }
+
                 var iconStyleModel = featureModel.getModel('iconStyle');
-                var normalStyle = iconStyleModel.getModel('normal');
-                var hoverStyle = iconStyleModel.getModel('emphasis');
+                var normalStyle = iconStyleModel.getModel('normal').getItemStyle();
+                var hoverStyle = iconStyleModel.getModel('emphasis').getItemStyle();
+
+                var icons = feature.getIcons ? feature.getIcons() : featureModel.get('icon');
+                if (typeof icons === 'string') {
+                    var icon = icons;
+                    icons = {};
+                    icons[featureName] = icon;
+                }
 
+                zrUtil.each(icons, function (icon, iconName) {
                     var path = graphic.makePath(
-                    featureOpt.icon, {
-                        style: normalStyle.getItemStyle(),
-                        hoverStyle: hoverStyle.getItemStyle(),
+                        icon, {
+                            style: normalStyle,
+                            hoverStyle: hoverStyle,
                             rectHover: true
                         }, {
                             x: -itemSize / 2,
@@ -47,9 +61,10 @@ define(function (require) {
 
                     group.add(path);
                     path.on('click', zrUtil.bind(
-                    feature.onclick, feature, ecModel, api
+                        feature.onclick, feature, ecModel, api, iconName
                     ));
                 });
+            });
 
             listComponentHelper.layout(group, toolboxModel, api);
             // Render background after group is layout

src/component/toolbox/feature/DataView.js

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

src/component/toolbox/feature/MagicType.js

+define(function(require) {
+    'use strict';
+
+    var zrUtil = require('zrender/core/util');
+
+    function MagicType(model) {
+        this.model = model;
+    }
+
+    MagicType.defaultOption = {
+        show: true,
+        // Icon group
+        icon: {
+            line: 'M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
+            bar: 'M8.5,22.9h6.9V50H8.5V22.9z M26.7,12.9h6.9v37h-6.9V12.9z M45,2h6.9v48H45V2z M3.3,58H57',
+            stack: 'M8.2,38.4l-8.4,4.1l30.6,15.3L60,42.5l-8.1-4.1l-21.5,11L8.2,38.4z M51.9,30l-8.1,4.2l-13.4,6.9l-13.9-6.9L8.2,30l-8.4,4.2l8.4,4.2l22.2,11l21.5-11l8.1-4.2L51.9,30z M51.9,21.7l-8.1,4.2L35.7,30l-5.3,2.8L24.9,30l-8.4-4.1l-8.3-4.2l-8.4,4.2L8.2,30l8.3,4.2l13.9,6.9l13.4-6.9l8.1-4.2l8.1-4.1L51.9,21.7zM30.4,2.2L-0.2,17.5l8.4,4.1l8.3,4.2l8.4,4.2l5.5,2.7l5.3-2.7l8.1-4.2l8.1-4.2l8.1-4.1L30.4,2.2z',
+            tiled: 'M2.3,2.2h22.8V25H2.3V2.2z M35,2.2h22.8V25H35V2.2zM2.3,35h22.8v22.8H2.3V35z M35,35h22.8v22.8H35V35z'
+        },
+        title: {
+            line: '切换为折线图',
+            bar: '切换为柱状图',
+            stack: '切换为堆叠',
+            tiled: '切换为平铺'
+        }
+    };
+
+    var proto = MagicType.prototype;
+
+    proto.getIcons = function () {
+        var model = this.model;
+        var availableIcons = model.get('icon');
+        var icons = {};
+        zrUtil.each(model.get('option'), function (option, type) {
+            if (availableIcons[type]) {
+                icons[type] = availableIcons[type];
+            }
+        });
+        return icons;
+    };
+
+    proto.onclick = function (ecModel, api, type) {
+        if (type === 'stack') {
+            // var seriesModels = 
+        }
+    }
+
+    require('../featureManager').register('magicType', MagicType);
+
+    return MagicType;
+});
\ No newline at end of file

src/component/toolbox/feature/SaveAsImage.js

 define(function (require) {
 
-    function SaveAsImage (option) {
-        this.option = option;
+    function SaveAsImage (model) {
+        this.model = model;
     };
 
     SaveAsImage.defaultOption = {
-        icon: 'M57.2,23.2L55.8,21.8L46,31.6L46,9.4L44,9.4L44,31.3L34.3,21.5L32.8,23L45.1,35.3zM55.1,38.4L34.5,38.4L34.5,31.9L32.5,31.9L32.5,40.4L57.1,40.4L57.1,31.9L55.1,31.9z',
         show: true,
+        icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6\
+            M29.2,45.1L29.2,0',
         title: '保存为图片',
         type: 'png',
-        iconStyle: {
-            normal: {
-                borderColor: '#000',
-                color: 'none'
-            },
-            emphasis: {
-                borderColor: '#3E98C5'
-            }
-        }
+        backgroundColor: '#fff',
+        name: ''
     };
 
     var proto = SaveAsImage.prototype;
 
     proto.onclick = function (ecModel, api) {
-        window.open(api.getConnectedDataURL());
+        var title = ecModel.get('title.0.text') || 'echarts';
+        var $a = document.createElement('a');
+        var type = this.model.get('type', true) || 'png';
+        $a.download = title + '.' + type;
+        $a.target = '_blank';
+        $a.href = api.getConnectedDataURL({
+            type: type,
+            backgroundColor: this.model.get('backgroundColor')
+        });
+        $a.click();
     };
 
     require('../featureManager').register(