需求部分

在开发项目的时候遇到一个需求,就是如何保证echarts图表里至少显示一个图例的数据(也就是最后一个图例不能变成unselected的状态)
下图是最初加载时的画面

不想出现图例都被点击取消导致图表只有一个坐标轴,太丑了

参考依据

在发帖前查阅了一些思路:

  • 有用单选模式曲线救国的,但是就没有办法看到多条图例的数据在同一个图表里显示
  • 有图例为最后一个的时候,禁用所有图例的点击事件

都不是能够很好的解决,找到一个可以参考的代码

var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
let option = this.getOption();
let select_key = Object.keys(params.selected);
if (!params.selected[params.name]) {
select_key.map(res => {
option.legend[0].selected[res] = !params.selected[res];//只点击了一个图例,所以select_key里只有被选中的为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里如何获取legend的点击事件,但是查看文档后没有示例不会写怎么办?没关系,用上面的示例代码,我们把代码里不明白的变量都打印出来分析一下例如console.log('params',params)和console.log('option',option),打印出来后,对照着官方文档一看就清晰明了很多,这段截图后面我会补上。

下面说一下上面的这段代码的意思,select_key是legend图例选中状态的对应key-value对json,高亮的为false,取消的是true(这里和咱们理解的高亮为true是相反的),进入if语句后用map将select_key中的每一个元素遍历使得option.legend[0].selected[res]值为select_key里boolean值的相反值。

说到这里可能会有点绕,option.legend[0]里的selected也是一个key-value对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},这时候有两种操作:

  1. 再次点击b图例后select_key = {'a':true,'b':true,'c':true,'d':true},图例状态均为不显示的状态,此时代码进入if代码块,所有的图例状态变成相反值,于是四个图例全部被选中,图表显示四条折线
  2. 点击其他图例,比如c,同理进入else代码块后,所有状态为不显示,再给选中的c图例重新赋值使其显示

解决方案

OK,到这里我们就明白了上面那段代码到底是什么意思了,所以究竟该如何实现我们需要的功能呢,有意思的是Object.values(params.selected)会返回一个图例选中态的布尔值数组,相当于重组了我们之前声明的select_key里各项的value值,我们只需在这个布尔值数组里只有一个false的时候,手动将其显示状态重新赋值为true即可(option.legend[0].selected[params.name] = true;)

话不多说上代码

                        myChart.on('legendselectchanged', function (params) {
let option = this.getOption();
let select_key = Object.keys(params.selected);
let select_value = Object.values(params.selected);
console.log('select_value',select_value,'length',select_value.length)
var n = 0;
select_value.map(res => {
if(!res){
n++;
}
});
console.log('n',n)
if( n ==select_value.length){ //如果最后一个图例点击后select_key里的选中态会变为false,
//既有四个false,当有4个false的时候将最后选中的图例的实际显示值改为true
option.legend[0].selected[params.name] = true;
}
this.setOption(option)
});

第一次写博文总结,可能有点表述不清,还请见谅,欢迎讨论

使用Echarts中遇到值得记录的小案例(一)的更多相关文章

  1. java记录在线人数小案例

    文件目录: web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...

  2. Java提取文本文档中的所有网址(小案例介绍正则基础知识)

    正则表达式基础以及Java中使用正则查找 定义: 正则表达式是一些用来匹配和处理文本的字符串 正则的基础(先大致了解下) 1. 正则表达式的作用 查找特定的信息(搜索) 替换一些文本(替换) 2. 正 ...

  3. C++中几个值得分析的小问题(1)

    下面3个小问题都是我认为C++ Beginner应该能够解答或辨别清楚的.希望我们能通过题目挖掘更多的信息,而不仅仅局限在解题.我最喜欢说的话:能力有限,所以作为抛砖引玉,希望共同讨论,指出错误. 另 ...

  4. C++中几个值得分析的小问题(2)

    下面有3个小问题,作为C++ Beginner你一定要知道错在哪里了. 1.派生类到基类的引用或指针转换一定“完美”存在? 一般情况,你很可能会认为:派生类对象的引用或指针转换为基类对象的引用或指针是 ...

  5. WebSphere中数据源连接池太小导致的连接超时错误记录

    WebSphere中数据源连接池太小导致的连接超时错误记录. 应用连接超时错误信息: [// ::: CST] webapp E com.ibm.ws.webcontainer.webapp.WebA ...

  6. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  7. SQL Server-删除表中重复的记录!

    比如现在有一人员表  (表名:peosons)若想将姓名.身份证号.住址这三个字段完全相同的记录查询出来 select   p1.*   from   persons   p1,persons   p ...

  8. SQL开发中容易忽视的一些小地方(一)

    原文:SQL开发中容易忽视的一些小地方(一) 写此系列文章缘由: 做开发三年来(B/S),发现基于web 架构的项目技术主要分两大方面: 第一:C#,它是程序的基础,也可是其它开发语言,没有开发语言也 ...

  9. SQL开发中容易忽视的一些小地方(二)

    原文:SQL开发中容易忽视的一些小地方(二) 目的:继上一篇:SQL开发中容易忽视的一些小地方(一) 总结SQL中的null用法后,本文我将说说表联接查询. 为了说明问题,我创建了两个表,分别是学生信 ...

随机推荐

  1. php远程抓取(下载)文件到本项目指定目录中

    function httpcopy($url, $file="", $timeout=60) { $file = empty($file) ? pathinfo($url,PATH ...

  2. 题解1235. 洪水 (Standard IO)

    Description 一天, 一个画家在森林里写生,突然爆发了山洪,他需要尽快返回住所中,那里是安全的.森林的地图由R行C列组成,空白区域用点“.”表示,洪水的区域用“*”表示,而岩石用“X”表示, ...

  3. mybatis中Oracle分页语句的写法

    最近一段时间使用oracle数据库查询分页, 用的是springboot. Oracle数据库中没有像mysql中limit的写法, 只能换其他方式写. 考虑到oracle中的ROWNUM变量, 使用 ...

  4. 微信小程序这一块(续)

    1.设置头部的信息 通过wx.setNavigationBarTitle 详情见:https://developers.weixin.qq.com/miniprogram/dev/api/ui/nav ...

  5. libOpenThreads库链接冲突错误

    最近在linux 上安装了3.7.0版本的OpenSceneGraph,而在安装之前没有完全卸载之前安装的3.6.3版本,导致在编译程序链接时出现库引用冲突,在便以后出现以下警告信息: /usr/bi ...

  6. Expected one result (or null) to be returned by selectOne() 数据库结果集和java实例

    mybatis会根据查询的结果集初始化java实例. 如果是复杂类型,我们一般都会在mapper中做好映射. 1.所以如果查询到的是多个结果,那么对应的java类型也必须的集合类型.(result 为 ...

  7. 《剑指offer》面试题3 二维数组中的查找 Java版

    (二维数组,每行递增,每列递增.输入二维数组和一个整数,判断数组中是否含有此数.) 我的方法:拿到题目,根据题目条件我提取出这样一个特性:一个数的右边和下面的数都比它大.于是就可以写出一种递归的方法: ...

  8. php实现字符串翻转,使字符串的单词正序,单词的字符倒序

    如字符串'I love you'变成'I evol uoy',只能使用strlen(),不能使用其他内置函数. function strturn($str){ $pstr=''; $sstr=''; ...

  9. python:while循环语句及练习题

    while循环语句及练习题 Python 编程中 while 语句用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务.其基本形式为: while 判断条件: 执行语句... ...

  10. Beta-星期五

    所属课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass 作业要求  https://edu.cnblogs.com/camp ...