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地址来进行设置。