首页 > 网页制作  > 前端开发

利用 Echarts 简单制作省份或区域地图步骤

admin 前端开发 2021-04-26 16:44:12  
后台-系统设置-扩展变量-手机广告位-内容正文底部

用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的。

下面本人就 利用Echarts 简单绘制省份地图 的步骤与经验与各位分享一下。

1、准备工作

  • 1.1 下载js静态文件

    • china.js
    • echarts.min.js

  • 1.2 下载中国各省、各市的 .json 文件

    • 省份或者地区的数据文件
    • 网址:https://github.com/longwosion/geojson-map-china

2、获取省份数据

  • 2.1 第一步:获取XX省的地图 json 数据文件(例:江苏省:32.json)(是以各省身份证号 前两位 开头命名的)

  • 2.2 第二步:将获取到的JSON文件 转换 成 js 文件(江苏省:jiangsu.js)

  • 2.3 第三步:修改转换后的 js 文件

    • 打开 js 文件
    • 添加变量 xx (这里本人命名习惯为 :(省名拼音小写+Json)例:jiangsuJson)
      • var xx = (js文件)
      • 例:
          var jiangsuJson = {"type": "FeatureCollection",
        "cp":[118.8586,32.915],
        ........
        }

    • 保存 js 文件

3、在Django中编写 HTML 代码

  • 3.1 在<head> </head>中引入 js 文件

<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/jiangsu.js"></script>
  • 3.2 在<body></body>中写入作图代码

<div>
    {# 标记 #}
     <a class="btn btn-success btn-sm" >江苏省</a>
    {# 地图代码开始 #}
     <div class="x-body">
         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
         <div id="main" style="width: 949.75px;height:450px;"></div>
         </div>
                    
         <script type="text/javascript">
               echarts.registerMap('jiangsu', jiangsuJson);

               // 基于准备好的dom,初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));

               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption({
                   series: [{
                       type: 'map',
                       map: 'jiangsu'
                       }]
                });
           </script>                    
</div>
  • 3.3 运行代码,就能看到结果

4、总结

其实只要按照本人上面的做法,就可以制作出来,本人绘不是很复杂,如果各位对省图还需要其他显示功能,大家不妨访问 Echarts 的官网。

文章来源:https://www.cnblogs.com/xcbb/archive/2021/04/26/14704462.html

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/2f1f48f0c68674b14c702bfd91a3dc5d.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码