Continuing the development task of the previous article, the echarts diagram is needed, but due to too many data items, the floating frame display problem is obscured and needs to be changed to a table style and multiple data display
The summary developed in the previous day:
echarts official document . It is more efficient to read the document to understand and then find the case.
At the beginning, I couldn't realize that I used JSON outside the option to assemble the numbers into a two-dimensional array
. Just take it out when you want it.
var json={
};
for(var j=0;j<DEFECT_CNAME.length;j++){
//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出
json[DEFECT_CNAME[j]]=new Array();//放入数组
for (var i = 0; i < 2; i++) {
json[DEFECT_CNAME[j]][i] = new Array();
for (var x= 0; x < PRODUCE_TIME.length; x++) {
json[DEFECT_CNAME[j]][i][x] = 0;
}
}
}
var j=0;
for(var i=0;i<list.length;i++){
//遍历查询结果list集
if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){
//相同时间跨度的不同区域数据处理 缺陷个数和面积
for(var X=0;X<DEFECT_CNAME.length;X++){
if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.pos]){
//同时间段同名数据
count = json[DEFECT_CNAME[X]][0][j];
count+=parseInt(list[i][mapPojo.DEFECT_COUNT.pos]);
json[DEFECT_CNAME[X]][0][j]=count;
count = json[DEFECT_CNAME[X]][1][j];
count+=parseFloat(list[i][mapPojo.DEFECT_AREA.pos]);
json[DEFECT_CNAME[X]][1][j]=count;
break;
}
}
}
else{
j++;}
}
The effect is as shown in the figure below: 
then put it into the series in a loop:
var series=[];
for(var i = 0;i<DEFECT_CNAME.length;i++){
series.push({
name: DEFECT_CNAME[i],
type: 'line',
smooth: true,
data: json[DEFECT_CNAME[i]
});
}
As a result, no matter how you change the format of series.data, it is confirmed that all the data is put in
However, the data in the series cannot be found in option.tooltip.formatter and cannot be operated, and the JSON where the data is located cannot be used in option = {} (because it is not the same method).
After carefully reviewing the document, I found that the official has a standardized definition of the format of series.data. echarts-series-line.data,
but I only looked at the examples and reversed to make the graphs. The efficiency is low and the error rate is high. I am aware of the importance of developing and reading the document. Sex
Fully modify the data format after fully understanding the official documents: the
two-dimensional array fully corresponds to the official specifications:
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
[ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
[ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
[ 3, 3, 5 ]
]
}]
The modified code is as follows:
var json={
};
for(var j=0;j<DEFECT_CNAME.length;j++){
//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出
json[DEFECT_CNAME[j]]=new Array();//放入数组
for (var i = 0; i < PRODUCE_TIME.length; i++) {
json[DEFECT_CNAME[j]][i] = new Array();
for (var x= 0; x < 3; x++) {
if(x==0){
json[DEFECT_CNAME[j]][i][x] = PRODUCE_TIME[i];
}else{
json[DEFECT_CNAME[j]][i][x] = 0;
}
}
}
}
console.time('time');
var j=0;
for(var i=0;i<list.length;i++){
//遍历查询结果list集
if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){
//相同时间跨度的不同区域数据处理 缺陷个数和面积
for(var X=0;X<DEFECT_CNAME.length;X++){
if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.pos]){
//同时间段同名数据
count = json[DEFECT_CNAME[X]][j][1];
count+=parseInt(list[i][mapPojo.DEFECT_COUNT.pos]);
json[DEFECT_CNAME[X]][j][1]=count;
count = json[DEFECT_CNAME[X]][j][2];
count+=parseFloat(list[i][mapPojo.DEFECT_AREA.pos]);
json[DEFECT_CNAME[X]][j][2]=count;
break;
}
}
}
else{
j++;}
}
console.timeEnd('time');
var series=[];
for(var i = 0;i<DEFECT_CNAME.length;i++){
series.push({
name: DEFECT_CNAME[i],
type: 'line',
smooth: true,
data: json[DEFECT_CNAME[i]]
});
}
Test code in option:
option = {
tooltip : {
trigger: 'axis',
formatter(params){
for(x in params){
}
}
}
}
The browser test results are shown in the figure:
success can be operated in option.tooltip.formatte!
Then write the following code to typeset the data:
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function (params, ticket, callback) {
var showHtm="";
for(x in params){
showHtm+=params[x].seriesName +"缺陷个数："+params[x].data[1]+"缺陷面积："+params[x].data[2]+'<br>';
}
return showHtm;
}
},
The implementation effect is shown in the figure: the 
problem that has been troubled for three hours is finally solved. Unhappy is a fake hahaha
. The happiest time to do development is the time to solve the needs.
Happy! !