echarts快速实现迁徙地图

已于 2022-06-29 14:10:25 修改
阅读量1.5k 收藏 3
点赞数 1
分类专栏： 前端 GIS开发 echarts 文章标签： echarts 前端 javascript
于 2022-06-29 14:05:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43450799/article/details/125520548
版权
前端 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
GIS开发
2 篇文章 0 订阅
订阅专栏
echarts
1 篇文章 0 订阅
订阅专栏

迁徙图应用实例

准备资源

资源路径

在这里插入图片描述

第一种方式 引入资源

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echart/echarts.min.js"></script>

第二种方式引入资源

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echart/esl.js"></script>
<script type="text/javascript" src="js/echart/echarts.min.js"></script>

地图资源

geoJson生成
在这里插入图片描述

代码部分

第一种资源实现方式

function getEcharts2(data){

    var geoCoordMap = {
        '绥化': [126.968887,46.653845],
        '哈尔滨': [126.534967,45.803775],
        '佳木斯': [130.306119,46.799608],
        '鹤岗': [130.284147,47.34582],
        '双鸭山': [131.135587,46.675373],
        '伊春': [128.844938,47.735185],
        '大庆': [125.104093,46.59994],
        '齐齐哈尔': [123.912076,47.360706],
        '长春': [125.285367,43.841975],
        '牡丹江': [129.613981,44.558693],
        '大连': [121.593961,38.907619],
        '海拉尔区': [119.736279,49.212189]
    };

    var GZData = [
        [{ name: '哈尔滨' }, { name: '绥化', value: 95 }],
        [{ name: '哈尔滨' }, { name: '佳木斯', value: 90 }],
        [{ name: '哈尔滨' }, { name: '鹤岗', value: 80 }],
        [{ name: '哈尔滨' }, { name: '伊春', value: 70 }],
        [{ name: '哈尔滨' }, { name: '双鸭山', value: 60 }],
        [{ name: '哈尔滨' }, { name: '大庆', value: 50 }],
        [{ name: '哈尔滨' }, { name: '齐齐哈尔', value: 40 }],
        [{ name: '哈尔滨' }, { name: '长春', value: 20 }],
        [{ name: '哈尔滨' }, { name: '牡丹江', value: 10 }],
        [{ name: '哈尔滨' }, { name: '大连', value: 25 }],
        [{ name: '哈尔滨' }, { name: '海拉尔区', value: 25 }]
    ];

    var seriesMap = [['哈尔滨', GZData]];

    //初始化数据
    // var geoCoordMap = data.result.geoCoordMap;
    //
    // var seriesMap = data.result.seriesMap;
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
             //cnt定义数量，这里面随意增加自定义属性
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    cnt:dataItem[1].value,
                    coords: [fromCoord, toCoord]
                })
            }
        }
        return res;
    };
    //初始化series
    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];

        seriesMap.forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'triangle',// 箭头方式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    symbolSize: 20,
                    // loop: false
                },
                tooltip : {
                    formatter:function (params, ticket, callback) {
                      //鼠标悬浮提示信息获取自定义的结果
                        var htm = `<div><span>出发地：${params.data.fromName}</span>
                                <br><span>目的地：${params.data.toName}</span>
                                <br><span>订单量：${params.data.cnt}</span>
                                </div>`;
                        return htm;
                    }
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] ,
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                tooltip : {
                    formatter:function (params, ticket, callback) {
                        return params.data.name;
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return 16;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        var option  = {
            backgroundColor: '#404a59',
            title: {
                text: '旅游巴士迁徙图',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data:[''],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'single'
            },
            geo: {
                map: 'china',
                // center: [108.114129, 28.550339],
                center: [126.522926,45.75821],
                label: {
                    normal: {
                        show: true,
                        formatter: '{a}',
                        // position: 'inside',
                        backgroundColor: '#fff',
                        padding: [3, 5],
                        borderRadius: 3,
                        borderWidth: 1,
                        borderColor: 'rgba(0,0,0,0.5)',
                        color: '#777'
                    },
                    emphasis: {
                    }
                },
                selectedMode: 'single',
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#404a59'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: series
        }

    $.get('js/echart/map/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('mainMap'));
        chart.setOption(option);
    });

}

第二种资源实现方式

function getEcharts3(data){
    // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: '/echart'
        }
    });
    require([
        'echarts/echarts'
    ], function (echarts) {

        // var geoCoordMap = {
        //     '绥化': [126.968887,46.653845],
        //     '哈尔滨': [126.534967,45.803775],
        //     '佳木斯': [130.306119,46.799608],
        //     '鹤岗': [130.284147,47.34582],
        //     '双鸭山': [131.135587,46.675373],
        //     '伊春': [128.844938,47.735185],
        //     '大庆': [125.104093,46.59994],
        //     '齐齐哈尔': [123.912076,47.360706],
        //     '长春': [125.285367,43.841975],
        //     '牡丹江': [129.613981,44.558693],
        //     '大连': [121.593961,38.907619],
        //     '海拉尔区': [119.736279,49.212189]
        // };

        // var GZData = [
        //     [{ name: '哈尔滨' }, { name: '绥化', value: 95 }],
        //     [{ name: '哈尔滨' }, { name: '佳木斯', value: 90 }],
        //     [{ name: '哈尔滨' }, { name: '鹤岗', value: 80 }],
        //     [{ name: '哈尔滨' }, { name: '伊春', value: 70 }],
        //     [{ name: '哈尔滨' }, { name: '双鸭山', value: 60 }],
        //     [{ name: '哈尔滨' }, { name: '大庆', value: 50 }],
        //     [{ name: '哈尔滨' }, { name: '齐齐哈尔', value: 40 }],
        //     [{ name: '哈尔滨' }, { name: '长春', value: 20 }],
        //     [{ name: '哈尔滨' }, { name: '牡丹江', value: 10 }],
        //     [{ name: '哈尔滨' }, { name: '大连', value: 25 }],
        //     [{ name: '哈尔滨' }, { name: '海拉尔区', value: 25 }]
        // ];

        // var seriesMap = [['哈尔滨', GZData]];

        var geoCoordMap = data.result.geoCoordMap;
        var seriesMap = data.result.seriesMap;
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
             		//cnt定义数量，这里面随意增加自定义属性
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        cnt:dataItem[1].value,
                        coords: [fromCoord, toCoord]
                    })
                }
            }
            return res;
        };

        $.get('js/echart/map/china.json', function (chinaJson) {
        // $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            var myChart = echarts.init(document.getElementById('mainMap'));
            var color = ['#a6c84c', '#ffa022', '#46bee9'];
            var series = [];
            seriesMap.forEach(function (item, i) {
                series.push(
                    {
                        name: item[0],
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbol: 'triangle',// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                            symbolSize: 20,
                            // loop: false
                        },
                        tooltip : {
                            formatter:function (params, ticket, callback) {
                            //鼠标悬浮提示信息获取自定义的结果
                                var htm = `<div><span>出发地：${params.data.fromName}</span>
                                <br><span>目的地：${params.data.toName}</span>
                                <br><span>订单量：${params.data.cnt}</span>
                                </div>`;
                                return htm;
                                
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: color[i],
                                width: 1,
                                opacity: 0.4,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        name: item[0] ,
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        tooltip : {
                            formatter:function (params, ticket, callback) {
                                return params.data.name;
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return 16;
                        },
                        itemStyle: {
                            normal: {
                                color: color[i]
                            }
                        },
                        data: item[1].map(function (dataItem) {
                            return {
                                name: dataItem[1].name,
                                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                            };
                        })
                    });
            });
            myChart.setOption({
                backgroundColor: '#404a59',
                title: {
                    text: '旅游巴士迁徙图',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip : {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    data:[''],
                    textStyle: {
                        color: '#fff'
                    },
                    selectedMode: 'single'
                },
                geo: {
                    map: 'china',
                    // center: [108.114129, 28.550339],
                    center: [126.522926,45.75821],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{a}',
                            // position: 'inside',
                            backgroundColor: '#fff',
                            padding: [3, 5],
                            borderRadius: 3,
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0.5)',
                            color: '#777'
                        },
                        emphasis: {
                        }
                    },
                    selectedMode: 'single',
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: series
            });

        });
    });
}

