echarts.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>第一个 ECharts 实例</title>
  6. <!-- 引入 echarts.js -->
  7. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  8. </head>
  9. <body>
  10. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  11. <div id="main" style="width: 600px;height:400px;"></div>
  12. <script type="text/javascript">
  13. // 基于准备好的dom,初始化echarts实例
  14. var myChart = echarts.init(document.getElementById('main'));
  15. // 指定图表的配置项和数据
  16. var option = {
  17. xAxis: {
  18. type: 'category',
  19. data: ['2025年6月', '2025年7月', '2025年8月', '2025年9月', '2025年10月']
  20. },
  21. yAxis: {
  22. type: 'value'
  23. },
  24. series: [
  25. {
  26. name: '居民消费价格指数',
  27. data: [100.1, 100.0, 99.6, 99.7, 100.2],
  28. type: 'line'
  29. },
  30. {
  31. name: '食品烟酒类居民消费价格指数',
  32. data: [100.1, 99.2, 97.5, 97.4, 98.4],
  33. type: 'line'
  34. },
  35. {
  36. name: '衣着类居民消费价格指数',
  37. data: [101.6, 101.7, 101.8, 101.7, 101.7],
  38. type: 'line'
  39. },
  40. {
  41. name: '居住类居民消费价格指数',
  42. data: [100.1, 100.1, 100.1, 100.1, 100.1],
  43. type: 'line'
  44. },
  45. {
  46. name: '生活用品及服务类居民消费价格指数',
  47. data: [100.7, 101.2, 101.8, 102.2, 101.9],
  48. type: 'line'
  49. },
  50. {
  51. name: '交通通信类居民消费价格指数',
  52. data: [96.3, 96.9, 97.6, 98.0, 98.5],
  53. type: 'line'
  54. },
  55. {
  56. name: '教育文化娱乐类居民消费价格指数',
  57. data: [101.0, 100.9, 101.0, 100.8, 100.9],
  58. type: 'line'
  59. },
  60. {
  61. name: '医疗保健类居民消费价格指数',
  62. data: [100.4, 100.5, 100.9, 101.1, 101.4],
  63. type: 'line'
  64. },
  65. {
  66. name: '其他用品及服务类居民消费价格指数',
  67. data: [108.1, 108.0, 108.6, 109.9, 112.8],
  68. type: 'line'
  69. },
  70. {
  71. name: '非食品居民消费价格指数',
  72. data: [100.1, 100.3, 100.5, 100.7, 100.9],
  73. type: 'line'
  74. },
  75. {
  76. name: '消费品居民消费价格指数',
  77. data: [99.8, 99.6, 99.0, 99.2, 99.8],
  78. type: 'line'
  79. },
  80. {
  81. name: '服务居民消费价格指数',
  82. data: [100.5, 100.5, 100.6, 100.6, 100.8],
  83. type: 'line'
  84. },
  85. {
  86. name: '不包括食品和能源居民消费价格指数',
  87. data: [100.7, 100.8, 100.9, 101.0, 101.2],
  88. type: 'line'
  89. }
  90. ]
  91. }
  92. // 使用刚指定的配置项和数据显示图表。
  93. myChart.setOption(option);
  94. </script>
  95. </body>
  96. </html>