饼图-点击事件

解决问题：实现点击饼图的每个扇形，显示扇形数据
1、myChart.on('click', function(params) {....//要实现的结果 });
2、源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习</title>
<!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
var datas = [ 1,2,3,4,];
$(function(){
var myChart = echarts.init(document.getElementById('main'));
	myChart.showLoading();
	myChart.clear();
	var option = {
		color : [ '#437bff', '#f66282', '#9d5ee1', '#fec71b'],
		graphic : [ { //2、中心的文字设置
			type : 'text',
			z : 100,
			left : 'center',
			top : 'middle',
			style : {
				x : 3,
				y : 10,
				fill : '#fff',
				text : '及格率',
				font : 'bolder 16px  "Microsoft YaHei", sans-serif',
				textAlign : 'center', //3、居中显示
			}

		} ],

		tooltip : {
			show : true,
			trigger : 'item',
			triggerOn : 'mousemove|click',
			formatter : function(params) {
				return params.marker + params.name + "<br/>"
						+ params.seriesName + ":"+ params.value +"人("  + params.percent.toFixed() + "%)<br/>";
			},
		// formatter: "{b} : <br/>{c} ({d}%)",
		// position: ['50%', '80%'],
		},

 legend : {
			show : false,
			orient : 'vertical',
			x : 'left',
			data : [ '一班', '二班', '三班', '四班']
		},
		calculable : false,
		series : [ {
			name : '及格率',
			type : 'pie',
			radius : [ '60%', '85%' ],
			center : [ '50%', '50%' ],
			label : {

				normal : {
					show : false,
					formatter : '{b}：{d}%({c}台) ',
				}
			},
			data : [ {
				value : datas[0],
				name : '一班'
			}, {
				value : datas[1],
				name : '二班'
			}, {
				value : datas[2],
				name : '三班',
			}, {
				value : datas[3],
				name : '四班'
			}]
		} ]
	};
	myChart.setOption(option);
	myChart.hideLoading();
	myChart.resize();
	myChart.on('click', function(params) {//点击事件
		$('#device1').text(params.name);
		$('#onlinenum').text(params.value);
		$('#onlinerate1').text(params.percent.toFixed());
	});
})
</script>
<style type="text/css">
body {
	font: normal 12px/17px Arial;
}
#main {
	width: 400px;
	height: 400px;
	background: #FC9;
}
</style>
</head>
<body>
<div  class="error" >
  <div id="main">echarts饼图展示</div>
  <div>
    <div id="device1">一班</div>
    <span>人数</span><span id="onlinenum">4</span><br/>
    <span>及格率</span><span id="onlinerate1" >40</span><span>%</span>
  </div>
</div>
</body>
</html>
猜你喜欢
