echarts 实现柱状图左右移动效果

最新推荐文章于 2024-06-08 21:17:27 发布

weixin_46141677

最新推荐文章于 2024-06-08 21:17:27 发布

阅读量865

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_46141677/article/details/134546623

版权

最近开始记录学习echarts的一些心得想要实现柱状图或者折线图左右滑动的效果需要使用计时器先删除数组的第一个元素再把第一个元素添加到数组末尾然后在将其重新渲染就可以了还需要使用 dataRoom属性来设置柱状图移动的丝滑度

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<title>Gradient Stacked Area Chart - Apache ECharts Demo</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#chart-container {
			position: relative;
			height: 100vh;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="chart-container"></div>
	<script src="./echarts.min.js"></script>
	<script>
		var dom = document.getElementById('chart-container');
		var myChart = echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		var option;

		let dataArr = [
			{
				date: '10-1',
				value: 23
			},
			{
				date: '10-2',
				value: 42
			},
			{
				date: '10-3',
				value: 66
			},
			{
				date: '10-4',
				value: 52
			},
			{
				date: '10-5',
				value: 80
			},
			{
				date: '10-6',
				value: 30
			},
			{
				date: '10-7',
				value: 50
			},
		];
		option = {
			xAxis: {
				type: 'category',
				data: dataArr.map((item) => item.date)
			},
			yAxis: {
				type: 'value',
				max:100
			},
			dataZoom: {
				show: false,
				start: 0,
				end: 60,
			},
			series:
			{
				data: dataArr.map((item) => item.value),
				type: 'bar',
				// animationDuration: 4000,
				// animationDurationUpdate: 750,
				// animationEasing: 'linear',
				label: {
					show: true, //开启显示
					position: 'top', //在上方显示
					//formatter: '{c}',//显示百分号
					textStyle: {
						//数值样式
						color: '#ccc', //字体颜色
						fontSize: 10 //字体大小
					}
				}
			}

		};
		setInterval(() => {
			let datas = dataArr[0];
			
			dataArr.shift();
			dataArr.push(datas);
			console.log(dataArr);
			
			myChart.setOption({
				xAxis: {
					data: dataArr.map((item) => item.date)
				},

				series: [
					{
						data: dataArr.map((item) => item.value)
					}
				]
			});
		}, 3000);


		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}

		window.addEventListener('resize', myChart.resize);
	</script>
</body>

</html>

weixin_46141677

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts 实现柱状图左右移动效果

最近开始记录学习echarts的一些心得想要实现柱状图或者折线图左右滑动的效果需要使用计时器先删除数组的第一个元素再把第一个元素添加到数组末尾然后在将其重新渲染就可以了还需要使用 dataRoom属性来设置柱状图移动的丝滑度。
复制链接

扫一扫