Echarts 的legend图例的显示与隐藏（legend折线图加载完页面显示的个数）

已于 2022-04-21 13:50:25 修改
阅读量5.5k 收藏 4
点赞数 2
分类专栏： 前端基础 文章标签： echarts
于 2022-04-21 13:38:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LW0512/article/details/124319509
版权
本文介绍了如何在Echarts图表加载时隐藏legend的某些项，并在点击时动态显示。详细步骤包括默认不展示图例，点击后恢复显示，以及实现此功能的关键代码——在legend的selected属性中设置不需要显示的name为false。
摘要由CSDN通过智能技术生成

Echarts 的legend图例的显示与隐藏（legend折线图加载完页面显示的个数）

需求 ：在一开始下加载图表的时候不显示legend的某几个字段，点击时候才显示数据

1.默认不展示（对比日期）

在这里插入图片描述

2. 点击显示结果： 点击（对比日期）的时候恢复显示

在这里插入图片描述

3.代码 （只需在legend里面的字段加个selected，然后设置不需要显示的name名称设置为false即可）

     legend: {
   
          right:
最低0.47元/天 解锁文章
LW0512
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）
m0_63099094的博客
11-07 745
需求要求的图： 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 免费领取 解决办法： 代码展示： function randomData() { return Math.round(Math.random()*1000); } option = { title: { text: ‘iphone销量’, subtext: ‘纯属虚构’, left: ‘center’ }, tooltip: { trigger: ‘item’
echarts 点击legend只显示当前，隐藏其他
qq_40934617的博客
08-05 5419
当点击一个图例时，取消其他图例，仅显示当前图例
echarts的legend图例的显示与隐藏
小太阳的博客
08-04 1万+
如果是完全不让legend显示，只需要把show属性设置成false即可，默认是true显示 legend: { show: false }, 但是如果legend不全部显示或者指定某个显示，就要用到legend下的selected属性，不想让那个legend显示，就把对应的legend设置成false legend: { data: _legend, selected: { 最小天数: false }, x:
关于echarts中使用到的图例、颜色设置、设置tooltip换行显示等问题
b0303的博客
07-05 325
echarts 中使用技巧，实际使用的内容
Echarts legend图例配置项 设置位置 显示隐藏
生产队的驴
11-28 1909
【代码】Echarts legend图例配置项 设置位置 显示隐藏。
在echarts中，如何使用复选框代替legend控制显隐
weixin_43301156的博客
03-12 3473
开发过程中遇到了一个问题,需要使用复选框checkbox来代替legend控制数据显示操作,顺便记录一下 效果展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>E...
echarts中legend图例显示隐藏与多选框联动显示其个数
wj的博客
10-27 3915
参考《echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）》 和 《【echarts踩坑记录】2、复选框+动态隐藏、显示数据》 确认按钮： <div class="dg-dspv-form-foot"><button type="submit">确定</button></div> 多选框： 实现js函数： $(document).ready(function(){ $(".dg-dspv-form-foot").click(f
echarts里面设置legend图例不显示
qq_45991812的博客
03-24 3043
【代码】echarts里面设置legend图例不显示。
echarts图例分页显示
qq_36173194的博客
09-29 9215
使用饼图展示数据是一种很常用的数据展示方法，我们可以通过其直观的看出数据的比例，对于一些数据的对比和分析是非常方便的。 最近在使用echarts插件做饼图的时候遇到了一些问题，就是在数据种类很多的时候，图例会撑破画面或是覆盖在饼图上显示，这样就会造成画面布局被打乱，体验是非常差的。 最后结合一系列资料查找总结出了一个简单明了的图例分页方法。如下： html：（图例分页按钮）
echarts动态的折线柱状图(渐变色的marker处理；控制可视区域展示个数；动态设置柱状图圆角等)
EnidChann的博客
12-22 1357
.vue import multiBarLineChart from '@/utils/echarts.js' drawChart (xData, datas) { this.myEchart = echarts.init(this.$refs.myChart) const countLimit = 8 // 可视范围展示个数 this.myEchart.clear() this.myEchart.setOption(multiBarLineChart(xData, data.
echarts图表各种问题总结
nick_zhang的博客
06-05 621
1.echarts的图例设置(除了折线图) legend: { left: "center", //设置位置 bottom: "0%", //设置位置 itemWidth: 10, // 设置图例图形的宽 itemHeight: 10, //设置图例图形的高 } 2.echarts饼图在中间设置百分比 var data = [ { value: this.generalLine.registMetros, name: "入网数", la
python画折线图显示点值-matplotlib可视化之如何给图形添加数据标签？
热门推荐
weixin_37988176的博客
11-01 1万+
当我们获取完数据之后，一般来说数据可视化呈现的最基础图形就是：柱状图、水平条形图、折线图等等，在python的matplotlib库中分别可用bar、barh、plot函数来构建它们，再使用xticks与yticks（设置坐标轴刻度）、xlabel与ylabel（设置坐标轴标签）、title（标题）、legend（图例）、xlim与ylim（设置坐标轴数据范围）、grid（设置网格线）等命令来装饰...
ECharts legend属性 换行字多隐藏
XXXTENTACIONXXXX的博客
05-19 846
【代码】ECharts legend属性 换行字多隐藏。
自定义选框控制echart数据的显示与隐藏
m0_70334976的博客
06-01 684
"今年":checkedthisyear.value,"去年":checkedlastyear.value,data:['今年','去年','同比','环比'],// 趋势图 配置...
echarts 图例 && 折线图
weixin_40030173的博客
11-22 6908
【代码】echarts 图例 && 折线图。
vue实现echarts中 9种 折线图图例
懒虫的博客
10-09 2538
vue实现echarts中 9种 折线图图例
echart点击折线主动隐藏整条折线
qq_36093530的博客
01-05 1369
echart点击折线主动隐藏整条折线
echarts legend图例显示数值
最新发布
08-22
ECharts是一个强大的JavaScript图表库，它提供了详细的定制选项，包括图例Legend的配置。如果你想在ECharts的图例中显示数值，可以按照以下步骤操作： 1. **配置项**：在`legend`部分，你可以设置`data`属性，其中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值