mix.html 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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. }
  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. });
  27. chart.setOption({
  28. tooltip : {
  29. trigger: 'axis'
  30. },
  31. legend: {
  32. data:['蒸发量','降水量','平均温度']
  33. },
  34. xAxis : [
  35. {
  36. type : 'category',
  37. data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  38. }
  39. ],
  40. yAxis : [
  41. {
  42. type : 'value',
  43. name : '水量',
  44. axisLabel : {
  45. formatter: '{value} ml'
  46. }
  47. },
  48. {
  49. type : 'value',
  50. name : '温度',
  51. position: 'right',
  52. axisLabel : {
  53. formatter: '{value} °C'
  54. }
  55. }
  56. ],
  57. series : [
  58. {
  59. name:'蒸发量',
  60. type:'bar',
  61. 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]
  62. },
  63. {
  64. name:'降水量',
  65. type:'bar',
  66. 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]
  67. },
  68. {
  69. name:'平均温度',
  70. type:'line',
  71. yAxisIndex: 1,
  72. 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]
  73. }
  74. ]
  75. });
  76. })
  77. </script>
  78. </body>
  79. </html>