echarts的option数组赋值错乱问题

全局变量的定义

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'&&param.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不会报错，结果整整检查了三天,菜鸟程序员，太弱了，引以为戒。