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

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);

利用百度Echart库，完成简单迁徙图相关推荐

Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
霍兰德人格分析：利用Python第三方库matplotlib绘制雷达图
美国约翰霍普金斯大学霍兰德教授认为,个人职业兴趣特性与职业之间应有一种内在的对应关系.根据兴趣的不同,人格可分为研究型(I).艺术型(A).社会型(S).企业型(E).传统型(C).现实型(R)六个维 ...
Python学习-Matplotlib库绘制简单点阵图、线型图操作
Python学习-Matplotlib库绘制简单散点图图和线型图.标签设置以及刻度线设置操作目录 1.Matplotlib绘图细节的简单理解 2.绘制点图.线型图 3.给图表设置复杂标注 4.移动刻 ...
利用Python Matplotlib库做简单的视觉化(2)
Matplotlib练习题目练习一方法一(条形图) 方法一效果图方法二(扇形图) 方法二效果图练习二练习二代码练习二效果图小结题目练习一方法一(条形图) from matplot ...
利用Python Matplotlib库做简单的视觉化
Matplotlib练习练习一题目代码效果图练习二题目练习1代码练习1效果图练习2代码练习2效果图小结练习一题目代码 import matplotlib.pyplot as ...
Python利用百度AI库颜值分析（包括脸型情绪颜值打分）
导入库 from aip import AipFace import base64 import time from PIL import Image,ImageDraw,ImageFont from ...
create-react-app 结合百度地图和Echarts3.0迁徙图
一.创建create-react-app脚手架 npm install -g create-react-app create-react-app my-app /* 去 ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
pygal的简单应用：利用pygal库分别绘制雷达图、柱状图和折线图
在Python中,pygal 是一个常用数据可视化的数据图库,它以面向对象的方式来创建各种数据图,而且使用 pygal 可以非常方便地生成各种格式的数据图,包括 PNG.SVG.JPG .GIF等.使 ...

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

0 准备城市坐标值

1 准备UI素材

2 准备迁徙数组

2.1 迁入数据

2.2 迁出数据

3 填充迁徙数据Series

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

3.2 高亮指定城市

3.3 填装迁徙数据

3.4 迁徙数据可视化设置

4 构建地图对象

利用百度Echart库，完成简单迁徙图相关推荐

最新文章

热门文章