echart报表鼠标悬浮显示数据单位自定义

最新推荐文章于 2025-06-16 10:52:13 发布

原创最新推荐文章于 2025-06-16 10:52:13 发布 · 8.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #鼠标悬浮数据显示 #echarts

JAVA 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在Echarts报表中自定义鼠标悬浮时显示的数据单位，通过配置tooltip选项，实现对数值格式的个性化展示，提升图表的易读性。

(针对单类型的图表，只需在tooltip里加上 formatter: "{b} ：  {c} （GB）" 即可，但对于多类型分类展示的要用到如下方法)
需要动4个地方：1. var formatLabel = '{b}<br/>'，2.数据拼接的for循环里加上formatLabel+='{a'+i+'}:{c'+i+'} 万元 <br/>'。3.tooltip里加上formatter:formatLabel。4.在yAxis里加上axisLabel : { formatter: '{value} 万元',}
如下为demo：


 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>呃呃呃</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
		<script src="<%=request.getContextPath() %>/bbdz/js/echarts.min.js"></script>
		<script src="<%=request.getContextPath() %>/bbdz/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/bbdz/js/green.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/dashBoard/js/dashboard.tools.js"></script>
		<link href="<%=request.getContextPath() %>/bbdz/css/daohang.css" rel="stylesheet" />
  </head>
  
  <body>
  	<div id="d">
	<div class="chart chart-lg" tabindex="11" style="overflow: hidden; outline: none;">
      	<dl style="margin-bottom: 0px;">
      		<dd id="diys">
      		</dd>
      	</dl>	
    </div>
    <div id="wenzi"  style="font-family: 'Microsoft Yahei';font-size:20px;text-align:center"></div>
  	<div class="chart" style="height:100%;width:100%" id="jzgwcxfjeChart"></div>
  	</div>
  </body>
  
  <script type="text/javascript">

  
  $(function() {
  	var width = GetQueryString("width");
  	var height = GetQueryString("height");
  	$('#d').css("width",width);
  	$('#d').css("height",height);
  	$('#wenzi').css("width",width);
  });
  
  Array.prototype.indexOf = function(val) {
	for (var i = 0; i < this.length; i++) {
		if (this[i] == val) return i;
	}
	return -1;
};
Array.prototype.remove = function(val) {
	var index = this.indexOf(val);
	if (index > -1) {
		this.splice(index, 1);
	}
};
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

     var r = window.location.search.substr(1).match(reg);

     if(r!=null)return  unescape(r[2]); return null;
}

function getMissing(data,date,dateMiss){
	var dateLen=date.length;
	var new_Array = new Array(dateLen);
	var missLen=data.length;
	
	
	if(data){
		for(var i=0;i<missLen;i++){
			new_Array[i]=data[i];
		}
		if(missLen<dateLen){
			//alert("数据缺失！");
			for(var i=0;i<12;i++){
			if((dashboard.tools.isContains(dateMiss[i],date[i]))){
			}else{
				//alert("第"+date[i]+"月数据缺失！");
				dateMiss.splice(i, 0, date[i])
				new_Array.splice(i,0,"0");
				//console.info(new_Array);
				continue;
				
			}
		}
			
		}
	}
	//console.info(new_Array);
	return new_Array;
}

	$.getJSON("<%=request.getContextPath() %>/dashboard/jzgzcxfrsInfo/",{type:"wcjcje"},function (data) {
	var myChart = echarts.init(document.getElementById("jzgwcxfjeChart"),theme);	
	 myChart.showLoading();
	 
	 var date = data.date;
	 var restaurant=data.restaurant;
	 var dataList=data.dataList;
	 var dateMissList=data.dateMissList;
	 var dataArray=new Array();
	 var formatLabel = '{b}<br/>';
	 
	 var obj = {};
	 obj.type='line';
	 for(var i=0;i<restaurant.length;i++)
	 {
		var dataobj= $.extend({},obj);
		dataobj.name=restaurant[i];
		//alert("第"+i+"次循环");
		//alert("餐厅是："+restaurant[i]);
		dataobj.data=getMissing(dataList[i],date,dateMissList[i]);
		dataArray.push(dataobj);
		formatLabel+='{a'+i+'}:{c'+i+'} 万元 <br/>';
	 }
	 //console.info(dataArray);
	 myChart.hideLoading(); 
	 
		  option = {
				    title: {
				        text: ''
				    },
				    tooltip : {
				        trigger: 'axis',
				        formatter:formatLabel
				    },
				    legend: {
				        data: restaurant,
				   		y: 'bottom'
				    },
				    toolbox: {
				    	  show : true,
				            feature : {
				             mark : {show: true},
				                dataView : {show: true, readOnly: false},
				                magicType: {show: true, type: ['line', 'bar']},
				                restore : {show: true},
				                saveAsImage : {show: true} 
				            }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '15%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data : date,
				            name : '年月'
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name : '金额  (万元)',
				            axisLabel : {
								formatter: '{value} 万元',
							  }
				        }
				    ],
				    series :dataArray
				};

		  	myChart.setOption(option);
			});


		</script>
		
</html>