Echarts迁徙图图片实现

琛琛881

2024-06-29 帮助1人

最近工作中遇见一些小问题，Echarts实现迁徙图效果，而网上寻找时并没有找到非常合适的案例，大都是基于geo加上js或者json文件实现的，对于初学者而言代码量太大，看到最后也没看懂到底是怎样实现的，所以基于这几天踩得坑给出一个简单案例，也帮助大家少走弯路。

就是这样的效果。

学新通

首先是前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>迁徙图</title>
<script src="js/echarts.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/qianxitu.js"></script>
</head>
<body>
//给出容器，用于echart绑定
<div id="main" style="width: 720px;height: 520px;"></div>
</body>
</html>

然后是js代码

$(function(){
var option={
xAxis: {
type: 'value',
show: false,
max:30,
},
yAxis: {
type: 'value',
show: false,
max:10,
},
series:[
{
type: 'lines',
//这里是选择布局方式，网上大多数都是geo配合js或者json文件，我这里写的是2d
//坐标形式，可能我形容得不太标准，但是相对比较好理解
coordinateSystem: 'cartesian2d',
//然后是所在层数，如果学过ps的会很好理解，就是图层的意思
zlevel: -1,
effect: {
symbol: 'arrow',
show: true,
period: 3, // 箭头指向速度，值越小速度越快
trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbolSize: 10, // 图标大小
},
lineStyle: {
normal: {
color: '#609fd4'
}
},
data: [
{
coords: [
[6, 6],
[15, 7],
],lineStyle:{
// Echarts在js中有些配置要写在normal: {}这个方法体内，
// 不写的话不出效果，如果在前端直接写的话不需要，
// 具体原因我也不太清楚
normal: {
opacity: 0.1, // 线的透明度-设置为0，隐藏线条
curveness: 0.3, // 曲线的弯曲程度
color: '#609fd4'
},
}
},
{
coords: [
[11, 2],
[15, 7],
],lineStyle:{
normal: {
opacity: 0.1, // 线的透明度-设置为0，隐藏线条
curveness: 0.3, // 曲线的弯曲程度，
color: '#4fb6d2',
},
}
},
{
coords: [
[8, 3],
[15, 7],
],lineStyle:{
normal: {
opacity: 0.1, // 线的透明度-设置为0，隐藏线条
curveness: 0.3, // 曲线的弯曲程度，
color: '#4ab2e5',
},
}
},
{
coords: [
[22, 8],
[15, 7],
],lineStyle:{
normal: {
opacity: 0.1, // 线的透明度-设置为0，隐藏线条
curveness: -0.3, // 曲线的弯曲程度，多段线不支持弯曲
color: '#52b9c7',
},
}
}
]
},
{ // 这里必须有scatter，至少有一个点，路径图才会跑起来
type: 'effectScatter',
zlevel: 2,
symbolSize: 20,
rippleEffect: { //涟漪特效
normal: {
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
}
},
label: {
normal: {
show: true,
position: 'inside',
//在圆环中添加显示的文字，从下方data中获取
//在前端写的话就是 formatter:'{@[2]}'的写法
formatter: function(params){
return params.data[2];
},
}
},
data: [
[22, 8,'A'],
[8, 3,'B'],
[11, 2,'C'],
[6, 6,'D'],
[15, 7,'A'],
],
},
],
graphic:{
elements:[{
type: "image",
zlevel: -3,
z: 3,
style: {
//添加自己的背景图
image: ./img/ditu.png',
width: 800,
height: 525,
},
top: 20,
left: 0,
scale: [1, 1]
}]
},
};
//绑定前端页面提供的容器
var eCharts = echarts.init($("#main")[0]);
//调用我们上面的配置
eCharts.setOption(option);
})

写的可能不是很好，但是相比那些又臭又长看半天还看不懂的还是比较好接受的，希望对大家可以有一些帮助

这篇好文章是转载于：学新通技术网

Echarts迁徙图图片实现

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