自动轮播方法
参数myChart代表echarts的实例名称, options指定图表的配置项和数据, num类目数量(原因:循环时达到最大值后,使其从头开始循环), time轮播间隔时长
export function autoHover ( myChart, option, num, time ) { var defaultData = { time : 2000 , num : 0 } ; if ( ! time) { time = defaultData. time; } if ( ! num) { num = defaultData. num; } var count = 0 ; var timeTicket = null ; function zdy ( ) { timeTicket = setInterval ( function ( ) { timeTicket && clearInterval ( timeTicket) ; myChart. dispatchAction ( { type : "downplay" , seriesIndex : 0 } ) ; myChart. dispatchAction ( { type : "highlight" , seriesIndex : 0 , dataIndex : count} ) ; myChart. dispatchAction ( { type : "showTip" , seriesIndex : 0 , dataIndex : count} ) ; count++ ; if ( count >= num) { count = 0 } zdy ( ) ; } , 3000 ) ; } ; zdy ( ) ; myChart. on ( "mouseover" , function ( params ) { if ( params. componentType !== 'geo' ) { clearInterval ( timeTicket) ; myChart. dispatchAction ( { type : "downplay" , seriesIndex : 0 } ) ; myChart. dispatchAction ( { type : "highlight" , seriesIndex : 0 , dataIndex : params. dataIndex} ) ; myChart. dispatchAction ( { type : "showTip" , seriesIndex : 0 , dataIndex : params. dataIndex} ) ; } } ) ; myChart. on ( "mouseout" , function ( ) { timeTicket && clearInterval ( timeTicket) ; timeTicket = setInterval ( function ( ) { myChart. dispatchAction ( { type : "downplay" , seriesIndex : 0 } ) ; myChart. dispatchAction ( { type : "highlight" , seriesIndex : 0 , dataIndex : count} ) ; myChart. dispatchAction ( { type : "showTip" , seriesIndex : 0 , dataIndex : count} ) ; count++ ; if ( count >= num) { count = 0 } } , 3000 ) ; } ) ;
}
使用方式–在需要的界面引入以上方法
import { autoHover} from "../../utils/index" ;