echarts 是一款非常優秀的數據可視化庫，它可以幫助我們把數據以更直觀的方式展示出來。其中，echarts 的地圖組件也十分強大，可以幫助我們展示各種地理數據。不過，在使用 echarts 地圖組件之前，需要先注冊相應的地圖。
而 echarts 支持兩種方式來進行地圖注冊：使用 JS 代碼注冊和使用 JSON 數據注冊。本文將著重介紹基于 JSON 數據進行地圖注冊的方法。
首先，我們需要準備相應的中國地圖的 JSON 數據文件。可以使用 echarts 官方的 map-convert 工具將各種常見格式的地圖數據轉化為 echarts 支持的 JSON 格式。具體操作方法如下：
git clone https://github.com/ecomfe/map-convert.git
cd map-convert
npm install
node bin/mapshaper --help
# 轉換 topojson 為 echarts 的 geojson
node bin/mapshaper --projection 'd3.geo.mercator().center([107, 31])' --simplify 0.1 -i input.topojson -o format=geojson output.json將轉換好的 JSON 文件保存在項目中的一個合適位置，例如我們將其保存為 data/china.json。
接著，在 HTML 中引入 echarts 框架和 jQuery：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>echarts 地圖注冊</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>最后，在 JS 中通過 echarts.registerMap 方法注冊地圖：
<script>
$(document).ready(function () {
$.getJSON('data/china.json', function(data) {
echarts.registerMap('china', data);
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
});
</script>通過上述步驟，我們就成功地注冊了一個中國的地圖，并在頁面上展示了出來。
上一篇vue刪除當前組件