【echarts】 tooltip显示图片

最新推荐文章于 2024-12-08 06:09:44 发布

weixin_34238633

最新推荐文章于 2024-12-08 06:09:44 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qifei-jia/p/7729130.html

本文介绍了一个ECharts中自定义tooltip的示例代码，展示了如何设置tooltip的触发方式、样式及内容格式化等特性，适用于需要丰富提示信息展示的应用场景。

tooltip: {  
                    trigger: 'item',  
                    borderRadius: 8,//边框圆角  
                    backgroundColor: 'rgba(51,204,204,0.7)',//背景颜色（此时为默认色）  
                    formatter: function(params) {    
                        var res=params.name+'<br/>';    
                        var s=myChart.getOption()  
                        if(params.name.substring(params.name.length-1)!='市'){  
                             for(var j=0;j<s.series[0].markPoint.data.length;j++){    
                                if(s.series[0].markPoint.data[j].name==params.name){    //图片地址  
                                    res+="<img style='width:250px;height:150px;' src='"+s.series[0].markPoint.data[j].pic+"'/>";  
                                }  
                             }  
                        }  
                        return res;    
                    },  
                    textStyle:{color:'#ffff',align:'center',fontSize: 18,}                    
                },

转载于:https://www.cnblogs.com/qifei-jia/p/7729130.html