Table of contents
**[Written in the front]** Now I have to say that the customer wants to query the data of a week when using it on site. When querying, he finds that the page has to wait for more than 20 seconds. This is because everyone has to crash, and then Start to check this business code module, which is mainly reflected in two aspects:
A. The interface request time is too long (about 8 seconds), there is room for optimization
B. The front end calls the interface four times at one time, and queries four sets of data respectively ( Need to be optimized)
Because of the requirements of the above B, it is specially for clicking the echarts legend to trigger the interface call.
Knowledge points involved : legendselectchanged, Echarts legend attribute, Echarts legend, legend click event, echarts multi-line coexistence.
sneak peek (effect)
[Copyright Statement] Because my personal creations are often crawled to other websites, I hereby declare that I only create on the CSDN platform for the time being.
1. Realize multiple curves of Echarts
First implement the simplest echarts, a graph with multiple lines together, as shown in the figure below, the four lines belong to the same dimension.
The specific implementation code is as follows:
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);
This can be obtained directly when all the data is returned quickly, but if the amount of data is too large, then the process of directly obtaining 4 pieces of data is undoubtedly a long wait for the page.
2. Click echarts to trigger the interface request
2.1 First hide some data by default
Set the selected attribute of legend, set the current day to true, and set the others to false. After setting, it is as follows:
selected: {
//在这里设置默认展示就ok了
'当前值': true,
'上个工作日': false,
'前三个工作日': false,
'前一周': false,
'自选时间': false
},
2.2 Custom legend legend click event
First of all, let me say that the legend click event used here is legendselectchanged, but remember to add off before triggering. The main purpose is to prevent secondary triggering, which is the same as the click event. The application is as follows:
lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) { //The content to be executed after triggering }); that is, in this execution content, we can call the interface to realize echarts Click the legend to trigger the purpose of calling the interface. The specific implementation effect is as follows:
The specific implementation code is as follows:
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. Source code download address (unzip and use)
Baidu network disk extraction address:
Link: https://pan.baidu.com/s/1bm50Dbq-AqZkuqgIgrUlgw
Extraction code: hdd6
123 network disk extraction address (no speed limit)
link: https://www.123pan.com/s/ZxkUVv-dFJ4.html
Extraction code: hdd6
If you like this article of the blogger, you can go to the emperor list to support the blogger! ! ! Click here for the entrance of Huangbang