0

0

ECharts 实现图例单选模式:点击图例仅显示对应数据项

花韻仙語

花韻仙語

发布时间:2026-01-21 17:39:17

|

952人浏览过

|

来源于php中文网

原创

ECharts 实现图例单选模式:点击图例仅显示对应数据项

通过监听 `legendselectchanged` 事件并结合 `dispatchaction` 动态控制图例选中状态,可实现“点击任一图例项时,仅保留该项可见,其余自动隐藏”的交互效果。

在 ECharts 中,默认图例点击行为是切换(toggle)——即点击已选图例会取消选中,导致数据项隐藏;再次点击则恢复。但许多业务场景(如聚焦分析某一项、简化图表对比)需要更严格的单选模式(radio-like behavior):点击任意图例项时,仅该数据系列显示,其余全部隐藏

这并非 ECharts 的内置模式,但完全可通过事件 + 动作调度实现。核心思路是:

  1. 监听 legendselectchanged 事件(在用户点击图例后触发,且在图表重绘前);
  2. 在回调中主动调用 dispatchAction 执行三步操作:
    • legendAllSelect:全选所有图例项(确保后续操作有统一起点);
    • legendInverseSelect:反选(即全部取消);
    • legendSelect:仅显式选中当前点击的 params.name 对应项。

✅ 这样即可强制达成「只显示所点图例对应数据」的效果,视觉上等效于单选。

以下是完整可运行的配置示例(基于 Pie 图表):

响应式黑色展台设计整站模板1.4.2
响应式黑色展台设计整站模板1.4.2

响应式黑色展台设计整站模板,自带内核安装即用,图片文本实现可视化,方便修改,支持多种内容模型及自定义功能,可根据需要自行添加。模板特点: 1、安装即用,自带人人站CMS内核及企业站展示功能(产品,新闻,案例展示等),并可根据需要增加表单 搜索等功能(自带模板) 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜

下载
import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

myChart.on('legendselectchanged', (params) => {
  const { name } = params;
  // 强制单选:先全选 → 再全不选 → 最后只选当前项
  myChart.dispatchAction({ type: 'legendAllSelect' });
  myChart.dispatchAction({ type: 'legendInverseSelect' });
  myChart.dispatchAction({ type: 'legendSelect', name });
});

const option = {
  tooltip: { trigger: 'item' },
  legend: {
    top: '15%',
    left: '5%',
    orient: 'vertical',
    textStyle: { fontSize: 25 },
    // 启用图例选择器(可选,增强交互提示)
    selector: [{ type: 'all' }, { type: 'inverse' }]
  },
  series: [{
    type: 'pie',
    radius: ['55%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: { borderRadius: 35, borderColor: '#fff', borderWidth: 8 },
    label: { show: false, position: 'center' },
    labelLine: { show: false },
    data: [
      { value: 2, name: 'LR-MS' },
      { value: 2, name: 'LR-MB-30' },
      { value: 1, name: 'LR-MS-RS485-DIN' }
    ]
  }]
};

myChart.setOption(option);

⚠️ 注意事项:

  • legendselectchanged 是响应式事件,务必在 setOption 之前注册,否则首次点击可能不触发;
  • 若图表支持多系列(如 line/bar 混合),逻辑同样适用,只需确保 series[i].name 与图例 name 严格一致;
  • 如需支持「点击已选项恢复全显」,可在回调中加判断:if (params.selected[name]) { /* 全选 */ } else { /* 单选 */ };
  • 性能敏感场景下,连续快速点击可能引发多次重绘,建议添加防抖(lodash.debounce)或节流处理。

该方案无需修改 ECharts 源码,兼容 v5.x 全版本,是实现图例驱动数据聚焦的标准实践。

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

271

2023.08.04

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

459

2023.09.13

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

757

2023.08.22

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

0

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

12

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

4

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

16

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
10分钟--Midjourney创作自己的漫画
10分钟--Midjourney创作自己的漫画

共1课时 | 0.1万人学习

Midjourney 关键词系列整合
Midjourney 关键词系列整合

共13课时 | 0.9万人学习

AI绘画教程
AI绘画教程

共2课时 | 0.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号