ECharts动画使用

最新推荐文章于 2024-06-28 08:46:07 发布

SunACong

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量706

点赞数

分类专栏： ECharts 文章标签： echarts 动画 javascript

本文链接：https://blog.csdn.net/qq_44808710/article/details/124908308

版权

ECharts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了Echarts中加载动画、增量动画和动画配置的使用方法。通过示例代码展示了如何打开和关闭加载动画，以及如何实现增量数据更新时的动画效果。此外，还详细解释了如何配置动画的时长、缓动效果和数量设定，以实现更丰富的视觉体验。

摘要由CSDN通过智能技术生成

加载动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>散点图</title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lib/jquery.min.js"></script>
	</head>
	<body>
		<div style="padding-left: 20px;width: 600px;height: 600px;"></div>
		<script>
			var mCharts = echarts.init(document.querySelector('div'))
			//打开加载动画
			mCharts.showLoading();
			$.get('data/test_data.json',function(ret){
				//隐藏加载动画
				mCharts.hideLoading();
				var axisData = []
				for( var i=0;i<ret.length;i++) {
				  var height = ret[i].height
				  var weight = ret[i].weight
				  var newArr = [height, weight]
				  axisData.push(newArr)
				}
				var option = {
					xAxis:{
						type:'value',
						//脱离0值的束缚
						scale:true,
					},
					yAxis:{
						type:'value',
						//脱离0值的束缚
						scale:true,
					},
					series:[
						{
							data: axisData,
							type:'effectScatter', // Scatter散点图
							//控制涟漪动画的时机
							showEffectOn:'emphasis', //render emphasis
							//涟漪动画的大小
							rippleEffect:{
								scale:10
							},
							//动态控制散点大小
							symbolSize:function(arg){
								console.log(arg);
								var height = arg[0]/100;
								var weight = arg[1];
								if(weight/(height*height) > 28){
									return 20
								}
								return 5
							},
							//动态控制散点的颜色
							itemStyle:{
								// color:'green'
								color:function(arg){
									var height = arg.data[0]/100;
									var weight = arg.data[1];
									if(weight/(height*height) > 28){
										return 'red'
									}
									return 'green'
								}
							}
						}
					]
				}
				mCharts.setOption(option);
				window.onresize = mCharts.resize;
			})
			
		</script>
	</body>
</html>

增量动画

所有的更新都通过setOption实现
不用考虑数据哪产生了变化
Echarts会找到两组数据之间的差异然后通过合适的东爱护去表现数据的变化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增量动画</title>
    <script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
	<button id="modify">修改数据</button>
	<button id="add">增加数据</button>
    <script type="text/javascript">
        var myChart = echarts.init(document.querySelector('div'));
		var xDataArr = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
		var yDataArr = [5, 20, 36, 10, 10, 20];
        var option = {
            xAxis: {
				type:'category',
                data: xDataArr
            },
            yAxis: { 
				type:'value',
			},
            series: [
				{
					name: '销量',
					type: 'bar',
					data: yDataArr,
				}
			]
        };
        myChart.setOption(option);
		//修改数据
		var btnModify = document.querySelector('#modify')
		btnModify.onclick = function(){
			var newYDataArr = [100, 2000, 36, 10, 10, 20];
			//只用包含变化之后的数据就行了
			//新旧的option是一个整合的关系不是覆盖的关系
			var option = {
			    series: [
					{
						data: newYDataArr,
					}
				]
			};
			myChart.setOption(option);
		}
		//增加数据
		var btnAdd = document.querySelector('#add')
		btnAdd.onclick = function(){
			xDataArr.push("nike鞋");
			yDataArr.push(100);
			var option = {
				xAxis: {
				    data: xDataArr
				},
			    series: [
					{
						data: yDataArr,
					}
				]
			};
			myChart.setOption(option);
		}
    </script>
</body>
</html>

在这里插入图片描述

动画的配置

开启动画
动画时长
缓动动画效果
缓动动画数目设定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增量动画</title>
    <script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.querySelector('div'));
		var xDataArr = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
		var yDataArr = [5, 20, 36, 10, 10, 20];
        var option = {
			//控制动画开启或者关闭
			animation:true,
			//动画时长 还可以接受回调函数
			animationDuration:7000,
			animationDuration : function(arg) {
				//总共三部分有动画 分别从0序号开始
				//柱子 最大值 最小值 平均值
				console.log(arg);
				return 2000 * arg
			},
			//缓动动画
			//linear 比较均匀 bounceOut 带有回弹效果
			animationEasing:'bounceOut',
			//单中元素超过这个设定值之后动画就会丢失
			animationThreshold:7,
            xAxis: {
				type:'category',
                data: xDataArr
            },
            yAxis: { 
				type:'value',
			},
            series: [
				{
					name: '销量',
					type: 'bar',
					data: yDataArr,
				}
			]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

SunACong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts动画使用

动画使用加载动画增量动画动画的配置加载动画<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>散点图</title>  <script src="js/lib/echarts.min.j
复制链接

扫一扫

专栏目录