直播平台源代码，数字化大屏地图轮播的实现echarts
echarts地图组件的基本配置我就不拿出来了，轮播的核心原理就是手动的给地图进行高亮的显示，配合定时器进行，主要是用到了echarts原生api方法，myChart.dispatchAction，这个方法可以对地图组件的高亮行为进行修改，在设定一个定时器进行地图区域的随机显示，地图轮播的行为就实现了。以下是轮播的主要的代码逻辑：
//高亮轮播展示
var hourIndex = 0; //声明要显示的区域
this.carouselTime = null; 每次触发设置定时器为null
//setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
this.carouselTime = setInterval(() => {
//dispatchAction echarts的API：触发图表行为
myChart.dispatchAction({
type: "downplay", //downplay 取消高亮指定的数据图形
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex, //数据index,要显示的区域
});
myChart.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: hourIndex,//数据index,要显示的区域
});
hourIndex++; //区域显示随时间叠加
//当循环到数组当中的最后一条数据后，重新进行循环
if (hourIndex > 32) { //数据满足之后重新进行轮播
hourIndex = 0;
}
}, 3000);
除此之外，对一些鼠行为进行处理：
//鼠标移入组件时停止轮播
myChart.on("mousemove", (e) => {
clearInterval(this.carouselTime); //清除循环
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
//鼠标移出组件时恢复轮播
myChart.on("mouseout", () => {
this.carouselTime = setInterval(() => {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: hourIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: hourIndex,
});
hourIndex++;
if (hourIndex > 32) {
hourIndex = 0;
}
}, 2000);
});
// 鼠标点击区域时执行的操作
myChart.on("click", () => {
// console.log(this.name);
//this.$emit("pulldata", this.name);
});
以上就是直播平台源代码，数字化大屏地图轮播的实现echarts， 更多内容欢迎关注之后的文章
标签：轮播,myChart,dispatchAction,hourIndex,大屏,seriesIndex,源代码,type From： https://www.cnblogs.com/yunbaomengnan/p/17222329.html