themeRiver.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1" />
  5. <!-- <script src="lib/esl.js"></script> -->
  6. <script src="lib/esl.js"></script>
  7. <script src="lib/config.js"></script>
  8. <script src="lib/jquery.min.js"></script>
  9. <link ref="stylesheet" href="lib/reset.css">
  10. </head>
  11. <body>
  12. <style>
  13. #main {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. <div id="main"><div>
  19. <script>
  20. require([
  21. 'echarts'
  22. // 'echarts/src/echarts',
  23. // 'echarts/src/chart/themeRiver',
  24. // 'echarts/src/component/legend',
  25. // 'echarts/src/component/singleAxis',
  26. // 'echarts/src/component/tooltip',
  27. ], function (echarts) {
  28. var chart = echarts.init(document.getElementById('main'));
  29. window.onresize = function () {
  30. chart.resize();
  31. };
  32. chart.setOption({
  33. tooltip: {
  34. trigger: 'axis'
  35. },
  36. legend: {
  37. data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
  38. },
  39. singleAxis: {
  40. // top: '8%',
  41. axisTick: {},
  42. axisLabel: {},
  43. type: 'time',
  44. // position: 'top',
  45. splitLine: {
  46. show: true,
  47. lineStyle: {
  48. type: 'dashed',
  49. opacity: 0.2
  50. }
  51. }
  52. },
  53. series: [
  54. {
  55. type: 'themeRiver',
  56. itemStyle: {
  57. emphasis: {
  58. shadowBlur: 20,
  59. shadowColor: 'rgba(0, 0, 0, 0.8)'
  60. }
  61. },
  62. data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],
  63. // ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
  64. ['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],
  65. ['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],
  66. ['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],
  67. ['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],
  68. // ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
  69. ['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],
  70. ['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],
  71. ['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],
  72. ['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],
  73. ['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],
  74. ['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],
  75. ['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],
  76. ['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],
  77. ['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],
  78. ['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],
  79. ['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],
  80. ['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],
  81. // ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
  82. // ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
  83. // ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
  84. // ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
  85. ['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],
  86. ['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],
  87. ['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],
  88. ['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],
  89. ['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],
  90. ['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],
  91. ['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],
  92. ['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],
  93. ['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],
  94. ['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],
  95. ['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],
  96. ['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],
  97. ['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],
  98. ['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],
  99. ['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],
  100. ['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],
  101. ['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],
  102. ['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],
  103. ['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]
  104. }
  105. ]
  106. });
  107. });
  108. </script>
  109. </body>
  110. </html>