echarjs 折线图实现

<!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

echarjs 折线图实现相关推荐

qchart折现图_Qt Charts 动态实时折线图绘制
在Qt Charts发布之前, Qt比较著名两个画图插件是 qwt和Qcustom, 其中Qcustom较轻量,只需要在project 中包含qcustomplot.h 和 qcustomplot.c ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
graphpad做折线图坐标轴数字_pandas做数据可视化具体操作，快来看看吧
常见的数据可视化库有: matplotlib 是最常见的2维库,可以算作可视化的必备技能库,由于matplotlib是比较底层的库,api很多,代码学起来不太容易. seaborn 是建构于matpl ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
【统计图】Echarts实现多条折线图渐变堆叠效果
initSgLineChart() {// 基于DOM,初始化echarts实例(注意!Vue的DOM日怪的很,一般要腾个1秒才加载完)this.lineChart = this.$echarts.i ...
报表应用系列——图表JFreeChart: 第 4 章折线图
双击代码全选 1 2 3 4 5 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(100 ...
matplotlib01-plot折线图、scatter散点图
目录一.plot绘制折线图一般用法二.scatter绘制散点图一般用法记录一下数据可视化的python库matplotlib,研究并纪录一下. matplotlib.pyplot.subplot ...
Matplotlib常见图形绘制（折线图、散点图、柱状图、直方图、饼图）
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义折线图:以折线的上升或下降来表示 ...
Matplotlib基础绘图功能 — 以折线图为例
1 完善原始折线图 - 给图形添加辅助功能为了更好地理解所有基础绘图功能,通过天气温度变化的绘图来融合所有的基础API使用需求:画出某城市11点到12点1小时内每分钟的温度变化折线图,温度范围在1 ...

echarjs 折线图实现

echarjs 折线图实现相关推荐

最新文章

热门文章