dynamicData3.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="esl.js"></script>
  6. <script src="config.js"></script>
  7. <script src="lib/jquery.min.js"></script>
  8. <script src="lib/facePrint.js"></script>
  9. <meta name="viewport" content="width=device-width, initial-scale=1" />
  10. <link rel="stylesheet" href="reset.css">
  11. </head>
  12. <body>
  13. <style>
  14. body {
  15. }
  16. .chart {
  17. height: 300px;
  18. }
  19. h1 {
  20. font-size: 18px;
  21. line-height: 40px;
  22. text-align: center;
  23. background: #ddd;
  24. }
  25. </style>
  26. <h1>Check animation effect when xAxis.data has empty value.</h1>
  27. <div class="chart" id="main1"></div>
  28. <h1>Check animation effect when xAxis.data has number value and same value.</h1>
  29. <div class="chart" id="main2"></div>
  30. <script>
  31. require([
  32. 'echarts',
  33. 'echarts/chart/bar',
  34. 'echarts/chart/parallel',
  35. 'echarts/component/grid',
  36. 'echarts/component/legend',
  37. 'echarts/component/tooltip',
  38. 'echarts/component/toolbox',
  39. 'echarts/component/visualMap'
  40. ], function (echarts) {
  41. var main = document.getElementById('main1');
  42. if (!main) {
  43. return;
  44. }
  45. var myChart = echarts.init(main);
  46. setInterval(function () {
  47. var option = {
  48. xAxis: {
  49. data: ['1', '4', '2', '', '5', '', '', '']
  50. },
  51. yAxis: [
  52. {
  53. type: 'value',
  54. max: 100
  55. }
  56. ],
  57. series: {
  58. type: 'bar',
  59. data: []
  60. }
  61. };
  62. var seriesData = [];
  63. for (var i = 0; i < option.xAxis.data.length; i++) {
  64. option.series.data[i] = Math.random() * 80;
  65. }
  66. myChart.setOption(option);
  67. }, 1000);
  68. });
  69. </script>
  70. <script>
  71. require([
  72. 'echarts',
  73. 'echarts/chart/bar',
  74. 'echarts/chart/parallel',
  75. 'echarts/component/grid',
  76. 'echarts/component/legend',
  77. 'echarts/component/tooltip',
  78. 'echarts/component/toolbox',
  79. 'echarts/component/visualMap'
  80. ], function (echarts) {
  81. var main = document.getElementById('main2');
  82. if (!main) {
  83. return;
  84. }
  85. var myChart = echarts.init(main);
  86. setInterval(function () {
  87. var option = {
  88. xAxis: {
  89. data: [1, 3, 2, 5, 5, 6, 5, 7]
  90. },
  91. yAxis: [
  92. {
  93. type: 'value',
  94. max: 100
  95. }
  96. ],
  97. series: {
  98. type: 'bar',
  99. data: []
  100. }
  101. };
  102. var seriesData = [];
  103. for (var i = 0; i < option.xAxis.data.length; i++) {
  104. option.series.data[i] = Math.random() * 80;
  105. }
  106. myChart.setOption(option);
  107. }, 1000);
  108. });
  109. </script>
  110. </body>
  111. </html>