继续上篇开发任务 需用到echarts图，但是由于数据项过多，遇到悬浮框显示问题被遮住 需要改为表格样式且多项数据展示
先上一天开发下来的总结：
echarts官方文档.先看文档理解 再找案例 效率更高。
一开始无法实现 自己在option外用JSON将数组装为二维数组
想需要时取出来就好了。
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++;}
}
效果如下图：
然后将其循环放入series中：
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]
});
}
结果无论怎么改series.data的格式，也确定了数据全部放入
但就是在option.tooltip.formatter找不到放在series中的数据而无法操作,又不能在 option = {}中用数据所在的JSON(因为不是同一方法)。
仔细查阅文档后才发现 官方对series.data的格式有规范的定义echarts-series-line.data
而自己之前只看例子反推来做图，效率低错误率高，算是意识到了开发阅读文档的重要性了
在充分理解了官方文档之后对数据格式进行全面修改：
二维数组全面对应官方规范:
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
[ '星期四', 2, 1 ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
[ 2, 'p', 2 ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
[ 3, 3, 5 ]
]
}]
修改后的代码如下：
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]]
});
}
option中的测试代码:
option = {
tooltip : {
trigger: 'axis',
formatter(params){
for(x in params){
}
}
}
}
浏览器测试结果如图:
成功可以在option.tooltip.formatte中操作！
再编写以下代码对数据进行排版：
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;
}
},
执行效果如图所示：
困扰了三个小时的问题终于解决 不开心是假的哈哈哈
做开发最开心的时候就是需求解决的时候了吧
开心！！