Echarts开发 自定义悬浮窗格式option.tooltip.formatter 动态数据项数据处理series JSON配合二维数组处理数据等

继续上篇开发任务 需用到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;
		        }
		    },

执行效果如图所示：
困扰了三个小时的问题终于解决 不开心是假的哈哈哈
做开发最开心的时候就是需求解决的时候了吧
开心！！