因为要使用到ECharts,所以进行了学习,并记录下来。
先看想要实现的效果:
1、将相关区域的数据展示到地图上的对应区域
2、实现一定的交互,比如点击柱状图显示详细信息
3、实现数据动态注入,比如选择特定时间段展示、点击某一区域进行下钻
首先,找到比较权威的参考资料:ECharts Documentation
然后,开始使用,从文档及网上查询可以了解到,ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
点击查看官方文档
点击下载两种方式实例 提取码: py52
注意,其中js引入数据的方式可以直接在本地打开,而JSON文件导入的方式需要在本地服务器中打开。(下载到的geoJson数据可以直接使用,也可以改名为 .json文件进行使用。)
使用的js文件不能把json文件拿来直接使用,因为它们格式有差别:
js的数据格式为:
构成地图的区块数据的主要属性有id、geometry、properties
JSON的数据格式为:
构成地图的区块数据的主要属性有type、geometry、properties
有了数据,就要使用ECharts画地图了,我们后面使用json格式的数据来进行绘图。
使用ECharts画地图,我们可以理解为ECharts是一个工具或我们可以用来调用的函数,以下代码展示了画地图所需要的最少的代码:(本例使用js格式的数据)
var myChart = echarts.init(document.getElementById('map'));
option = {
geo: {
map: '北京',
},
};
myChart.setOption(option);
从上面代码中我们可以理清ECharts的使用逻辑:
1、我们要为ECharts准备好一个有高度和宽度的容器(现在可以是canvas,我们一般用div)
2、获取到准备好的容器,将它传入echarts.init(),将创建一个 ECharts 实例;文档
3、设置配置项,对于画地图,至少要设置的选项为geo中的map属性;
4、进行绘制,使用生成的ECharts 实例的setOption方法。
按照以上步骤,我们使用json格式的数据绘制地图:
1、准备好容器,假设id为map;
2、echarts.registerMap('xicheng',geoJson,{});
var myChart = echarts.init(document.getElementById('map'));
3、var option = { series: [ { type: 'map', mapType: 'xicheng', } ] };
4、var myChart = echarts.init(document.getElementById('map'));
实际可运行代码:
var option = {
series: [
{
type: 'map',
mapType: 'xicheng',
}
]
};
$(function(){
$.get('./Echarts/sichuang_and_chongqing.geoJson',function(geoJson)
{
echarts.registerMap('xicheng',geoJson,{});
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(option);
}
);
});
大体的逻辑是一样的,但有些细节不一样。
第一个不一样在于使用了异步加载的方式加载数据;
第二个不一样在于第2步多了echarts.registerMap函数的调用,其实使用js文件的方式画地图也是用到了这个函数的,不过在js文件中已经调用过了,所以就不用我们来调用了。