我按照这篇文档做了个ECharts热力图：

决策报表引用echarts图表-https://help.fanruan.com/finereport/doc-view-4089.html，现在想在同一个页面显示多个，把原来的控件和SQL都复制了一份改了一下，结果现在只显示一个图，图1先显示就不能显示图2，图2先显示就不能显示图1，那位大佬知道问题出在哪？

//对SQL结果进行两次取值，通过对比两次结果判断查询是否完成：若两次取值结果相等，说明查询没有完成；若相等，说明查询完成

var q1=_g().options.form.getWidgetByName("report0").element.find("td[id^=C3-]").text(); //判断条件一次取值

var p1=""; //定义二次取值

//使用setInterval进程反复执行二次取值和判断

function say1(){

p1=_g().options.form.getWidgetByName("report0").element.find("td[id^=C3-]").text(); //判断条件二次取值

if(p1!==q1) //判断两次取值是否相等

//若不相等，符合条件，执行以下代码，生成热力图；若相等，不符合条件，不执行以下代码，重新取值

{

// 清空标签控件里的内容

$("div[widgetname=LABEL3]").empty();

// 往标签控件里添加div，指定id

$("div[widgetname=LABEL3]").append("<div id='main'></div>");

var COLORS = ['green', 'red'];

//取横纵坐标

var x = _g().options.form.getWidgetByName("report0").element.find("td[id^=E3-]").text();

var x1 = x.split(','); //取横坐标并转为数组

var y = _g().options.form.getWidgetByName("report0").element.find("td[id^=F3-]").text();

var y1 = y.split(','); //取纵坐标并转为数组

let xAxisVal = ''; // 定义X轴变量

let yAxisVal = ''; // 定义Y轴变量

//为热力图取值

var a = _g().options.form.getWidgetByName("report0").element.find("td[id^=A3-]").text();

var a1 = a.split(','); //取X值并转为数组

var b = _g().options.form.getWidgetByName("report0").element.find("td[id^=B3-]").text();

var b1 = b.split(','); //取Y值并转为数组

var c = _g().options.form.getWidgetByName("report0").element.find("td[id^=C3-]").text();

var c1 = c.split(','); //取Z值并转为数组

//将三个一维数组转为一个二维数组

var d = new Array();

for (var i = 0; i < a1.length; i++) {

d.push([a1[i],b1[i],c1[i]]);

}

// 用于使 Echarts 自适应高度和宽度,通过标签控件计算 DOM 容器的高宽

var resizeMapContainer = function() {

main.style.width = $("[widgetname='LABEL3']").width() + 'px';

main.style.height = $("[widgetname='LABEL3']").height() + 'px';

};

var pcb=_g().options.form.getWidgetByName("report0").element.find("td[id^=G3-]").text();

// 初始化容器的高宽

resizeMapContainer();

// 基于准备好的Dom，初始化echarts实例

var myChart = echarts.init(main);

// 指定图表的配置项和数据

var option = {

title: {

text: pcb

},

tooltip: {

position: 'top',

formatter(e) {

return 'X:'+xAxisVal+'  Y:'+yAxisVal+''+e.data[2]; //鼠标悬浮提示当前位置坐标及值

}

},

//设置图表位置、大小

grid: {

height: '500',

width:'1300',

top: '30',

left:'30',

},

xAxis: {

type: 'category',

data: x1, //设置横坐标

splitArea: {

show: true

},

axisPointer: {

show: true,

type: 'none',

trigger: 'item',

//高亮显示当前X坐标

label: {

formatter(e){

xAxisVal = e.value; // 获取x轴的值

return e.value

}

}

}

},

yAxis: {

inverse: true, //翻转Y轴

//position:'right', //Y轴靠右

type: 'category',

data: y1, //设置纵坐标

splitArea: {

show: true

},

axisPointer: {

type: 'none',

show: true,

trigger: 'item',

splitLine: {

show: false

},

//高亮显示当前Y坐标

label: {

formatter(e){

yAxisVal = e.value; // 获取y轴的值

return e.value

}

}

}

},

//设置热力图颜色图例

visualMap: {

type: 'piecewise',

inverse: true,

left: 10,

pieces: [{

value: 0,

color: COLORS[0]

},

{

value: 1,

color: COLORS[1]

},

],

borderColor: '#ccc',

borderWidth: 2,

backgroundColor: '#eee',

dimension: 2,

},

series: [

{

name: 'Punch Card',

type: 'heatmap',

data: d, //设置热力图的值

label: {

show: true, //在图中显示值

fontSize:10, //设置字体大小

},

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

// 监控窗口大小变化

window.addEventListener("resize", function() {

// 重置容器高宽

resizeMapContainer();

myChart.resize();

});

clearInterval(id1); //终止setInterval进程

}

} 

var id1 = setInterval(say1,500); //将函数say赋值给setInterval进程，每500ms执行一次，并为进程设置id