geoCoordMap ={‘上海‘: [121.4648,31.2891],‘佛山‘: [112.8955,23.1097],‘保定‘: [115.0488,39.0948],‘兰州‘: [103.5901,36.3043],‘包头‘: [110.3467,41.4899],‘北京‘: [116.4551,40.2539],‘天津‘: [117.4219,39.4189],‘常州‘: [119.4543,31.5582],‘广州‘: [113.5107,23.2196],

};//航班线路

var BJData =[

[{name:‘北京‘,value:90}, {name:‘广州‘,value:90}]

];//航班线路

var GZData =[

[ {name:‘广州‘,value:90},{name:‘北京‘,value:90}]

];//箭头的svg

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‘;//push进去航班线路开始-结束地点-经纬度

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]

});

}

}returnres;

};//航班颜色

var color = [‘#a6c84c‘, ‘#ffa022‘, ‘#46bee9‘];//航班数据

var series =[];//遍历航班

[[‘广州‘, GZData]].forEach(function(item, i) {//打印航班线路

console.log(convertData(item[1]))//配置

series.push({//系列名称,用于tooltip的显示

name: item[0] + ‘ Top10‘,

type:‘lines‘,//用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中

zlevel: 1,//出发到目的地 的白色尾巴线条

//线特效的配置

effect: {

show:true,//特效动画的时间,单位为 s

period: 6,//特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长

trailLength: 0.7,//特效标记的颜色

color: ‘#fff‘,//特效标记的大小

symbolSize: 3},//出发到目的地 的线条颜色

lineStyle: {

normal: {

color: color[i],

width:0,//fu度

curveness: 0.2}

},//开始到结束数据

data: convertData(item[1])//data:

},//出发地信息

{

name:‘广州‘,

type:‘lines‘,

coordinateSystem:‘geo‘,

zlevel:2,

rippleEffect: {

brushType:‘stroke‘},

label: {

normal: {

show:true,

position:‘right‘,

formatter:‘{a}‘}

},

effect: {

show:true,

period:6,

trailLength:0,

symbol: planePath,

symbolSize:15},

lineStyle: {

normal: {

color: color[i],

width:1,

opacity:0.4,

curveness:0.2}

},

data: convertData(item[1])

},//目的地信息

{

name:‘北京‘,

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: item[1].map(function(dataItem) {return{

name: dataItem[1].name,

value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])

};

})

});

});//标题和风格参数

option ={

backgroundColor:‘#404a59‘,

title : {

text:‘北京到广州‘,

subtext:‘可否显示北京这个出发地点?‘,

left:‘center‘,

textStyle : {

color:‘#fff‘}

},

tooltip : {

trigger:‘item‘},

legend: {

orient:‘vertical‘,

top:‘bottom‘,

left:‘right‘,

data:[‘广州 Top10‘],

textStyle: {

color:‘#fff‘},

selectedMode:‘single‘},

geo: {

map:‘china‘,//鼠标移入是否显示省份

label: {

emphasis: {

show:true}

},

roam:true,

itemStyle: {

normal: {

areaColor:‘#323c48‘,

borderColor:‘#404a59‘},

emphasis: {

areaColor:‘#2a333d‘}

}

},

series: series

};

echarts 生成 迁徙图_echarts3 迁徙图 迁入迁出(示例代码)相关推荐

  1. 折线图 放大_第二个折线图(Line Plot)的示例代码

    这个折线图: 不同样式虚线做数据线:chart.lines[i].strokeDashArray 虚线截小段做图例的色块: LineLegend,legend.colorNamePairs = Aut ...

  2. html页面按钮布局,js动态生成按钮,页面用DIV简单布局(示例代码)

    今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 * { margin: 0px; padding: 0px; } .header { width: 100% ...

  3. navicat er图没有连线_迁徙图?流向图?城市关系强度图?

    文章首发于公众号「码上GIS」,欢迎关注.文中流向图和城市关系强度图的 ArcMap 10.5 Mxd 工程和数据可在公众号后台回复「190708」和「190709」获取 不记得是从哪年开始,每年春运 ...

  4. 使用mapbox+turf.js完成迁徙图,流向图教程

    以前对于迁徙图流向图这样的需求大多都是采用echarts这样的图标组件库做的.这篇文章跟大家分享一下如何使用webgis的技术方式实现迁徙图,流向图这样的专题地图. 首先我们要把思路捋清楚,迁徙图表示 ...

  5. php 生成饼状图,折线图,条形图 通用类

    生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站  http://echarts.baidu.com/ <?php class Echarts ...

  6. php k线图 echarts,股票K线图,折线图总结(echarts)

    此处利用bootstrap+echarts画布配置参数实现响应式,并且利用socket实时通信实现数据的实时更新 (一)介绍 ECharts (Enterprise Charts 商业产品图表库) E ...

  7. vue 使用echarts实现3D饼图和环形图

    记录一下echarts实现3d饼图和环形图功能## 标题 实现效果 首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...

  8. r语言echarts画箱线图_R语言学习 - 箱线图(小提琴图、抖动图、区域散点图)

    箱线图 箱线图是能同时反映数据统计量和整体分布,又很漂亮的展示图.在2014年的Nature Method上有2篇Correspondence论述了使用箱线图的好处和一个在线绘制箱线图的工具.就这样都 ...

  9. 利用ECharts绘制各式酷炫水球图

    本文来自于ECharts官方博客. 原文地址:ECharts 水球图教程 责编:陈秋歌,关注前端开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net. 水球图是一种适合于展现单个百分比 ...

最新文章

  1. When use jQuery databTables after add action reloa
  2. PowerDesigner12.5 下载、汉化及破解
  3. Cisco 3550配置DHCP的实际经验
  4. java heap buffer direct buffer_java NIO - DirectBuffer 和 HeapBuffer
  5. AI来袭程序猿是否该学习Python了
  6. 谷歌更新TensorFlow目标检测API
  7. C#下实现的K-Means优化[1]-「离群点检测」
  8. K8S专题-基础组件的部署1
  9. windows 域的安装方法
  10. Win10: adb: error: remote could not create file(解决)
  11. c++计算字符串中浮点数
  12. python3下载及安装教程
  13. hlw8032功率计测试软件,功率计量芯片LAYOUT指南
  14. linux如何生成awr报告,手工生成AWR报告方法记录
  15. 电脑终端仿真程序(crt中文免费版) 附使用说明
  16. python 多行注释 字符串_python多行注释和跨行字符串
  17. Google抢Waze:除了地图还有什么?
  18. Mysql——》三星索引
  19. 论文笔记《Modeling Task Relationships in Multi-task Learning with Multi-gate Mixture-of-Experts》
  20. Mac Terminal (终端) 使用ssh快速登录远程服务器

热门文章

  1. 08-Flutter移动电商实战-dio基础_伪造请求头获取数据
  2. Android studio 报错:Manifest merger failed xxx
  3. MySQL Incorrect string value: 有可能是字符串长度不够了
  4. java二叉树转换为链表_leetcode刷题笔记-114. 二叉树展开为链表(java实现)
  5. leetcode 73 矩阵置零 C++ 两种解法
  6. 【OS学习笔记】十三 保护模式一:全局描述符表(GDT)
  7. Linux 常用的帮助命令
  8. 小程序返回上一页并传参
  9. 必须理解的分布式系统中雷同的集群技术及原理
  10. NET Core 指令启动