资讯专栏INFORMATION COLUMN

使用Echarts中遇到值得记录的小案例(一)

codeGoogle / 2083人阅读

摘要:说到这里可能会有点绕,里的也是一个对,高亮为,取消为,和里的表现效果恰恰相反。

需求部分

在开发项目的时候遇到一个需求,就是如何保证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},这时候有两种操作:

再次点击b图例后select_key = {"a":true,"b":true,"c":true,"d":true},图例状态均为不显示的状态,此时代码进入if代码块,所有的图例状态变成相反值,于是四个图例全部被选中,图表显示四条折线

点击其他图例,比如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)
                        });

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52778.html

相关文章

  • 使用Echarts遇到值得记录的小案例

    摘要:说到这里可能会有点绕,里的也是一个对,高亮为,取消为,和里的表现效果恰恰相反。 需求部分 在开发项目的时候遇到一个需求,就是如何保证echarts图表里至少显示一个图例的数据(也就是最后一个图例不能变成unselected的状态)下图是最初加载时的画面showImg(https://segmentfault.com/img/bVbeDxo?w=1543&h=513); 不想出现图例都被...

    wind3110991 评论0 收藏0
  • 关于Vue2值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 案例 - 收藏集 - 掘金

    摘要:同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候,遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com ...

    张金宝 评论0 收藏0

发表评论

0条评论

codeGoogle

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<