ECharts模拟百度迁徙实例

本实例原始信息：
作者：
演示地址：echarts模拟迁徙
源码地址：github-ananix-qianxi

前言

“百度地图春节人口迁徙大数据”（简称“百度迁徙”）是百度在春运期间推出的技术品牌项目，为业界首个以“人群迁徙”为主题的大数据可视化项目。

准备

• 开发工具
  由于是前端页面项目，所以一般的编辑器都可以，推荐使用
  如果要自己挂载本地geo地图，则需要本地服务器环境，使用vs code时，安装live server插件即可
• 引入文件
  echarts文件*
  地图文件
  jquery文件

编写

1. 引入资源

<!-- 线上资源-->
  <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> -->
  <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> -->
<!--本地资源-->  
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
    <!-- <script src="js/china.js"></script> -->

1. 准备dom（将来放echarts图表的位置）

<div id="container" style="height: 100%"></div>

1. 初始化一个 echarts 实例

 // 基于准备好的dom，初始化echarts实例
 // 方式一：使用china.js地图初始化方式
 // var mychart = echarts.init(document.getelementbyid('container'));
 // 方式二：使用地定义geo地图文件初始化方法，需要提前准备好china.json地图文件
 $.get('js/map/china.json', function (chinajson) {
            //注册地图
            echarts.registermap('china', chinajson);
            //初始化echarts实例
            var dom = document.getelementbyid("container");
            var mychart = echarts.init(dom);
                        
                        //...option
                        //...data
                        //...set
                        //...
                        
        });

1. 指定图表的配置项和数据

