需求部分在开发项目的时候，遇到一个需求，就是如何保证echarts图表中至少显示一个图例数据（也就是最后一个legendcannotbeunselected)thestate)下图是最初加载时的画面。如果不想出现图例，点击取消，这样图表就只有一个坐标轴。太丑了。当多个图例的数据在同一个图表中显示为最后一个时，禁用所有图例的点击事件并不是一个好的解决方案。查找参考代码varoption={title:{text:'linechartstack'},tooltip:{trigger:'axis'},legend:{data:['emailmarketing','affiliateadvertising','videoadvertising','直接访问','搜索引擎']},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},toolbox:{feature:{saveAsImage:{}}},xAxis:{type:'category',boundaryGap:false,data:['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']},yAxis:{type:'value'},series:[{name:'EmailMarketing',type:'line',stack:'Total',data:[120,132,101,134,90,230,210]},{name:'联盟广告',type:'line',stack:'totalamount',data:[220,182,191,234,290,330,310]},{name:'videoadvertisement',type:'line',stack:'totalamount',data:[150,232,201,154,190,330,410]},{name:'直接访问',type:'line',stack:'总量',data:[320,332,301,334,390,330,320]},{name:'SearchEngine',type:'line',stack:'Total',data:[820,932,901,934,1290,1330,1320]}]};myChart.setOption(选项);myChart.on('legendselectchanged',function(params){letoption=this.getOption();letselect_key=Object.keys(params.selected);if(!params.selected[params.name]){select_key.map(res=>{option.legend[0].selected[res]=!params.selected[res];//只有一个legend被点击，所以select_key中只有selected为false,//对应的option.legend[0].selected[res]值为true,//是高亮状态，其他都取消了。一般来说就变成了单选模式});}else{select_key.map(res=>{option.legend[0].selected[res]=false;//让所有图例下的数据显示状态先为false});option.legend[0].selected[params.name]=true;//然后让你选择的图例显示状态变为true}this.setOption(option)});分析基础的关键代码是myChart.on('legendselectchanged',function(params){...}部分，里面涉及到如何获取echarts中图例的点击事件，但是查看文档后怎么办如果没有例子就写不出来？没关系，使用上面的示例代码，我们把代码中不理解的变量都打印出来分析，比如console.log('params',params)andconsole.log('option',option),打印出来后比官方文档清晰多了，截图后我在下面加上上面代码的意思，select_key就是对应的key-legend图例选中状态的值对json，高亮的为false，取消的为true（这和我们理解的高亮为true正好相反），进入if语句后，使用map来遍历select_key中的每个元素，使得option.legend[0].selected[res]的值是布尔v的相反值select_key中的值。可能有点迷惑，option.legend[0]中的selected也是键值对json，高亮为true，取消为false，和select_key中的表现效果刚好相反。所以，这段代码的效果是，当图例全部高亮时，select_key={'a':false,'b':false,'c':false,'d':false}，点击b图例，这个当select_key['b']=true时，进入else代码块，如上面代码注释中所写，图例由一变为一，select_key={'a':true,'b':false,'c':true,'d':true}，此时有两个操作：点击后select_key={'a':true,'b':true,'c':true,'d':true}blegend再次，图例的状态不显示。此时代码进入if代码块，所有图例状态变为相反值，于是四个图例全部选中，图表显示四条折线。点击其他图例，比如c，同样输入else代码块后，所有状态都没有显示，然后重新赋值选中的c图例，使其显示解决方案OK。到这里我们就明白了上面代码的意思了，那么我们需要的功能怎么实现呢？，有意思的是，Object.values(params.selected)会返回一个图例选中状态的布尔数组，相当于重新组织了我们之前声明的select_key中items的value值。我们只需要在这个布尔数组中只有一个为false的时候，手动重新赋值它的显示状态为true即可（option.legend[0].selected[params.name]=true;）代码myChart.on('legendselectchanged',function(params){letoption=this.getOption();letselect_key=Object.keys(params.selected);letselect_value=Object.values(params.selected);console.log('select_value',选择值，'length',select_value.length)varn=0;select_value.map(res=>{if(!res){n++;}});console.log('n',n)if(n==select_value.length){//如果最后一个图例被点击，select_key中的选中状态会变成false，//有四个false，当有四个false,将最后选中的图例的实际显示值改为trueoption.legend[0].selected[params.name]=true;}this.setOption(option)});第一次写博文总结，可能有点不清楚，还请见谅，欢迎讨论
