1 问题出现
因项目需要,需要点击对应的图例(legend)再去渲染图表数据。
原始效果图如下:出现了所有legend,客户希望出现了所有的图例,但是默认只显示一条数据,点击哪一个legend则出现对应的折线。
结果效果图:
2 解决
问题一: 默认进入echarts,只选中一个legend并进行渲染:
option = {
title: {
text: '产邀'
},
backgroundColor:'#FFFFFF',
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
//*********重点配置selected*************//
legend:{
selected: {
'人均持有': true,
'本月累计人均持有': false,
'本月人均持有目标': false,
'上月同期人均持有': false,
'上月同期累计人均持有': false,
},
data:['人均持有','本月累计人均持有','本月人均持有目标','上月同期人均持有','上月同期累计人均持有']
},
//******************************************//
series: [{
name:'人均持有',
type: 'line',
color:'#ACE0AC',
data:[22, 132, 91, 34, 20, 33, 10]
},
{
name:'本月累计人均持有',
color:'#FF3100',
type: 'line',
data:[21, 23, 28, 30, 30, 30, 32]
},
{
name:'本月人均持有目标',
color:'#FF8E73',
type: 'line',
data:[34, 34, 34, 34, 34, 34,34]
},
{
name:'上月同期人均持有',
color:'#D1EFD1',
type: 'line',
data:[75, 77, 21, 4, 85, 21, 6]
},
{
name:'上月同期累计人均持有',
color:'#FFB700',
type: 'line',
data:[90, 93, 101, 121, 132, 141, 156]
}]
};
问题二:选中legend,显示对应的数据
echarts提供legend的监听的事件,该监听事件为:legendselectchanged,
myChart.on("legendselectchanged",function(e){
console.log(e);
for(var index = 0;index < option.legend.data.length;index++){
if ( e.name == option.legend.data[index]){
option.legend.selected[e.name] = true; //如果选中,则显示折线
}else{
option.legend.selected[option.legend.data[index]] = false; // 将状态设置为未选中
}
}
myChart.setOption(option);
});