全局变量的定义
var myChart=new Array();
var option =new Array();
option的js赋值过程
option[0]=faultInfoOption3D;
option[1]=PeiGongCHEOption3;//PeiGongCHEOption3为表格下面的占用option
option[2]=faultesRelatonOption1;//默认选项;relatonGraphOption;--点击后的出发选项
option[3]=CheTypeFalutAllOption1;
option[4]=VentorBujianFaults;//VentorBujianFaults;-
option[5]=allVentorFault;
option[6]=falutBanSuiOption;
setoption过程
for(var i = 0 ; i < 7 ; i++){
dom = document.getElementById('content'+i);
dom.innerHTML="";
var dom = document.getElementById('chart'+i);
dom.style.display = '';
dom.style.height = document.getElementById(i).style.height;
myChart[i] = echarts.init(document.getElementById('chart'+i));
myChart[i].setOption(option[i]);
myChart[i].resize();
}
点击事件的说明
if (subtext == "allventor"){
myChart[i].on('click',function(param){
if(param.componentType=='series'&¶m.seriesName=="供应商故障次数"){
//alert("点击的为allventor--"+subtext+"---"+param.name);
ventorNameTemp=param.name;
VentorFaultCount(ventorNameTemp);//展示某个供应商的故障详情
for(var j=0;j<7;j++){//判断是否有最底层展示
var option= myChart[j].getOption();//得到option
if((option.title[0].subtext=='ventor')||(option.title[0].subtext=='singleModel')
||(option.title[0].subtext=='singleBansui')){
option[j]=VentorBujianFaults;//某故障的伴随关系图
myChart[j].clear();
myChart[j].setOption(option[j]);
break;
}
}
}
});
}
拖拽事件:
function drop(ev,divdom){
ev.preventDefault();
if(srcdiv != divdom){
//srcdiv.innerHTML = divdom.innerHTML;
//divdom.innerHTML=ev.dataTransfer.getData("text/html");
var srcNum=parseInt(srcdiv.id);
var dstNum=parseInt(divdom.id);
var srcinnerHTML = document.getElementById("content"+srcNum).innerHTML;
var dstinnerHTML = document.getElementById("content"+dstNum).innerHTML;
document.getElementById("content"+dstNum).innerHTML = srcinnerHTML;
document.getElementById("content"+srcNum).innerHTML = dstinnerHTML;
//控制
if(srcinnerHTML.indexOf("faultTable")>=0){
document.getElementById("faultTable").style.height=divdom.style.height;
}
if(dstinnerHTML.indexOf("faultTable")>=0){
document.getElementById("faultTable").style.height=srcdiv.style.height;
}
//交换可见性
var srcDisplay=document.getElementById("chart"+srcNum).style.display;
var dstDisplay=document.getElementById("chart"+dstNum).style.display;
if('none' == srcDisplay){
document.getElementById("chart"+srcNum).style.display='';
document.getElementById("chart"+dstNum).style.display='none';
}
if('none' == dstDisplay){
document.getElementById("chart"+dstNum).style.display='';
document.getElementById("chart"+srcNum).style.display='none';
}
//重画两个图
var temp=option[srcNum];
option[srcNum]=option[dstNum];
option[dstNum]=temp;
myChart[srcNum].clear();
myChart[dstNum].clear();
myChart[srcNum].setOption(option[srcNum]);
myChart[dstNum].setOption(option[dstNum]);
//判断拖拽的是哪个图,来显示右侧的内容
//var temp = myChart[dstNum].getOption().series[0].type;//: 得到图标类型-‘bar/lin/force/pie’,;
//var temp1 = myChart[dstNum].getOption().title[0].subtext;//得到副标题的名称
CLICK();
}
}
问题描述:
点击事件后,生成新的图片,赋值到某个option中,能正常显示,但是拖拽后,不再能正常显示,显示的未出世图片,而不是更新后的option的图片
错误原因,为搞清楚全局变量option的使用范围
Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分)。切记,是function块,而for、while、if块并不是作用域的划分标准
如下图所示,应该定义一个与option不同名的局部变量,来存储待检查的option是否满足要求,满足后,将其赋值给option,这样,option数组才会起作用。
刚开始的时候,因为定义的暂存变量为option,冲突,但是JS不会报错,结果整整检查了三天,菜鸟程序员,太弱了,引以为戒。