前言

echarts官方之前有一个案例geo-lines，但在新版本中似乎被剔除了

根据代码学习了一下echarts，只为看看效果，所以数据简化了，并对代码做了注释

数据

迁徙数据：高德地图迁徙数据

GeoJSON数据：http://datav.aliyun.com/tools/atlas/

注意：由于echarts之前提供的china.js数据不符合规定，现在下载不了了，所以使用高德的全国json数据，使用 echarts.registerMap 注册数据

https://echarts.apache.org/zh/download-map.html

代码

需要的js文件：① echarts.js ② jquery.js

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>模拟迁徙图</title><script src="./js/echarts.js"></script><script src="./js/jquery-1.11.3.min.js"></script><style>#main{height: 700px;}</style>
</head><body><div id='main'></div><script type="text/javascript">var geoCoordMap = {'石家庄': [114.4995, 38.1006],'哈尔滨': [127.9688, 45.368],'杭州': [119.5313, 29.8773],'广州': [113.5107, 23.2196],'武汉': [114.3896, 30.6628],'南昌': [116.0046, 28.6633],'长沙': [113.0823, 28.2568],'西安': [109.1162, 34.2004],'上海': [121.4648, 31.2891],'天津': [117.4219, 39.4189],'重庆': [107.7539, 30.1904],};var GZData = [[{ name: '广州' }, { 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 }]];// 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[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord]});}}return res;};var color = ['#7bbfea'];var series = [];[['广州', GZData],].forEach(function(item, i) {series.push({name: item[0] + ' Top10',type: 'lines',zlevel: 1,//symbol: ['none', 'arrow'],//symbolSize: 10,effect: {show: true,period: 4, // 特效动画的时间trailLength: 0.3, // 特效尾迹的长度。取从 0 到 1 的值，默认为 0.2，数值越大尾迹越长color: '#fff',// symbol: planePath, // 特效图形的标记symbolSize: 3},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top10',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 1,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}',textStyle: {fontSize: 9,color: '#fff'}}},symbolSize: function(val) {return val[2] / 12;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function(dataItem) {//console.log(dataItem[1].name, geoCoordMap[dataItem[1].name])return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});option = {title: {text: '迁徙图',left: 'center',textStyle: {color: 'black'}},// tooltip: { // 鼠标悬浮时显示的提示框//     trigger: 'item', //触发类型：1.'item'数据项图形触发 2.'axis'坐标轴触发// },geo: {map: 'alichina', // 与注册的地图名一致center: [108.114129, 28.550339],label: {// normal:{//     show: true, // 加载时是否显示各feature的name// }emphasis: {show: true,  // 鼠标移动到feature上时是否显示各feature的nametextStyle: {fontSize: 9,color: '#000'}}},roam: true, // 开启鼠标缩放和平移漫游itemStyle: {normal: { // 加载时的样式areaColor: '#323c48',//opacity: 0.4,borderColor: '#404a59'},emphasis: { // 当鼠标移动到其上时的响应操作areaColor: '#d3d7d4',borderColor: '#fff',borderWidth: 4,}}},series: series};$.get('./data/china.json', function (jsonData) {echarts.registerMap('alichina', jsonData);var chart = echarts.init(document.getElementById('main'));chart.setOption(option);});</script>
</body></html>

效果

BUG

Cannot read property 'concat' of undefined

API查询

echarts —— tooltip

echarts线图的特效effect

参考

LeaFlet迁徙图的制作

echarts模拟迁徙图

echarts map地图设置外边框或者阴影

echarts：迁徙图相关推荐

Echarts迁徙图
Echarts迁徙图 "echarts": "^5.1.1", 在node_modules中找到echarts创建map/js/.china.js /* * L ...
html怎么绘制飞线,绘制飞线，echarts迁徙图原理
其实是在元素上绘制了一条线,然后利用canvas 的createLinearGradient函数不断移动线段的样式位置来实现. 因此首先绘制线段 ctx.beginPath(); ctx.moveTo ...
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
ArcGIS底图+eCharts 迁徙图图显示与隐藏
通过使用Echarts3Layer.js扩展,可以实现在ArcGIS底图上添加eCharts图表,可以简单得到比ArcGIS API for JS更好的效果. 一般的eCharts图表可以通过clea ...
echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法 this.chart.clear(); const isMock = !this.items.length; const items = isMo ...
Echarts 开发静态数据模拟实现迁徙图步骤详解
文章目录一.前言二.先来看看百度迁徙图三.Echarts 实现迁徙图基本步骤第一步:引入Echarts.js及相关JS 第二步:为ECharts准备一个Dom 第三步:基于Dom初始化echa ...
python画人口迁徙图_echarts 手把手教你画迁徙图（城市内部级别+百度地图支持）2...
最近要做一个上海的迁徙图,搜到的都是 echarts 和mapv一样,有自己的API说明和demo 形式上非常相近,而且看起来功能比mapv更加完善. 另外是滴滴的一个蝌蚪迁徙图,看起来是真实轨迹的模 ...
Echarts4+EchartsGL 3D迁徙图（附源码）
最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet有很多插件,比如地图上显示Ec ...

echarts：迁徙图

前言

数据

代码

效果

BUG

API查询

参考

echarts：迁徙图相关推荐

最新文章

热门文章