网站首页 » 前端开发 » JavaScript » Echarts+百度地图实战大解密
上一篇:
下一篇:

Echarts+百度地图实战大解密

数据展示有很多种方式,在前端里常用的就是通过 Echarts 实现数据的多种展示方式 ,因为 Echarts 它是完全免费的,还有它的强大,好用还真的让人无话可说,虽然用得不多,但感觉跟其它收费的都是那么好用,贴心。

首先我把官方的一个例子贴出来,原汁原味的代码:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/

下面就是这个示例的效果图:

这个图都是官方的示例图,一点都没变,如果说有变,那就只是图片的右下角多了一个水印。

接下来我们得对 Echarts+百度地图的应用从头开始分析。

首先如果想用Echarts+百度地图来实现上面的效果,我们得知道都需要哪些东西。查看示例代码就可得出如下结论:

需要引入如下资源:

  • http://api.map.baidu.com/api?v=2.0&ak=482C5Mjpf8l0D8lDa8louwDGR0L1gIou
  • echarts.min.js
  • bmap.min.js

第一个需要到 http://lbsyun.baidu.com/  注册帐号,然后申请为开发者,就可以拿到链接中的 ak 码了,没有这个码你是无法引入百度地图的。

地图有了接下来要开始复制粘贴了,把官方的示例代码 copy 下来。放到自己的一个 .js 文件中。在 HTML 中添加一个容器就差不多了,代码大致如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts+百度地图</title>
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=482C5Mjpf8l0D8lDa8louwDGR0L1gIou"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/bmap.min.js"></script>
</head>
<body>
<div class="wrap">
    <div class="map" id="map"></div>
</div>
<script src="js/main.js"></script>
</body>
</html>

这个过程很简单也没有必要作过多的分析了。下面我们就在这个示例的基础上进行修改美化,准确的说就是改造它,让它更加符合我们的实际需求:

  • 1.换肤(官方叫法:主题)
  • 2.多种数据切换
  • 3.可点击
  • 4.提示文字的格式化

现在我们就来实现上面的几个需求:

换肤

这个也非常简单,官方也提供了一些主题给你参考:http://lbsyun.baidu.com/jsdemo.htm#k0_2

官方甚至还提供了一个生成主题代码的工具,你可以试试:http://lbsyun.baidu.com/custom/

其实就是修改了 option 中的 bmap 对象的 mapStyle 对象的一些属性,比如改成下面这样:

mapStyle: {
   styleJson: [
       {
           "featureType": "water",
           "elementType": "all",
           "stylers": {
               "color": "#044161"
           }
       },
       {
           "featureType": "land",
           "elementType": "all",
           "stylers": {
               "color": "#004981"
           }
       },
       {
           "featureType": "boundary",
           "elementType": "geometry",
           "stylers": {
               "color": "#064f85"
           }
       },
       {
           "featureType": "railway",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "highway",
           "elementType": "geometry",
           "stylers": {
               "color": "#004981"
           }
       },
       {
           "featureType": "highway",
           "elementType": "geometry.fill",
           "stylers": {
               "color": "#005b96",
               "lightness": 1
           }
       },
       {
           "featureType": "highway",
           "elementType": "labels",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "arterial",
           "elementType": "geometry",
           "stylers": {
               "color": "#004981"
           }
       },
       {
           "featureType": "arterial",
           "elementType": "geometry.fill",
           "stylers": {
               "color": "#00508b"
           }
       },
       {
           "featureType": "poi",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "green",
           "elementType": "all",
           "stylers": {
               "color": "#056197",
               "visibility": "off"
           }
       },
       {
           "featureType": "subway",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "manmade",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "local",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "arterial",
           "elementType": "labels",
           "stylers": {
               "visibility": "off"
           }
       },
       {
           "featureType": "boundary",
           "elementType": "geometry.fill",
           "stylers": {
               "color": "#029fd4"
           }
       },
       {
           "featureType": "building",
           "elementType": "all",
           "stylers": {
               "color": "#1a5787"
           }
       },
       {
           "featureType": "label",
           "elementType": "all",
           "stylers": {
               "visibility": "off"
           }
       }
   ]
}

接着修改下option 下的 backgroundColor 就完工了:

