echarts 西安地铁热力图,钻取显示每个出口的饼状图

最新推荐文章于 2023-06-25 16:33:38 发布
最新推荐文章于 2023-06-25 16:33:38 发布
阅读量1.9k 收藏 8
点赞数
文章标签： echarts 钻取 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkkk6547/article/details/84328108
版权

 

如图

代码实现：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>地铁热力图</title>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script src="bmap.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript">
        var data = [
            { name: '北大街', value: 500 },
            { name: '西安北站', value: 200 },
            { name: '后卫寨', value: 200 },
            { name: '保税区', value: 100 },
            { name: '纺织城', value: 150 },
            { name: '韦曲南', value: 160 },
            { name: '通化门', value: 190 },
            { name: '小寨', value: 400 },
            { name: '鱼化寨', value: 190 },
            { name: '城西客运站', value: 290 },
            { name: '辛家庙', value: 150 },
            { name: '市图书馆', value: 150 },
            { name: '青龙寺', value: 150 }
        ];
        var geoCoordMap = {
            '北大街': [108.953636, 34.276173],
            '西安北站': [108.944869, 34.382293],
            '后卫寨': [108.820184, 34.306474],
            '保税区': [109.050509, 34.401603],
            '纺织城': [109.076129, 34.285688],
            '韦曲南': [108.95184, 34.148521],
            '鱼化寨': [108.854427, 34.244278],
            '通化门': [109.001624, 34.275472],
            '小寨': [108.953169, 34.229132],
            '城西客运站': [108.880424, 34.279946],
            '辛家庙': [109.002019, 34.311201],
            '市图书馆': [108.953762, 34.323932],
            '青龙寺': [109.000689, 34.236892]
        };
        var piedata = [];
        var piedatas = {
            '北大街': [
                { value: 335, name: 'A出口' },
                { value: 310, name: 'B1出口' },
                { value: 234, name: 'B2出口' },
                { value: 135, name: 'C出口' },
                { value: 1548, name: 'D出口' }
            ],
            '小寨': [
                { value: 335, name: 'A1出口' },
                { value: 335, name: 'A2出口' },
                { value: 310, name: 'B1出口' },
                { value: 234, name: 'B2出口' },
                { value: 135, name: 'C出口' },
                { value: 1548, name: 'D出口' }
            ],
            '城西客运站': [
                { value: 335, name: 'A出口' },
                { value: 310, name: 'B出口' },
                { value: 135, name: 'C出口' },
                { value: 1548, name: 'D出口' }
            ]
        }
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        function getOption(title){
            option = {
                title: [
                    {
                        text: '西安地铁实时进站人数统计',
                        subtext: '西安地铁局',
                        left: 'center',
                        textStyle: {
                            color: '#999'
                        }
                    }, {
                        text: title,
                        x: '78%',
                        y: '36%',
                        textStyle: {
                            color: '#999'
                        }
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    formatter: function (params, ticket, callback) {
                        if(Array.isArray(params.value)){
                            return params.name + ":" + params.value[2] + " 人/次";
                        }
                        return params.name + ":" + params.value + " 人/次";
                    }
                },
                bmap: {
                    center: [108.953098279, 34.2777998978],
                    zoom: 12,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                "featureType": "water",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#044161"
                                }
                            },
                            {
                                "featureType": "land",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#343332"
                                }
                            },
                            {
                                "featureType": "boundary",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#064f85"
                                }
                            },
                            {
                                "featureType": "railway",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#454545"
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#454545",
                                    "lightness": 1
                                }
                            },
                            {
                                "featureType": "highway",
                                "elementType": "labels",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry",
                                "stylers": {
                                    "color": "#454545"
                                    //是否显示复杂地图
                                    //,"visibility": "off"
                                }
                            },
                            {
                                "featureType": "arterial",
                                "elementType": "geometry.fill",
                                "stylers": {
                                    "color": "#454545"
                                }
                            },
                            {
                                "featureType": "poi",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "green",
                                "elementType": "all",
                                "stylers": {
                                    "color": "#056197",
                                    "visibility": "off"
                                }
                            },
                            {
                                "featureType": "subway",
                                "elementType": "all",
                                "stylers": {
                                    "visibility": ""
                                }
                            },
                            {
                                "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"
                                }
                            }
                        ]
                    }
                },
                series: [
                    {
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'purple'
                            }
                        }
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 6)),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#8B6914',
                                shadowBlur: 10,
                                shadowColor: 'white'
                            }
                        },
                        zlevel: 1
                    },
                    {
                        name: 'GDP占比',
                        type: 'pie',
                        center: ['80%', '20%'],
                        radius: '28%',
                        data: piedata,
                        z: 100
                    }
                ]
            };
            return option;
        }
        function initecharts(dom,title){
            var myChart = echarts.init(dom);
            myChart.setOption(getOption(title));
            myChart.on('click',function(object){
                debugger
                if(undefined!=piedatas[object.name]){
                    piedata = piedatas[object.name];
                    title = object.name;
                }
                echarts.dispose(dom);
                initecharts(dom,title);
            });
        }

        $(document).ready(function () {
            var dom = document.getElementById('echartsDiv');
            initecharts(dom);
        });

    </script>
</head>

<body align=center>
    <div id="echartsDiv" style="width: 1200px;height:600px;">

    </div>
</body>

</html>

 

