echats柱状图分组显示不同的标签

2018-11-15 21:38:40   JS   被浏览

平常我们应用多的场景是,按照一定分组显示,如下图。


但是现在如果每年的柱子的名字不一样,可以参考下面的代码,在label的formatter中进行处理。


<div style="text-align:center; font-size: 24px; padding: 20px;">
	近三年金额排在前5位的单位
</div>

<div style="text-align:center;width:800px;height:500px;margin-left:auto;margin-right:auto;" id="sta_container">

</div>




<script type="text/javascript">


var resultRes = {};
resultRes._DATA_ = {};
resultRes._DATA_.unitMoney1 = '[{"value":91, "name":"name1"},{"value":89, "name":"name2"},{"value":85, "name":"name3"}]';
resultRes._DATA_.unitMoney2 = '[{"value":153, "name":"XXXX1"},{"value":120, "name":"XXXX2"},{"value":76, "name":"XXXX3"}]';
resultRes._DATA_.unitMoney3 = '[{"value":76, "name":"随心所欲"},{"value":97, "name":"任性"},{"value":132, "name":"YYYYY3"}]';
resultRes._DATA_.unitMoney4 = '[{"value":167, "name":"ZZZZZ1"},{"value":123, "name":"ZZZZZ2"},{"value":176, "name":"就是这么拽"}]';
resultRes._DATA_.unitMoney5 = '[{"value":189, "name":"OOOOO1"},{"value":112, "name":"OOOOO2"},{"value":83, "name":"OOOOO3"}]';

var dom = document.getElementById("sta_container");
var myChart = echarts.init(dom);

var labelOption = {
   normal: {
	   show: true,
	   rotate: 90,
	   align: 'left',
	   verticalAlign: 'middle',
	   position: 'insideBottom',
	   distance: 15,				   
	   formatter:function(params){ 
			str =  params.data.name + "   " + params.data.value
			return str
		},
	   fontSize: 16,
	   rich: {
		   name: {
			   textBorderColor: '#fff'
		   }
	   }
   }
};

var option = {
   color: ['#857ac6', '#113ace', '#49da47', '#79e229', '#068e23'],
   tooltip: {
	   trigger: 'axis',
	   axisPointer: {
		   type: 'shadow'
	   }
   },
   legend: {
	   data: ['单位一', '单位二', '单位三', '单位四', '单位五']
   },
   calculable: true,
   xAxis: [
	   {
		   type: 'category',
		   axisTick: {show: false},
		   data: ['2016', '2017', '2018']
	   }
   ],
   yAxis: [
	   {
		   type: 'value'
	   }
   ],
   series: [
	   {
		   name: '单位一',
		   type: 'bar',
		   label: labelOption,
		   data: JSON.parse(resultRes._DATA_.unitMoney1) 
	   },
	   {
		   name: '单位二',
		   type: 'bar',
		   label: labelOption,
		   data: JSON.parse(resultRes._DATA_.unitMoney2) 
	   },				   
	   {
		   name: '单位三',
		   type: 'bar',
		   label: labelOption,
		   data: JSON.parse(resultRes._DATA_.unitMoney3) 
	   },
	   {
		   name: '单位四',
		   type: 'bar',
		   label: labelOption,
		   data: JSON.parse(resultRes._DATA_.unitMoney4) 
	   },
	   {
		   name: '单位五',
		   type: 'bar',
		   label: labelOption,
		   data: JSON.parse(resultRes._DATA_.unitMoney3) 
		/* data: [
				 {value:335, name:'NAME1'},
				 {value:310, name:'NAME2'},
				 {value:234, name:'NAME3'}
			 ] */
	   }
   ]
};
myChart.setOption(option, true);
</script>



效果图如下: