1. 配置Json文件
1.1 獲得每個省份的json數據
-
打開 阿里云數據可視化平臺 主頁。
-
在搜索框中輸入所需省份。
-
將json文件下載到本地。
1.2 將各省份的json數據進行融合
- 打開 geojson.io 主頁
- 點擊 open，上傳剛剛下載的 json 文件，對多個省份不斷上傳
- 保存得到的整合省份json文件
2. 地區數據可視化
2.1 布局基本代碼
- 打開 Echarts使用手冊 拷貝以下代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入剛剛下載的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
- 將所框部分代碼刪除
- 引入以下 js
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
4. 將代碼拷貝到以下圖片位置中
myChart.showLoading();$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('HK', geoJson);myChart.setOption((option = {title: {// 圖的名稱text: '',},visualMap: {// 數據的范圍min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,// 區域顏色inRange: {color: ['#E1F5FE', '#B3E5FC', '#4FC3F7', '#03A9F4', '#0288D1']}},series: [{type: 'map',map: 'HK',data: [{name: '中西區', value: 20057.34},],}]}));});
2.2 修改配置代碼
- 修改json路徑，改為剛剛整合的地區json文件路徑
- 添加數據，并根據數據范圍修改visualMap屬性中的max與min值
- 添加標題，并修改其位置，修改圖例的位置
3. 效果圖
