ECharts使用百度地图扩展

发表于 | 分类于 | | 阅读次数:

之前使用echarts绘制地图图表，后来不满意于geoJSON，于是接入了百度地图。

不过echarts的官方文档对使用百度地图扩展的介绍比较少，在这里稍微提一下。

引入

1
2
3
4
5
6
<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<!-- 引入 ECharts -->
<script src="dist/echarts.min.js"></script>
<!-- 引入百度地图扩展 -->
<script src="dist/extension/bmap.min.js"></script>

这里可以直接使用第三方cdn

1
2
<script src="//cdn.bootcss.com/echarts/3.2.0/echarts.min.js"></script>
<script src="//cdn.bootcss.com/echarts/3.2.0/extension/bmap.min.js"></script>

使用

与geo的配置基本一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
option = {
    // 加载 bmap 组件
    bmap: {
        // 百度地图中心经纬度
        center: [120.13066322374, 30.240018034923],
        // 百度地图缩放
        zoom: 14,
        // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
        roam: true,
        // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}
    },
    series: [{
        type: 'scatter',
        // 使用百度地图坐标系
        coordinateSystem: 'bmap',
        // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
        data: [ [120, 30, 1] ]
    }]
}

// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());

其他series如lines(线图)、effectScatter(带有涟漪特效动画的散点)等配置方式相同。

参考

see github