backgroundColor: '#404a59',

说白了就是修改颜色而已,你肯定会。在线示例:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/index-theme.html

多种数据的切换

接下来我们说说多种数据的切换,要想实现这个功能,我们就是用到 option 对象中的 legend 配置项。在 option 中添加 legend 配置代码:

legend: {
    orient: 'horizontal',
    x: 100,
    y: 50,
    zlevel: 0,
    data: [{
        name: '今天',
        icon: 'image://images/radio-2.png'
    },
    {
        name: '昨天',
        icon: 'image://images/radio-1.png'
    }],
    itemWidth: 18,
    itemHeight: 18,
    selectedMode: 'single',
    selected: {
        '今天': true
    },
    textStyle: {
        fontSize:18,
        color: '#fff'
    }
},

这样只是完成了第一步,还有第二步就是监听 legend 的点击,触发数据切换显示代码如下:

myChart.on('legendselectchanged', function (param) {
   var selected = param.selected;
   if (selected['昨天']) {
       option.legend.data[0].icon = 'image://images/radio-1.png';
       option.legend.data[1].icon = 'image://images/radio-2.png';
       option.legend.selected['今天'] = false;
       option.legend.selected['昨天'] = true;
       myChart.setOption(option);
   }
   if (selected['今天']) {
       option.legend.data[1].icon = 'image://images/radio-1.png';
       option.legend.data[0].icon = 'image://images/radio-2.png';
       option.legend.selected['今天'] = true;
       option.legend.selected['昨天'] = false;
       myChart.setOption(option);
   };
});

代码中的 icon 为更改成自定义的图标,selectedMode: ‘single’, 为单选模式。

这样就完了数据的切换显示了,在线示例:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/index-legend.html

可点击

这个跟上面的差不多,我们直接在上面的示例的基础上添加几行代码就可以了:

myChart.on('click', function (params) {
    console.log(params);
});

在线示例:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/index-click.html,这里只是简单的打印出了点击事件的相关信息。

我们可以通过这个点击事件来实现一些很实用的需求(比如:我们一开始这个示例只是显示了全国的所有省,然后点击了某个省后,直接在地图上显示这个省下的所有市的相关数据,并且地图会缩放到预定的大小)。

提示文字的格式化

这里说的提示文字就是当鼠标放到点上时,会弹出含有相关信息的窗口中的文字。在 series 中添加一个 tooltip 对象配置就可能了:

tooltip: {
    formatter:function (parmas) {
        return parmas.seriesName + '<br />' + parmas.name + ':' + parmas.value[2];
    }
}

这样就可以去掉官方示例中的坐标了,在线示例:http://yunkus.com/demo/echarts/echarts-and-baidu-map-story/index-tooltip.html

上面都是说 echarts 的,Echarts+百度地图实战大解密肯定是少不了百度地图的嘛?!

关于Echarts+百度地图实战时,我们需要注意以下几点:

如果你用的框架是 Angular 并且在 Angular 中使用了 require 来管理模块。那么你就需要像下面这样引入:

'echarts',
'async',
'async!bdMap',
'bmap',

这些都是在 main.js 定义好的资源,

其中:

echarts 就是echartjs 的资源引用。

async 这个模块的作用可以看看这篇文章:http://yunkus.com/tencent-map-api/

bdMap 就是百度地图的资源文件引用。

还有一个 bmap 模块,这个模块的作用就是让 echarts 和百度地图有机的结合在一起。bmap 模板里面有一个地图可能需要修改一下,就是它里面会引入 echarts 模板。所以你得改成跟你在 main.js 中定义的模板名一样就可以(如果已经是一样了就不用改)比如上面的 echarts 模块名就叫 echarts ,就不需要改。

require.config({
    paths: {
            'async': 'lib/async/async',
            'bdMap': 'http://api.map.baidu.com/api?v=2.0&ak=482C5Mjpf8l0D8lDa8louwDGR0L1gIou',
            'echarts': 'lib/echarts/echarts.min',
            'bmap': 'lib/echarts/bmap.min',
    }
})

Echarts+百度地图实战大解密就分享到这里,希望对你有帮助。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/echarts-and-baidu-map-story/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END