echarts 生成 迁徙图_echarts3 迁徙图 迁入迁出(示例代码)
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 迁徙图 迁入迁出(示例代码)相关推荐
- 折线图 放大_第二个折线图(Line Plot)的示例代码
这个折线图: 不同样式虚线做数据线:chart.lines[i].strokeDashArray 虚线截小段做图例的色块: LineLegend,legend.colorNamePairs = Aut ...
- html页面按钮布局,js动态生成按钮,页面用DIV简单布局(示例代码)
今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 * { margin: 0px; padding: 0px; } .header { width: 100% ...
- navicat er图没有连线_迁徙图?流向图?城市关系强度图?
文章首发于公众号「码上GIS」,欢迎关注.文中流向图和城市关系强度图的 ArcMap 10.5 Mxd 工程和数据可在公众号后台回复「190708」和「190709」获取 不记得是从哪年开始,每年春运 ...
- 使用mapbox+turf.js完成迁徙图,流向图教程
以前对于迁徙图流向图这样的需求大多都是采用echarts这样的图标组件库做的.这篇文章跟大家分享一下如何使用webgis的技术方式实现迁徙图,流向图这样的专题地图. 首先我们要把思路捋清楚,迁徙图表示 ...
- php 生成饼状图,折线图,条形图 通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
- php k线图 echarts,股票K线图,折线图总结(echarts)
此处利用bootstrap+echarts画布配置参数实现响应式,并且利用socket实时通信实现数据的实时更新 (一)介绍 ECharts (Enterprise Charts 商业产品图表库) E ...
- vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题 实现效果 首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
- r语言echarts画箱线图_R语言学习 - 箱线图(小提琴图、抖动图、区域散点图)
箱线图 箱线图是能同时反映数据统计量和整体分布,又很漂亮的展示图.在2014年的Nature Method上有2篇Correspondence论述了使用箱线图的好处和一个在线绘制箱线图的工具.就这样都 ...
- 利用ECharts绘制各式酷炫水球图
本文来自于ECharts官方博客. 原文地址:ECharts 水球图教程 责编:陈秋歌,关注前端开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net. 水球图是一种适合于展现单个百分比 ...
最新文章
- When use jQuery databTables after add action reloa
- PowerDesigner12.5 下载、汉化及破解
- Cisco 3550配置DHCP的实际经验
- java heap buffer direct buffer_java NIO - DirectBuffer 和 HeapBuffer
- AI来袭程序猿是否该学习Python了
- 谷歌更新TensorFlow目标检测API
- C#下实现的K-Means优化[1]-「离群点检测」
- K8S专题-基础组件的部署1
- windows 域的安装方法
- Win10: adb: error: remote could not create file(解决)
- c++计算字符串中浮点数
- python3下载及安装教程
- hlw8032功率计测试软件,功率计量芯片LAYOUT指南
- linux如何生成awr报告,手工生成AWR报告方法记录
- 电脑终端仿真程序(crt中文免费版) 附使用说明
- python 多行注释 字符串_python多行注释和跨行字符串
- Google抢Waze:除了地图还有什么?
- Mysql——》三星索引
- 论文笔记《Modeling Task Relationships in Multi-task Learning with Multi-gate Mixture-of-Experts》
- Mac Terminal (终端) 使用ssh快速登录远程服务器
热门文章
- 08-Flutter移动电商实战-dio基础_伪造请求头获取数据
- Android studio 报错:Manifest merger failed xxx
- MySQL Incorrect string value: 有可能是字符串长度不够了
- java二叉树转换为链表_leetcode刷题笔记-114. 二叉树展开为链表(java实现)
- leetcode 73 矩阵置零 C++ 两种解法
- 【OS学习笔记】十三 保护模式一:全局描述符表(GDT)
- Linux 常用的帮助命令
- 小程序返回上一页并传参
- 必须理解的分布式系统中雷同的集群技术及原理
- NET Core 指令启动