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

最新推荐文章于 2024-05-21 11:41:40 发布

cc蒲公英

最新推荐文章于 2024-05-21 11:41:40 发布

阅读量920

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/cddcj/article/details/127792026

版权

如图：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;
}

完成！