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

来源：互联网发布：淘宝网用户体验报告编辑：程序博客网时间：2024/06/05 17:00
(针对单类型的图表，只需在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>
阅读全文
1 0