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

最新推荐文章于 2024-08-22 14:30:27 发布

春风吹又生

最新推荐文章于 2024-08-22 14:30:27 发布

阅读量3.7k

点赞数 1

分类专栏：奇怪的问题

本文链接：https://blog.csdn.net/anoiadream/article/details/89365576

版权

奇怪的问题专栏收录该内容

13 篇文章

订阅专栏

博客围绕项目中Echarts图表的渲染问题展开。项目要求点击对应图例渲染图表数据，客户希望默认只显示一条数据，点击图例显示对应折线。文中指出两个问题，一是默认进入只选中一个图例渲染，二是选中图例显示对应数据，可利用echarts的legendselectchanged监听事件解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
});