Merge pull request #11367 from alex2wong/fix-11236

Fix 11236 integrate stack/tile button into one toggle button in toolbox

Merge pull request #11367 from alex2wong/fix-11236
Fix 11236 integrate stack/tile button into one toggle button in toolbox
1578a373 · Yi Shen · GitHub · 02b55aa5 · e1bd8059 · 1578a373
3 changed file
--- a/src/component/toolbox/ToolboxView.js
+++ b/src/component/toolbox/ToolboxView.js
@@ -63,6 +63,11 @@ export default echarts.extendComponentView({
            var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
            var feature;

+            // FIX#11236, merge feature title from MagicType newOption. TODO: consider seriesIndex ?
+            if (payload && payload.newOption !== undefined && payload.newOption.series.length > 0) {
+                featureOpt.title = payload.newOption.series[0].title;
+            }
+
            if (featureName && !oldName) { // Create
                if (isUserFeatureName(featureName)) {
                    feature = {

--- a/src/component/toolbox/feature/MagicType.js
+++ b/src/component/toolbox/feature/MagicType.js
@@ -88,10 +88,14 @@ var seriesOptGenreator = {
        }
    },
    'stack': function (seriesType, seriesId, seriesModel, model) {
+        var isStack = seriesModel.get('stack') === '__ec_magicType_stack__';
        if (seriesType === 'line' || seriesType === 'bar') {
+            model.setIconStatus('stack', isStack ? 'normal' : 'emphasis');
            return zrUtil.merge({
                id: seriesId,
-                stack: '__ec_magicType_stack__'
+                stack: isStack ? '' : '__ec_magicType_stack__',
+                // FIXME: also need to change tooltip for stack/unstack state.
+                title: isStack ? zrUtil.clone(magicTypeLang.title) : zrUtil.merge({ stack: magicTypeLang.title.tiled }, magicTypeLang.title)
            }, model.get('option.stack') || {}, true);
        }
    },

--- a/test/toolbox-stack.html
+++ b/test/toolbox-stack.html
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script src="lib/esl.js"></script>
+    <script src="lib/config.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+
+<body>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+        }
+
+        #main {
+            width: 90%;
+            height: 45%;
+            margin: 0;
+            background: #fff;
+        }
+        #nodata {
+            width: 90%;
+            height: 45%;
+            margin: 0;
+            background: #fff;
+        }
+    </style>
+    <div id="main"></div>
+    <div id="nodata"></div>
+    <script>
+
+        require([
+            'echarts'
+            // 'echarts/chart/bar',
+            // 'echarts/component/polar',
+            // 'zrender/vml/vml'
+        ], function (echarts) {
+
+            var chart = echarts.init(document.getElementById('main'), null, {
+                // renderer: 'svg'
+            });
+            option = {
+                color: ['#3398DB', '#CA2121'],
+                legend: {
+                    show: true,
+                    data: ['Bar', 'Bar2'],
+                },
+                tooltip: {
+                    show: true
+                },
+                toolbox: {
+                    show: true,
+                    right: '5%',
+                    feature: {
+                        saveAsImage: {
+                            show: true,
+                            title: 'Save As Image'
+                        },
+                        dataView: {
+                            show: true,
+                            title: 'Data View'
+                        },
+                        magicType : {show: true, type: ['line', 'bar', 'stack']},
+                    },
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis : [
+                    {
+                        type : 'category',
+                        data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis : [
+                    {
+                        type : 'value'
+                    }
+                ],
+                series : [
+                    {
+                        name:'Bar',
+                        type:'bar',
+                        data:[10, 52, 200, 334, 390, 330, 220]
+                    },
+                    {
+                        name:'Bar2',
+                        type:'bar',
+                        stack: 'stackTest',
+                        data:[120, 132, 101, 134, 90, 230, 210]
+                    }
+                ]
+            };
+
+            chart.setOption(option, true);
+
+        });
+    </script>
+    <script>
+
+        require([
+            'echarts'
+            // 'echarts/chart/bar',
+            // 'echarts/component/polar',
+            // 'zrender/vml/vml'
+        ], function (echarts) {
+
+            var chart = echarts.init(document.getElementById('nodata'), null, {
+                // renderer: 'svg'
+            });
+            option = {
+                color: ['#3398DB', '#CA2121'],
+                legend: {
+                    show: true,
+                    data: [],
+                },
+                tooltip: {
+                    show: true
+                },
+                toolbox: {
+                    show: true,
+                    right: '5%',
+                    feature: {
+                        saveAsImage: {
+                            show: true,
+                            title: 'Save As Image'
+                        },
+                        dataView: {
+                            show: true,
+                            title: 'Data View'
+                        },
+                        magicType : {show: true, type: ['line', 'bar', 'stack']},
+                    },
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis : [
+                    {
+                        type : 'category',
+                        data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis : [
+                    {
+                        type : 'value'
+                    }
+                ],
+                series : [
+                ]
+            };
+
+            chart.setOption(option, true);
+
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file