Echarts每个扇区的点击事件

1、初始化扇区

// 基于准备好的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',
      x : 'left',
      data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
     },
     toolbox: {
      show : true,
      feature : {
       saveAsImage : {show: true}
      }
     },
     calculable : false,   //拖拽
     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:'搜索引擎'}
       ]
      }
     ]
    };
   
// 为echarts对象加载数据 
myChart.setOption(option); 

2、为扇区增加监听事件

// 监听捕捉点击事件
function eConsole(param) {
  if (typeof param.seriesIndex == 'undefined') {
	return;
  }
  if (param.type == 'click') {
	everyClick(param); // 对应触发事件
  }
}
// 增加监听事件
myChart.on("click", eConsole);

3、监听事件方法(灵活)

function everyClick(param){ console.log(param); }

4、注意:若扇区无值(没有比例),无法触发对应事件

猜你喜欢

转载自my.oschina.net/HarleyZhuge/blog/1626546