// 在上一步option的位置
//  0 准备option对象
option = null;
// 1 准备数据
            // 地区坐标信息
            var geocoordmap = {
                '上海': [121.4648, 31.2891],
                '东莞': [113.8953, 22.901],
                '东营': [118.7073, 37.5513],
                '中山': [113.4229, 22.478],
                '临汾': [111.4783, 36.1615],
                            //...
                //此处省略部分数据...
                '长治': [112.8625, 36.4746],
                '阳泉': [113.4778, 38.0951],
                '青岛': [120.4651, 36.3373],
                '韶关': [113.7964, 24.7028]
            };

            // 准备流向信息，value为地区的数据值
            var bjdata = [
                [{ 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 shdata = [
                [{ name: '上海' }, { name: '包头', value: 95 }],
                //省略部分数据...
            ];

            var gzdata = [
                [{ name: '广州' }, { name: '福州', value: 95 }],
                //省略部分数据...
                [{ name: '广州' }, { name: '海口', value: 10 }]
            ];

            var lzdata = [
                [{ name: '兰州' }, { name: '福州', value: 95 }],
               //省略部分数据...
            ];
                        
            // 流向图标，可自定义
            var planepath = 'arrow'
                    
            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 = ['#a6c84c', '#ffa022', '#46bee9'];
                        // 准备自己个性化的数据
            var lanzhou = {
                name: '点',
                type: 'effectscatter',
                coordinatesystem: 'geo',
                zlevel: 3,
                rippleeffect: {
                    brushtype: 'stroke'
                    //波纹的绘制方式，可选 'stroke' 和 'fill'
                },
                showeffecton: "render",//显示涟漪
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        formatter: '{b}'
                    }
                },
                symbolsize: function (val) {
                    return val[2] / 180;
                },
                itemstyle: {
                    normal: {
                        color: "red"
                    }
                },
                                
                                // 
                data: [
                    {
                        name: "lanzhou",
                        value: [103.5901, 36.3043, 1092],
                        tooltip: {
                            //formatter: '中心资源校： <br />{b0}'
                            formatter: function (item, ticket, callback) {
                                let res = "中心资源校：" + item.name + "<br />地区教学点：";
                                for (let i = 0, l = lzdata.length; i < l; i++) {
                                    res += '<br/>& ' + lzdata[i][1].name;
                                }
                                return res
                            },
                        }
                    }
            //...
            // 准备系列series   
            var series = [lanzhou];
            [['北京', bjdata], ['上海', shdata], ['广州', gzdata], ['兰州', lzdata]].foreach(function (item, i) {
                series.push({
                    name: item[0] + ' top10',
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 6,
                        traillength: 0.7,
                        color: '#fff',
                        symbolsize: 3
                    },
                    linestyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: convertdata(item[1])
                },
                    {
                        name: item[0] + ' top10',
                        type: 'lines',
                        zlevel: 2,
                        tooltip: {
                            //formatter: '{a} >{b}{c1}{d}'
                            formatter: function (sdasd, ticket, callback) {
                                let res = "" + sdasd.data.fromname + "->>>" + sdasd.data.toname;
                                return res
                            },
                        },
                        symbol: ['none', 'arrow'],
                        symbolsize: 10,
                        effect: {
                            show: true,
                            period: 6,
                            traillength: 0,
                            symbol: planepath,
                            symbolsize: 8
                        },
                        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: 2,
                        rippleeffect: {
                            brushtype: 'stroke'
                            //波纹的绘制方式，可选 'stroke' 和 'fill'
                        },
                        showeffecton: "emphasis",//高亮时候显示涟漪
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolsize: function (val) {
                            return val[2] / 8;
                        },
                        itemstyle: {
                            normal: {
                                color: color[i]
                            }
                        },
                        tooltip: {
                            formatter: '地区教学点: <br />{b0} '
                        },
                        data: item[1].map(function (dataitem) {
                            return {
                                name: dataitem[1].name,
                                value: geocoordmap[dataitem[1].name].concat([dataitem[1].value])
                            };
                        })
                    });
            });                 
// 2 将数据放到option里
option = {
                backgroundcolor: '#404a59',
                title: {
                    text: '教育资源流向',
                    subtext: '数据纯属虚构',
                    left: 'center',
                    textstyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    //formatter: '中心资源校：{b0}<br />地区教学点：{b1}{c}{d}'

                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    data: ['北京 top10', '上海 top10', '广州 top10', '兰州 top10'],
                    textstyle: {
                        color: '#fff'
                    },
                    selectedmode: 'multiple'//'single' 或者 'multiple' 使用单选或者多选模式
                },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemstyle: {
                        normal: {
                            areacolor: '#323c48',
                            bordercolor: '#404a59'
                        },
                        emphasis: {
                            areacolor: '#2a333d'
                        }
                    }
                },
                series: series
        };

1. 注册option显示图表

     if (option && typeof option === "object") {
         //注册option显示图表
        mychart.setoption(option, true);
       }

1. 加自己的相关控制代码

           //自己的控制代码
            mychart.on('click', function (params) {
                var labelselect;
                if (params.componentsubtype === 'effectscatter') {
                    // 点击到了 effectscatter 上
                    switch (params.name + " top10") {
                        case "上海 top10":
                            labelselect = {
                                "上海 top10": true,
                                "兰州 top10": false,
                                "北京 top10": false,
                                "广州 top10": false
                            };
                            break;
                        case "lanzhou top10":
                            labelselect = {
                                "上海 top10": false,
                                "兰州 top10": true,
                                "北京 top10": false,
                                "广州 top10": false
                            };
                            break;
                        case "北京 top10":
                            labelselect = {
                                "上海 top10": false,
                                "兰州 top10": false,
                                "北京 top10": true,
                                "广州 top10": false
                            };
                            break;
                        case "广州 top10":
                            labelselect = {
                                "上海 top10": false,
                                "兰州 top10": false,
                                "北京 top10": false,
                                "广州 top10": true
                            };
                            break;
                        default:
                            labelselect = {
                                "上海 top10": false,
                                "兰州 top10": false,
                                "北京 top10": false,
                                "广州 top10": false
                            };
                    }
                }
                option.legend.selected = labelselect;
                mychart.setoption(option, true);
            });

测试

其他工具自行启动服务访问文件即可
vs code右键，点击open with live server即可
。。。

扩展

结合百度地图的模拟迁徙