效果展示

在这里插入图片描述

jacky 郑
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
Ancecis的博客
06-25 7374
总体介绍 最近由于工作室项目需要做一个数据可视化平台，这个平台最终是交由国外人使用的。所以需要使用到google map来实现。因为之前用过AMap + echarts实现数据可视化，所以觉得做这个项目是洒洒水得啦。但是当真正做起来才发现坑有点小大。坑主要在于迁徙图的实现。因为这个项目是合作项目，在谈需求的时候，双方商业互夸后，然后谈到迁徙图。问道这个这个项目的迁徙图和普通的迁徙图的有什么区别。老...
Echarts自定义地图显示区域，可以显示公园，小区，学校等区域
最新发布
speedwalkman的专栏
06-12 3119
具体工作中，使用Echarts时要显示自定义区域，但是往往这些区域不是默认的区域，需要我们手动建立这个区域的地理信息。 本章就是教会大家如何自己动手生产自定义区域的地理信息。
Echarts迁徙图简单图片实现
weixin_60703114的博客
03-14 2502
单图实现Echarts迁徙图效果
echarts：迁徙图
Puzzle的博客
05-27 8056
前言 echarts官方之前有一个案例geo-lines，但在新版本中似乎被剔除了 根据代码学习了一下echarts，只为看看效果，所以数据简化了，并对代码做了注释 数据 迁徙数据：高德地图迁徙数据 GeoJSON数据：http://datav.aliyun.com/tools/atlas/ 注意：由于echarts之前提供的china.js数据不符合规定，现在下载不了了，所以使用高德的全国json数据，使用 echarts.registerMap ...
vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能
weixin_43996368的博客
04-02 3916
vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能一、需求：按不同的层级展示不同的内容1.中国地图2.省级地图3.市级地图4.县和区以下的地图二、开发1. Echarts和地图容器的设置相关代码2. Echarts绘制相关代码2.Map绘制相关代码三、演示 一、需求：按不同的层级展示不同的内容 先放个UI图，这是要期望达到的效果 1.中国地图 点击带黄圈的深色区域可以进入对应的省份 2.省级地图 点击带黄圈的深色区域可以进入对应的地级市；点击返回上级可以回到中国地图 3
echarts地图map下钻到镇街、KMZ文件转GeoJson、合成自定义区域
ada的博客
07-11 1887
echarts地图map下钻到镇街、KMZ文件转GeoJson、合成自定义区域
百度地图集成echarts实现迁徙(航线)动画特效.rar
09-30
在本项目中，"百度地图集成echarts实现迁徙(航线)动画特效.rar"是一个包含资源的压缩包，主要用于展示如何将流行的JavaScript数据可视化库ECharts与百度地图结合，以创建具有动态迁徙航线效果的交互式地图。...
百度地图集成Echarts实现迁徙.rar
09-30
通过以上步骤和技巧，我们可以成功地在百度地图上利用Echarts实现模拟迁徙效果。这不仅适用于人口流动分析，还可以应用于鸟类迁徙、物流运输等场景，为数据分析和展示提供直观且生动的视觉体验。
echarts 迁徙图+百度地图
11-01
将ECharts迁徙图与百度地图结合，可以实现更直观、生动的数据可视化效果。 ### ECharts 迁徙图 ECharts 迁徙图的核心在于其`series-type: 'lines'`配置，通过设置起点和终点来描绘数据流动的路径。以下是一些关键...
百度地图+eChart实现动态迁徙图
05-29
在本项目中，我们将探讨如何使用百度地图API与ECharts数据可视化库来创建一个动态的迁徙图。这种图表能够生动地展示人口或物体在不同地理位置间的流动情况，常用于研究人口迁移、交通流量分析等领域。 首先，让我们...
echarts制作天津市迁徙图
12-02
很多场景需要开发迁徙图，为此选择echarts开发一款基于天津市市内区县坐标的迁徙图，动态展现了人流迁徙的示意。
百度Echarts模拟迁徙demo
01-22
百度Echarts模拟迁徙demo，包含了html文件、js文件等。双击可以运行查看效果！
echarts实现的迁徙图示例
12-05
在本示例中，我们将重点关注如何使用 ECharts 实现迁徙图。迁徙图是一种展示人口、物流或者信息流动的图表，通常用于展现不同地区之间的交互关系。 在 ECharts 中，实现迁徙图通常需要以下几个关键步骤： 1. **...
echarts地图迁徙图--根据数据设置线的颜色
qq_39581052的博客
04-12 4740
直接贴代码了 var geoCoordMap = { //可以在地图上显示的城市的坐标信息 ‘石家庄’: [114.52,38.05], ‘长春’: [125.8154, 44.2584], ‘长沙’: [113.0823, 28.2568], ‘贵阳’: [106.6992, 26.7682], ‘杨凌’: [109.1162, 34.2004], ‘深圳’: [114.5435, 22.54...
百度 Echarts 地图->模拟迁徙，实现自动切换地图
热门推荐
cj_zyz的博客
08-02 1万+
百度 Echarts 地图->模拟迁徙，实现自动切换地图 刚好有个项目，然后前端找了这个百度的echarts地图，领导说好，然后说要让它自动切换地图，就丢给我了。。。不过还好，做出来了。可惜的是，效果是实现了，最后却被更高级的领导pass掉，但决定写下这篇博客，或许能帮到有
有关人口迁徙图实现案例
A_bad_boy_hahaha的博客
01-27 360
function demo(){ var haha = echarts.init(document.getElementById(“echarts”)); var chinaGeoCoordMap = { ‘黑龙江’: [127.9688, 45.368], ‘内蒙古’: [110.3467, 41.4899], “吉林”: [125.8154, 44.2584], ‘北京市’: [116.4551, 40.2539], “辽宁”: [123.1238, 42.1216], “河北”: [114.4995,
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
zhang8907xiaoyue的博客
10-14 1030
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅读 评论(67) 收藏 举报  分类： ECharts（3）  版权声明：本文为博主原创文章，未经博主允许不得转载。 很多小伙伴都来要de
echarts地图迁徙图
qq_32094783的博客
01-29 843
import React, { Component } from 'react' import { connect } from 'react-redux' // import posed from 'react-pose' import 'echarts/map/js/china' import geoJson from 'echarts/map/json/china.json' import echarts from 'echarts' // import './index.css' import {.
Echarts实战案例代码(4)：地图散点气泡图飞线(迁徙线)API接口前端处理数据的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-01 1852
在使用Echarts地图组件时，做飞线或散点气泡图，需要转换经纬度格式。（如需转载，请注明来源于漏刻有时数据可视化数据分析研究中心） 一、标准的JSON数据API接口，后端无论是php\python\java都可以，只要生成对应的JSON数据格式即可。 { "err": "", "res": "", "data": [ { "lineId": "1", "fromName": "喀什", "toName": "北京", "fromLon"
echarts实现模拟迁徙
04-27
要使用 ECharts 实现模拟迁徙，你需要先准备好你的数据。ECharts 中的迁徙图主要包括两个部分，即迁徙起点和迁徙终点。你需要为每个迁徙起点和终点都指定经纬度坐标，以便能够在地图上准确显示。 接下来，你需要在 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值