Explanation
Today the structure optimization project, found a following function
const drawMqiPie = async (index) => {
// 请求的参数
let params = {
lineNo: lineNo,
direct: 1,
driveway: 1,
pageNum: 0,
pageSize: 0,
computeRange: 3,
detectDate: $('#detectYear').val() + '-01-01'
}
// 请求的url
let url = conf.URL + 'system/linePqi/list';
// 调用方法获取数据
let data = await mar.$post(url, params);
let pieData = [0, 0, 0, 0, 0];
// 处理数据
if (data.code == 200) {
optionPie.series[0].data = [];
option.xAxis[0].data = [];
option.series[0].data = [];
for (var i = 0; i < data.data.list.length; i++) {
var everydata = data.data.list[i];
everydata.mqi = (0.08 * everydata.sci + 0.7 * everydata.pqi + 0.12 * everydata.bci + 0.1 * everydata.tci);
if (everydata.mqi >= 90) {
pieData[0] = pieData[0] + parseFloat(everydata.endNum - everydata.startNum);
} else if (everydata.mqi > 80) {
pieData[1] = pieData[1] + parseFloat(everydata.endNum - everydata.startNum);
} else if (everydata.mqi > 70) {
pieData[2] = pieData[2] + parseFloat(everydata.endNum - everydata.startNum);
} else if (everydata.mqi > 60) {
pieData[3] = pieData[3] + parseFloat(everydata.endNum - everydata.startNum);
} else {
pieData[4] = pieData[4] + parseFloat(everydata.endNum - everydata.startNum);
}
}
optionPie.series[0].data.push({ value: pieData[0] / 1000, name: '优', itemStyle: { color: colors[0], fontSize: 18 } });
optionPie.series[0].data.push({ value: pieData[1] / 1000, name: '良', itemStyle: { color: colors[1], fontSize: 18 } });
optionPie.series[0].data.push({ value: pieData[2] / 1000, name: '中', itemStyle: { color: colors[2], fontSize: 18 } });
optionPie.series[0].data.push({ value: pieData[3] / 1000, name: '次', itemStyle: { color: colors[3], fontSize: 18 } });
optionPie.series[0].data.push({ value: pieData[4] / 1000, name: '差', itemStyle: { color: colors[4], fontSize: 18 } });
optionPie.title.text = "公路技术状况MQI饼状图";
mar.echarts.draw($dom, optionPie);
layer.close(index);
}
}
Note:
1. The above function is to call echarts drawing functions, draw a pie chart
2. Though comments written more clearly, but a few days later to see, or will bring some dyslexia.
optimization
- The following start optimizing
- Read function it can be found that the 3-point drawing function is divided into
1. Get Data: Data comprising, and Option
2. Data processing: based on the data request back Ajax, change Option
3. Paint: The final draw and Option Dom. - After the function changes as follows
// 画折线图
const drawLine = async (index) => {
// 获取数据
let { data, optionLine } = await getLineData();
// 处理数据
optionLine = handleLineData(data, optionLine);
// 画图
mar.echarts.draw($domLine, optionLine);
// 关闭加载页面
layer.close(index);
}
- When you see something like the above function of time, it is not it feel less panicked,
- In fact, to do a little bit of improvement.
Synchronous writing asynchronous data request
- Write general method Mar classes inside.
- Mainly for
jquery
the$post
encapsulation method:
class Mar {
constructor( conf ){
const { jquery } = conf;
this.$ = jquery;
}
async $post (url, params) {
// 调用jquery的ajax方法
return this.$.post(url, params, '', 'json');
}
}
- This method is called
const Mar = require('./Mar');
const jequery = require('./jequery');
const mar = new Mar({ jequery });
const url = 'http://xxx:port/path';
const params = {
pageSize: 0,
pageNo: 0
};
let data = await mar.$post(url, params);
console.log(data);
Description:
In this way, can be very elegant asynchronous callback method in order to get rid of hell. Make the program look more beautiful, more convenient follow-up to read and maintain.