Echarts世界流向图

【前言】
Echarts----世界流向图 demo

【效果图】
效果图如下：
【CODE】
code如下：

 /*图中相关城市经纬度,根据需求添加数据关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {'南宁': [108.479, 23.1152],'广州': [113.5107, 23.2196],'重庆': [107.7539, 30.1904],'芬兰': [24.909912, 60.169095], '美国': [-100.696295, 33.679979], '日本': [139.710164, 35.706962], '韩国': [126.979208, 37.53875], '瑞士': [7.445147, 46.956241],'东南亚': [117.53244, 5.300343], '澳大利亚': [135.193845, -25.304039], '德国': [13.402393, 52.518569], '英国': [-0.126608, 51.208425], '加拿大': [-102.646409, 59.994255]
};/* 记录下起点城市和终点城市的名称，以及权重数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小*/// 重庆
var CQData = [[{name: '芬兰'}, {name: "重庆",value: 30}],[{name: '德国'}, {name: "重庆",value: 30}],[{name: '英国'}, {name: "重庆",value: 30}],[{name: '重庆'}, {name: "英国",value: 30}]
];// 广州
var GZData = [[{name: '日本'}, {name: "广州",value: 30}],[{name: '东南亚'}, {name: "广州",value: 30}]
];// 南宁
var NNData = [[{name: '南宁'}, {name: "加拿大",value: 30}],[{name: '南宁'}, {name: "美国",value: 100}],[{name: '南宁'}, {name: "澳大利亚",value: 95}],[{name: '南宁'}, {name: "瑞士",value: 30}]
];// 小飞机的图标，可以用其他图形替换
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 convertData = function(data) {var res = []; for(var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[1].name];var toCoord = geoCoordMap[dataItem[0].name];if(fromCoord && toCoord) {res.push([{coord: fromCoord // 起点坐标}, {coord: toCoord // 终点坐标}])}}return res;
}var color  = ['#9ae5fc', '#dcbf71'];    // 自定义图中要用到的颜色
var series = [];                        // 用来存储地图数据/*图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['重庆', CQData],['广州', GZData],['南宁', NNData]].forEach(function(item, i) {series.push({// 白色航线特效图type: 'lines',    zlevel: 1,                    // 用于分层，z-index的效果effect: {show: true,               // 动效是否显示period: 6,                // 特效动画时间trailLength: 0.7,         // 特效尾迹的长度color: '#fff',            // 特效颜色symbolSize: 3             // 特效大小},lineStyle: {normal: {                 // 正常情况下的线条样式color: color[0],width: 0,             // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显curveness: -0.2       // 线条曲度}},data: convertData(item[1])    // 特效的起始、终点位置}, {  // 小飞机航线效果type: 'lines',zlevel: 2,//symbol: ['none', 'arrow'],   // 用于设置箭头symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,         // 特效形状，可以用其他svg pathdata路径代替symbolSize: 15             },lineStyle: {normal: {color: color[0],width: 1,opacity: 0.6,curveness: -0.2}},data: convertData(item[1])     // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])}, { // 散点效果type: 'effectScatter',         coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系zlevel: 3,rippleEffect: {brushType: 'stroke'        // 波纹绘制效果},label: {normal: {                  // 默认的文本标签显示样式show: true,position: 'left',      // 标签显示的位置formatter: '{b}'       // 标签内容格式器}},itemStyle: {normal: {color: color[0]}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name],  // 起点的位置symbolSize: dataItem[1].value / 8,  // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value};})});
});// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({type: 'effectScatter',coordinateSystem: 'geo',zlevel: 3,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'left',formatter: '{b}'}},symbolSize: function(val) {return val[2] / 8;},itemStyle: {normal: {color: color[1]}},data: [{  // 这里面的数据，由于一开始就知道终点位置是什么，所以直接写死，如果通过ajax来获取数据的话，还要进行相应的处理name: "重庆",value: [107.7539, 30.1904, 30],label: {normal: {position: 'top'}}}, {name: '广州',value: [113.5107, 23.2196, 30],label: {normal: {position: 'right'}}}, {name: '南宁',value: [108.479, 23.1152, 30]}]
});// 最后初始化世界地图中的相关数据
var option= ({backgroundColor: '#404a59',title: {show:'false'},geo: {map: 'world',       // 与引用进来的地图js名字一致roam: false,        // 禁止缩放平移itemStyle: {        // 每个区域的样式 normal: {areaColor: '#ff8800'},emphasis: {areaColor: 'red'}},regions: [{        // 选中的区域name: 'China',selected: true,itemStyle: {   // 高亮时候的样式emphasis: {areaColor: '#7d7d7d'}},label: {    // 高亮的时候不显示标签emphasis: {show: false}}}]},series: series,   // 将之前处理的数据放到这里textStyle: {fontSize: 12}
});/* 然后就没有然后了，全剧终！ */

感谢 Thanks！！！

Echarts世界流向图相关推荐

可视化-echarts流向图制作及recharts
前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echarts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个 ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
【数据可视化】python/pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
按照教程想通过pip下载地图素材,结果如下图所示--不匹配现有的version. upgrade pyecharts之后依旧无法satisfies 在pycharm中输入: import pyecha ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
利用pyechart绘制简单的迁徙流向图、世界地图
1.介绍 Echarts 是一个由百度开源的数据可视化,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fi ...
使用mapbox+turf.js完成迁徙图，流向图教程
以前对于迁徙图流向图这样的需求大多都是采用echarts这样的图标组件库做的.这篇文章跟大家分享一下如何使用webgis的技术方式实现迁徙图,流向图这样的专题地图. 首先我们要把思路捋清楚,迁徙图表示 ...
echart省会流向图（物流运输、地图）
继续上次的echart博客,由于省会流向图是从echart画廊中直接取来的.所以直接上代码 <!DOCTYPE html><html><head><meta ...
番外-Echart流向图
时北京迁出目的地流向图数据来源:百度地图迁徙大数据其它文件: City.js china.js 代码:  <template>< ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...

Echarts世界流向图

Echarts世界流向图相关推荐

最新文章

热门文章