87,923
社区成员
发帖
与我相关
我的任务
分享望老司机指点迷津，ECharts无法显示百度地图，一片空白
按照ECharts官网教程，新建了一个html文件，申请了ak,下载了echarts.js和bmap.js，并在代码里进行了引用，但是一运行浏览器一片空白，什么都没有？好晕。不知道问题出现在哪里，望老司机指点迷津，下面是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=VfVOf3Yzf5SCWVSCk81NQoNOUTFzsnn1"></script>
<!-- 引入 ECharts -->
<script src="echarts.js"></script>
<!-- 引入百度地图扩展 -->
<script src="bmap.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var 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]]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=VfVOf3Yzf5SCWVSCk81NQoNOUTFzsnn1"></script>
<!-- 引入 ECharts -->
<script src="echarts.js"></script>
<!-- 引入百度地图扩展 -->
<script src="bmap.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var 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]]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
kofvkof 2017-12-25
- 打赏
- 举报
知道原因了，是github上的bmap文件没有更新，大家去这里http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.js下载最新的文件，即可正常运行。
