echarts饼图，并在点击图例的时候回触发事件。

首先是要引入echarts.js文件，下面是实例代码，直接复制即可

<!doctype html>
 
<html>
  <head>
   <meta charset="UTF-8">
   <script type="text/javascript" src="js/echarts.js"></script>
  </head>
  <body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));


// 指定图表的配置项和数据
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
console.log(params);
alert(1);
});
/*

图例交互事件：

1） legendselectchanged : 切换图例选中状态后的事件 (注：图例组件用户切换图例开关会触发该事件,不管你有没有选择，点击了就触发)
2）legendselected：例组件用legendSelect 图例选中后的事件，即点击显示该图例时，触发就生效。
3）legendunselected： legendUnSelect 图例取消选中后的事件。
4）datazoom：数据区域缩放后的事件。缩放视觉映射组件。
5）datarangeselected：selectDataRange 视觉映射组件中，range 值改变后触发的事件。
6）timelinechanged：timelineChange 时间轴中的时间点改变后的事件。
7）timelineplaychanged：timelinePlayChange 时间轴中播放状态的切换事件。
8）restore： restore 重置 option 事件。
9）dataviewchanged：工具栏中数据视图的修改事件。
10）magictypechanged：工具栏中动态类型切换的切换事件。
11）geoselectchanged：geo 中地图区域切换选中状态的事件（用户点击选中会触发该事件。）。
12）geoselected：geo 中地图区域选中后的事件（使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged））。
13）geounselected：geo 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged）。
14）pieselectchanged：series-pie 中饼图扇形切换选中状态的事件，用户点击选中会触发该事件。
15）pieselected：series-pie 中饼图扇形选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。
16）pieunselected：series-pie 中饼图扇形取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。
17）mapselectchanged： series-map 中地图区域切换选中状态的事件，用户点击选中会触发该事件。
18）mapselected：series-map 中地图区域选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。
19）mapunselected：series-map 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。
20）axisareaselected：平行坐标轴 (Parallel) 范围选取事件，
*/
</script>
  </body>
 
</html>

效果如下：

echarts 饼图撑满父级容器组件 echarts饼图图例_图例事件