<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head><th:block th:include="include :: header('炉况温度列表')" /><th:block th:include="include :: datetimepicker-css" />
</head>
<!-- 引入 echarts.js -->
<script src="../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<body class="gray-bg">
<div class="container-div"><div class="row"><div class="col-sm-12 search-collapse"><form id="formId" action="/mes/lkwd/line"><div class="select-list"><ul><li style="height: 25px;"><div class="form-group form-inline"><label class="font-noraml">日期：</label><div class="input-group date form-inline"><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input th:value="${ksTime}" type="text" class="form-control" id="laydate-demo-3" name="ksTime" placeholder="请选择开始日期"><span class="input-group-addon">到</span><span class="input-group-addon"><i class="fa fa-calendar"></i></span><input th:value="${endTime}" type="text" class="form-control" id="laydate-demo-4" name="endTime" placeholder="请选择结束日期"></div></div></li>
<!-- <li class="select-time">-->
<!-- <label>开始时间： </label>-->
<!-- <input type="text" class="time-input" id="ksTime" placeholder="开始时间" name="ksTime"/>-->
<!-- <span>-</span>-->
<!-- <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>-->
<!-- </li>--><input class="btn btn-primary" type="submit" value="搜索"/>
<!-- <input class="btn btn-warning" type="reset" value="重置"/>--></ul></div></form></div><div class="col-sm-12 select-table table-striped"><section style="display: flex;justify-content: center; flex-wrap: wrap;"><div id="main" style="width: 700px;height:400px;"></div><div id="main1" style="width: 700px;height:400px;"></div><div id="main2" style="width: 700px;height:400px;"></div><div id="main3" style="width: 700px;height:400px;"></div><div id="main4" style="width: 700px;height:400px;"></div></section></div></div></div><th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">$(function () {layui.use('laydate', function(){var laydate = layui.laydate;laydate.render({elem: '#laydate-demo-3',type: 'datetime',trigger: 'click'});laydate.render({elem: '#laydate-demo-4',type: 'datetime',trigger: 'click'});})})
</script>
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('mes:lkwd:edit')}]];
var removeFlag = [[${@permission.hasPermi('mes:lkwd:remove')}]];
var prefix = ctx + "mes/lkwd";function api() {var ksTime = $("input[name='ksTime']").val();var endTime = $("input[name='endTime']").val();$.ajax({url: prefix + '/lineData',type: "post",async: false,dataType: 'json',data: {endTime:endTime,ksTime:ksTime},success: function (res) {console.log(res);var list = res.data;var x = [];var hrqwd = [];var hrqyqckwd = [];var hrqyqrkwd = [];var rssckwd = [];var rssnwd = [];var dgslyqckwd = [];for(var i in list){x.push(list[i].createTime.substring(11,19));hrqwd.push(list[i].hrqwd);hrqyqckwd.push(list[i].hrqyqckwd);hrqyqrkwd.push(list[i].hrqyqrkwd);rssckwd.push(list[i].rssckwd);rssnwd.push(list[i].rssnwd);dgslyqckwd.push(list[i].dgslyqckwd);}a_option('main','换热器温度',hrqwd,x,'red');a_option('main1','换热器出口温度',hrqyqckwd,x,'green');a_option('main2','换热器入口温度',hrqyqrkwd,x,'skyblue');a_option('main3','燃烧室出口温度',rssckwd,x,'pink');a_option('main4','燃烧室内温度',rssnwd,x,'pink');a_option('main4','多管水冷烟气出口温度',dgslyqckwd,x,'#000');console.log(x);console.log(hrqwd);}});
}api();function a_option(id,title,ydata,xdata,color){var myChart = echarts.init(document.getElementById(id));// var xdata = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];// var ydata = [1, -2, 2, 5, 3, 2, 0];option = {title: {text: title,// subtext: '纯属虚构'},tooltip: {trigger: 'axis'},
legend: {top: '5%',left: 'center'},// 提示上标题dataZoom: [{//x轴选取范围type: 'inside',start: 0,end: 100}, {start: 0,end: 100}],xAxis: {type: 'category',boundaryGap: false,data: xdata},lineStyle:{color:color},yAxis: {scale:true,//y轴七点数据可改变，不从0开始min: 300,//y轴 不从0开始最小值type: 'value',axisLabel: {formatter: '{value} °C'}},series: [{name: '温度（°C）',type: 'line',symbolSize:0,//折现点的大小// itemStyle : {// normal : {// color:color,// lineStyle:{// color:color// }// }// },data: ydata ,}]};myChart.setOption(option);
}</script>
</body>
</html>这一行是x轴 数据动态可选的属性，添加上很好看，很人性化。
dataZoom: [{//x轴选取范围type: 'inside',start: 0,end: 100
}, {start: 0,end: 100
}],
scale:true //y轴数据动态调节 也很好用，曲线就更清晰
效果如下
eacharjs版本不同，显示样式也有一点区别。
这个版本的还行 5.1.1
console.log(echarts.version);
5.1.1
链接：https://pan.baidu.com/s/1vfr3kLnBVctmocIRgjQzwQ
提取码：lbm9