echarts柱状图轮播 （datazoom方法）
在网上看到的挺多方法都踩坑，于是自己写的分享出来，技术为react hooks
我们先定义一下起点和终点数值（不理解的同学可以先去看一下datazoom的demo实例）
let zoomstart
let zoomend
let space;
function options(space,y,serdata){
let time = setInterval(() => {
setbarOption({
xAxis: {
type: 'value',
name: '单位：头',
position: 'right',
axisLine:{
lineStyle: {
type: 'solid',
color: 'rgba(247,255,62,1)',//左边线的颜色
width:'1'//坐标线的宽度
}
},
splitLine: {
//网格线
"show": false
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid:{
left: '3%',
right: '15%',
bottom: '21%',
top:'5%',
containLabel: true
},
yAxis: {
type: 'category',
axisLine:{
lineStyle: {
type: 'solid',
color: 'rgba(247,255,62,1)',//左边线的颜色
width:'1'//坐标线的宽度
}
},
splitLine: {
//网格线
"show": false
},
data: y
},
series: [
{
type:'bar',
color:'rgba(247,255,62,1)',
data:serdata
}
],
dataZoom: [
{
id: 'dataZoomY',
type: 'inside',
orient:'vertical',
show: false,
start: zoomStart(space),
end: zoomEnd(space),//默认显示条柱数
}
],
})
}, 5000);
setTime(time)
}
主要是datazoom，不懂配置的童鞋可以去百度看一下配置，传进来的space,y,serdata分别为控制条数的数值、y轴的数据和series的data数据。
在time存储定时器
const [time,setTime] = useState()
useEffect(()=>{
if(props.option.series && props.option.yAxis){
clearInterval(time);
zoomstart = 0
setData(props.option.yAxis)
setSeriesData(props.option.series)
space = 5/props.option.series.length*100
if(props.option.yAxis.length>5){
zoomend = 5/props.option.series.length*100
options(space,props.option.yAxis,props.option.series)
}else{
zoomend = 100
}
}
},[props.option])
在ueseffect中我们判断父组件传过来的值是否有东西进行处理，clearInterval(time)这里因为我们有一个点击事件，会导致数据进行变化，这个时候定时器会重复创建，我们主要是为了停止之前的定时器，也就是这个问题困了我好久。
然后在datastart和dataend方法中我们这样写：
function zoomStart(space){
if (zoomend >= 100) zoomstart = 0;
else {
zoomstart += space;
}
return zoomstart
}
function zoomEnd(space){
if (zoomend >= 100) zoomend = space;
else {
zoomend += space;
}
return zoomend
}
最后的一个效果就是这样
gif效果图已经更新
