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

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

先睹为快（效果）

1、实现Echarts多条曲线

先实现一个最简单的echarts，多条线一起的曲线图，如下图所示四条线同属一个维度。

具体实现代码如下：

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即可，设置完后如下所示：

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

2.2 自定义legend图例点击事件

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

具体实现代码如下：

lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) {//调用接口调整源数据debugger;var _pevType = 0;if (params.selected[params.name]) {//表示trueif (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

喜欢博主的这篇文章的可以上皇榜支持一下博主哟！！！皇榜入口点击此处

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

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
echarts之legend-改变图例的图标为自定义图片
legend是echarts中的图例名称类型默认值可选值效果 data Array [] 图例内容数组,数组项通常为{string},每一项代表一个系列的name,默认布局到达边缘会自动分行 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
地图的legend点击事件_Echarts 图例交互事件
图例交互事件: 1) legendselectchanged : 切换图例选中状态后的事件 (注:图例组件用户切换图例开关会触发该事件,不管你有没有选择,点击了就触发) 2)legendselecte ...
Echarts CPU监控（折线仪表盘，图例混搭）
CPU page <script type="text/javascript" > var myChart; var eCharts; var cpu_r = 100; ...
Echarts CPU监控（折线仪表盘，图例混搭）--转载
[本文为转载文章] 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/gaogaoshan ...
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示
ECharts 创建中国气泡地图和定位图表点点击地区域高亮显示 ECharts 官方案例: https://www.makeapie.com/editor.html?c=x_kEnG-Ggq 效果如 ...
百度地图 - 自定义ECharts覆盖物
简介在开发地图可视化页面时,产品想在城市的对应位置展示一个统计图.这时候先不要慌,大声的说你是在哪抄的这个需求.好看到页面了,就没有前端人不会(抄的)开发的.研究后发现使用的是,百度地图api自定义 ...

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

目录