echarts柱状图 显示数量和所占比例

需求:用echarts制作柱状图,鼠标放到柱上时显示人数和所占比例

js代码:
先引入echarts.min js依赖
后:

var tradenum = '${tradenum}';
var option = {
	          
	            tooltip : {
  		        trigger: 'item',
  		         formatter: function(params){
  		        	return params.name + '<br />' + '人数:'+params.value+'占比:'+(params.value/tradenum*100).toFixed(2) + '%'
  		        } 
  		    },
  		    }

最重要的是formatter,里面的内容,如果不知道哪个参数代表的是什么意思,可以先写成

function(params){
	console.log(params);
}

这样,去控制台找你需要的参数,然后 拼接就可以实现以上的功能了.

另外,div内柱状图和饼状图平铺

操作:

display:flex;justify-content: space-around;//css代码加入这个样式就可以

每个圆柱点击跳转事件:

<div id="main2"></div>
var myChart2 = echarts.init(document.getElementById('main2'));//
 myChart2.on('click', function (params) {
	        	window.location.href="/forum/manage/alumnus/list_local"
	    	});
	 // 使用刚指定的配置项和数据显示图表。
	        myChart2.setOption(option);