用 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 的官網。