echarts教程（四）：配置hover时突出显示图例，隐藏其他图例

蔚落 2022-10-29 15:24 352阅读 0赞

核心配置是

emphasis: { 
      focus: 'series'
    }

达到的效果是，隐藏其他图例，只显示当前hover的图例，在emphasis中也可以配置更多的hover效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]

option = { 
        title: { 
            text: '堆叠区域图'
        },
        tooltip: { 
            trigger: 'axis',
            axisPointer: { 
                type: 'cross',
                label: { 
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: { 
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: { 
            feature: { 
                saveAsImage: { }
            }
        },
        grid: { 
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            { 
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            { 
                type: 'value'
            }
        ],
        series: [
            { 
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                emphasis: { 
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            { 
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                emphasis: { 
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            { 
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                emphasis: { 
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            { 
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: { },
                emphasis: { 
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            { 
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: { 
                    show: true,
                    position: 'top'
                },
                areaStyle: { },
                emphasis: { 
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221024/272f3ee14c5b44e78704caba4cf10b3e.png