最近工作中遇见一些小问题,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);
})
写的可能不是很好,但是相比那些又臭又长看半天还看不懂的还是比较好接受的,希望对大家可以有一些帮助