| |
| <!-- |
| 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> |
| <link ref="stylesheet" href="lib/reset.css"> |
| </head> |
| <body> |
| <style> |
| #main { |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <div id="main"><div> |
| <script> |
| |
| require([ |
| 'echarts' |
| // 'echarts/chart/themeRiver', |
| // 'echarts/component/legend', |
| // 'echarts/component/singleAxis', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/axis' |
| ], function (echarts) { |
| |
| var chart = echarts.init(document.getElementById('main'), null, { |
| |
| }); |
| |
| window.onresize = function () { |
| chart.resize(); |
| }; |
| |
| |
| // From https://github.com/jsundram/streamgraph.js/blob/master/examples/data/lastfm.js |
| var rawData = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
| [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0], |
| [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0], |
| [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1], |
| [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0], |
| [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0], |
| [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0], |
| [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0], |
| [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0], |
| [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0], |
| [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7], |
| [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9], |
| [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
| [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0], |
| [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12], |
| [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5], |
| [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1], |
| [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8], |
| [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1], |
| [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17], |
| [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8], |
| [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0], |
| [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1], |
| //[0, 1, 7, 6, 0, 1, 15, 0, 1, 2, 0, 3, 1, 0, 9, 0, 1, 25, 0, 72]]; |
| [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]]; |
| |
| var labels = ['The Sea and Cake', |
| 'Andrew Bird', |
| 'Laura Veirs', |
| 'Brian Eno', |
| 'Christopher Willits', |
| 'Wilco', |
| 'Edgar Meyer', |
| 'B\xc3\xa9la Fleck', |
| 'Fleet Foxes', |
| 'Kings of Convenience', |
| 'Brett Dennen', |
| 'Psapp', |
| 'The Bad Plus', |
| 'Feist', |
| 'Battles', |
| 'Avishai Cohen', |
| 'Rachael Yamagata', |
| 'Norah Jones', |
| 'B\xc3\xa9la Fleck and the Flecktones', |
| 'Joshua Redman' |
| ]; |
| |
| var data = []; |
| for (var i = 0; i < rawData.length; i++) { |
| for (var j = 0; j < rawData[i].length; j++) { |
| var label = labels[i]; |
| data.push([ |
| j, rawData[i][j], label |
| ]); |
| } |
| } |
| |
| option = { |
| singleAxis: { |
| max: 'dataMax' |
| }, |
| series: [{ |
| type: 'themeRiver', |
| data: data, |
| label: { |
| normal: { |
| show: false |
| } |
| } |
| }] |
| }; |
| |
| chart.setOption(option); |
| |
| }); |
| </script> |
| </body> |
| </html> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
