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

(针对单类型的图表，只需在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>

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

猜你喜欢