echarts中legend图例显示隐藏与多选框联动显示其个数

1. 问题:

在后端用SQL选出所有分类后,只能无脑显示所有图例,多选框与图例无法联动。


2. 实现效果:

在多选框选中多个值后,对应到echarts中图例的显示个数。


3. 参考:

参考《echarts的legend图例的显示与隐藏(legend图例进入页面显示的个数)》
《【echarts踩坑记录】2、复选框+动态隐藏、显示数据》


4.html样式:

4.1 确认按钮:

<div class="dg-dspv-form-foot"><button type="submit">确定</button></div>

4.2 多选框:

在这里插入图片描述

4.3 主容器:

在这里插入图片描述


5.思路:

  1. 设置默认样式:所有legend的selected属性均为false
  var myChartOptions3 = {
   
            legend: {
   //图例组件,颜色和名字
                  selected: {
   '长沙市':false,
                        '株洲市':false,
                        '湘潭市':false,
                        '衡阳市':false,
                        '邵阳市':false,
                        '岳阳市':false
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值