开发者社区> 问答> 正文

百度地图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>





展开
收起
优选2 2020-06-05 16:48:31 1254 0
1 条回答
写回答
取消 提交回答
  • http://echarts.baidu.com/extension/BMap/doc/doc.html######回复 @木小东 : 请问你是如何解决的,我看文档没看明白,能否给一份完整的代码让我看看,我真的不知道该如何调用百度的API,我的邮箱1399179663@qq.com######回复 @木小东 : 我在实现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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
Spring Boot2.0实战Redis分布式缓存 立即下载
CUDA MATH API 立即下载
API PLAYBOOK 立即下载