test(sankey): test sankey vertical layout with big data

sikazhang · Sep 4, 2018 · f1194b0 · f1194b0
1 parent b66fd1b
commit f1194b0
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/test/sankey-vertical-energy.html b/test/sankey-vertical-energy.html
@@ -0,0 +1,101 @@
+
+<!--
+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>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                /*border: 1px solid #000;*/
+            }
+        </style>
+        <div id="main"><div>
+        <script>
+            require([
+                'echarts'
+                // 'echarts/chart/sankey',
+                // 'echarts/component/tooltip'
+                ], function (echarts) {
+
+                    var chart = echarts.init(document.getElementById('main'), null, {
+
+                    });
+
+                    window.onresize = function () {
+                        chart.resize();
+                    };
+
+                    chart.on('click', function (params) {
+                        console.log(params, params.data);
+                    });
+
+
+                    $.getJSON('./data/energy.json')
+                    .done(function(data) {
+
+                        data.nodes[0].itemStyle = {
+                            normal: {
+                                color: 'red'
+                            }
+                        };
+                        chart.setOption({
+                            tooltip: {
+                                trigger: 'item',
+                                triggerOn: 'mousemove'
+                            },
+                            animation: false,
+                            series: [
+                                {
+                                    type: 'sankey',
+                                    bottom: '18%',
+                                    left: '10%',
+                                    layout:'none',
+                                    focusNodeAdjacency: 'inEdges',
+                                    orient: 'vertical',
+                                    label: {
+                                        position: 'bottom',
+                                        rotate: -90,
+                                        verticalAlign: 'middle',
+                                        align: 'left'
+                                    },
+                                    data: data.nodes,
+                                    links: data.links,
+                                    lineStyle: {
+                                        normal: {
+                                            color: 'source',
+                                            curveness: 0.5
+                                        }
+                                    }
+                                }
+                            ]
+                        });
+                    });
+                });
+        </script>
+    </body>
+</html>