timeline-dynamic-series.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. </head>
  8. <body>
  9. <style>
  10. html, body, #main {
  11. width: 100%;
  12. height: 100%;
  13. margin: 0;
  14. }
  15. #main {
  16. background: #fff;
  17. }
  18. </style>
  19. <div id="main"></div>
  20. <script>
  21. // markLine: {
  22. // symbol: ['arrow','none'],
  23. // symbolSize: [4, 2],
  24. // itemStyle: {
  25. // normal: {
  26. // lineStyle: {color:'orange'},
  27. // barBorderColor:'orange',
  28. // label: {
  29. // position:'left',
  30. // formatter:function(params){
  31. // return Math.round(params.value);
  32. // },
  33. // textStyle:{color:'orange'}
  34. // }
  35. // }
  36. // },
  37. // data: [{type: 'average', name: '平均值'}]
  38. // }
  39. require([
  40. 'echarts'
  41. // 'echarts/chart/bar',
  42. // 'echarts/chart/pie',
  43. // 'echarts/component/title',
  44. // 'echarts/component/legend',
  45. // 'echarts/component/grid',
  46. // 'echarts/component/tooltip',
  47. // 'echarts/component/timeline'
  48. ], function (echarts) {
  49. var chart = echarts.init(document.getElementById('main'), null, {
  50. });
  51. var option = {
  52. baseOption: {
  53. timeline: {
  54. // y: 0,
  55. axisType: 'category',
  56. // realtime: false,
  57. // loop: false,
  58. autoPlay: false,
  59. // currentIndex: 2,
  60. playInterval: 1000,
  61. // controlStyle: {
  62. // position: 'left'
  63. // },
  64. data: [
  65. '2002-01-01','2003-01-01'
  66. ],
  67. label: {
  68. formatter : function(s) {
  69. return (new Date(s)).getFullYear();
  70. }
  71. }
  72. },
  73. title: {
  74. subtext: '数据来自国家统计局'
  75. },
  76. tooltip: {
  77. trigger:'axis',
  78. axisPointer: {
  79. type: 'shadow'
  80. }
  81. },
  82. calculable: true,
  83. grid: {
  84. top:80, bottom: 100
  85. },
  86. xAxis: {
  87. 'type':'category',
  88. 'axisLabel':{'interval':0},
  89. 'data':[
  90. '北京','\n天津','河北','\n山西'
  91. ],
  92. splitLine: {show: false}
  93. },
  94. yAxis: [
  95. {
  96. type: 'value',
  97. name: 'GDP(亿元)'
  98. }
  99. ],
  100. series: [
  101. ]
  102. },
  103. options: [
  104. {
  105. series: [
  106. {id: 'a', type: 'bar', data: [12, 33, 44, 55]}
  107. ]
  108. },
  109. {
  110. series : [
  111. {id: 'a', type: 'bar', data: [22, 33, 44, 55]},
  112. {id: 'b', type: 'bar', data: [55, 66, 77, 88]}
  113. ]
  114. }
  115. ]
  116. };
  117. chart.setOption(option);
  118. window.onresize = chart.resize;
  119. });
  120. </script>
  121. </body>
  122. </html>