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>
3.实现效果
4.打包代码（设置了粉丝可下载）
https://download.csdn.net/download/qq_27387133/12805786
