Incubator-echarts: echarts如何重写某个图例项的点击事件，这个能实现吗

[panh]

如题，想要实现点击图例项，重新从后台获取选择项的数据，前台展示

[kener]

响应legend selected事件做你想做的事情

[panh]

的确可以在legend selected事件处理，但是我取消选中后，怎么屏蔽原先触发的隐藏数据的事件，就是一直让他保持选中，而不触发取消选中事件，怎么截获取消事件

[kener]

一样的，你把响应回调的所有参数console.log出来看看就明白了

[panh]

参数里只有ecConfig.EVENT.LEGEND_SELECTED符合，其他没看到

[yantze]

echarts version: 3.1.2

修改图例点击事件样例代码：

• 当第一次点击图例时，只显示点击的图例。
• 当还剩一个图例被取消选中后，自动全选中所有图例。

  var triggerAction = function(action, selected) {
        legend = [];

        for ( name in selected) {
            if (selected.hasOwnProperty(name)) {
                legend.push({name: name});
            }
        }

        myChart.dispatchAction({
            type: action,
            batch: legend
        });
    };

    var isFirstUnSelect = function(selected) {

        var unSelectedCount = 0;
        for ( name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }

            if (selected[name] == false) {
                ++unSelectedCount;
            }
        }
        return unSelectedCount==1;
    };

    var isAllUnSelected = function(selected) {
        var selectedCount = 0;
        for ( name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }

            // 所有 selected Object 里面 true 代表 selected， false 代表 unselected
            if (selected[name] == true) {
                ++selectedCount;
            }
        }
        return selectedCount==0;
    };

    myChart.on('legendselectchanged', function(obj) {
        var selected = obj.selected;
        var legend = obj.name;

        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
        // 使得 无 selected 对象
        if (selected != undefined) {

            if (isFirstUnSelect(selected)) {
                triggerAction('legendToggleSelect', selected);
            } else if (isAllUnSelected(selected)) {
                triggerAction('legendSelect', selected);

            }
        }

    });

[corecible]

myChart 这个变量怎么来的。

[yantze]

Tutorial:
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

[liuzhenbase]

我使用了 @yantze 的代码，但遇到了一些问题：

1. 当图例只有一个被选中时，无法取消选中该图例
2. 当有五个图例，已经选中了三个，再点击未选中的一个，会变成选中全部的状态

我修正了以上BUG，感谢 @yantze

myChart.on('legendselectchanged', function(params) {
            const selected = params.selected,
                target = params.name
            if(selected !== undefined){
                // 获取点击之前状态
                let prevSelected = params.selected
                prevSelected[target] = !prevSelected[target]

                let unSelectedCount = 0,
                    selectedCount = 0
                for (let name in prevSelected) {
                    if(!prevSelected.hasOwnProperty(name)){
                        continue
                    }
                    if(prevSelected[name] === false){
                        ++unSelectedCount
                    }else{
                        ++selectedCount
                    }
                }
                // 1、若点击前所有都被选中
                // 2、（点击前）若有且仅有被点击的图例是选中状态
                // 则执行点击后的取反（legendToggleSelect）操作
                if(unSelectedCount === 0 || (selectedCount === 1 && prevSelected[target] === true)){
                    let legend = []
                    for(let name in selected){
                        if (selected.hasOwnProperty(name)) {
                            legend.push({name: name})
                        }
                    }
                    myChart.dispatchAction({
                        type: 'legendToggleSelect',
                        batch: legend
                    })
                }
            }
        })