写在最前
Echarts作为百度团队下一个可视化的js库,自2.0更新至3.0以来,其带来的视觉冲击更加强悍,数据可视更加精美,图形交互更加贴合用户。
由于echarts2在百度地图的实例上没有作过多的说明,echarts3更是删除了该实例,另外由于工作需要,捣鼓一番,作个笔记。


下面针对的是echarts2.2.7,其源码下载地址为:http://echarts.baidu.com/build/echarts-2.2.7.zip


百度API调用及echart库引入

1. 百度API ak申请:

http://lbsyun.baidu.com/apiconsole/key?application=key

为引入百度地图,需要申请自己的密钥,该密钥作为后面的src引入。

2. 申请认证企业信息:

http://lbsyun.baidu.com/apiconsole/auth ,配额增加申请。

当然,如果个人用户,没必要增加配额,一般不会超限制数。

3. 下载相关javaScript库:

jquery.min.js,require.js,echarts.js,这里我都已下载好,JQ用的是jQuery v1.10.2,require用的是RequireJS 2.2.0,echart用的是echarts-2.2.7,引入如下:

其中第二个 script 标签里对应的需换成申请的ak,example2.js对应为echart效果。

4. 百度地图额外依赖库main.js


这里模块化的引入对应文件夹下echarts文件,main.js存放于下载的echarts源码中的extension\BMap\src路径下,同时需引入其他echarts2的图形控件,在build\dist\chart路径,在该路径下对应有:

需要时再引入即可,若无需其他可视化扩展,可删除除map.js外的其他js文件。

5. 为实例化百度地图背景构建一个容器:

Margin设为0则与浏览器无边界融合,div属性容器id,后面js脚本里需要用到该属性,并将echart填充到该容器里,当然,div可以有多个,故可以填充多个echart实例。实例化后再js脚本里调用echart api即可:

上图中的方法都封装在main.js中,使用的时候按上图调用即可,其中css样式对应之前的容器大小,BMapExt为初始化的地图对象,具体可看main.js源码,中间getMap,getEchartsContainer为获取地图实例及echart实例对象,BMap.Point是定义当前打开地图的中心点,最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。

6. 引入的文档结构:




7. 测试代码–首页

<html><head><meta charset="utf-8"><style type="text/css">body {margin: 0;}#main {height: 100%;}</style></head><body><div id="main"></div><script src="./echarts/echarts.js"></script><script type="text/javascript"   src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script><script src="./js/jquery.min.js"></script><script src="./js/require.js"></script><script src="./js/example2.js"></script></body>
</html>

8. 测试代码–echarts+百度地图样式:

