百度地图API与ECharts结合时遇到的问题? 400 报错
百度地图API与ECharts结合时遇到的问题? 400 报错
我尝试着结合百度地图API和ECharts, 总是提醒我BMapExtension不存在；尝试了一下引用了所有的文件，也总是提醒引用的BMap.js和esl.js出错，检查发现引用路径没问题。请问各位最后怎么实现在百度地图中加入ECharts元素的呢？我最近才开始钻研js和数据可视化，之前对js有一些简单的了解~烦请各位能拨冗给我一些指导，不胜感谢！我的代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=SyHQoSmKTcFdVA3iX4iIMGj3"></script>
<title>EchartsBMap</title>
</head>
<body>
<div
style="width: 850px; height: 700px; border: #ccc solid 1px; float: left; margin-left: 200px; display: inline;"
id="main"></div>
</body>
<script src="../source/zrender-2.0.6/doc/example/www/js/esl.js"></script>
<script src="../source/echarts-all.js"></script>
<script src="../source/echarts-2.1.10/doc/example/www/js/chart/map.js"></script>
<script src="../source/echarts-2.1.10/extension/BMap/doc/BMap.js"></script>
<script src="../source/zrender-2.0.6/doc/example/www/js/zrender-original.js"></script>
<script type="text/javascript">
//初始化地图
var BMapExt = new BMapExtension(document.getElementById('main'), BMap, require('echarts'), require('zrender'));
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var point = new BMap.Point(startPoint.x, startPoint.y);
var myChart = BMapExt.initECharts(container, curTheme);
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom(true);
var option = {
color: ['gold','aqua','lime'],
title : {
text: '模拟迁徙',
subtext:'数据纯属虚构',//副标题文本,'\n'指定换行
x:'right'//默认：left,水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
},
tooltip : { //提示框，鼠标悬浮交互时的信息提示
trigger: 'item',//触发类型，默认数据触发，可选为：'item' | 'axis'
formatter: function (v) {//内容格式器：{string}（Template） | {Function}，支持异步回调
return v[1].replace(':', ' > ');
}
},
legend: { //图例
orient: 'vertical',//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
x:'left',
data:['北京', '上海', '广州'],//图例内容数组，数组项通常为{string}，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
selectedMode: 'single',//选择模式，默认开启图例开关，可选single，multiple
selected:{ //配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
'上海' : false,
'广州' : false
}
},
toolbox: { //工具箱
show : true, //是否显示工具箱
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataRange: { //值域选择
min : 0, //指定的最小值，eg: 0，默认无，必须参数
max : 100, //指定的最大值，eg: 100，默认无，必须参数
y: '60%',
calculable : true,//是否启用值域漫游，启用后无视splitNumber，值域显示为线性渐变
color: ['#ff3333', 'orange', 'yellow','lime','aqua']
},
series : [ //驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
{
name:'北京', //系列名称，如启用legend，该值将被legend.data索引相关
type:'map',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示
mapType: 'none',//地图类型,支持world，china及全国34个省市自治区。
data:[],
geoCoord: {//地图特有，标线图形定位坐标,通过绝对经纬度指定地区的名称文本位置
'上海': [121.4648,31.2891],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'宁波': [121.5967,29.6466],
'广州': [113.5107,23.2196],
'长春': [125.8154,44.2584],
'长沙': [113.0823,28.2568],
'青岛': [120.4651,36.3373]
},
markLine : {
smooth:true,
effect : { //标线图形炫光特效
show: true,//是否开启特效
scaleSize: 1,//放大倍数,以markLine lineWidth为基准
period: 30,//运动周期，无单位，值越大越慢，默认为15
color: '#fff',
shadowBlur: 10//光影模糊度，默认根据scaleSize计算
},
itemStyle : { //图形样式
normal: {
borderWidth:1, //边框颜色
lineStyle: { //线条样式
type: 'solid',// 线条样式，可选为：'solid' | 'dotted' | 'dashed'
shadowBlur: 10 //阴影模糊度
}
}
},
data : [
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'南宁',value:70}],
[{name:'北京'}, {name:'长春',value:40}],
[{name:'北京'}, {name:'包头',value:30}],
[{name:'北京'}, {name:'重庆',value:20}]
]
},
markPoint : { //系列中的数据标注内容
symbol:'emptyCircle', //标志图形类型
symbolSize : function (v){ //标注大小
return 10 + v/10
},
effect : { //炫光特效
show: true, //标签显示策略，可选为：true（显示） | false（隐藏）
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'上海',value:95},
{name:'广州',value:90},
{name:'南宁',value:70},
{name:'长春',value:40},
{name:'包头',value:30},
{name:'重庆',value:20}
]
}
},
{
name:'上海',
type:'map',
mapType: 'none',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'上海'},{name:'包头',value:95}],
[{name:'上海'},{name:'广州',value:80}],
[{name:'上海'},{name:'郑州',value:70}],
[{name:'上海'},{name:'长春',value:60}],
[{name:'上海'},{name:'重庆',value:50}],
[{name:'上海'},{name:'长沙',value:40}],
[{name:'上海'},{name:'北京',value:30}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'包头',value:95},
{name:'广州',value:80},
{name:'郑州',value:70},
{name:'长春',value:60},
{name:'重庆',value:50},
{name:'长沙',value:40},
{name:'北京',value:30}
]
}
},
{
name:'广州',
type:'map',
mapType: 'none',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'广州'},{name:'长春',value:80}],
[{name:'广州'},{name:'重庆',value:70}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'广州'},{name:'北海',value:20}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
}
},
data : [
{name:'长春',value:80},
{name:'重庆',value:70},
{name:'北京',value:30},
{name:'北海',value:20}
]
}
},
{
name:'全国',
type:'map',
mapType: 'none',
data:[],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [ //当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态
[{name:'北京'},{name:'包头'}], //{name: '北京', value: 100},{name:'上海'},可添加value值
[{name:'北京'},{name:'北海'}],
[{name:'北京'},{name:'宁波'}],
[{name:'北京'},{name:'南京'}],
[{name:'北京'},{name:'南宁'}],
[{name:'上海'},{name:'汕头'}],
[{name:'上海'},{name:'深圳'}],
[{name:'上海'},{name:'青岛'}],
[{name:'上海'},{name:'济南'}],
[{name:'上海'},{name:'珠海'}],
[{name:'广州'},{name:'北海'}],
[{name:'广州'},{name:'郑州'}],
[{name:'广州'},{name:'长春'}],
[{name:'广州'},{name:'重庆'}],
[{name:'广州'},{name:'长沙'}]
]
}
}
]
};
if (myChart && myChart.dispose) {
myChart.dispose();
}
window.onresize = myChart.resize;
BMapExt.setOption(option, true)
</script>
展开
收起
1
条回答
写回答
写回答
-
http://echarts.baidu.com/extension/BMap/doc/doc.html######回复 @木小东 : 请问你是如何解决的，我看文档没看明白，能否给一份完整的代码让我看看，我真的不知道该如何调用百度的ＡＰＩ，我的邮箱１３９９１７９６６３＠ｑｑ．ｃｏｍ######回复 @木小东 : 我在实现BMap的时候也遇到了一些问题，您能否将demo和js 文件给我发一份（1169458128@qq.com），非常感谢。######多谢！在ECharts的例程中找到了解决方案，希望在今后的改进中能把帮助文档再细化一些~同时我也发现了一个有冲突的地方：series(Map)中，markPoint的一个属性是large（在“大规模Markpoint特效”中可以找到），这个属性设置为"true"时, 该点的tooltip选项会失效，即鼠标放置时无反应。不知故意设计成这样，还是我操作不当？######问题怎么解决的？能发我一下吗？99363018@qq.com######问题怎么解决的？能发我一下吗？791285547@qq.com，非常感谢！######问题怎么解决的？能发我一下吗？wang010366@qq.com，非常感谢！######问题怎么解决的？能发我一下吗？denglujun163@163.com，非常感谢！######问题怎么解决的？能发我一下吗？524670927@qq.com，非常感谢！######
主要对“引用Echarts、扩展、百度地图API”这句话不是特别理解，不知道包括哪几个文件
######大家好，我的问题已经解决，需要的话，请留邮箱，我给大家发demo，或者直接QQ我也行
######1248083293@qq.com 发我一份呗######demo太给力了######由于本人经常不在线，劳烦大家不要再加我QQ了，现在讲demo分享至百度网盘，大家可以自己下载，另外，demo中的密钥是自己要去百度API申请的。下载地址http://pan.baidu.com/s/1gdybVGZ######最近也遇到了这样的问题，能给我一份么？谢谢 530935021@qq.com######问题怎么解决的？能发我一下吗？1354230010@qq.com，非常感谢！######631432076@qq.com 最近也遇到这个问题，能把demo发我一下嘛，非常感谢！###### 问题怎么解决的？能发我一下吗？ 1354230010 @qq.com，非常感谢！2020-06-05 16:48:44赞同 展开评论 打赏
问答标签：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
