echarts图例的显示与隐藏

﹏ヽ暗。殇╰゛Y 2023-03-04 15:29 32阅读 0赞

## 需求 ##

在图表加载的时候，默认只显示部分图例，只要图例显示部分，对应的柱图或者折线图也只显示对应的。点击一个按钮显示剩余的图例，或者点击置灰的图例让恢复显示。

## 核心 ##

在legend里面的字段加个selected，然后设置不需要显示的数据标题：  
以[官方案例][Link 1]为例：

selected: {'邮件营销': false, '联盟广告': false}

使用按钮切换可以动态改变selected里面对象的键值即可：

this.options.legend.selected = {'邮件营销': false, '联盟广告': false};

## 效果 ##

1.  默认不展示折线  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]
2.  代码
    
        option = { 
            backgroundColor: '#031A32',
            tooltip: { 
                trigger: "axis",
                axisPointer: { 
                    type: "shadow",
                    label: { 
                        show: true
                    }
                }
            },
            grid: { 
                left: "4%",
                top: "18%",
                right: "5%",
                bottom: "22%"
            },
            legend: { 
                data: ["昨日总人数", "今日实时人数", "昨日使用率"],
                top: "4%",
                textStyle: { 
                    color: "#1FC3CE",
                    fontSize: 14
                },
                selected: { '昨日使用率': false} // 不需要显示的设置为false
            },
            xAxis: { 
                data: [
                    "会议室1",
                    "会议室2",
                    "会议室3",
                    "会议室4",
                    "会议室5",
                    "会议室6",
                    "会议室7",
                    "会议室8",
                    "会议室9",
                    "会议室10",
                    "会议室11",
                    "会议室12"
                ],
                axisLine: { 
                    show: true, //隐藏X轴轴线
                    lineStyle: { 
                        color: "#3d5269",
                        width: 1
                    }
                },
                axisTick: { 
                    show: true, //隐藏X轴刻度
                    alignWithLabel: true
                },
                axisLabel: { 
                    show: true,
                    textStyle: { 
                        color: "#396A87", //X轴文字颜色
                        fontSize: 14
                    },
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: [{ 
                    type: "value",
                    name: "人数",
                    nameTextStyle: { 
                        color: "#396A87",
                        fontSize: 14
                    },
                    splitLine: { 
                        show: true,
                        lineStyle: { 
                            width: 1,
                            color: "#3d5269"
                        }
                    },
                    axisTick: { 
                        show: false
                    },
                    axisLine: { 
                        show: false
                    },
                    axisLabel: { 
                        show: true,
                        textStyle: { 
                            color: "#396A87",
                            fontSize: 14
                        }
                    }
                },
                { 
                    type: "value",
                    name: "使用率%",
                    nameTextStyle: { 
                        color: "#396A87",
                        fontSize: 14
                    },
                    position: "right",
                    splitLine: { 
                        show: false
                    },
                    axisTick: { 
                        show: false
                    },
                    axisLine: { 
                        show: false,
                        lineStyle: { 
                            color: "#396A87",
                            width: 2
                        }
                    },
                    axisLabel: { 
                        show: true,
                        formatter: "{value} %", //右侧Y轴文字显示
                        textStyle: { 
                            color: "#396A87",
                            fontSize: 14
                        }
                    }
                }
            ],
            series: [{ 
                    name: "昨日总人数",
                    type: "bar",
                    barWidth: 18,
                    itemStyle: { 
                        normal: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                    offset: 0,
                                    color: "#00FFFF"
                                },
                                { 
                                    offset: 1,
                                    color: "#0080FF"
                                }
                            ])
                        }
                    },
                    data: [24, 45, 43, 35, 76, 154, 86, 42, 68, 97, 24, 34]
                },
                { 
                    name: "今日实时人数",
                    type: "bar",
                    barWidth: 18,
                    itemStyle: { 
                        normal: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                                    offset: 0,
                                    color: "#E29052"
                                },
                                { 
                                    offset: 1,
                                    color: "#FA5A53"
                                }
                            ])
                        }
                    },
                    data: [133, 23, 114, 67, 89, 35, 67, 96, 90, 46, 75, 85]
                },
                { 
                    name: "昨日使用率",
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    showAllSymbol: true, //显示所有图形。
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 6, //标记的大小
                    itemStyle: { 
                        //折线拐点标志的样式
                        color: "#26D9FF",
                        borderColor: "#26D9FF",
                        width: 2,
                        shadowColor: "#26D9FF",
                        shadowBlur: 2
                    },
                    lineStyle: { 
                        color: "#26D9FF",
                        width: 2,
                        shadowBlur: 2
                    },
                    data: [4.2, 3.5, 2.9, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3]
                }
            ]
        }
3.  点击显示效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]
4.  也可以动态改变selected的值

[Link 1]: https://echarts.apache.org/examples/zh/editor.html?c=line-stack
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20230208/272c891373fd41feba0cb38a6c5bd6e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20230208/14336e18348844e7b3cae8c52dee75cc.png