mix.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="esl.js"></script>
  5. <script src="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. }
  14. </style>
  15. <div id="main"></div>
  16. <script>
  17. require([
  18. 'echarts',
  19. 'echarts/chart/line',
  20. 'echarts/chart/bar',
  21. 'echarts/component/legend',
  22. 'echarts/component/grid',
  23. 'echarts/component/tooltip'
  24. ], function (echarts) {
  25. var chart = echarts.init(document.getElementById('main'), null, {
  26. renderer: 'canvas'
  27. });
  28. chart.setOption({
  29. tooltip : {
  30. trigger: 'axis'
  31. },
  32. legend: {
  33. data:['蒸发量','降水量','平均温度']
  34. },
  35. xAxis : [
  36. {
  37. type : 'category',
  38. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  39. }
  40. ],
  41. yAxis : [
  42. {
  43. type : 'value',
  44. name : '水量',
  45. axisLabel : {
  46. formatter: '{value} ml'
  47. }
  48. },
  49. {
  50. type : 'value',
  51. name : '温度',
  52. position: 'right',
  53. axisLabel : {
  54. formatter: '{value} °C'
  55. }
  56. }
  57. ],
  58. series : [
  59. {
  60. name:'蒸发量',
  61. type:'bar',
  62. data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
  63. },
  64. {
  65. name:'降水量',
  66. type:'bar',
  67. data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
  68. },
  69. {
  70. name:'平均温度',
  71. type:'line',
  72. yAxisIndex: 1,
  73. data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
  74. }
  75. ]
  76. });
  77. })
  78. </script>
  79. </body>
  80. </html>