效果
完整代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>实时数据查看</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- 引入公用部分 -->
<script th:replace="common/head::static"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>
<span th:text="${enterpriseName}"></span>
/
<span th:text="${pointName}"></span>
</legend>
</fieldset>
<!-- <div class="layui-inline">
因子编码：
<div class="layui-input-inline">
<select name="monitorDataSearchOnline" id="monitorDataSearchOnline"
class="input-select">
<option value="" selected>请选择是否在线</option>
<option th:each="sysDivisor:${sysDivisorSearch}" th:value="${sysDivisor.code}"
th:text="${sysDivisor.name}"></option>
</select>
</div>
</div>
-->
<div class="layui-form">
<div class="layui-inline">
时间类型：
<div class="layui-input-inline">
<select name="rtdDataSearchTimeType" id="rtdDataSearchTimeType"
class="input-select">
<option value="">请选择时间类型</option>
<option value="d2011" selected>实时数据</option>
<option value="d2051">分钟数据</option>
<option value="d2061">小时数据</option>
<option value="d2031">日数据</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<!--时间范围选择-->
开始时间：
<div class="layui-inline" style="width:165px;">
<input type="text" class="layui-input" lay-filter="startTime" lay-search=""
id="rtdDataSearchStartTime" name="rtdDataSearchStartTime"/>
</div>
结束时间：
<div class="layui-inline" style="width:165px;">
<input type="text" class="layui-input" lay-filter="endTime" lay-search=""
id="rtdDataSearchEndTime" name="rtdDataSearchEndTime"/>
</div>
</div>
</div>
<button class="layui-btn" onclick="monitorDataSearchBtn();"><i
class="layui-icon layui-icon-search"></i>数据
</button>
<button class="layui-btn" onclick="monitorDataSearchEchartBtn();">
<i class="layui-icon layui-icon-export"></i>图表
</button>
<button class="layui-btn" id="btn" >
<i class="layui-icon layui-icon-export"></i>导出
</button>
</div>
</div>
<div id="monitorDataSearchDiv">
<table class="layui-table" lay-filter="monitorDataSearchTable"
lay-data="{height:'full-230',cellMinWidth: 80 }">
<thead id="monitorDataSearchthead">
</thead>
<tbody id="monitorDataSearchtbody">
</tbody>
</table>
<div id="monitorDataSearchPage"></div>
</div>
<div id="monitorDataSearchEchartDiv" style="width: 100%;height: 400px"></div>
</div>
</div>
</div>
</div>
<!--导出文件-->
<a href="" id="monitorDataExportIndexA" style="font-size: larger; font-weight: bold; color: blue;"></a>
<!--站点隐藏ID-->
<input type="hidden" id="monitorDataSearchHiddenPointId" name="monitorDataSearchHiddenPointId"
th:value="${pointId}"/>
<!-- 分页必需 -->
<input type="hidden" id="monitorDataSearchHiddenCpage" name="monitorDataSearchHiddenCpage" value="1"/>
<input type="hidden" id="monitorDataSearchHiddenTotalNum" name="monitorDataSearchHiddenTotalNum"
value="-1"/>
<script>
layui.config({
base: 'common/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['table', 'laypage', 'layer', 'index', 'form', 'laydate','echarts'], function () {
var laypage = layui.laypage
, table = layui.table
,
该博客展示了如何将layui框架与Echart图表库结合，实现数据可视化的具体步骤。通过实例代码，读者可以了解到如何在layui中配置并展示Echart图表，达到理想的展示效果。
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
