echart如何实现一键显示和隐藏功能？

常规写法，但这种写法不能用于动态曲线，否则会有bug，就是点击单独曲线的时候，会一直为true或者FALSE。

JS:

var curveVueData={
   showAllCurves: true,
}
var selectedStatus = {};

toggleAllCurves: function() {
       curveVueData.showAllCurves = !curveVueData.showAllCurves;
       for(var i = 0; i < gCurveVarb.length; i++) {
           selectedStatus[gCurveVarb[i]] = curveVueData.showAllCurves;
       }//gCurveVarb里包含你所需要的大量变量

        gOption.legend.selected = selectedStatus;
       gCurveChart.setOption(gOption);
},

HTML:

<div>
    <button @click="toggleAllCurves" style="font-size: 16px; color: white; background-color: #1E88E5; padding: 8px 16px; border-radius: 5px; border: none; cursor: pointer;">显示/隐藏所有曲线</button>

</div>

为了解决上面那个动态曲线的bug，我想了一周，后面查阅echart官方文档，发现echart自带全选和反选功能，而且兼容性很好，推荐下面用法：

legend: {
   data : gCurveVarb,
   width:'70%',
   selector: [
       {
           // 全选
           type: 'all',
           // 可以是任意你喜欢的标题
           title: '全选'
       },
       {
           // 反选
           type: 'inverse',
           // 可以是任意你喜欢的标题
           title: '反选'
       }
       ]

},

有问题还是要多看官方文档，主动发现才能提高效率。