echars饼图如何给label绑定点击事件？

Question

在官网上看到可以给组件定义，我用

chart.on('click', 'series.label', function () {...});

试了试没起作用。是什么原因？

----------------------------------添加rich

label: {

      show: true,
      rich: {
        til: {
          color: '#000',
          fontSize: 14,
          align: 'center',
          lineHeight: 21
        },
        desc: {
          color: '#000',
          fontSize: 9,
          align: 'center',
          lineHeight: 21
        },
        high: {
          color: '#f8473d',
          fontSize: 9,
          align: 'center',
          lineHeight: 21
        },
        middle: {
          color: '#f9d03c',
          fontSize: 9,
          align: 'center',
          lineHeight: 21
        },
        low: {
          color: '#44d2ca',
          fontSize: 9,
          align: 'center',
          lineHeight: 21
        }
      }
    },

Answer 1

chart.on('click', function (params) {...} 打出params你能发现dataType是undefined
层级为componentType:"series" -> seriesType: "pie" -> dataType: undefined

即使你使用chart.on('click', 'series.pie.label', function () {...});
当你点击label的时候会触发，但是点击面板一样会触发，因为只到了seriesType，没有dataType

给你个demo

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var 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: '搜索引擎' }
                ],
                label: {
                    show: true
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('click', 'series.pie.label', function () {
        console.log('click');
    });
</script>