利用百度Echart库，完成简单迁徙图

来源：互联网发布：手机铃声编辑软件编辑：程序博客网时间：2024/05/22 10:54

0 准备城市坐标值

/** * 全国主要城市的坐标值 */var cityCoordiante_var ={    '上海': [121.4648,31.2891],    '东莞': [113.8953,22.901],    '东营': [118.7073,37.5513],    '中山': [113.4229,22.478],    '临汾': [111.4783,36.1615],    '临沂': [118.3118,35.2936],    '丹东': [124.541,40.4242],    '丽水': [119.5642,28.1854],    '乌鲁木齐': [87.9236,43.5883],    '佛山': [112.8955,23.1097],    '保定': [115.0488,39.0948],    '兰州': [103.5901,36.3043],    ....};

1 准备UI素材

//飞机图标矢量图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 color = ['#a6c84c', '#ffa022', '#46bee9'];

2 准备迁徙数组

2.1 迁入数据

var TochengduData2015 =[    [ {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},{name:'成都'}]];

2.2 迁出数据

var FromchengduData2016 = [    [ {name:'成都'},{name:'上海',value:92}],    [ {name:'成都'},{name:'广州',value:91}],    [ {name:'成都'},{name:'大连',value:82}],    [ {name:'成都'},{name:'南宁',value:73}],    [ {name:'成都'},{name:'南昌',value:66}],    [ {name:'成都'},{name:'拉萨',value:57}],    [ {name:'成都'},{name:'长春',value:48}],    [ {name:'成都'},{name:'包头',value:39}],    [ {name:'成都'},{name:'重庆',value:20}],    [ {name:'成都'},{name:'常州',value:11}]];

3 填充迁徙数据Series

3.1 将迁徙数据改写为地图中的连线形式

var LineCities = function (data) {    //准备结果数组    var res = [];    //遍历参数数组，参数格式如2.1或2.2所示    for (var i = 0; i < data.length; i++)     {        //获取一条记录        var dataItem = data[i];        //利用切片方式，通过name属性，获得城市列表中城市的坐标        var fromCoord = cityCoordiante_var[dataItem[0].name];        var toCoord = cityCoordiante_var[dataItem[1].name];        //如果起、止城市都获得成功        if (fromCoord && toCoord)        {            //按照json对象存入res数组中            res.push            ({                fromName: dataItem[0].name,                toName: dataItem[1].name,                coords: [fromCoord, toCoord]            });        }    }    //返回结果    return res;};

3.2 高亮指定城市

/** * 利用城市名称-值，实现地图高亮 * @param {Object} cityName 城市名 * @param {Object} value 值 */var markerCity = function (cityName,value){    var res = [];    var geoCoord = cityCoordiante_var[cityName];    if (geoCoord)     {        if(value==undefined)            value=100;        res.push({name: cityName,value: geoCoord.concat(value)});    }    return res;};

3.3 填装迁徙数据

/** * 填装迁徙数据 * @param {Object} data [[{name:fromcity,value:fromvalue},{name:tocity,value:tocity}]] * @param {Object} isFrom 是迁入还是迁出数据 */var fullLineCityData=function(data,isFrom){    index=isFrom?0:1;    var res = [];    data.map(function (dataItem)    {        res.push        ({            name:dataItem[index].name,            value: cityCoordiante_var[dataItem[index].name].concat([dataItem[index].value])            /**注意value的格式 [lat,lon,value] 一定是数组包裹的*/        });     });    return res;}

3.4 迁徙数据可视化设置

/** * 填装迁徙数据集合(谨慎修改) * @param {Object} MigraineData 填装数据集合 */var FullMigraineData= function(MigraineData,isTo){    if(isTo==undefined)        isTo=true;    /**     * 准备数据集合     */    var series = [];    /**     * 从TochengduData2015数据集中遍历数据     */    [['成都', MigraineData]].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: LineCities(item[1])//绘制城市连接线            },            /*迁徙线飞机效果*/            {                name: item[0] + ' Top10',                type: 'lines',                zlevel: 2,                symbol: ['none', 'arrow'],                symbolSize: 10,                effect:                 {                    show: true,                    period: 6,                    trailLength: 0,                    symbol: planePath,                    symbolSize: 15                },                lineStyle:                 {                   normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}                },                data: LineCities(item[1])//绘制城市连接线            },            {                /*高亮迁入地区*/                name: item[0] + ' Top10',                type: 'effectScatter',                coordinateSystem: 'geo',                zlevel: 2,                rippleEffect: {brushType: 'stroke'},                label:                 {                    normal:                     {                        show: true,                        position: 'right',                        formatter: '{b}'                    }                },                symbolSize: function (val)                 {                    return val[2] / 8;                },                itemStyle:                 {                    normal: {color: color[i]}                },                /*填装迁徙数据*/                data: fullLineCityData(item[1],isTo)            },            {                /*高亮迁出区域*/                name: item[0] + ' Top10',                type: 'effectScatter',                coordinateSystem: 'geo',                zlevel: 3,                rippleEffect: {brushType: 'stroke'},                label:                 {                    normal:                     {                        show: true,                        position: 'right',                        formatter: '{b}'                    }                },                symbolSize: function (val)                 {                    return val[2] / 8;                },                itemStyle:                 {                    normal: {color: color[1]}                },                data: markerCity(item[0])//高亮迁出区域            }            );        });    return  series;}

4 构建地图对象

            /**设置迁入数据*/            var series = FullMigraineData(TochengduData2015,true);            /**设置迁出数据*/            //var series = FullMigraineData(FromchengduData2016,false);            /**设置地图样式(可修改样式)*/            option =             {                backgroundColor: '#121212',                title :                 {                    text: '模拟迁徙',                    subtext: '数据纯属虚构',                    left: 'center',                    textStyle : {color: '#fff'}                },                tooltip : {trigger: 'item'},                legend:                 {                    orient: 'vertical',                    top: 'bottom',                    left: 'right',                    data:['成都 Top10'],                    textStyle: {olor: '#fff'},                    selectedMode: 'single'                },                geo:                 {                    map: 'china',                    label: {emphasis: {show: false}},                    roam: true,                    itemStyle:                     {                        normal: {areaColor: '#323c48',borderColor: '#404a59'},                        emphasis: {areaColor: '#2a333d'}                    }                },                series: series            };            //绑定迁徙地图            var myChart = echarts.init(document.getElementById('MigraineMap'));            myChart.setOption(option);

0 0