经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
Javascript Echarts空气质量地图效果详解
来源:jb51  时间:2021/10/11 9:22:33  对本文有异议

我们要先把空气质量数据和地图数据结合起来:

地图数据有name这个属性

在这里插入图片描述

我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来:

  1. var airData = [
  2. { name: '北京', value: 39.92 },
  3. { name: '天津', value: 39.13 },
  4. { name: '上海', value: 31.22 },
  5. { name: '重庆', value: 66 },
  6. { name: '河北', value: 147 },
  7. { name: '河南', value: 113 },
  8. { name: '云南', value: 25.04 },
  9. { name: '辽宁', value: 50 },
  10. { name: '黑龙江', value: 114 },
  11. { name: '湖南', value: 175 },
  12. { name: '安徽', value: 117 },
  13. { name: '山东', value: 92 },
  14. { name: '新疆', value: 84 },
  15. { name: '江苏', value: 67 },
  16. { name: '浙江', value: 84 },
  17. { name: '江西', value: 96 },
  18. { name: '湖北', value: 273 },
  19. { name: '广西', value: 59 },
  20. { name: '甘肃', value: 99 },
  21. { name: '山西', value: 39 },
  22. { name: '内蒙古', value: 58 },
  23. { name: '陕西', value: 61 },
  24. { name: '吉林', value: 51 },
  25. { name: '福建', value: 29 },
  26. { name: '贵州', value: 71 },
  27. { name: '广东', value: 38 },
  28. { name: '青海', value: 57 },
  29. { name: '西藏', value: 24 },
  30. { name: '四川', value: 58 },
  31. { name: '宁夏', value: 52 },
  32. { name: '海南', value: 54 },
  33. { name: '台湾', value: 88 },
  34. { name: '香港', value: 66 },
  35. { name: '澳门', value: 77 },
  36. { name: '南海诸岛', value: 55 }
  37. ]

接着我们要把空气质量数据配置到series中去:

在这里插入图片描述

最后再做一些效果配置:

在这里插入图片描述

在这里插入图片描述

完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>地图-不同城市空气质量</title>
  8. <script src="./lib/echarts.js"></script>
  9. <script src="./lib/axios.js"></script>
  10. </head>
  11. <body>
  12. <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  13. <script>
  14. var airData = [
  15. { name: '北京', value: 39.92 },
  16. { name: '天津', value: 39.13 },
  17. { name: '上海', value: 31.22 },
  18. { name: '重庆', value: 66 },
  19. { name: '河北', value: 147 },
  20. { name: '河南', value: 113 },
  21. { name: '云南', value: 25.04 },
  22. { name: '辽宁', value: 50 },
  23. { name: '黑龙江', value: 114 },
  24. { name: '湖南', value: 175 },
  25. { name: '安徽', value: 117 },
  26. { name: '山东', value: 92 },
  27. { name: '新疆', value: 84 },
  28. { name: '江苏', value: 67 },
  29. { name: '浙江', value: 84 },
  30. { name: '江西', value: 96 },
  31. { name: '湖北', value: 273 },
  32. { name: '广西', value: 59 },
  33. { name: '甘肃', value: 99 },
  34. { name: '山西', value: 39 },
  35. { name: '内蒙古', value: 58 },
  36. { name: '陕西', value: 61 },
  37. { name: '吉林', value: 51 },
  38. { name: '福建', value: 29 },
  39. { name: '贵州', value: 71 },
  40. { name: '广东', value: 38 },
  41. { name: '青海', value: 57 },
  42. { name: '西藏', value: 24 },
  43. { name: '四川', value: 58 },
  44. { name: '宁夏', value: 52 },
  45. { name: '海南', value: 54 },
  46. { name: '台湾', value: 88 },
  47. { name: '香港', value: 66 },
  48. { name: '澳门', value: 77 },
  49. { name: '南海诸岛', value: 55 }
  50. ]
  51. var myCharts = echarts.init(document.querySelector('div'))
  52. axios.get('./json/map/china.json').then(res => {
  53. console.log(res.data)
  54. echarts.registerMap('china', res.data)
  55. var option = {
  56. geo: {
  57. type: 'map',
  58. map: 'china',
  59. roam: true,
  60. label: {
  61. show: true
  62. }
  63. },
  64. series: [
  65. {
  66. data: airData, // 空气质量数据
  67. geoIndex: 0, // 将空气质量数据和第0个geo配置关联在一起
  68. type: 'map'
  69. }
  70. ],
  71. visualMap: {
  72. min: 0, // 最小值
  73. max: 300, // 最大值
  74. inRange: {
  75. color: ['pink', 'blue'] // 控制左下角和地图渐变颜色
  76. },
  77. calculable: true // 控制左下角滑块
  78. }
  79. }
  80. myCharts.setOption(option)
  81. })
  82. </script>
  83. </body>
  84. </html>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号