test/tree-legend.html - master - githubmirror/echarts

test/tree-legend.html
298 строк13 KB
susiwen8
feat(tree): `tree` focus supports `relative`
11 май 2022, 06:48
11 май 2022, 06:48a44c7f5

<!--
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/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                padding: 0;
                margin: 0;
                height: 100%;
            }
        </style>
        <div id="main"></div>
        <script>
            require([
                'echarts'
                ], function (echarts) {
                    var chart = echarts.init(document.getElementById('main'), null, {

                    });

                    window.onresize = function () {
                        chart.resize();
                    };

                    var data1 = {
                        "name": "flare",
                        "children": [
                            {
                                "name": "data",
                                "children": [
                                    {
                                         "name": "converters",
                                         "children": [
                                          {"name": "Converters", "value": 721},
                                          {"name": "DelimitedTextConverter", "value": 4294}
                                         ]
                                    },
                                    {
                                        "name": "DataUtil",
                                        "value": 3322
                                    }
                                ]
                            },
                            {
                                "name": "display",
                                "children": [
                                    {"name": "DirtySprite", "value": 8833},
                                    {"name": "LineSprite", "value": 1732},
                                    {"name": "RectSprite", "value": 3623}
                               ]
                            },
                            {
                                "name": "flex",
                                "children": [
                                    {"name": "FlareVis", "value": 4116}
                                ]
                            },
                            {
                               "name": "query",
                               "children": [
                                {"name": "AggregateExpression", "value": 1616},
                                {"name": "And", "value": 1027},
                                {"name": "Arithmetic", "value": 3891},
                                {"name": "Average", "value": 891},
                                {"name": "BinaryExpression", "value": 2893},
                                {"name": "Comparison", "value": 5103},
                                {"name": "CompositeExpression", "value": 3677},
                                {"name": "Count", "value": 781},
                                {"name": "DateUtil", "value": 4141},
                                {"name": "Distinct", "value": 933},
                                {"name": "Expression", "value": 5130},
                                {"name": "ExpressionIterator", "value": 3617},
                                {"name": "Fn", "value": 3240},
                                {"name": "If", "value": 2732},
                                {"name": "IsA", "value": 2039},
                                {"name": "Literal", "value": 1214},
                                {"name": "Match", "value": 3748},
                                {"name": "Maximum", "value": 843},
                                {
                                 "name": "methods",
                                 "children": [
                                  {"name": "add", "value": 593},
                                  {"name": "and", "value": 330},
                                  {"name": "average", "value": 287},
                                  {"name": "count", "value": 277},
                                  {"name": "distinct", "value": 292},
                                  {"name": "div", "value": 595},
                                  {"name": "eq", "value": 594},
                                  {"name": "fn", "value": 460},
                                  {"name": "gt", "value": 603},
                                  {"name": "gte", "value": 625},
                                  {"name": "iff", "value": 748},
                                  {"name": "isa", "value": 461},
                                  {"name": "lt", "value": 597},
                                  {"name": "lte", "value": 619},
                                  {"name": "max", "value": 283},
                                  {"name": "min", "value": 283},
                                  {"name": "mod", "value": 591},
                                  {"name": "mul", "value": 603},
                                  {"name": "neq", "value": 599},
                                  {"name": "not", "value": 386},
                                  {"name": "or", "value": 323},
                                  {"name": "orderby", "value": 307},
                                  {"name": "range", "value": 772},
                                  {"name": "select", "value": 296},
                                  {"name": "stddev", "value": 363},
                                  {"name": "sub", "value": 600},
                                  {"name": "sum", "value": 280},
                                  {"name": "update", "value": 307},
                                  {"name": "variance", "value": 335},
                                  {"name": "where", "value": 299},
                                  {"name": "xor", "value": 354},
                                  {"name": "_", "value": 264}
                                 ]
                                },
                                {"name": "Minimum", "value": 843},
                                {"name": "Not", "value": 1554},
                                {"name": "Or", "value": 970},
                                {"name": "Query", "value": 13896},
                                {"name": "Range", "value": 1594},
                                {"name": "StringUtil", "value": 4130},
                                {"name": "Sum", "value": 791},
                                {"name": "Variable", "value": 1124},
                                {"name": "Variance", "value": 1876},
                                {"name": "Xor", "value": 1101}
                               ]
                              },
                            {
                               "name": "scale",
                               "children": [
                                {"name": "IScaleMap", "value": 2105},
                                {"name": "LinearScale", "value": 1316},
                                {"name": "LogScale", "value": 3151},
                                {"name": "OrdinalScale", "value": 3770},
                                {"name": "QuantileScale", "value": 2435},
                                {"name": "QuantitativeScale", "value": 4839},
                                {"name": "RootScale", "value": 1756},
                                {"name": "Scale", "value": 4268},
                                {"name": "ScaleType", "value": 1821},
                                {"name": "TimeScale", "value": 5833}
                               ]
                            }
                         ]
                    };

                    var data2 = {
                        "name": "flare",
                        "children": [
                            {
                                "name": "flex",
                                "children": [
                                    {"name": "FlareVis", "value": 4116}
                                ]
                            },
                            {
                                "name": "scale",
                                "children": [
                                    {"name": "IScaleMap", "value": 2105},
                                    {"name": "LinearScale", "value": 1316},
                                    {"name": "LogScale", "value": 3151},
                                    {"name": "OrdinalScale", "value": 3770},
                                    {"name": "QuantileScale", "value": 2435},
                                    {"name": "QuantitativeScale", "value": 4839},
                                    {"name": "RootScale", "value": 1756},
                                    {"name": "Scale", "value": 4268},
                                    {"name": "ScaleType", "value": 1821},
                                    {"name": "TimeScale", "value": 5833}
                               ]
                            },
                            {
                                "name": "display",
                                "children": [
                                    {"name": "DirtySprite", "value": 8833}
                               ]
                            }
                        ]
                    };

                    chart.setOption({

                        tooltip: {
                            trigger: 'item',
                            triggerOn: 'mousemove'
                        },

                        legend: {
                            top: '2%',
                            left: '3%',
                            orient: 'vertical',
                            data: [{
                                name: 'tree1'
                            } ,
                            {
                                name: 'tree2',
                            }]
                        },

                        series:[
                            {
                                type: 'tree',

                                name: 'tree1',

                                data: [data1],

                                top: '5%',
                                left: '7%',
                                bottom: '2%',
                                right: '60%',

                                symbolSize: 7,
                                emphasis: {
                                    focus: 'relative'
                                },
                                label: {
                                    position: 'left',
                                    verticalAlign: 'middle',
                                    align: 'right'
                                },

                                leaves: {
                                    label: {
                                        position: 'right',
                                        verticalAlign: 'middle',
                                        align: 'left'
                                    }
                                },

                                expandAndCollapse: true,

                                animationDuration: 550,
                                animationDurationUpdate: 750

                            },
                            {
                                type: 'tree',
                                name: 'tree2',
                                data: [data2],

                                top: '20%',
                                left: '70%',
                                bottom: '22%',
                                right: '8%',
                                center: ['80%', '10%'],
                                zoom: 1.2,
                                symbolSize: 7,
                                orient: 'RL',

                                label: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                },

                                leaves: {
                                    label: {
                                            position: 'left',
                                            verticalAlign: 'middle',
                                            align: 'right'
                                    }
                                },

                                expandAndCollapse: true,

                                animationDuration: 550,
                                animationDurationUpdate: 750
                            }
                        ]
                    });
                });
        </script>
    </body>
</html>