echarts重写鼠标移动时的事件

最新推荐文章于 2024-08-12 14:23:08 发布

酒书

最新推荐文章于 2024-08-12 14:23:08 发布

阅读量2.1w

点赞数 2

本文链接：https://blog.csdn.net/royal1235/article/details/80747078

版权

echarts默认事件效果如图：
这里写图片描述
想要当鼠标移动时出现的效果为：

如果想要改成这种效果就需要对鼠标移动事件进行重写，代码截图为：

我知道大家想要源码，为了方便大家copy，源码如下：
var option = {

                      tooltip: {
                            trigger: 'axis',
                            backgroundColor: '#428bca',  //鼠标移动到图上面时，背景色
                            padding:15,     //定义内边距
                            formatter: function(szlb) { 
                                //szlb存的是对应的y轴数据
                                 for(var j=0;j<szlb.length;j++){
                                     if(szlb[j].value=='1'){
                                         return szlb[j].name+":I类"; 
                                     }else if(szlb[j].value=='2'){
                                         return szlb[j].name+":II类"; 
                                     }else if(szlb[j].value=='3'){
                                         return szlb[j].name+":III类"; 
                                     }else if(szlb[j].value=='4'){
                                         return szlb[j].name+":IV类"; 
                                     }else if(szlb[j].value=='5'){
                                         return szlb[j].name+":V类"; 
                                     }else if(szlb[j].value=='6'){
                                         return szlb[j].name+":劣V类"; 
                                     }else if(szlb[j].value=='0'){
                                         return szlb[j].name+":断流"; 
                                     }
                                 }
                            }
                        },
               }