echarts 迁徙图

效果图

代码

function map(){var myChart2 = echarts.init(document.getElementById('map'));const originName = '洛阳';const flyGeo = {'洛阳': [112.460299, 34.62677],'西安': [108.946466, 34.347269],'兰州': [103.84044, 36.067321],'乌鲁木齐': [87.62444, 43.830763],'包头': [109.846544, 40.662929],'西宁': [101.78443, 36.623393],'银川': [106.258602, 38.487834],'成都': [104.081534, 30.655822],'重庆': [106.558434, 29.568996],'拉萨': [91.120789, 29.65005],'昆明': [102.852448, 24.873998],'贵阳': [106.636577, 26.653325],'太原': [112.534919, 37.873219],'武汉': [114.311582, 30.598467],'长沙': [112.945473, 28.234889],'南昌': [115.864589, 28.689455],'合肥': [117.233443, 31.826578],'杭州': [120.215503, 30.253087],'广州': [113.271431, 23.135336],'北京': [116.413384, 39.910925],'天津': [117.209523, 39.093668]};//飞线数据var flyVal = [[{name: '洛阳'}, {name: '洛阳', value: 100}],[{name: '洛阳'}, {name: '西安', value: 35}],[{name: '洛阳'}, {name: '兰州', value: 25}],[{name: '洛阳'}, {name: '乌鲁木齐', value: 55}],[{name: '洛阳'}, {name: '包头', value: 60}],[{name: '洛阳'}, {name: '西宁', value: 45}],[{name: '洛阳'}, {name: '银川', value: 35}],[{name: '洛阳'}, {name: '成都', value: 35}],[{name: '洛阳'}, {name: '重庆', value: 40}],[{name: '洛阳'}, {name: '拉萨', value: 45}],[{name: '洛阳'}, {name: '昆明', value: 50}],[{name: '洛阳'}, {name: '贵阳', value: 55}],[{name: '洛阳'}, {name: '太原', value: 60}],[{name: '洛阳'}, {name: '武汉', value: 65}],[{name: '洛阳'}, {name: '长沙', value: 70}],[{name: '洛阳'}, {name: '南昌', value: 75}],[{name: '洛阳'}, {name: '合肥', value: 80}],[{name: '洛阳'}, {name: '杭州', value: 85}],[{name: '洛阳'}, {name: '广州', value: 90}],[{name: '洛阳'}, {name: '北京', value: 95}],[{name: '洛阳'}, {name: '天津', value: 60}],];//数据转换，转换后格式：[{fromName:'cityName', toName:'cityName', coords:[[lng, lat], [lng, lat]]}, {...}]const convertFlyData = function(data) {let res = [];for(let i=0;i<data.length;i++) {let dataItem = data[i];let toCoord = flyGeo[dataItem[0].name];let fromCoord = flyGeo[dataItem[1].name];if(fromCoord && toCoord) {res.push({fromName: dataItem[1].name, toName: dataItem[0].name, coords: [fromCoord, toCoord]});}}return res;};//报表配置const flySeries = [];[[originName, flyVal]].forEach(function(item, i) {flySeries.push({   name: item[0],type: 'lines',zlevel: 1,symbol: ['none', 'none'],symbolSize: 0,effect: { //特效线配置show: true,period: 5, //特效动画时间，单位strailLength: 0.1, //特效尾迹的长度，从0到1symbol: 'arrow',symbolSize: 5},lineStyle: {normal: {color: '#f19000',width: 1,opacity: 0.6,curveness: 0.2 //线的平滑度}},data: convertFlyData(item[1])}, {name: item[0],type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: { //涟漪特效period: 5, //特效动画时长 scale: 4, //波纹的最大缩放比例brushType: 'stroke' //波纹的绘制方式：stroke | fill},label: {normal: {show: false,position: 'right',formatter: '{b}'}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: flyGeo[dataItem[1].name].concat([dataItem[1].value])};})}, { //与上层的点叠加name: item[0],type: 'scatter',coordinateSystem: 'geo',zlevel: 3,symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYmY3NjZiYi1iZGVlLTI0NDktOGUxNy1jZDczYmUzYzRlZDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTU3REMwOEJGM0U3MTFFOUEyQjU5QURFNzZEQzAxQTUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTU3REMwOEFGM0U3MTFFOUEyQjU5QURFNzZEQzAxQTUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFhNjBhMjEtYzAxMC1jODRhLTk0OTctYmM4ZWI3MDMyZDFkIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmViZjc2NmJiLWJkZWUtMjQ0OS04ZTE3LWNkNzNiZTNjNGVkNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqcHYsAAAMpSURBVHjaxFdLbIxRFP46M22jYqrTNop6RWhL0BGxoF00oYlN2QkWZSUkFoiV2NvZSBAkFiSEIBKxYCO1bPognq0UtaDttF5TfdDx3X/O387c3tvezkjmTL5k/v+/9557vvO45+YlSuAqRUSECMv/fCJE/CHGid/Ed2KQGHZZMM9BeSmxjFgAd/lJ9BKxTJXPI9YQxchcFBNdwoqz8jJiLRFE9vKXeEcMuCivEIv/tygGvsykXFlcrd5bFlDBVkmUiFsKiDGhdYj4TPywzE0Qb4l+k3K1WNRCtYrudcQiBwu/Eq8sEa9c0O7HQKryjZbgKic2S1q5ikq/tlQrtSB8nqq8VCzTRVm6JQs/twoTuihmYgF5qDQMmC9usMtObu4emnAatZYRUVlHF09fQPwZNgxYP2OqbSdbQxjFTXSgGQ14jL2GUUFZxxS4RYp2tYtV2kfl+zqj0mPMhv3YxoQsp0cHsBVXuY0CEnwcHxjtDbhhmPVMfJ0qPQGL1UuNio+iCiew21P8jYsdxh3vfYzpdh8tWElD1Bi39cI+7bpMLz0nSd8p7Jl8HsYIk2bKmtteDgOHUG9YL2JK34AUClNdT5cJr0iAKkfRR7qXMNjaaPtiFHrvPyEuZarUUid0KQhZgqpw2ptzTI9fpLeVnlYWd+II+VmIhzjIKnCJ3h5J22S65JuCMSRVR9/AuHHCZXRP/m/CNTygYrWBJ9iHl7Q9Wd/6DIrGTdUuILVZl/TSuIshdpfqqlPO9I8skZtwAT08t1djOb/W0eYELuLprOslZSxg+TCY9vSGh0UUNXjEWD7L5FKbKWOsrGBs+BYnKZ/AC22uaT3ZkFueX0cji0rUqaC+Jyc7WHoc83zQUvynDoUNJFYVlEac9/J5gHNUWI3y18XScga3cABXyEI3A1Onvd+g2GPDP1hqDT2aqsn1WXYzKphbiLj2Xp35nf7B0muYGJezNxtpNyiGNB1O53mFMBOco8UdettkO89n62SUC2rm0Mm8tlhs7WT8rqXKoYeLyIb8S0NcAjfjHi7n3WvO+/ac31hyflez3VKLUy4MQaF1LJNb6j8BBgB5Y+v0Tqs+gwAAAABJRU5ErkJggg==',showAllSymbol: true,symbolSize:25,data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: flyGeo[dataItem[1].name].concat([dataItem[1].value])};})});});//报表配置项option = {title: {text: '',x: 'center',top: "20",textStyle: {color: '#31afff',fontSize: 20,fontWeight:500}},tooltip: {trigger: 'item',formatter: function(params) {if(params.value) {return params.name + ' : ' + params.value[2];}else {return params.name;}}},geo: {map: 'china',roam: true, //开启鼠标缩放和漫游zoom: 1, //地图缩放级别selectedMode: false, //选中模式：single | multipleleft: 0,right: 0,top: 0,bottom: 0,layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效layoutSize: '110%', //保持地图宽高比label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: 'transparent',borderWidth: 1.1,borderColor: '#8af7ff'},emphasis: {areaColor: '#069'}}},series: flySeries};myChart2.setOption(option);window.addEventListener("resize",function (){myChart2.resize();});
}

部分说明

此处设置地图在盒子中的位置及简单样式
线的颜色
终点设置

添加自定义图片
在series 中的symbol属性可以引入图片

链接引入

symbol:“image://http:…”, 可用此方法将图片引入

base64格式引入

将图片在线转换成base64格式，用 symbol: 'image://data:image/png;base64, 用以上方法引入

svg图引入

这是最常用的一种，也是官网用的方法，svg图用notepad++软件或者记事本打开，将d属性值复制出来前面加path://即可

注：zlevel的值不能相同，如果不需要图片，只需在color属性后面添加相应的颜色即可，symbolSize为图片大小

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 迁徙图

echarts 迁徙图

echarts 迁徙图相关推荐

最新文章

热门文章