123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="esl.js"></script>
- <script src="config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <link ref="stylesheet" href="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, {
- renderer: 'canvas'
- });
- 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>
|