在pycharm中使用Echarts绘制单个省份的地图（以内蒙古自治区为例）

最新推荐文章于 2024-08-05 05:00:00 发布

w_rllalalala

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量1.7k

点赞数 4

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/w_rllalalala/article/details/128126065

版权

今天来复盘一下，如何使用Echarts绘制单个省份的地图，昨天在网上搜了很多教程，代码大差不差，但是运行的时候总出不来，经过自己的琢磨，里面也有很多需要注意的点，今天就以自身的问题来针对几个问题说一下，希望可以帮到有需要的同学。
1.在head中需要引入三个链接，注意，我直接拿来网上的代码来跑，没有改链接发现跑不通，（可能有的使用了本地链接），在这里我使用了线上链接。
第一个链接是echatrs的一个链接，使用echarts绘图都需要引入，我是在echarts官网直接复制拿来的，具体操作见下图。在这里插入图片描述
按照下图步骤复制js
2.这里需要引进所画省份的Json文件，就拿我画内蒙古地图来说，我需要加入内蒙古地图的Json.
从阿里云添加链接描述进入获取Json文件，点最下面的下载按钮讲将Json文件保存下来，注意这里保存的是Json文件，在代码里我们使用的是js文件，所以需要将格式转化成js格式，转化为Js格式之后将这个文件放在编写代码的根目录下。在这里插入图片描述
3.在js文件中加入“var nmgJson=”，可以根据你所画的省份名字自行命名。一定要注意是在js文件中加入，我一开始在json文件中加，一直出错。
下面就是直接在Json文件加的，就报错了，切记不要直接加！要转换格式！！！在这里插入图片描述
这里要对应写正确，要不然就出不来地图。nmgJson名称取自nei.js里的var nmgJson变量名。
然后剩下的代码根据自己的需求写啦，我只是写了一个最基本的，绘制内蒙古的地区，只包含12个盟市，没有添加数据。完整代码奉上。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts图形插件使用</title>

</head>

<body>
<div id="main" style="width:1000px;height:1000px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/infographic.js"></script>
<script type="text/JavaScript" src="./nei.js"></script>
<script type="text/javascript">
        echarts.registerMap('nei', nmgJson);//nmgJson名称取自nei.js里的var  nmgJson变量名


        var chart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '内蒙古自治区地图',
                left: 'center'
                },
            tooltip:{
                trigger: 'item'
                },
            series: [{
                type: 'map',
                map: 'nei',
                label:{
                    normal:{
                        show:true
                        },
                        emphasis:{
                            show:true
                        }
                    },
                itemStyle:{
                    normal:{
                        areaColor: '#ffff00',
                        borderColor: '#000000'
                        },
                    }
            }]
        };
        chart.setOption(option);
</script>
</body>
</html>