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

用 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 在中引入 js 文件

<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/jiangsu.js"></script>

3.2 在中写入作图代码

<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 的官网。

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

使用echarts简单制作省份地图
引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址引入对应省份的js文件可以在http://echarts.baidu.co ...
mapboxgl+echarts 简单制作专题地图
mapboxgl+echarts 简单制作专题地图实现效果思路实现过程全部代码实现效果思路 1.引用mapboxgl脚本库及样式库与echart脚本库. 2.准备专题数据,此处我们使用模拟 ...
html css省市区,利用echarts实现全国热点活跃地区地图代码
特效描述:利用echarts实现全国热点活跃地区地图代码.利用echarts实现全国热点活跃地区地图代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 // 路径配置 re ...
怎么用python画省份，区域地图，中国地图
由于在最近科研的过程中,需要画各种图,所以就写了一个工具包,专门用来画省份,区域,整个中国的图,废话不多说,先放github链接,长得好看的兄弟记得给我点个赞,下面只是简单的展示几个案例,更详细的使用 ...
使用echarts简单制作中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
ECharts3D地图简单制作省份地图
效果如下: <!DOCTYPE html> <html> <head> <title>广东省3D</title> <m ...
利用Echarts快速制作表格
1.Echarts图表库 https://echarts.apache.org/zh/index.html 2. 下载echarts.min.js 3. Echarts图表库里面有快速入门,代码可以直 ...
利用python简单制作一个图云
只需要提供文本数据以及轮廓照片即可 stopword为wordcloud自带的关键参数,可去掉不想要的文字 import jieba from matplotlib import pyplot as ...

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

1、准备工作

2、获取省份数据

3、在Django中编写 HTML 代码

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

最新文章

热门文章