常规写法,但这种写法不能用于动态曲线,否则会有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: '反选'
}
]
},
有问题还是要多看官方文档,主动发现才能提高效率。