echarts 轮播切换点击事件 labelline跟着隐藏与显示

最新推荐文章于 2024-09-21 09:29:16 发布

爱吃虾尾吗

最新推荐文章于 2024-09-21 09:29:16 发布

阅读量886

点赞数

分类专栏：报错笔记文章标签： javascript vue.js echarts html5 css3

本文链接：https://blog.csdn.net/weixin_45682701/article/details/117329732

版权

本文介绍了如何在Echarts中实现图表轮播切换时，LabelLine随着点击事件隐藏和显示。同时，当鼠标移入图表时停止切换，移出后继续切换。提供了完整的代码示例，包括指示线的实现和定时器控制，旨在帮助开发者更好地理解和应用Echarts的此类功能。

摘要由CSDN通过智能技术生成

echarts 轮播切换点击事件 labelline跟着隐藏与显示

需求
轮播切换点击事件 labelline跟着隐藏与显示
鼠标移入停止切换鼠标移出开始切换

效果图

这是最终效果图
话不多说上代码

全部代码

let serveOrderType = this.$echarts.init(document.getElementById('serveOrderType'))
                // 绘制图表
        var typeList = {
            tooltip: {
                trigger: 'item',
                borderColor:'transparent',		//tooltip边框颜色
                borderWidth:2,
                backgroundColor:"transparent", 
                 position:['50%', '70%'],
                formatter: function (param) {	//自定义tooltip内容 
                  var text = '';
                    text += '<div style="display:flex;flex-direction:row;">'+
                          '<div style="background-color:'+ param.color +';height:15px;width:2px;margin-left:61px;position:absolute;top:-8px;transform:rotate(-30deg)"></div>'+
                          '<div style="background-color:'+ param.color +';height:2px;width:80px;margin-left:65px;"></div>'+
                          '<div style="display:flex;flex-direction:column;">'+
                            '<span>'+ param.data.num+'</span>'+
                              '</div>'
                          '</div>'
                      return text
                }
            },