_大唐双龙
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路
07-18
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路；可用于地图展示等；json格式
广州精细地铁线路图（轨迹图）可视化python代码【修正版】
12-09
代码实现了在python下利用百度api获取地铁站点及地铁精细路线（轨迹）的墨卡托坐标数据并转化为WGS-84坐标系下的经纬度，并使用 plotly+mapbox 绘制地铁路线图
echarts实现西安地铁图
weixin_44727080的博客
08-21 4880
前言： echarts实现西安地铁图 效果图： 官网入口 实现代码： var data = [ { name: "地铁一号线", tooltip: { formatter: "{b}: 19999<br />" }, symbolSize: 0.1, value: [5, 750], x: 800, ...
echarts 绘制地铁线路
weixin_38233449的博客
03-29 962
【代码】echarts 绘制地铁线路。
攀枝花市地铁线路图 EChart
xcagy-国际性的文档记录中心
02-24 1890
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- <met...
基于ECharts的职位地铁图的实现
qq_40236628的博客
08-02 1426
目的 现在有一个需求，是要实现如下图所示的一个职位地铁图，用来表示公司所有的职位情况，其中黄色表示经历过的职位，绿色表示当前的职位，实现的方法可能包括canvas绘制甚至是一个个div拼凑而成，本篇文章介绍一种比较简单的方法——基于ECharts来实现。 1、熟悉ECharts实例 因为是基于ECharts来实现的，所以我们先来熟悉一下ECharts官方所提供的一个Graph实例，地址：https://echarts.apache.org/examples/zh/editor.html?c=gra
Javascript 之 Echart 实现沈阳地铁图
小虎博客
06-25 1746
要实现这种效果除了掌握echart 线图的配置，数据准备也是关键的一步，如何利用Js通过一张图取出每个点的坐标，就需要我们写一个取点的方法，通过鼠标事件自动取点，这个不是本文讨论的内容，如有兴趣可以私信我。
echarts 地图类型热力图
05-14
根据地理区域数据的可视化，除了在地图上添加散点之外，我们也可以制作地图类型的热力图，详细介绍：https://blog.csdn.net/qq_36437172/article/details/106121650
基于ECharts & 百度地图的热力图展示设计与实现
04-15
同时，热力图的数据显示需要一个二维数组，每个元素代表地图上一个区域的数据强度。 例如，我们可以使用如下代码片段来创建热力图： ```javascript // 初始化ECharts实例 var myChart = echarts.init(document....
echarts百度地图热力图踩坑后项目实践案例源文件
07-04
而百度地图则是一个强大的地图服务，结合ECharts，可以将地理信息与数据可视化相结合，创造出具有地理定位的热力图。 首先，"地图固定比例展示"是项目中的一项重要需求。在实际应用中，我们可能希望地图保持一个...
echarts陕西省地图，包含西咸新区
11-21
echarts陕西省地图，包含西咸新区，工作项目中用到，自己做的加的西咸新区部分，json格式，亲测可用
基于 HTML5 Canvas实现 的交互式地铁线路图
01-19
前言 前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些朋友。当然，如果有什么意见的可以直接跟我说，大家一起交流才会进步。 效果图   http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多，要全部展示，字显得有点小了，但是没关系，可以按照需求放大缩小，字体和绘制的内容并不会失真，毕竟都是用矢量绘
js画地铁图
02-24
js画地铁图
全国地铁线路图
07-01
全国城市地铁线路图，shp格式，用于学习科研用途.......
广州精细地铁线路图（轨迹图）可视化.py
05-10
代码实现了在python下利用百度api获取地铁站点及地铁精细路线（轨迹）的墨卡托坐标数据并转化为WGS-84坐标系下的经纬度，并使用 plotly+mapbox 绘制地铁路线图
echarts2.0热力图实例
12-01
首先，热力图的基本概念是将数据映射到一个网格上，每个单元格代表一个数据值，颜色的深浅表示数值的大小。在ECharts中，热力图通常通过`series.type = 'heatmap'`来定义。 **1. 引入ECharts库** 在HTML文件中，...
台北地铁图（转载）
weixin_34187822的博客
06-17 355
转载于:https://www.cnblogs.com/licheng/archive/2010/09/14/1825626.html
pyecharts绘制地铁图_2025年北京市轨道交通线路预绘图（含地铁、有轨电车、市郊铁路）...
weixin_39624097的博客
10-30 617
我觉得我是一个非常没有理科细胞的人。所以一直以来就算非常喜欢轨道交通却也从未尝试用电脑进行任意一张专业的设计图绘制。这是我第一次使用Adobe Illustrator，大概用了我六天的时间，还算满意。市面上现在能看到的地铁线路图，无论是官方的，还是地铁迷与设计迷自绘的诸多版本，多为优化后的走向，看起来相对直观，但却失真，无法让我们准确判断两地距离。因此我才绘了这一版即为真实比例和走向，又看起来相对...
echarts半环形图_郑州轨道交通图 2019 / 2025+
weixin_39961369的博客
12-26 291
恭喜郑州5号线即将开通，根据近期已批复的三期规划更新了郑州的线路图，因对郑州规划信息还不是很了解，站名主要参考了俭学街、乐天派、云淡风轻等人最新画的图，对比官方公示的站名，的确铁丝调整的站名更合理一些，故采用了很多站名。关于公示站名的讨论帖：http://www.ditiezu.com/thread-606215-1-10.html上传了未来和5月份两个版本，欢迎大家提意见~ 感谢（原图下载在文章...
echarts西安市热力图
最新发布
09-15
你可以通过以下代码使用 echarts 在网页中绘制西安市的热力图： ```html <!DOCTYPE html> <title>ECharts 热力图示例 <!-- 引入 ECharts 文件 --> <script src="https://cdn.staticfile.org/echarts/4.7.0/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值