用 Echarts 無(wú)論是制作省份地圖還是區(qū)縣域地圖，他們的步驟都是基本一樣的。
下面本人就 利用 Echarts 簡(jiǎn)單繪制省份地圖 的步驟與經(jīng)驗(yàn)與各位分享一下。
1、準(zhǔn)備工作
-
1.1 下載js靜態(tài)文件
- china.js
- echarts.min.js
-
1.2 下載中國(guó)各省、各市的 .json 文件
- 省份或者地區(qū)的數(shù)據(jù)文件
- 網(wǎng)址：https://github.com/longwosion/geojson-map-china
2、獲取省份數(shù)據(jù)
-
2.1 第一步：獲取XX省的地圖 json 數(shù)據(jù)文件（例：江蘇?。?2.json）（是以各省身份證號(hào) 前兩位 開(kāi)頭命名的）
-
2.2 第二步：將獲取到的JSON文件 轉(zhuǎn)換 成 js 文件（江蘇?。簀iangsu.js）
-
2.3 第三步：修改轉(zhuǎn)換后的 js 文件
打開(kāi) js 文件
-
添加變量 xx (這里本人命名習(xí)慣為 ：（省名拼音小寫(xiě)+Json）例：jiangsuJson)
var xx = (js文件)
例：
var jiangsuJson = {"type": "FeatureCollection",
"cp":[118.8586,32.915],
........
}- image
保存 js 文件
3、在Django中編寫(xiě) 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>中寫(xiě)入作圖代碼
<div>
{# 標(biāo)記 #}
<a class="btn btn-success btn-sm" >江蘇省</a>
{# 地圖代碼開(kāi)始 #}
<div class="x-body">
<div id="main" style="width: 949.75px;height:450px;"></div>
</div>
<script type="text/javascript"> echarts.registerMap('jiangsu', jiangsuJson); // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption({
series: [{
type: 'map',
map: 'jiangsu'
}]
});
</script>
</div>
-
3.3 運(yùn)行代碼，就能看到結(jié)果
4、總結(jié)
其實(shí)只要按照本人上面的做法，就可以制作出來(lái)，本人繪不是很復(fù)雜，如果各位對(duì)省圖還需要其他顯示功能，大家不妨訪問(wèn) Echarts 的官網(wǎng)。
