Echarts迁徙图简单图片实现

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

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

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts迁徙是一种数据可视化表,用于展示不同地区之间的人口迁徙、物流运输等情况。根据引用\[2\]中提到的案例,可以使用Echarts库来实现迁徙效果。首先,需要在前端代码中引入Echarts库和相关的JavaScript文件。引用\[3\]中给出了一个简单的前端代码示例,其中包括了引入Echarts库和创建一个用于绑定Echarts表的容器。在这个容器中,可以使用JavaScript代码来配置和绘制迁徙。 具体实现迁徙的步骤如下: 1. 引入Echarts库和相关的JavaScript文件,确保它们在页面中正确加载。 2. 创建一个用于绑定Echarts表的容器,可以使用一个div元素,并给它一个唯一的id。 3. 使用JavaScript代码来配置和绘制迁徙。可以通过调用Echarts提供的API来设置表的样式、数据和交互行为。具体的配置可以根据需求进行调整,例如设置地的样式、添加迁徙线、设置数据等。 需要注意的是,为了实现迁徙效果,可能需要使用到地数据。根据引用\[1\]中提到的,可以使用高德的全国json数据来注册地数据。具体的使用方法可以参考Echarts官方文档提供的示例和说明。 总结起来,要实现Echarts迁徙,需要在前端代码中引入Echarts库和相关的JavaScript文件,创建一个用于绑定表的容器,并使用JavaScript代码来配置和绘制迁徙。可以根据需求调整配置和样式,同时可能需要使用地数据来注册地。 #### 引用[.reference_title] - *1* [echarts迁徙](https://blog.csdn.net/sinat_36226553/article/details/117326707)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Echarts迁徙简单图片实现](https://blog.csdn.net/weixin_60703114/article/details/123476837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值