mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-30 08:00:00 +08:00
# Conflicts: # jsowell-ui/.env.development # jsowell-ui/.env.staging # jsowell-ui/bin/build-sit.bat # jsowell-ui/bin/build.bat # jsowell-ui/src/api/adapayMember/adapayMember.js # jsowell-ui/src/api/pile/merchant.js # jsowell-ui/src/router/index.js # jsowell-ui/src/views/financial/financeDetail.vue # jsowell-ui/src/views/financial/merchant.vue # jsowell-ui/src/views/homeIndex/homeIndex.vue # jsowell-ui/src/views/login.vue # jsowell-ui/src/views/pile/basic/detail.vue # jsowell-ui/src/views/pile/station/components/SiteInfo.vue # jsowell-ui/src/views/pile/station/detail.vue # jsowell-ui/src/views/pile/station/orderReport.vue
2.2 KiB
2.2 KiB
百度地图扩展
ECharts 百度地图扩展,可以在百度地图上展现 点图,线图,热力图 等可视化。
示例
引入
可以直接引入打包好的扩展文件和百度地图的 jssdk
<!--引入百度地图的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>
如果是 webpack 打包,也可以 require 引入
require('echarts');
require('echarts/extension/bmap/bmap');
插件会自动注册相应的组件。
使用
扩展主要提供了跟 geo 一样的坐标系和底图的绘制,因此配置方式非常简单,如下
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());