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,
                        '常德市':false,
                        '张家界市':false,
                        '益阳市':false,
                        '郴州市':false,
                        '永州市':false,
                        '怀化市':false,
                        '娄底市':false,
                        '湘西土家族苗族自治州':false
                    },
            },
            series: 
                [{
                    type: 'bar',
                }],
        };
    var myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption(myChartOptions3);

2. 判断selected有哪些，赋值给SelectOption对象；(多个用each)

 $("input[name='地区']:checked").each(function(){
            var selectOption={};
          $(this).is(":checked")?selectOption[$(this).val()]=true:selectOption[$(this).val()]=false;

如果是单选用：$(".select-city select").val();

3. 然后把SelectOption对象赋值给echarts的legend的selected属性，然后后更新对应图形的option。

// 把SelectOption对象赋值给selected属性
myChartOptions3.legend.selected =selectOption;  
myChart1.setOption(myChartOptions3);

---

6.实现js函数：

$(document).ready(function(){
$(".dg-dspv-form-foot").click(function(){
    var myChartOptions3 = {
            legend: {//图例组件，颜色和名字
                  selected: {'长沙市':false,
                        '株洲市':false,
                        '湘潭市':false,
                        '衡阳市':false,
                        '邵阳市':false,
                        '岳阳市':false,
                        '常德市':false,
                        '张家界市':false,
                        '益阳市':false,
                        '郴州市':false,
                        '永州市':false,
                        '怀化市':false,
                        '娄底市':false,
                        '湘西土家族苗族自治州':false
                    },
            },
            series: 
                [{
                    type: 'bar',
                }],
        };
    var myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption(myChartOptions3);
 
    $("input[name='地区']:checked").each(function(){
            var selectOption={};
          $(this).is(":checked")?selectOption[$(this).val()]=true:selectOption[$(this).val()]=false;
           
    // 把SelectOption对象赋值给selected属性
    myChartOptions3.legend.selected =selectOption; 
    //更新option
    myChart1.setOption(myChartOptions3);
   
    });
});

});

7.实现结果：

7.1 未选中样式：

7.2 选中样式后：