Echarts迁徙图简单图片实现

琛琛881

已于 2022-08-13 11:44:27 修改

阅读量2.5k

点赞数 3

文章标签： echarts javascript 前端

于 2022-03-14 14:25:32 首次发布

本文链接：https://blog.csdn.net/weixin_60703114/article/details/123476837

版权

最近工作中遇见一些小问题，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);
})

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