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.思路:
- 设置默认样式:所有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);
- 判断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();
- 然后把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 选中样式后: