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

最新推荐文章于 2024-03-06 18:31:30 发布
最新推荐文章于 2024-03-06 18:31:30 发布
阅读量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
    评论
qcustomplot绘制热力图瀑布图_arcgis js 3.x使用webgl绘制热力图
weixin_39623244的博客
11-27 324
    ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候，绘制速度不尽人意，数据量再大些，缩放时候就会很卡，非常影响客户体验。    参考了一下网上webgl热力图，能达到更流畅的绘制的要求。(参考webgl-heatmap和heatmap-layer-js)webgl热力图使用很简单，只需要把屏幕坐标和权重设置到好就行，如下示例heatmap.addPoints([{x:x,...
LSV打印并制作城市地图教程 还可以做分布图、标注图
LocaSpace的博客
11-20 4562
很多朋友在使用地图时，想要打印城市的地图，很多找不到好的方法，今天就给大家介绍一个方便又快捷的制作并打印城市地图的方法。 先打开图新地球，打开菜单加载所需要的地图，既然要打印，就得使用大字体的地图。 把地图移到想要的城市附近 我们在制作地图时，一般只需要主城区，长沙主城区包括芙蓉区、天心区、岳麓区、开福区、雨花区和高新区等6个区。因此，我们需要下载包含这6个区的范围。 在“在线地图”-“地图标注”中加载一个“智图行政区划” 查看长沙附近的区划图 用主菜单中的绘制面或者矩形来框选这个
天地图热力图覆盖
09-09
详细的天地图的覆盖层调用，有需要的拿去，感觉还可以。
天地图专题七：行政区域标记，热力图（以广西为例）
热门推荐
liusaint1992的专栏
01-17 1万+
天地图行政区域划分，天地图热力图，天地图热点图的替代解决方案。
天地图：描绘热力图
低调D树苗的博客
04-09 3601
1.场景    在天地图上以热力图的形式展现数据，本文章以山东为例。2.解决方案    2.1天地图API已经有了绘制热力图的方法，可以使用。        http://lbs.tianditu.com/api/js4.0/examples.html    2.2描绘行政区划        天地图也没有提供行政区划API，所以行政区划采用边界点描绘。    2.3描绘热力图        给所需...
基于天地图热力图及区域划分
Charygus的博客
05-24 3596
使用天地图实现行政区域划分实现方式有两种： 使用国家天地图提供的SDK Openlayers Leaflet 实现效果： 利用国家天地图实现区域划分 首先需要注册成为开发者获取所需的开发秘钥才可进行开发。 官网地址：国家天地图用户注册 注册成功后获得开发者keys即可进行对应的开发。 接下来是获取你所需行政区划的坐标点才可进行划分。在没有获取数据的楼主是采用一下方式： 在开发案例中，通过搜...
vue-cli3 天地图添加热力图
qq_43030908的博客
12-24 1440
##注意：热力图需要引入一个js文件 <script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script> <template> <div id="app"> <div id="map"></div> <div> .
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，可以将地理信息与数据可视化相结合，创造出具有地理定位的热力图。 首先，"地图固定比例展示"是项目中的一项重要需求。在实际应用中，我们可能希望地图保持一个...
echarts2.0热力图实例
12-01
首先，热力图的基本概念是将数据映射到一个网格上，每个单元格代表一个数据值，颜色的深浅表示数值的大小。在ECharts中，热力图通常通过`series.type = 'heatmap'`来定义。 **1. 引入ECharts库** 在HTML文件中，...
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路
07-18
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路；可用于地图展示等；json格式
vue3 天地图上加热力图
weixin_53898445的博客
12-14 889
vue3 天地图上加热力图。
echarts的饼图下钻图
Zeroliuyun的博客
12-28 536
饼图下钻图代码记录
单击Echart饼图实现数据钻取
細水、長流√的专栏
05-18 1614
使用场景和需求： 　　第一层饼图显示党员党龄分布的情况。 　　 　　点击某个党龄段，查看拥有该党龄段的党支部。 　　 　　默认显示3个党支部，余下的党支部合并为其它，点击其它，查看余下的党支部。 　　 　　点击某个党支部，返回第一层饼图。 技术原理： 　　依靠Echart 点击事件的绑定，通过获取不同的参数向.net后端发送请求获取不同的数据，再将数据重新加载到Echart饼图中。 步骤概述： 　　1、初始Echart图表 　　 　　 　　2、在页面中定义函数
echarts饼图的简单钻取功能
tuo_tuo_guo的博客
09-24 2843
前端两个月，第一次写点东西记录一下，这两天研究了echarts饼图的钻取，但是没看懂官方文档，感觉echarts官方文档里没有这个功能。既开心又郁闷，郁闷的是好不容易想分享一下自己瞎搞的代码，发现公司电脑不能把东西看出来，只能简陋的用手机拍一下照了，希望可以帮助小可爱们，主要还是用来记录一下笔记啦。好啦，废话不多说，直接上代码(ps:希望有大佬能给出更好的方法，感觉自己的有点low) ...
Echarts饼图（下钻查询关联数据）两层关联数据嵌套
qq_48765361的博客
04-11 754
【代码】Echarts饼图（下钻查询关联数据）两层关联数据嵌套。
echart饼图下钻为极坐标图联动，有过渡动画
weixin_43860852的博客
08-01 777
echarts饼图切换、下钻为极坐标图的数据联动，有过渡动画。
echarts饼图下钻
最新发布
qq_43557302的博客
03-06 269
echarts饼图下钻。
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、付费专栏及课程。

余额充值