echarts升级5.0之后 map的使用

echarts升级5.0之后 map的使用
v5 移除了内置的 geoJSON（原先在 echarts/map 文件夹下），如果使用者仍然需要他们，可以去从老版本中得到（下载文件中的map文件，引入本地），或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

// JavaScript 引入示例
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

// JSON 引入示例
$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
// 或
 import china from 'map/json/china.json' //本地路径
 echarts.registerMap('china', china);
 var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });

echarts 5.0 之后移除了包内的Map文件夹，导致需要你自己去搞Json数据。

当你拿到你需要的Json数据之后，如下代码就可以看到地图：

import * as echarts from "echarts";
import china from "@/config/map/json/china";

created() {
    echarts.registerMap("china", china);
  }

这里推荐一个获取Json的方法：

地图选择器