ECharts绘图修改搜索条件legend选择状态不保存

本文介绍了一种在使用ECharts时保持图例选择状态的方法,确保即使在图表重新生成时也能保留用户的先前选择。

    不知道大家用ECharts时有没有遇到过这种需求:ECharts画出的图有多种数据,并且可以点击图例控制数据的展示和隐藏,如果修改了查询条件,图也会重新生成,但是之前选择的图例状态又回到了初始的状态!这种情况下,如何保证图片重新生成的时候记录图例的选择状态呢?研究了一下ECharts的API文档,想出了如下解决办法:

    设定图例名为name,初始化option的时候代码为:

    //初始化参数

    var legendOptions={a:{color:'red',selected: true}, b:{color:'green', selected: true}, c:{color:'blue', selected: false}};

    //ajax数据

    data = {a:[1,2,1,2,1], b:[2,1,2,1,2], c:[1,1,2,2,1]};

    for(var name in data)

    option.legend.data.push(name);

    option.legend.selected[name]=legendOptions[name].selected;//(这里是默认选择状态)

    ......

    myChart = ec.init(...);

    myChart.setOption(option);

    以上为一开始的代码,每次重新生成图表都会初始化legend选择状态,可以做如下修改

    在设置option.legend.selected[name]的时候处理一下

    if(myChart){

      option.legend.selected[name]=myChart.component.legend.isSelected(name);//这里获取之前的选择状态

    }else{

      option.legend.selected[name]=legendOptions[name].selected;//(这里是默认选择状态)

    }

    其他的按照常规来就行了,如果大家有更好的解决方案,可以互相探讨一下

转载于:https://www.cnblogs.com/mjfmei/p/6037691.html

ECharts 中,legend.click 用于设置图例组件(legend)的点击事件回调函数。当用户点击图例中的某个图标时,会触发这个回调函数。你可以在这个函数中编写代码来实现相应的交互效果。例如,你可以通过这个回调函数来控制图表的显示隐藏,或者实现联动效果等。 下面是一个示例代码,用于在图例被点击时控制相应系列的显示隐藏: ``` legend: { data: ['系列1', '系列2', '系列3'], // 点击图例触发回调函数 click: function (legendName) { // 获取当前点击的图例名称 var name = legendName.name; // 获取相应的系列 ID var seriesId = ''; switch (name) { case '系列1': seriesId = 'series1'; break; case '系列2': seriesId = 'series2'; break; case '系列3': seriesId = 'series3'; break; } // 获取相应的系列对象 var series = myChart.getSeriesByName(name); // 切换系列的显示状态 if (series.visible) { series.hide(); } else { series.show(); } } }, ``` 在这个例子中,我们定义了一个包含三个系列的图表,并且设置了相应的图例。当用户点击图例中的某个图标时,会触发 click 回调函数。在这个函数中,我们通过传入的参数 legendName 来获取当前点击的图例名称,并且根据名称获取相应的系列 ID。然后,我们通过 ECharts 提供的 API 来获取相应的系列对象,并且切换它的显示状态。具体来说,我们通过调用 series.show() 或 series.hide() 方法来实现系列的显示或隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值