自动轮播方法
参数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";