ECharts柱状图中自定义提示框内容

//评价标签情况柱状图
	var tabChartContainer = function () {
		$('#tabChart').css('height','320px');
	};
	
	tabChartContainer();
 	var tabChart = echarts.init(document.getElementById('tabChart'));
	var options = {
			tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
		            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
		        },
		        formatter: function(datas) 
	              {
	                  var res = datas[0].name + '<br/>', val;
	                  for(var i = 0, length = datas.length; i < length; i++) {
	                        val = (datas[i].value*100) + '%';
	                        res += datas[i].seriesName + ':' + val + '<br/>';
	                    }
	                    return res;
	               }
		    },
		    legend: {
		        data:['好评率']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            data : ['住户1','住户2','住户3','住户4','住户5','住户6','住户7','住户8','住户9']
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            axisLabel: {  
		                  show: true,  
		                  interval: 'auto',  
		                  formatter: function(value){
		                	  if(value==0)
		                		  {
		                		  return value;
		                		  }else {
		                			  return value*100+'%';
		                		  }
		                  }
		                }
		        }
		    ],
		    dataZoom : [{  
	             show : true,  
	             realtime : false,  
	             start : 0,  
	             end :50 
	         }],
		    series : [
		        {
		            name:'好评率',
		            type:'bar',
		            barWidth:'35',
		            data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
		            itemStyle:{
		                normal:{
		                    color:'#ff7000'
		                }
		            },
		            label:{
		                normal:{
		                     show:true,
		                position:'insideTop'
		                },
		                
		            }
		        }
		    ]
		};
	tabChart.setOption(options);

echarts的tooltip组件中的一个formatter方法实现,formatter支持字符串和回调函数两种配置方式(本文描述回调函数的实现方式)。

formatter: function(datas) 
	              {
	                  var res = datas[0].name + '<br/>', val;
	                  for(var i = 0, length = datas.length; i < length; i++) {
	                        val = (datas[i].value*100) + '%';
	                        res += datas[i].seriesName + ':' + val + '<br/>';
	                    }
	                    return res;
	               }


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值