Echarts 在地图上绘制流向图

首先需要获取地图JSON数据包，点此下载（Echarts官方地图数据，包含世界、中国，及国内各省数据）。

实现效果如图：

代码如下：

<!--

此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=map-HK

-->

<!DOCTYPE html>

<head>

</head>

$.getJSON('./china.json', function(china)

{

echarts.registerMap('china', china);

var myChart = echarts.init(document.getElementById('container'));

myChart.showLoading(

{

text: '加载中...',

color: '#c23531',

fontSize: '28px',

textColor: '#000',

maskColor: 'rgba(255, 255, 255, 0.2)',

zlevel: 0,

});

var scale = 1;

var geoCoordMap = {};

echarts.util.each(china.features, function(dataItem, idx)

{

geoCoordMap[dataItem.properties.name] = dataItem.properties.cp;

});

var mapData =

[

{from: '青海', to: '青海', value: 90, color: '#1DE9B6'},

{from: '青海', to: '安徽', value: 80, color: '#ACC5E9'},

{from: '青海', to: '甘肃', value: 70, color: '#FFDB5C'},

{from: '青海', to: '宁夏', value: 60, color: '#3D552A'},

{from: '青海', to: '山西', value: 50, color: '#B4B9FF'},

{from: '青海', to: '陕西', value: 40, color: '#A6C84C'},

{from: '青海', to: '广东', value: 30, color: '#FFA022'},

{from: '青海', to: '重庆', value: 20, color: '#46BEE9'},

{from: '青海', to: '西藏', value: 10, color: '#FAC55C'}

];

var convertLineData = function(data)

{

var res = [];

for(var i = 0; i < data.length; i++)

{

var dataItem = data[i];

var fromCoord = geoCoordMap[dataItem.from];

var toCoord = geoCoordMap[dataItem.to];

if(fromCoord && toCoord)

{

res.push(

{

fromName: dataItem.from,

toName: dataItem.to,

coords: [fromCoord, toCoord],

value: dataItem.value,

color: dataItem.color

});

}

return res;

};

var convertPointData = function(data)

{

var res = [];

for(var i = 0; i < data.length; i++)

{

var dataItem = data[i];

var toCoord = geoCoordMap[dataItem.to];

if(toCoord)

{

res.push(

{

name: dataItem.to,

value: toCoord,

count: dataItem.value,

color: dataItem.color

});

}

return res;

}

var option =

{

tooltip:

{

trigger: 'item',

axisPointer:

{

type: 'shadow'

textStyle:

{

fontSize: 12 * scale,

formatter: function(params)

{

let returnStr = '';

if(params.componentSubType == 'effectScatter')

{

returnStr += params.marker;

returnStr += params.name + '：' + params.data.count;

}

else if(params.componentSubType == 'lines')

{

returnStr += params.marker;

returnStr += params.data.fromName + ' -> ' + params.data.toName;

returnStr += '：' + params.data.value;

}

return returnStr;

}

geo:

{

map: 'china',

aspectScale: 1,

zoom: 1.25,

label:

{

normal:

{

show: false,

emphasis:

{

show: true,

fontSize: 12 * scale,

color:"#fff"

}

itemStyle:

{

normal:

{

areaColor:

{

x: 0, y: 0, x2: 0, y2: 1,

colorStops:

[

{

offset: 0,

color: '#0e309b'

{

offset: 1,

color: '#0e309b'

borderColor: '#2abdee',

borderWidth: 2 * scale,

emphasis:

{

areaColor:

{

x: 0, y: 0, x2: 0, y2: 1,

colorStops:

[

{

offset: 0,

color: '#fff'

{

offset: 1,

color: '#2b91b7'

}

series:

[

{

type: 'effectScatter',

coordinateSystem: 'geo',

data: convertPointData(mapData),

symbolSize: 15 * scale,

showEffectOn: 'render',

rippleEffect:

{

brushType: 'stroke'

hoverAnimation: true,

label:

{

normal:

{

show: true,

formatter: function(param)

{

return param.data.name;

position: 'right',

fontSize: 12 * scale,

color: '#fff',

}

itemStyle:

{

normal:

{

color: function(param)

{

return param.data.color;

shadowBlur: 10,

shadowColor: '#fff'

}

zlevel: 1

{

type: 'lines',

zlevel: 2,

effect:

{

show: true,

period: 5,

trailLength: 0.2,

symbol: 'arrow',

symbolSize: 4 * scale,

lineStyle:

{

normal:

{

color: function(param)

{

return param.data.color;

width: 1 * scale,

opacity: 0.2,

curveness: .3

}

data: convertLineData(mapData)

]

};

myChart.hideLoading();

myChart.setOption(option, true);

myChart.resize();

})

</script>

</body>

</html>

遇到的问题
$.getJSON 请求会报错，跨域问题。

解决：1、json文件放到服务器上，直接请求服务器上的地址。

2、只调试的话，设置谷歌浏览器

请求模拟数据报错： Access to XMLHttpRequest at ‘file:///C:/Users/Administrator/Desktop/test/AJAX/demo_test.txt’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

1、右键chrome，选择属性，在“快捷方式”下的“目标”中添加" --allow-file-access-from-files"(最前面有个空格)，重启chrome即可
2、复制项目的路径，在浏览器上重新打开

原文链接：https://blog.csdn.net/weixin_45784582/article/details/108767358

Echarts 在地图上绘制流向图相关推荐

java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
plotly系列| 使用plotly在地图上绘制散点图和密度图
目录 Plotly简介在地图上制作散点图和密度图 1 . 在python中使用pip命令安装 2 .导入包 3 .读取文件 4 . 在地图上绘制散点图 5 . 绘制密度图,其属性与绘制散点图相似关 ...
在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...
python绘制彩色地震剖面_在地图上绘制饼图时“爆炸”楔形图（Python，matplotlib）...
所以我成功地在地图上绘制了饼图作为标记轴向散射,但我遇到了一些问题,一些楔子"爆炸"出了饼图.我似乎在我的代码中找不到原因,也无法在网上找到解释.这段代码基于示例here,一位同事 ...
详解python 利用 pyecharts 画地图(热力图)(世界地图，省市地图，区县地图)、动态流向图
转载: 详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图) Pyecharts绘制全球流向图 pyecharts中文教程官网目录安装对应的python模块世界 ...
android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
Matlab运用mapping包在地图上绘制散点图（热力图）
Matlab运用mapping包在地图上绘制散点图(热力图) 一.前言 Mapping Toolbox是Matlab提供的,一整套包含许多函数跟图形用户界面的工具箱:它可以帮助用户分析几何空间方面的数 ...
android地图画线,绘制折线-在地图上绘制-开发指南-Android 轻量版地图SDK | 高德地图API...
地图上绘制的线是由 Polyline 类定义实现的,线由一组经纬度(LatLng对象)点连接而成. 绘制一条线与点标记一样,Polyine的属性操作集中在PolylineOptions类中,添加一条 ...
android百度地图api两点画线,android百度地图：在地图上绘制点、线、多边形、圆形和文字...
转载自:http://blog.csdn.net/rt77777/article/details/9186691 首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overla ...

Echarts 在地图上绘制流向图

Echarts 在地图上绘制流向图相关推荐

最新文章

热门文章