您可以通过使用ECharts中的DataZoom组件来实现柱状图轮播滚动和可暂停，以及通过设置图表的可滚动性来实现鼠标滚轮上下滚动查看。
以下是一个示例代码，可以让您更好地理解如何实现这些功能：
```javascript
option = {
// 设置数据区域缩放组件
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 60, // 显示60个数据
handleSize: 16,
handleStyle: {
color: '#ddd'
},
textStyle: {
color: '#fff'
},
fillerColor: 'rgba(255,255,255,0.2)',
borderColor: '#ddd'
}, {
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 60 // 显示60个数据
}],
// 设置柱状图
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
axisTick: {
alignWithLabel: true
},
// 设置轴线样式
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
// 设置轴线样式
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [{
name: '柱状图',
type: 'bar',
data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270],
// 设置柱状图样式
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'];
return colorList[params.dataIndex % colorList.length]
}
}
}
}]
};
// 设置定时器，让柱状图自动轮播
var currentIndex = -1;
var timeTicket = null;
var count = option.xAxis.data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
// 设置数据区域缩放组件的起点和终点
myChart.setOption({
xAxis: {
axisLabel: {
show: true,
interval: 0,
rotate: 0
},
data: option.xAxis.data.slice(currentIndex, currentIndex + count)
},
dataZoom: [{
start: currentIndex / dataLen * 100,
end: (currentIndex + count) / dataLen * 100
}, {
start: currentIndex / dataLen * 100,
end: (currentIndex + count) / dataLen * 100
}]
});
}, 1000);
// 设置鼠标滚轮上下滚动查看
var zoomSize = 6;
myChart.on('mousewheel', function(params) {
var option = myChart.getOption();
var axis = option.xAxis[0];
var dataLen = axis.data.length;
var start = axis.dataZoom[0].start;
var end = axis.dataZoom[0].end;
var maxSpan = 100;
var zoom = Math.ceil((end - start) / dataLen * (dataLen - 1));
if (params.wheelDelta > 0) {
start = Math.max(0, start - zoom);
end = Math.min(dataLen - 1, end + zoom);
} else {
var center = (start + end) / 2;
start = Math.max(0, Math.floor(center - zoom / 2));
end = Math.min(dataLen - 1, start + zoom - 1);
}
var span = end - start;
if (span > maxSpan) {
var extra = span - maxSpan;
start += extra / 2;
end -= extra / 2;
}
myChart.setOption({
xAxis: {
axisLabel: {
show: true,
interval: 0,
rotate: 0
},
data: axis.data.slice(start, end + 1)
},
dataZoom: [{
start: start / dataLen * 100,
end: end / dataLen * 100
}, {
start: start / dataLen * 100,
end: end / dataLen * 100
}]
});
});
```
在上面的代码中，我们首先通过设置`dataZoom`组件来实现柱状图的轮播和暂停功能。其中，`start`和`end`表示数据区域缩放组件的起点和终点，可以通过设置这两个属性来控制显示的数据量。通过定时器，我们可以控制柱状图每隔一段时间自动轮播一次。在鼠标滚轮上下滚动时，我们通过`mousewheel`事件来控制显示的数据量，从而实现了滚轮上下滚动查看的功能。
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
