我用的echart模板想生成两个相似的图表，一个在左一个在右，但是有一个显示不出来，随便将哪一个注释掉，另外一个都能正常显示，不过显示的数据一闪一闪的，像是程序将两个数据全部传到一个显示表中，这是怎么回事？
<%--
Created by IntelliJ IDEA.
User: ZZC
Date: 2021/4/11
Time: 10:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>温湿度监控平台</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.7-dist\css\bootstrap.min.css">
</head>
<body>
<div id="main1" style="float:left;width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var option = {
title: {
text: '机房温度', //标题文本内容
},
toolbox: { //可视化的工具箱
show: true,
feature: {
restore: { //重置
show: true
},
saveAsImage: {//保存图片
show: true
}
}
},
tooltip: { //弹窗组件
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
name: '机房温度',
type: 'gauge',
detail: {formatter:'{value}℃'},
data: [{value: 50, name: '温度显示表'}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
$.getJSON(
"TempHumiditySecServlet",
{},
function (result){
//js需要通过eval()函数 将返回值 转为一个js能够识别的json对象
json = eval(result);
option.series[0].data[0].value = json.tempRandow;
myChart.setOption(option, true);
}
);
}, 1000);
</script>
<div id="main2" style="float:right;width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option = {
title: {
text: '机房湿度', //标题文本内容
},
toolbox: { //可视化的工具箱
show: true,
feature: {
restore: { //重置
show: true
},
saveAsImage: {//保存图片
show: true
}
}
},
tooltip: { //弹窗组件
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
name: '机房湿度',
type: 'gauge',
detail: {formatter:'{value}%rh'},
data: [{value: 50, name: '湿度显示表'}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
$.getJSON(
"TempHumiditySecServlet",
{},
function (result){
//js需要通过eval()函数 将返回值 转为一个js能够识别的json对象
json = eval(result);
option.series[0].data[0].value = json.humidityRandow;
myChart.setOption(option, true);
}
);
}, 1000);
</script>
<div class="row"></div>
<h3><a href="main.jsp">返回</a></h3>
<script type="text/javascript" src="bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
<script type="text/javascript" src="jquery\jquery-2.1.1.min.js"></script>
</body>
</html>
