用 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=https://www.cnblogs.com/xcbb/archive/2021/04/26/"/static/js/echarts.min.js"></script> <script type="text/javascript" src=https://www.cnblogs.com/xcbb/archive/2021/04/26/"/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.uj5u.com/qiye/280527.html
標籤：其他
上一篇：演算法學習：二分法從入門到精通