用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据

容器

需要引入echart和引入全国和省份的json数据

需要在mounted()调用画地图方法，数据加载完成

下面就是画地图的配置了，就不一一详细展开说了

全国地图map是“China”，省份地图map是相对应的省份名称

详细代码如下

// 基于准备好的dom，初始化echarts实例

// 中间地图 ----域外分布（全国地图）

drawMap(id, mapData, towLineData, mapList) {

this.charts = echarts.init(document.getElementById(id));

// 指定图表的配置项和数据

this.charts.setOption({

tooltip: {

// triggerOn: 'click',

enterable: true,

formatter: function (params, ticket, callback) {

if (params.componentSubType != "effectScatter") {

return;

}

return ' <div style=" padding: 5px;background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(50, 175, 218, 0.8);border-radius: 2px; ">'

+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援机构<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.orgName + '</span></div>'

+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援专家<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.num + '</span>人</div>'

+ '<div>'

;

let coords = params.data.coords[0][0];

if (coords) {

mapList.forEach((v) => {

if (coords == parseFloat(v.orgLng).toFixed(6)) {

var tipHtml = '';

tipHtml = ' <div style=" padding: 5px;background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(50, 175, 218, 0.8);border-radius: 2px; ">'

+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援机构<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.orgName + '</span></div>'

+ ' <div style="font-size: 10px;color: #999999;line-height: 20px;">支援专家<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + v.num + '</span>人</div>'

+ '<div>'

;

return tipHtml;

}

});

}

geo: {

map: "china",

aspectScale: 0.75, //长宽比

zoom: this.mapSize, // 设置地图大小

top: this.mapTop, // 地图距离顶部的位置

roam: true, // 是否缩放

label: {

show: true,

color: "#43adcf",

zoom: 1,// 缩放大小

itemStyle: {

normal: {

borderColor: '#3EA7D3',//边界线颜色

areaColor: {

type: "radial",

x: 0.5,

y: 0.5,

r: 0.8,

colorStops: [

{

offset: 0,

color: "#fff", // 0% 处的颜色

{

offset: 1,

color: "#fff", // 100% 处的颜色

globalCoord: true, // 缺省为 false

// shadowColor: "#3ea7d3",

// shadowOffsetX: 0,

// shadowOffsetY: 3,

emphasis: {

areaColor: "#fff",

borderWidth: 0,

color: "#43adcf",

label: {

show: true,

textStyle: {

color: "rgb(183, 185, 14)"

}

regions: [

{

name: "南海诸岛",

itemStyle: {

normal: {

opacity: 0, // 为0不绘制该图形

label: {

show: false,//隐藏文字

color: "#009cc9",

label: {

show: false, // 不显示南海诸岛的文字

}

// visualMap: {

// type: "piecewise",

// left: "5%",

// top: "78%",

// min: 0,

// color: ["#f16507", "#ecd220", "#00a0e9"], //设置坐标点从小到大的颜色

// pieces: [

// {

// lte: 7,

// label: "7天以内",

// // symbol: 'circle',

// },

// {

// gt: 7,

// lte: 30,

// label: "7天至一个月",

// // symbol: 'circle',

// },

// {

// gt: 30,

// // lte: 3000,

// label: "一个月以上",

// // symbol: 'circle',

// },

// ],

// textStyle: {

// color: "#3488DB",

// fontSize: 16,

// },

// itemWidth: 10,

// itemHeig10,

// },

series: [

{

type: "map",

roam: false,

geoIndex: 0, // 海南诸岛屿字体消失

label: {

normal: {

show: true, // 显示省份名称

position: 'inside', // 文本标签显示的位置

textStyle: {

color: "#1DE9B6",

fontSize: 8,

emphasis: {

show: true,

itemStyle: {

normal: {

borderWidth: 2,//边际线大小

borderColor: '#3EA7D3',//边界线颜色

areaColor: '#ffffff',//默认区域颜色

shadowColor: '#ffffff',//阴影颜色

emphasis: {

show: true,

areaColor: '#3EA7D3',//鼠标滑过区域颜色

label: {

show: true,

textStyle: {

color: '#fff'

}

zoom: 5,

map: "china", //使用

{

type: "effectScatter",

coordinateSystem: "geo",

showEffectOn: "render",

zlevel: 1,

rippleEffect: {

period: 15,

scale: 4,

brushType: "fill",

hoverAnimation: true,

label: {

normal: {

formatter: "{b}",

position: "right",

offset: [15, 0],

color: "#3ea7d3",

show: true,

itemStyle: {

normal: {

color: "#3ea7d3",

shadowBlur: 8,

shadowColor: "#333",

symbolSize: 12,

data: mapData, // 圆点位置

// data: [

// { value: [118.8062, 31.9208], itemStyle: { color: "#FFAE3B" } },

//],

}, //地图线的动画效果

{

type: "lines",

zlevel: 2,

effect: {

show: true,

period: 4, //箭头指向速度，值越小速度越快

trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重

symbol: "arrow", //箭头图标

symbolSize: 5, //图标大小

lineStyle: {

normal: {

color: "#3EA7D3",

width: 1, //线条宽度

opacity: 0.1, //尾迹线条透明度

curveness: 0.3, //尾迹线条曲直度

data: towLineData,

// data: [

// {

// coords: [

// [118.8062, 31.9208],

// [119.4543, 25.9222],

// ],

// lineStyle: { color: ["#3ea7d3",] },// 每个省份线条颜色

// },

// ],

}, true);

this.charts.getZr().on('click', (param) => {

// alert(param.nname + param.value);

});

this.charts.resize();

大家有遇到类似的需求，欢迎探讨交流呀！Q:24227744930

用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据相关推荐

python画人口迁徙图_echarts 手把手教你画迁徙图（城市内部级别+百度地图支持）2...
最近要做一个上海的迁徙图,搜到的都是 echarts 和mapv一样,有自己的API说明和demo 形式上非常相近,而且看起来功能比mapv更加完善. 另外是滴滴的一个蝌蚪迁徙图,看起来是真实轨迹的模 ...
高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
pycharts实现地图可视化(世界地图、中国地图、省份地图)
使用之前先导入包,pycharts的1.x版本和0.5不兼容,我的环境之前是1.x版本,所以下面都是以1.x版本为例. from pyecharts.charts import Map from py ...
Echarts笔记-折线图定制（Y轴百分数，鼠标移动显示百分数，显示X轴，Y轴值）
本笔记记录时间:2022-02-19 12:18:42,估计发布到网上是一个月后了. 效果图如下: 对应Echart代码如下: <script type="text/javascrip ...
echarts雷达图鼠标悬浮显示单轴数据
雷达图效果展示雷达图默认只能展示一圈的数据,而不能展示一个轴向的数据,具体图片效果如下问题描述在雷达图的tooltip中的 formatter: function (params){}打印出pa ...
5分钟实现动态切换，原来迁徙图还可以这么玩！
某航空公司领导想看十一假期间北京.上海.广州.深圳等城市的人流量情况,要求用迁徙图展示,默认以北京为出发地,显示由北京到全国各个城市的人流量情况,点击地图上某个城市,可以动态切换该城市为出发地,显示由 ...
AntV的花瓣图中鼠标悬浮提示信息去掉与修改
场景 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 在实现 ...
地图 svg中国地图、echarts百度迁徙图
总结下最近使用过的地图控件: 第一种 svg中国地图 demo:http://www.oschina.net/code/snippet_54124_36979 这个很简单,照着demo里面直接调用就可 ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...

用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据

用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据相关推荐

最新文章

热门文章