以下存在一个问题:轮播过程会闪一下,目前定位到是变态UI让提示框加背景图造成的,暂时还没有好的解决方式(vue写法)
const data = [820, 932, 901, 934, 1290, 1330, 1320];
let lineDom = document.getElementById("myLine");
let myLine = this.$echarts.init(lineDom);
let option;
option = {
xAxis: {
type: "category",
splitLine: {
//是否需要开启分割线
show: false
},
axisTick: {
//是否需要开启刻度
show: false
},
axisLine: {
//轴线样式设置
show: true, //是否显示坐标轴线
lineStyle: {
color: "#333"
}
},
axisLabel: {
//横坐标样式设置
textStyle: {
fontSize: 16,
fontWeight: "bold",
color: "blue",
fontFamily: "normal"
}
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value",
splitLine: {
//是否开启分割线
show: true,
lineStyle: {
color: ["pink"],
width: 2,
type: "dotted"
}
},
axisTick: {
//是否开启刻度线
show: false
},
axisLine: {
//是否显示坐标轴线
show: true,
lineStyle: {
color: "blue"
}
},
axisLabel: {
interval: 0,
formatter: `{value}`,
textStyle: {
fontSize: 16,
fontWeight: "normal",
color: "red",
fontFamily: "normal"
}
}
},
tooltip: {
//提示框样式及内容设置
type: "axis",
axisPointer: {
animation: true,
animationDuration: 1000
},
formatter(params) {
return `<div style="background:url(${require("../assets/logo.png")}) no-repeat center center;padding:10px">PH:  ${
params.data
}</br>${params.name}</div>`;
},
padding: 0,
borderWidth: 0,
borderColor: "red",
textStyle: {
fontSize: 16,
fontWeight: "bold",
color: "blue",
fontFamily: "siyuan",
align: "left"
}
},
legend: {
show: true,
top: "5%",
left: "center",
textStyle: {
fontSize: 16,
fontWeight: "normal",
color: "pink",
fontFamily: "normal"
}
},
series: [
{
data: data,
type: "line",
areaStyle: {}
}
]
};
option && myLine.setOption(option);
let index = 0; //播放所在下标
let mTime;
let openTime = function() {
mTime = setInterval(function() {
myLine.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index
});
index++;
if (index > data.length) {
index = 0;
}
return () => {
mTime.clearInterval();
};
}, 2000);
};
//如果没增加移入移出清除,会出现提示框轮播会闪的情况
lineDom.onmouseover = () => {
clearInterval(mTime);
};
lineDom.onmouseout = () => {
openTime();
};
//window.onload = function() {//页面加载完运行
//clearInterval(mTime);
//openTime();
//};
openTime();
这块需要注意:如果需要轮播展示提示框,那么option中需要配置tooltip,不会这还有人不知道吧~啊~