首页 前端知识 echart 自定义小圆点提示数据(和官网一样的效果)

echart 自定义小圆点提示数据(和官网一样的效果)

2024-08-04 00:08:04 前端知识 前端哥 999 787 我要收藏

 

 如图:Y轴是四条数组数据,鼠标移上去显示所有数据的内容+自定义数据,样式要和官网保持一样。

代码如下:

.chart-dot-weight{
      width:10px;
      height:10px;
      margin-right:5px;
      display:inline-block;
      border-radius:5px;
}
formatter: function(params) {
	  	var htmlDot = null, res = '';
	  	if(params.length>0){  
	  		var htmlH1 = params[0].name + '月<br/>';
	  		for (var i = 0; i < params.length; i++){
	  				htmlDot = '<span class="chart-dot-weight" style="background-color:'+ params[i].color +';"></span>';
	  				htmlDot += params[i].name + ':'+ params[i].value + '<br/>';
	  					
	  				res += htmlDot; 
	  		}
	  				
	  		return htmlH1 + res;
}



  	

完成!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14712.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!