Echarts实现一键取消 / 显示所有曲线

最新推荐文章于 2022-09-02 18:40:10 发布

Swguo_Study

最新推荐文章于 2022-09-02 18:40:10 发布

阅读量1.8k

点赞数 2

分类专栏：需求 Echarts

本文链接：https://blog.csdn.net/qq_36122157/article/details/103586472

版权

本文介绍了如何使用Echarts通过修改option.legend.selected属性，动态控制图表中所有曲线的显示与隐藏。强调selected属性需通过JS动态加载才能生效，而非直接在legend配置中设置。

摘要由CSDN通过智能技术生成

通过修改： option.legend.selected 的属性（true、false）来实现！

注意：selected 是要通过js的动态加载才有效果，直接在legend中书写，并不会影响曲线的展示。

在展示的曲线，也就是legend很多的时候，不太好只展示其中几条。配置中是可以默认设置初始化是否展示，但不适用于全选和全不选的场景。

研究了文档后发现，可以通过修改配置，然后再次调用setOption方法实现。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.common.js"></script>
</head>
<body>
 
  <input id="selectall" type="button" value="全不选" flag="1"/>
  
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  
  <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById

最低0.47元/天解锁文章

Swguo_Study

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts实现一键取消 / 显示所有曲线

在展示的曲线，也就是legend很多的时候，不太好只展示其中几条。配置中是可以默认设置初始化是否展示，但不适用于全选和全不选的场景。研究了文档后发现，可以通过修改配置，然后再次调用setOption方法实现。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>...
复制链接

扫一扫