echarts：迁徙图

最新推荐文章于 2023-11-09 22:22:36 发布

Dawn_www

最新推荐文章于 2023-11-09 22:22:36 发布

阅读量8k

点赞数 1

分类专栏：可视化

本文链接：https://blog.csdn.net/sinat_36226553/article/details/117326707

版权

可视化专栏收录该内容

4 篇文章 2 订阅

订阅专栏

前言

echarts官方之前有一个案例geo-lines，但在新版本中似乎被剔除了

根据代码学习了一下echarts，只为看看效果，所以数据简化了，并对代码做了注释

数据

迁徙数据：高德地图迁徙数据

GeoJSON数据：http://datav.aliyun.com/tools/atlas/

注意：由于echarts之前提供的china.js数据不符合规定，现在下载不了了，所以使用高德的全国json数据，使用 echarts.registerMap 注册数据

https://echarts.apache.org/zh/download-map.html

代码

需要的js文件：① echarts.js ② jquery.js

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>模拟迁徙图</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <style>
        #main{
            height: 700px;
        }
    </style>
</head>
 
<body>
    <div id='main'></div>
    <script type="text/javascript">
        var geoCoordMap = {
            '石家庄': [114.4995, 38.1006],
            '哈尔滨': [127.9688, 45.368],
            '杭州': [119.5313, 29.8773],
            '广州': [113.5107, 23.2196],
            '武汉': [114.3896, 30.6628],
            '南昌': [116.0046, 28.6633],
            '长沙': [113.0823, 28.2568],
            '西安': [109.1162, 34.2004],
            '上海': [121.4648, 31.2891],
            '天津': [117.4219, 39.4189],
            '重庆': [107.7539, 30.1904],
        };
 
        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: 30 }],
            [{ name: '广州' }, { name: '武汉', value: 20 }],
            [{ name: '广州' }, { name: '西安', value: 10 }]
        ];
    
        // var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
        
        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) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };
        
        var color = ['#7bbfea'];
        var series = [];
        [
            ['广州', GZData],
          
        ].forEach(function(item, i) {
            series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 1,
                //symbol: ['none', 'arrow'],
                //symbolSize: 10,
                effect: {
                    show: true,
                    period: 4, // 特效动画的时间
                    trailLength: 0.3, // 特效尾迹的长度。取从 0 到 1 的值，默认为 0.2，数值越大尾迹越长
                    color: '#fff',
                    // symbol: planePath, // 特效图形的标记
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 1,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 9,
                            color: '#fff'
                        }
                    }
                },
                symbolSize: function(val) {
                    return val[2] / 12;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },

                data: item[1].map(function(dataItem) {
                    //console.log(dataItem[1].name, geoCoordMap[dataItem[1].name])
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });
        
        option = {
            title: {
                text: '迁徙图',
                left: 'center',
                textStyle: {
                    color: 'black'
                }
            },
            // tooltip: { // 鼠标悬浮时显示的提示框
            //     trigger: 'item', //触发类型：1.'item'数据项图形触发 2.'axis'坐标轴触发
            // },
            geo: {
                map: 'alichina', // 与注册的地图名一致
                center: [108.114129, 28.550339],
                label: {
                    // normal:{
                    //     show: true, // 加载时是否显示各feature的name
                    // }
                    emphasis: {
                        show: true,  // 鼠标移动到feature上时是否显示各feature的name
                        textStyle: {
                            fontSize: 9,
                            color: '#000'
                        }
                    }
                },
                roam: true, // 开启鼠标缩放和平移漫游
                itemStyle: {
                    normal: { // 加载时的样式
                        areaColor: '#323c48',
                        //opacity: 0.4,
                        borderColor: '#404a59'
                    },
                    emphasis: { // 当鼠标移动到其上时的响应操作
                        areaColor: '#d3d7d4',
                        borderColor: '#fff',
                        borderWidth: 4,
                    }
                }
            },
            series: series
        };

        $.get('./data/china.json', function (jsonData) {
                echarts.registerMap('alichina', jsonData);
                var chart = echarts.init(document.getElementById('main'));
                chart.setOption(option);
            });

    </script>
</body>

</html>

效果

BUG

Cannot read property 'concat' of undefined

API查询

echarts —— tooltip

echarts线图的特效effect

参考

LeaFlet迁徙图的制作

echarts模拟迁徙图

echarts map地图设置外边框或者阴影

Dawn_www

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
echarts：迁徙图

前言 echarts官方之前有一个案例geo-lines，但在新版本中似乎被剔除了根据代码学习了一下echarts，只为看看效果，所以数据简化了，并对代码做了注释数据迁徙数据：高德地图迁徙数据 GeoJSON数据：http://datav.aliyun.com/tools/atlas/ 注意：由于echarts之前提供的china.js数据不符合规定，现在下载不了了，所以使用高德的全国json数据，使用 echarts.registerMap ...
复制链接

扫一扫

专栏目录