淘先锋技术网

首页 1 2 3 4 5 6 7

ECharts 3是一款来自百度团队的优秀图表可视化工具,它支持多种图表类型,其中比较常用的就是地图类型。在使用ECharts 3绘制地图时,我们通常需要使用到一些地图json数据,接下来我们就来看看这些数据是如何使用的。

首先,ECharts 3中的地图json数据是一种格式化的数据文件,可用于描述不同地区的边界线(比如国家、城市、省份等)。数据文件的类型可以是普通的.json文件,也可以是.js文件,其中.js文件需要使用指定的格式。

// 普通的.json数据格式
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "北京市"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[ 116.206385, 39.986634 ],
...
]
]
]
}
},
...
]
}
// .js数据格式
var geoJson={
"type": "FeatureCollection",
"features": [
...
]
};

上述代码中,数据包含"type"、"features"、"properties"和"geometry"四个主要属性,其中"type"描述了数据的类型。我们需要将这些数据文件加载到ECharts中,具体操作如下:

import echarts from 'echarts'
echarts.registerMap('mapName', geoJson);
//或者
var chart = echarts.init(document.getElementById('main'));
chart.registerMap('mapName', geoJson);

上述代码中,我们通过echarts.registerMap或chart.registerMap方法将数据加载到地图中,需要注意的是"mapName"这个参数需要和我们在option中使用的地图名称一致。例如:

var option = {
...
series: [
{
type: 'map',
map: 'mapName', 
...
}
]
}
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

上述代码中,我们通过设置series的map属性来使用之前加载的地图数据,可以传入地图的名称或者数据文件的url地址来进行设置。