themeRiver2.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />
  5. <script src="esl.js"></script>
  6. <script src="config.js"></script>
  7. <script src="lib/jquery.min.js"></script>
  8. <link ref="stylesheet" href="reset.css">
  9. </head>
  10. <body>
  11. <style>
  12. #main {
  13. width: 100%;
  14. height: 100%;
  15. }
  16. </style>
  17. <div id="main"><div>
  18. <script>
  19. require([
  20. 'echarts',
  21. 'echarts/chart/themeRiver',
  22. 'echarts/component/legend',
  23. 'echarts/component/singleAxis',
  24. 'echarts/component/tooltip',
  25. // 'echarts/component/axis'
  26. ], function (echarts) {
  27. var chart = echarts.init(document.getElementById('main'), null, {
  28. renderer: 'canvas'
  29. });
  30. window.onresize = function () {
  31. chart.resize();
  32. };
  33. // From https://github.com/jsundram/streamgraph.js/blob/master/examples/data/lastfm.js
  34. var rawData = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  35. [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0],
  36. [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0],
  37. [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1],
  38. [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0],
  39. [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0],
  40. [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0],
  41. [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0],
  42. [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0],
  43. [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0],
  44. [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7],
  45. [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9],
  46. [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  47. [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0],
  48. [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12],
  49. [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5],
  50. [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1],
  51. [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8],
  52. [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1],
  53. [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17],
  54. [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8],
  55. [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0],
  56. [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1],
  57. //[0, 1, 7, 6, 0, 1, 15, 0, 1, 2, 0, 3, 1, 0, 9, 0, 1, 25, 0, 72]];
  58. [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]];
  59. var labels = ['The Sea and Cake',
  60. 'Andrew Bird',
  61. 'Laura Veirs',
  62. 'Brian Eno',
  63. 'Christopher Willits',
  64. 'Wilco',
  65. 'Edgar Meyer',
  66. 'B\xc3\xa9la Fleck',
  67. 'Fleet Foxes',
  68. 'Kings of Convenience',
  69. 'Brett Dennen',
  70. 'Psapp',
  71. 'The Bad Plus',
  72. 'Feist',
  73. 'Battles',
  74. 'Avishai Cohen',
  75. 'Rachael Yamagata',
  76. 'Norah Jones',
  77. 'B\xc3\xa9la Fleck and the Flecktones',
  78. 'Joshua Redman'
  79. ];
  80. var data = [];
  81. for (var i = 0; i < rawData.length; i++) {
  82. for (var j = 0; j < rawData[i].length; j++) {
  83. var label = labels[i];
  84. data.push([
  85. j, rawData[i][j], label
  86. ]);
  87. }
  88. }
  89. option = {
  90. singleAxis: {
  91. max: 'dataMax'
  92. },
  93. series: [{
  94. type: 'themeRiver',
  95. data: data,
  96. label: {
  97. normal: {
  98. show: false
  99. }
  100. }
  101. }]
  102. };
  103. chart.setOption(option);
  104. });
  105. </script>
  106. </body>
  107. </html>