diff --git a/src/component/toolbox.js b/src/component/toolbox.js index f2fcaba7f10aeb535d97ea8494bf2612b629846d..b84286521f8a7dc7f5ae7d1427ebd640418ffe2a 100644 --- a/src/component/toolbox.js +++ b/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 diff --git a/src/component/toolbox/ToolboxModel.js b/src/component/toolbox/ToolboxModel.js index 347d3e5c56b863012aa978d30a478edd5fbab1ab..4b94b3f8da35fa7d62fba109cf722a11db342363 100644 --- a/src/component/toolbox/ToolboxModel.js +++ b/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 diff --git a/src/component/toolbox/ToolboxView.js b/src/component/toolbox/ToolboxView.js index 47f0f0d1536aade3e9b2743bc5e41185bfd3d717..b057c2bdb8506d33b958715e420664c2df7691ea 100644 --- a/src/component/toolbox/ToolboxView.js +++ b/src/component/toolbox/ToolboxView.js @@ -19,36 +19,51 @@ 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 path = graphic.makePath( - featureOpt.icon, { - style: normalStyle.getItemStyle(), - hoverStyle: hoverStyle.getItemStyle(), - rectHover: true - }, { - x: -itemSize / 2, - y: -itemSize / 2, - width: itemSize, - height: itemSize - }, 'center' - ); - - graphic.setHoverStyle(path); - - group.add(path); - path.on('click', zrUtil.bind( - feature.onclick, feature, ecModel, api - )); + 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( + icon, { + style: normalStyle, + hoverStyle: hoverStyle, + rectHover: true + }, { + x: -itemSize / 2, + y: -itemSize / 2, + width: itemSize, + height: itemSize + }, 'center' + ); + + graphic.setHoverStyle(path); + + group.add(path); + path.on('click', zrUtil.bind( + feature.onclick, feature, ecModel, api, iconName + )); + }); }); listComponentHelper.layout(group, toolboxModel, api); diff --git a/src/component/toolbox/feature/DataView.js b/src/component/toolbox/feature/DataView.js new file mode 100644 index 0000000000000000000000000000000000000000..cd7277f4260c2f724b7788e546777fa05086205b --- /dev/null +++ b/src/component/toolbox/feature/DataView.js @@ -0,0 +1,3 @@ +define(function (require) { + +}); \ No newline at end of file diff --git a/src/component/toolbox/feature/DataZoom.js b/src/component/toolbox/feature/DataZoom.js new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/component/toolbox/feature/MagicType.js b/src/component/toolbox/feature/MagicType.js new file mode 100644 index 0000000000000000000000000000000000000000..b0726b3333c3c9d47970ad2d0e9f2c3a4eee2fcc --- /dev/null +++ b/src/component/toolbox/feature/MagicType.js @@ -0,0 +1,50 @@ +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 diff --git a/src/component/toolbox/feature/SaveAsImage.js b/src/component/toolbox/feature/SaveAsImage.js index 26a73418c1d55e3f40c29ed033327a5a55e09d02..ef121c125247d964db6365b5c0c00d1afc74ed76 100644 --- a/src/component/toolbox/feature/SaveAsImage.js +++ b/src/component/toolbox/feature/SaveAsImage.js @@ -1,29 +1,32 @@ 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(