echarts legend控制选择至少一个图例

569 阅读1分钟

echarts的legend组件自带一个功能,点击哪个图例,哪个就消失
但是当所有图例都消失的时候,就会出现以下情况:

图片.png

图片.png 因为没有图例 所以纵坐标没有数据并且会左移,这样不美观

//chart是拿到的echart实例
const handleSelect=(chart)=>{
//监听事件
  chart.on('legendselectchanged', function (param) {
  //打印params参数是这些
  /*
    {
    name: "email"
    selected: {email: false, Union Ads: true, Video Ads: true, Direct: true}
    type: "legendselectchanged"
  */
  //记录剩下的图例数
    let selected = [];
    for (let key in param.selected) {
        if (param.selected[key]) {
            selected.push(key);
        }
    }
    //如果只剩一个 就触发事件 选中最后一个点击的图例
    //echarts中支持的图表行为,通过dispatchAction触发。
    if (selected.length < 1) {
      chart.dispatchAction({
            type: 'legendSelect',//选中图例
            name: param.name
        });
    }
});
 }