1. Toy模板网首页
  2. > Toy博客

【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

6月前 作者：拄杖盲学轻声码 分类：Toy博客 阅读(56) 违法举报

这篇具有很好参考价值的文章主要介绍了【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

**【写在前面】**这下我又不得不说了，还是客户现场使用时想查询一周的数据，查询时候发现页面居然要等20多秒，这是个人都得崩溃吧，然后就开始排查这块业务代码模块，主要体现在两个方面：
A.接口请求时间过长(约8秒)，有优化的空间
B.前端一次性调用了四次接口，分别查询了四组数据（需要优化）
正因为有上述B的需求，所以特意针对点击echarts图例点击触发接口调用。

涉及知识点：legendselectchanged、Echarts的legend属性、Echarts图例、legend点击事件、echarts多线共存。

先睹为快（效果）

【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

【版权声明】因个人创作经常被爬取到其他网站，特此声明，本人暂时只在CSDN平台创作，博主名为：《拄杖盲学轻声码》

1、实现Echarts多条曲线

先实现一个最简单的echarts，多条线一起的曲线图，如下图所示四条线同属一个维度。
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

具体实现代码如下：

var resultData1 = {
        status: 200,
        data: {
            data_current: [{
                "value": 143,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 153,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 133,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevone: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 103,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevthree: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 123,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 223,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevweek: [{
                "value": 43,
                "record_time": "2022-03-04 11:00:00"
            }, {
                "value": 63,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 66,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 59,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 43,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevself: []
        },
        message: ""
    };
    var lineChartBaseInfo = {
        data_current: {
            modulename: '当前值',
            color: '136, 0, 21',
            rangDay: 0,
        },
        data_pevone: {
            modulename: '上个工作日',
            color: '233, 128, 45',
            rangDay: 1,
        },
        data_pevthree: {
            modulename: '前三个工作日',
            color: '54, 93, 251',
            rangDay: 3,
        },
        data_pevweek: {
            modulename: '前一周',
            color: '191, 24, 109',
            rangDay: 7,
        },
        data_pevself: {
            modulename: '自选时间',
            color: '161, 24, 169',
            rangDay: 0,
        },
    }
    var lineCharts = echarts.init(document.getElementById('lineCharts'));
    var _iconPath = "path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z";
    // var _iconPath = "path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z";
    var _icon = 'roundRect';
    var legendData = [], seriesData = []; //定义变量
    var newDataList = {
        data_current: resultData1.data.data_current,
        data_pevone: resultData1.data.data_pevone,
        data_pevthree: resultData1.data.data_pevthree,
        data_pevweek: resultData1.data.data_pevweek,
        data_pevself: resultData1.data.data_pevself,
    };
    //赋值操作
    $.each(newDataList, function (indexInArray, valueOfElement) {
        legendData.push({
            name: lineChartBaseInfo[indexInArray]['modulename'],
            icon: _iconPath
        });
        if (valueOfElement != null) {
            var _data = $.map(valueOfElement, function (val, idx) {
                return {
                    name: new Date(val.record_time).toString(),
                    value: [val.record_time, val.value]
                }
            });
            seriesData.push({
                name: lineChartBaseInfo[indexInArray]['modulename'],
                data: _data,
                type: "line",
                smooth: true,
                // smoothMonotone: "x",
                cursor: "pointer",
                // showSymbol: false,
                itemStyle: { normal: { label: { show: true } } },
                showSymbol: true,
                lineStyle: {
                    shadowColor: "rgba(18,61,172,0.5)",
                    shadowBlur: 10
                }
            })
        }
    });
    var option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        backgroundColor: '#fff',
        title: {
            text: '健康总分(100001)_指标历史曲线',
            textStyle: {
                color: '#666',
                fontSize: 16,
            },
            top: '10px',
            left: '10px',
        },
        legend: {
            data: legendData,
            top: '10px',
            right: '20px',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            textStyle: {
                color: "#898989",
                lineHeight: 15
            },
            selected: { //在这里设置默认展示就ok了
                '当前值': true,
                '上个工作日': false,
                '前三个工作日': false,
                '前一周': false,
                '自选时间': false
            },
            type: "scroll",
        },
        dataZoom: [{
            type: 'inside',
            show: true,
            xAxisIndex: [0],
        }],
        tooltip: {
            backgroundColor: "#fff",
            trigger: "axis",
            axisPointer: {
                type: "line"
            },
            textStyle: {
                color: "#565656",
                lineHeight: 28
            },
            confine: true,
            padding: 12,
            formatter: function (params) {
            }
        },
        grid: {
            left: 20,
            right: 60,
            top: 60,
            bottom: 20,
            containLabel: true
        },
        xAxis: {
            name: "时间",
            type: "time",
            boundaryGap: true,
            axisLabel: {
                color: "#a0a9bc",
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false

            },
        },
        yAxis: {
            name: "值",
            nameTextStyle: {
                color: "gray"
            },
            type: "value",
            axisLabel: {
                color: "#a0a9bc",
                inside: true,
                margin: 0,
                verticalAlign: "bottom"
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        series: seriesData
    };
    lineCharts.clear();
lineCharts.setOption(option);

这个是在所有数据返回速度很快的情况下可以直接拿到的，但是如果数据量过于庞大，那么对页面来说直接拿4条数据的过程无疑是个漫长的等待。

2、点击echarts触发接口请求

2.1 先默认隐藏部分数据

设置legend的selected属性，将当天的设置为true，其他的设置为false即可，设置完后如下所示：
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

selected: { 
//在这里设置默认展示就ok了
          '当前值': true,
          '上个工作日': false,
          '前三个工作日': false,
          '前一周': false,
          '自选时间': false
},

2.2 自定义legend图例点击事件

首先说一下这边用到的图例点击事件为legendselectchanged，但是在触发前记得加上off，主要目的就是为了防止二次触发，和click事件一样。如下所示应用：
lineCharts.off(‘legendselectchanged’).on(‘legendselectchanged’, function (params) {
//触发后执行的内容
});
也就是在这个执行内容里面我们可以调用接口，从而实现echarts点击图例触发接口调用的目的。
具体实现效果如下：
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

具体实现代码如下：

lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) {
            //调用接口调整源数据
            debugger;
            var _pevType = 0;
            if (params.selected[params.name]) {
                //表示true
                if (params.name.indexOf("上个工作") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("当前") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("周") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("三") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                }
            } else {
                //表示false，隐藏
            }
            console.log('点击了', params.name);
            // do something
        });

3、源码下载地址（解压即用）

百度网盘提取地址：
链接：https://pan.baidu.com/s/1bm50Dbq-AqZkuqgIgrUlgw
提取码：hdd6

123网盘提取地址（不限速）
链接：https://www.123pan.com/s/ZxkUVv-dFJ4.html
提取码：hdd6

喜欢博主的这篇文章的可以上皇榜支持一下博主哟！！！皇榜入口点击此处文章来源地址https://www.toymoban.com/news/detail-402166.html

到了这里，关于【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    Documentation - Apache ECharts 字符串模板的相识变量使用(不同的图表对应都有对应的变量): Documentation - Apache ECharts 具体详细使用可以点^^^链接查看: 你只需要创建一个 div id =\\\"xjzbChart\\\"/div 然后 获取 xjzbChart = echarts.init(document.getElementById(\\\'xjzbChart\\\')); 在 series数组里面创建两个图表对象

    2024年02月13日
    浏览(24)
  • （完美解决）matplotlib图例(legend)如何自由设置其位置、大小以及样式。

    （完美解决）matplotlib图例(legend)如何自由设置其位置、大小以及样式。

    前言 我们知道，这一条代码会帮我们显示图例，而且通常，其会放置在图片中一个不错的位置。但是如果我们的数据，占满了整个图像，此时，其放的位置就会出问题了。 那么我们该如何自由设置图例位置呢？ 位置：loc 这个参数内置了一些位置，如果这些位置恰好有你想要

    2023年04月09日
    浏览(26)
  • echarts中实现自定义legend数据

    echarts中实现自定义legend数据

    很久很久以前，我刚使用echarts，更新了一篇关于echarts中formatter实现动态legend的blog，很多人来问是如何实现的，一直很忙，懵懵懂懂也在没看，近来抽时间更新了一下实现方式 类似于以下这种图例，很多新手没办法下手了，其实直接使用echarts中属性的格式器formatter就可以解

    2024年02月13日
    浏览(25)
  • echarts雷达图图例自定义以及tooltip动态展示一维数据

    echarts雷达图图例自定义以及tooltip动态展示一维数据

     实现效果： 虽然上面实现了图例自定义，但是仔细看会发现图例与文字不在一条水平线上，利用富文本配置，对height进行调整，实现图例图片与文字对齐。 实现效果： 官方文档中默认显示该维度的所有数据 而遇到的需求是显示鼠标悬浮该轴的数据对比 实现：   虽然实现

    2024年02月16日
    浏览(24)
  • 图例legend语法及设置

    图例legend语法及设置

    (1)设置图例位置 使用loc参数 plt.legend(loc=‘lower left’) 0 ‘best’ 1 ‘upper right’ 2 ‘upper left’ 3 ‘lower left’ 4 ‘lower right’ 5 ‘right’ 6 ‘center left’ 7 ‘center right’ 8 ‘lower center’ 9 ‘upper center’ 10 ‘center’ (2)设置图例字体 #设置字体大小 fontsize : int or float or {‘xx-small’,

    2024年02月06日
    浏览(26)

  • echarts用法之点击事件

    echarts用法之点击事件 - 知乎 echarts可以通过点击事件获取每项的值：myChart.on(\\\'click\\\', function (param) { } // myChart为自定义变量：var myChart = echarts.init(document.getElementById(\\\'echartBox\\\')); 可以通过param… https://zhuanlan.zhihu.com/p/588249196

    2024年02月08日
    浏览(23)

  • echarts 点击事件

    饼图点击事件会触发两次 可以通过点击事件 查询当前饼图是裂开还是合上的状态 a.event.target.parent._children是饼图的对象数组 数组中selected为true代表当前为选中状态，反之未选中 echarts的legend事件禁用以及legend显示百分比 自定义fomatter图标消失解决

    2024年02月11日
    浏览(16)
  • echarts的tooltip添加点击事件

    echarts的tooltip添加点击事件

    效果如下  代码如下  代码如下

    2024年02月16日
    浏览(16)
  • [echarts]柱状图的点击事件

    [echarts]柱状图的点击事件

    先来一段简洁的写echarts图表的代码: 如图所示，如果柱状图需要有点击事件: 但这只是点击蓝色柱条部分才会触发点击事件的写法 如果柱条没有数据，用上述方法点击时将不会触发，如果无数据点击背景也依旧想触发点击事件，就用下面方法: 另外，再补充一下划过和划出事

    2024年02月13日
    浏览(19)
  • 解决echarts 饼图和图例之间的距离问题

    解决echarts 饼图和图例之间的距离问题

    解决echarts 饼图和图例之间的距离问题：

    2024年02月16日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包