Echarts绘制各省地图

时间:2024-03-13 15:56:38
Echarts 绘制全国地图

近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下。

在页面引入 jquery.js h和echarts.js  关键是需要 地图的json数据,有js的更好。这里提供china.json下载 :

链接:https://pan.baidu.com/s/1LawcD8JQkHkd0OjpFG0jKQ 密码:phrt

全国以及各地市的数据这里下载  https://download.csdn.net/download/cc_wake/10569191

  1. <%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>地图</title>
  6. <script src="js/jquery-3.3.1.min.js"></script>
  7. <script src="js/echarts.js"></script>
  8. </head>
  9. <body>
  10. <div id="china_map" style="width:800px;height:800px;">hello</div>
  11. <script type="text/javascript">
  12. $.get('js/henan.json',function(data){//这里是json转js,如果是js文件就不需要这一步
  13. echarts.registerMap('henan',data);//设置地图
  14. var myChart = echarts.init(document.getElementById('china_map'));//初始化
  15. myChart.setOption({
  16. title: {
  17. text: '河南地图'
  18. },
  19. series: [{
  20. type: 'map',//类型必须是map
  21. map: 'henan'//注意这里的值需要和echarts.registerMap('henan',data);一致
  22. }]
  23. });
  24. myChart.on('click', function(params){
  25. alert(1);
  26. console.log(params);//此处写点击事件内容
  27. });//点击事件,此事件还可以用到柱状图等其他地图
  28. });
  29. </script>
  30. </body>
  31. </html>

刚开始一脸蒙蔽, 弄了好久才明白,你要是理解不了也没关系,把我的代码直接拷走就行。改一下js引入地址。

 

Echarts绘制各省地图

该文章系转载,出自: https://blog.csdn.net/cc_wake/article/details/81257826