WIP(colorBy): treemap colorBy WIP

74535c83 · Ovilia · 39342248 · 74535c83 · 74535c83
隐藏空白更改
内联并排

Showing with 109 addition and 4 deletion

src/chart/treemap/TreemapSeries.ts src/chart/treemap/TreemapSeries.ts +9 -4

test/treemap-colorBy.html test/treemap-colorBy.html +100 -0

未找到文件。
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -123,14 +123,16 @@ export interface TreemapSeriesVisualOption {
 }

 export interface TreemapSeriesLevelOption extends TreemapSeriesVisualOption,
-    TreemapStateOption, StatesOptionMixin<TreemapStateOption, ExtraStateOption> {
+    TreemapStateOption, StatesOptionMixin<TreemapStateOption, ExtraStateOption>,
+    TreemapColorByMixin {

    color?: ColorString[] | 'none',
    decal?: DecalObject[] | 'none'
 }

 export interface TreemapSeriesNodeItemOption extends TreemapSeriesVisualOption,
-    TreemapStateOption, StatesOptionMixin<TreemapStateOption, ExtraStateOption> {
+    TreemapStateOption, StatesOptionMixin<TreemapStateOption, ExtraStateOption>,
+    TreemapColorByMixin {
    id?: OptionId
    name?: OptionName

@@ -324,7 +326,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
        colorAlpha: null,           // Array. Specify color alpha range of each level, like [0.2, 0.8]
        colorSaturation: null,      // Array. Specify color saturation of each level, like [0.2, 0.5]
        // colorMappingBy: 'index',    // 'value' or 'index' or 'id'.
-        colorBy: 'dataIndex',
+        colorBy: 'inherit',
        visibleMin: 10,             // If area less than this threshold (unit: pixel^2), node will not
                                    // be rendered. Only works when sort is 'asc' or 'desc'.
        childrenVisibleMin: null,   // If area of a node less than this threshold (unit: pixel^2),
@@ -332,7 +334,10 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
                                    // Why grandchildren? If not grandchildren but children,
                                    // some siblings show children and some not,
                                    // the appearance may be mess and not consistent,
-        levels: []                  // Each item: {
+        levels: [{
+            colorBy: 'childIndex'
+        }]
+                                    // Each item: {
                                    //     visibleMin, itemStyle, visualDimension, label
                                    // }
        // data: {

--- a/test/treemap-colorBy.html
+++ b/test/treemap-colorBy.html
+<!DOCTYPE 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">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                series: [{
+                    type: 'treemap',
+                    data: [{
+                        name: 'nodeA',            // First tree
+                        value: 10,
+                        // children: [{
+                        //     name: 'nodeAa',       // First leaf of first tree
+                        //     value: 4
+                        // }, {
+                        //     name: 'nodeAb',       // Second leaf of first tree
+                        //     value: 6
+                        // }]
+                    }, {
+                        name: 'nodeB',            // Second tree
+                        value: 20,
+                        // children: [{
+                        //     name: 'nodeBa',       // Son of first tree
+                        //     value: 20,
+                        //     children: [{
+                        //         name: 'nodeBa1',  // Granson of first tree
+                        //         value: 5
+                        //     }, {
+                        //         name: 'nodeBa2',  // Granson of first tree
+                        //         value: 15
+                        //     }]
+                        // }]
+                    }]
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Default colorBy (level0: "childIndex", others: "inherit")',
+                    'nodeA* should be blue;',
+                    'nodeB* should be green.'
+                ],
+                option: option,
+                height: 500
+            });
+        });
+        </script>
+
+
+    </body>
+</html>
+