echarts实现自定义工具栏图标方法，通过点击自定义图标实现datazoom的滚动与停止,代替鼠标移入停止移出恢复滚动

最新推荐文章于 2024-07-30 21:13:40 发布

MrZhouGx

最新推荐文章于 2024-07-30 21:13:40 发布

阅读量2k

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_27387133/article/details/108388381

版权

1.说明

在网上查看了很多的代码，本来想通过鼠标移入移出来控制滚动，但是发现即使在echarts图范围内进行鼠标移动也会触发到鼠标移入移出，所以自行通过增加工具栏的自定义图标方法来实现功能。为了方便理解，通过echarts官方实例进行改动，在toolbox中添加自定义的两个按钮（开始滚动和停止滚动），点击按钮可以实现控制echarts图的滚动与停止。本例代码中，设置了x轴数据超过4个时，实现每2秒进行滚动显示，如果x轴数据不超过4个时，即不进行滚动，切在echarts图的右上方工具栏也不会出现开始滚动及停止滚动这两个按钮。

2.实现代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>

	<body>
		<div id="status" style="height:400px;width:400px;"></div>
	</body>
	<script>
		var mychart = echarts.init(document.getElementById('status'));
		var xArr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		var option = {
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '10%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: xArr,
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			toolbox: {
				right: 30,
				feature: {
					magicType: {
						show: true,
						type: ['line', 'bar']
					},
					restore: {
						show: false
					},
					saveAsImage: {
						show: true
					}
				}

			},
			dataZoom: {
				show: true,
				realtime: true,
				startValue: 0,
				endValue: 3,
			},
			series: [{
				name: '直接访问',
				type: 'bar',
				barWidth: '60%',
				data: [10, 52, 200, 334, 390, 330, 220]
			}]
		};
		if(xArr.length > 4) {
			debugger;
			var a;
			option.toolbox.feature.myTip2 = {
				show: true,
				title: '开始滚动',
				icon: 'image://' + '/test/img/start.png',
				onclick: function() {
					clearInterval(a);
					a = setInterval(function() {
						// 每次向后滚动一个，最后一个从头开始。
						if(option.dataZoom.endValue == xArr.length - 1) {
							option.dataZoom.endValue = 3;
							option.dataZoom.startValue = 0;
						} else {
							option.dataZoom.endValue = option.dataZoom.endValue + 1;
							option.dataZoom.startValue = option.dataZoom.startValue + 1;
						}
						mychart.setOption(option);
					}, 2000);

				}
			}
			option.toolbox.feature.myTip3 = {
				show: true,
				title: '停止滚动',
				icon: 'image://' + '/test/img/stop.png',
				onclick: function() {
					clearInterval(a);
				}
			}
			a = setInterval(function() {
				// 每次向后滚动一个，最后一个从头开始。
				if(option.dataZoom.endValue == xArr.length - 1) {
					option.dataZoom.endValue = 3;
					option.dataZoom.startValue = 0;
				} else {
					option.dataZoom.endValue = option.dataZoom.endValue + 1;
					option.dataZoom.startValue = option.dataZoom.startValue + 1;
				}
				mychart.setOption(option);
			}, 2000);
		}
		mychart.setOption(option);
	</script>

</html>