(function () {require.config({paths: { echarts: "echarts", },});require(["echarts","echarts/chart/main","echarts/chart/map"],function (echarts, BMapExtension) {$('#main').css({ height:$('body').height(), width: $('body').width() });// 初始化地图var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{ enableMapClick: false });var map = BMapExt.getMap();var container = BMapExt.getEchartsContainer();var startPoint = { x: 113.328755, //天河城 y: 23.137588 };var point = new BMap.Point(startPoint.x, startPoint.y);map.centerAndZoom(point, 17);map.enableScrollWheelZoom(true);// 地图自定义样式map.setMapStyle({ styleJson: [ { 'featureType': 'land', //调整土地颜色 'elementType': 'geometry', 'stylers': { 'color': '#081734' } }, { 'featureType': 'building', //调整建筑物颜色 'elementType': 'geometry', 'stylers': { 'color': '#04406F' } }, { 'featureType': 'building', //调整建筑物标签是否可视 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', //调整高速道路颜色 'elementType': 'geometry', 'stylers': { 'color': '#015B99' } }, { 'featureType': 'highway', //调整高速名字是否可视 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', //调整一些干道颜色 'elementType': 'geometry', 'stylers': { 'color':'#003051' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': { 'color': '#044161' } }, { 'featureType': 'subway', //调整地铁颜色 'elementType': 'geometry.stroke', 'stylers': { 'color': '#003051' } }, { 'featureType': 'subway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'railway', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'railway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'all', //调整所有的标签的边缘颜色 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#313131' } }, { 'featureType': 'all', //调整所有标签的填充颜色 'elementType': 'labels.text.fill', 'stylers': { 'color': '#FFFFFF' } }, { 'featureType': 'manmade', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'local', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -65 } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'lightness': -40 } }, { 'featureType': 'boundary', 'elementType': 'geometry', 'stylers': { 'color': '#8b8787', 'weight': '1', 'lightness': -29 } } ] });option = { color: ['gold','aqua','lime','red','blue'], title : { text: '摇折扣--通勤图', subtext: '', x:'center', textStyle: { color: '#fff', fontSize: 25 } }, legend: { orient: 'vertical', x:'left', data:['全部', '上班人群', '购物人群','买菜人群','流浪人群'], selectedMode: 'single', selected:{ '上班人群' : false, '购物人群' : false, '买菜人群' : false, '流浪人群' : false, }, textStyle : { color: '#fff', fontSize: 15 }, padding:[20,5,5,20] }, tooltip : { show: false, trigger: 'item', formatter: function (v) { if(v[2].tooltipValue!=null){ return v[2].tooltipValue; }else{ return v[1]; } }}, toolbox: { show : false, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { type:'map', mapType: 'none', data:[], markLine : { Symbol:['none', 'arrow'], symbolSize:['0', '0.1'], smooth:true, smooth:10, effect : { show: true, scaleSize: 1, period: 30, color: '#fff', shadowBlur: 10 }, itemStyle : { color: 'red', normal: { color:function(param){ return(param.data[0].value.colorValue); }, borderWidth:1, lineStyle: { type: 'dashed', width: 1.5, shadowBlur: 10 }, label:{show:false} } }, data : [[{name:'p401'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p402'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p403'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p404'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p405'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p406'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p407'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p408'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p409'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p410'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p411'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p412'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p413'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p414'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p415'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p416'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p417'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p418'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p419'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p420'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p421'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p422'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p423'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p424'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p425'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p426'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p427'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p428'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p429'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p430'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p431'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p432'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p433'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p434'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p435'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p436'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p437'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p438'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p439'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p440'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p441'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p442'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p443'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p444'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p445'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p446'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p447'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p448'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p449'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p450'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p451'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p452'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p453'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p454'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p455'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p456'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p457'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p458'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p459'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p460'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p461'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p462'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p463'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p464'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p465'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p466'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p467'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p468'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p469'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p470'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p471'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p472'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p473'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p474'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p475'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p476'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p477'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p478'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p479'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p480'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p481'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p482'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p483'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p484'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p485'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p486'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p487'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p488'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p489'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p490'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p491'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p492'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p493'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p494'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p495'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p496'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p497'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p498'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p499'}, {name:'p900',value:{colorValue:'grey'}}], [{name:'p500'}, {name:'p900',value:{colorValue:'grey'}}]]}, geoCoord:{ 'p900': [113.3302,23.13848], 'p401': [113.3270,23.13743], 'p402': [113.3243,23.13767], 'p403': [113.3303,23.13735], 'p404': [113.3338,23.13985], 'p405': [113.3291,23.13972], 'p406': [113.3328,23.13755], 'p407': [113.3322,23.13563], 'p408': [113.3266,23.13853], 'p409': [113.3262,23.13382], 'p410': [113.3311,23.13829], 'p411': [113.3332,23.13532], 'p412': [113.3347,23.13655], 'p413': [113.3264,23.13744], 'p414': [113.3283,23.13829], 'p415': [113.3247,23.13500], 'p416': [113.3267,23.13889], 'p417': [113.3222,23.13654], 'p418': [113.3241,23.13749], 'p419': [113.3295,23.14119], 'p420': [113.3332,23.14208], 'p421': [113.3258,23.13706], 'p422': [113.3322,23.13318], 'p423': [113.3275,23.13652], 'p424': [113.3252,23.13836], 'p425': [113.3291,23.14020], 'p426': [113.3279,23.13774], 'p427': [113.3288,23.13811], 'p428': [113.3291,23.13845], 'p429': [113.3345,23.13943], 'p430': [113.3314,23.13802], 'p431': [113.3290,23.13699], 'p432': [113.3271,23.13750], 'p433': [113.3270,23.14132], 'p434': [113.3310,23.13812], 'p435': [113.3272,23.13590], 'p436': [113.3314,23.13231], 'p437': [113.3292,23.13313], 'p438': [113.3330,23.13989], 'p439': [113.3247,23.13887], 'p440': [113.3219,23.13803], 'p441': [113.3285,23.13254], 'p442': [113.3268,23.13326], 'p443': [113.3307,23.13484], 'p444': [113.3241,23.13730], 'p445': [113.3280,23.14244], 'p446': [113.3283,23.13171], 'p447': [113.3291,23.14070], 'p448': [113.3299,23.13923], 'p449': [113.3334,23.13863], 'p450': [113.3300,23.13776], 'p451': [113.3313,23.14453], 'p452': [113.3292,23.13621], 'p453': [113.3287,23.14180], 'p454': [113.3323,23.14031], 'p455': [113.3329,23.13609], 'p456': [113.3287,23.13430], 'p457': [113.3304,23.13721], 'p458': [113.3312,23.13602], 'p459': [113.3286,23.14076], 'p460': [113.3301,23.13384], 'p461': [113.3310,23.13586], 'p462': [113.3259,23.13477], 'p463': [113.3316,23.13916], 'p464': [113.3255,23.13462], 'p465': [113.3285,23.13740], 'p466': [113.3273,23.13568], 'p467': [113.3316,23.13670], 'p468': [113.3263,23.13498], 'p469': [113.3277,23.13713], 'p470': [113.3323,23.13211], 'p471': [113.3304,23.13676], 'p472': [113.3260,23.14195], 'p473': [113.3264,23.13867], 'p474': [113.3290,23.13605], 'p475': [113.3329,23.13798], 'p476': [113.3274,23.13843], 'p477': [113.3274,23.13889], 'p478': [113.3291,23.14105], 'p479': [113.3296,23.13476], 'p480': [113.3279,23.14075], 'p481': [113.3265,23.13461], 'p482': [113.3310,23.13907], 'p483': [113.3293,23.14134], 'p484': [113.3248,23.13829], 'p485': [113.3294,23.13928], 'p486': [113.3263,23.13722], 'p487': [113.3314,23.13599], 'p488': [113.3346,23.14013], 'p489': [113.3336,23.14240], 'p490': [113.3296,23.14111], 'p491': [113.3266,23.13513], 'p492': [113.3243,23.13664], 'p493': [113.3265,23.13805], 'p494': [113.3294,23.13123], 'p495': [113.3259,23.13996], 'p496': [113.3287,23.14130], 'p497': [113.3273,23.13609], 'p498': [113.3290,23.13569], 'p499': [113.3264,23.13586], 'p500': [113.3287,23.13662] } }, ] };var myChart = BMapExt.initECharts(container);window.onresize = myChart.onresize;BMapExt.setOption(option);}
);
})();

9.效果

可视化篇:Echarts2.0引入百度地图相关推荐

  1. 可视化篇:Echarts2.0引入百度地图(转载)

    原链接:https://blog.csdn.net/yc_1993/article/details/51367575?spm=1001.2014.3001.5501 写在最前 Echarts作为百度团 ...

  2. 可视化篇:Echarts3.0引入百度地图(更新)

    update: 由于目前echarts3.8.X比之前旧版改动较多,其实地图实例处许多朋友留言跑不通,今天更新下新版的做法,亲测已经可以. perface 一直抽不开身,留言区以及不少朋友都在问如何在 ...

  3. vue3.0引入百度地图并标记点

    首先新建一个js,主要用来引入百度地图的js,代码如下: export function baiduMap() {return new Promise(function(resolve, reject ...

  4. Echarts3.0引入百度地图-简单说

    1. 首先是百度AK的申请 2. 下载bmap.js echarts.js bmap.js 是一个基于echart3的百度地图扩展文件,将其引入后可以在echarts.series.map.coord ...

  5. Vue使用v-charts引入百度地图实现数据可视化

    上一篇文章给大家介绍了vue-echarts引入百度地图的过程, 今天给大家介绍通过v-charts来写一个简单的地图,相比之下过程更为简单,下面一起来看看具体步骤 介绍 v-charts 是饿了么团 ...

  6. vue+element中引入百度地图

    ❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货  谢谢您的支持! 1.首先你需要下载npm模 ...

  7. javaswing引入百度地图_【react】React怎么引用百度地图

    前期准备:在百度地图开发文档中申请秘钥,申请流程按照网上的攻略走很简单的几个步骤 (如果项目紧急也可以私信找我要我的秘钥) 官网http://lbsyun.baidu.com/ index.html文 ...

  8. html引入百度地图报错,vue引入百度地图BMapGL,或者其他个性化地图

    3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...

  9. vue中使用echarts结合百度地图制作地图(引入百度地图、获取百度地图实例、设置百度地图)

    1.初始化echarts以及例子可以看管网的 地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...

最新文章

  1. word2vec 中的数学原理详解
  2. 网络小贷迎来最强监管,八成公司恐将面临转型或淘汰
  3. NTU 课程笔记:CV6422 goodness of fit
  4. 【VB.NET】VB.NET面向对象技术问题的解答
  5. perl学习笔记(8)
  6. c语言statistics函数,Logistic回归中C-Statistics计算方法
  7. 中国啮齿动物口器行业市场供需与战略研究报告
  8. python计算2的20次方_Python学习二运算符
  9. android焦点优先级,Viewgroup焦点获取优先级android:descendantFocusability用法简析
  10. ARMv8-A Generic Interrupt Controller(GIC)
  11. java.io.IOException: Connection reset by peer
  12. E-Prime 软件中常用的 inline 语句
  13. 远程Redis服务器 JedisConnectionException: Failed connecting to host localhost:6379 解决方案
  14. 拖机软件Betwinnbsp;VSnbsp;2.0.0.368+破解…
  15. MATLAB从入门到精通 第1章 MATLAB入门
  16. 【保姆级教程】Spring Boot单元测试(Controller层的Header处有Token验证的详细示例代码),文末介绍Postman 的基本使用
  17. 51物联卡:物联卡支持5G吗?怎么购买5G物联卡
  18. DDD,这东西到底是垃圾还是银弹?
  19. 蓝桥杯2021年第十二届真题第一场-双向排序
  20. 电阻率的单位是什么?电阻率与电阻阻值大小的有何关系

热门文章

  1. 一次kubenetes的rook-ceph创建pv失败的故障排查
  2. Android Kotlin-协程
  3. 示波器播放Bad apple坏苹果教程XY模式
  4. 神经网络实现手写数字识别
  5. MYSQL学习笔记06:列属性[NULL,default,comment],主键,自增长,唯一键,数据库设计规范[范式(1NF,2NF,3NF),逆规范化],表关系[1V1,1VN,NVN]
  6. Hive SQL 每日SQL
  7. C语言项目实战:24点游戏计算器(基于结构体、指针、函数、数组、循环等知识点)
  8. vpp与dpdk的关系
  9. 【AGC004E】Salvage Robots【动态规划dp】
  10. 搭建自有HTTPS环境