奇怪的问题-Echarts点击legend更换对应图表

1 问题出现

因项目需要,需要点击对应的图例(legend)再去渲染图表数据。
原始效果图如下:出现了所有legend,客户希望出现了所有的图例,但是默认只显示一条数据,点击哪一个legend则出现对应的折线。
原
结果效果图:
在这里插入图片描述
在这里插入图片描述

2 解决

问题一: 默认进入echarts,只选中一个legend并进行渲染:

 option = {
    title: {
        text: '产邀'
    },
    backgroundColor:'#FFFFFF',
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    //*********重点配置selected*************//
    legend:{
         selected: {
            '人均持有': true,
            '本月累计人均持有': false,
            '本月人均持有目标': false,
            '上月同期人均持有': false,
            '上月同期累计人均持有': false,
        },
        data:['人均持有','本月累计人均持有','本月人均持有目标','上月同期人均持有','上月同期累计人均持有']
    },
 //******************************************//
    series: [{
        name:'人均持有',
        type: 'line',
        color:'#ACE0AC',
        data:[22, 132, 91, 34, 20, 33, 10]
    },
    {
        name:'本月累计人均持有',
        color:'#FF3100',
        type: 'line',
        data:[21, 23, 28, 30, 30, 30, 32]
    },
    {
        name:'本月人均持有目标',
        
        color:'#FF8E73',
        type: 'line',
        data:[34, 34, 34, 34, 34, 34,34]
    },
    {
        name:'上月同期人均持有',
        color:'#D1EFD1',
        type: 'line',
        data:[75, 77, 21, 4, 85, 21, 6]
    },
    {
        name:'上月同期累计人均持有',
        color:'#FFB700',
        type: 'line',
        data:[90, 93, 101, 121, 132, 141, 156]
    }]
};

问题二:选中legend,显示对应的数据
echarts提供legend的监听的事件,该监听事件为:legendselectchanged,

myChart.on("legendselectchanged",function(e){
    console.log(e);
    
    for(var index = 0;index < option.legend.data.length;index++){
        if ( e.name == option.legend.data[index]){
            option.legend.selected[e.name] = true; //如果选中,则显示折线
        }else{
              option.legend.selected[option.legend.data[index]] = false; // 将状态设置为未选中
        }
    }
    myChart.setOption(option);
});

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页

打赏作者

春风吹又生

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值