当前位置: 博客 /  Charts  / 父组件控制Echarts的legend显示

父组件控制Echarts的legend显示

场景

在使用Echarts时有这样一个场景:

父组件有一个表格,选中的行传给子组件,子组件根据这些行来显示折线图。

Echarts自带的点击legend就可以控制是否显示该条折线,但是现在控制权交给了父组件,所以这里不能靠点击折线图的legend来实现。

方法

使用option.legend.selected

拿官网数据举例,option.legend.selected的格式是:{'邮件营销':true,'联盟广告':false,'视频广告':true,'直接访问':true,'搜索引擎':true},值为true会显示legend对应的图表数据

示例代码

//声明一个设置显示哪些legend的对象
let showData={}

//seriesdata是折线图全部的数据,我们把它的每一项的名字加入showData的key,value设置为false,这样默认所有的折线都不会显示
seriesdata.map(v=>{
    showData[v.name]=false
})

//如果有父组件传来的数据dataFromParent,我们就把那一项的在showData里面的value改为true,这样这一条折线就会显示了
if(dataFromParent){
    dataFromParent.map((v)=>{
        showData[v.name]=true
    })
}

//最后把showData赋值给option.legend.selected
option.legend.selected = showData;

- END -