Incubator-echarts: Echarts3.0 中国地图,只显示南沙群岛

Created on 4 Dec 2015  ·  5Comments  ·  Source: apache/incubator-echarts

RT

有类似情况么?

<script src="echarts-all-3.0.0.js" type="text/javascript" charset="utf-8"></script>
// map 
var mapOption = { 
    series : [
        {
            type: 'map',
            mapType: 'china'
        }
    ]
};
var mapChart = echarts.init(document.getElementById("e-map"));
mapChart.setOption(mapOption);

Most helpful comment

3.0 里地图数据是单独加载的,你可以在 https://github.com/ecomfe/echarts/tree/dev-3.0.0/map 这里找到需要的地图数据,包括世界地图,中国地图和各省的地图,js 目录下的文件可以直接 script 标签引入,json 目录下的可以用 jquery 等异步加载然后用如下方式注册到 echarts 中。

$.get('map/json/china.json', function (geoJson) {
    echarts.registerMap('china', geoJson);
});

也可以参考 Gallery 里加载 USA 的例子 http://echarts.baidu.com/gallery/editor.html?c=map-usa

地图数据单独分离出来是因为我们考虑到很多用户可能不用地图或者不用自带的地图数据,打包到一块会增加很多没必要的体积,再加上新版本的地图数据精度上高了很多,体积也更大了。

All 5 comments

3.0 里地图数据是单独加载的,你可以在 https://github.com/ecomfe/echarts/tree/dev-3.0.0/map 这里找到需要的地图数据,包括世界地图,中国地图和各省的地图,js 目录下的文件可以直接 script 标签引入,json 目录下的可以用 jquery 等异步加载然后用如下方式注册到 echarts 中。

$.get('map/json/china.json', function (geoJson) {
    echarts.registerMap('china', geoJson);
});

也可以参考 Gallery 里加载 USA 的例子 http://echarts.baidu.com/gallery/editor.html?c=map-usa

地图数据单独分离出来是因为我们考虑到很多用户可能不用地图或者不用自带的地图数据,打包到一块会增加很多没必要的体积,再加上新版本的地图数据精度上高了很多,体积也更大了。

搞定了,谢谢 @pissang

与您在广州TIT 有一面之缘份,呵~

哈哈看到头像想起来了,好巧

作为参考,以下是使用 webpack 引入形式时我的相关代码:

// 地图数据
const chinaMap = require('echarts/map/json/china.json');
const worldMap = require('echarts/map/json/world.json');
echarts.registerMap('china', chinaMap);
echarts.registerMap('world', worldMap);
import worldNameMap from './worldNameMap.js';

// series 里面:
type: 'map',
mapType: 'china', // 或者 'world'
nameMap: worldNameMap, // 世界地图的国家名称中英文对照

竟然碰到了,amazing~

Was this page helpful?
0 / 5 - 0 ratings