Echarts折线图，根据时间条件查询动态数据

最新推荐文章于 2025-03-19 10:47:06 发布

qq_43028942

最新推荐文章于 2025-03-19 10:47:06 发布

阅读量1.8w

点赞数 3

分类专栏：日常工作笔记文章标签： Echarts 折线图 Tab转换条件动态展示数据

本文链接：https://blog.youkuaiyun.com/qq_43028942/article/details/83029286

版权

Echarts折线图，根据时间条件查询动态数据

这是我第一次接触到Echarts，所以写个小总结。（Echarts官网上有很多实例，还有教程。Echarts官网实例地址）
我写的是，根据开始时间和结束时间这两个条件去查询数据，并且用到Tab转换，一个用table表格展示数据，一个是Echarts折线图展示动态数据。
Tab转换直接在HTML中写就可以了。
HTML：

	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-xs-4">
					<div class="input-group">
						<label class="input-group-addon">
							开始时间：
						</label>
						<input type="text" id="startTime" name="startTime"
							class="form-control" placeholder="请选择日期" readonly="readonly"
							style="background-color: #FFFFFF;">
					</div>
				</div>
				<div class="col-md-4 col-xs-4">
					<div class="input-group">
						<label class="input-group-addon">
							结束时间：
						</label>
						<input type="text" id="endTime" name="endTime"
							class="form-control" placeholder="请选择日期" readonly="readonly"
							style="background-color: #FFFFFF; z-index: 0 !important;">
					</div>
				</div>
				<div class="col-md-4 col-xs-4 text-left common-paddingTop">
					<button class="btn btn-info" id="searchBtn">
						<span class="glyphicon glyphicon-search"></span>&nbsp;查询
					</button>
				</div>
			</div>
			<div class="row">
				<div class="tab-contain">
					<ul id="tabs"  class="nav nav-tabs">
						<li

最低0.47元/天解锁文章