echarts tooltip显示图片

最新推荐文章于 2024-08-23 16:38:04 发布

六月的星星

最新推荐文章于 2024-08-23 16:38:04 发布

阅读量1w

点赞数 3

分类专栏：成长路程

本文链接：https://blog.csdn.net/u012157999/article/details/54576175

版权

成长路程专栏收录该内容

53 篇文章 1 订阅

订阅专栏

echarts tooltip显示图片

为了实现鼠标放在某点，显示图片，效果如下：

我们只要修改tooltip的formatter的数据格式，后台获得图片地址，开始进行拼凑显示内容，代码如下：

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,}					
				},