fix#11236 integrate the stack/tile toolbox feature into one toggle button

e7af6731 · alex2wong · e43f1be4 · e7af6731 · e7af6731
隐藏空白更改
内联并排

Showing with 126 addition and 2 deletion

src/component/toolbox/feature/MagicType.js src/component/toolbox/feature/MagicType.js +6 -2

test/toolbox-stack.html test/toolbox-stack.html +120 -0

未找到文件。
--- 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);
        }
    },
@@ -99,7 +103,7 @@ var seriesOptGenreator = {
        if (seriesType === 'line' || seriesType === 'bar') {
            return zrUtil.merge({
                id: seriesId,
-                stack: ''
+                stack: seriesModel.get('stack') === '__ec_magicType_stack__' ? '' : '__ec_magicType_stack__'
            }, model.get('option.tiled') || {}, 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,
+        #main {
+            width: 80%;
+            height: 100%;
+            margin: 0;
+        }
+
+        #main {
+            background: #fff;
+        }
+    </style>
+    <div id="main"></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,
+                    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>
+</body>
+
+</html>
\ No newline at end of file