最近因为需要用到了Echarts这个插件,下面是自己的一点使用心得
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/816593b081919347c1093128f45276b2.png)
直接上代码:
js:
<%@ page import="org.apache.commons.lang3.RandomStringUtils" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="../common/base.jsp" %>
<spring:message code="ui.normal" var="normal"/>
<spring:message code="ui.frozen" var="frozen"/>
<spring:message code="ui.notify" var="notify"/>
<spring:message code="ui.details" var="details"/>
<spring:message code="ui.pay" var="pay"/>
<%
request.setAttribute("id0", RandomStringUtils.randomAlphabetic(8));
%>
<script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
<style>
th {
background-color: #d3d3d3;
}
</style>
<div class="box">
<!-- /.box-header -->
<div class="row">
<div class="col-md-10">
<div class="form-group">
<label>Mode:</label>
<input type="radio" name="mode" value="0" checked>Currency
<input type="radio" name="mode" value="1">Merchant
<input type="radio" name="mode" value="2">Channel
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label>Currency:</label>
<lp:currency currencyId="currencyCode" currencyName="currencyCode"
currencyClass="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Create Time:</label>
<div class="input-group input-medium date-picker input-daterange">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input name="startDate" id="startDate" class="form-control"
style="font-size: 13px;" type="text"/>
<span class="input-group-addon">~</span>
<input name="endDate" id="endDate" class="form-control" style="font-size: 13px;"
type="text"/>
</div>
</div>
</div>
<div class="col-md-2" id="merchantQueryLabel" style="display: none">
<div class="form-group">
<label>Merchant:</label>
<input type="text" name="userId" id="userId" class="form-control">
</div>
</div>
<div class="col-md-2" id="channelCodeQueryLabel" style="display: none">
<div class="form-group">
<label>Payment Channel:</label>
<select class="form-control" name="channelCode">
<option value="">All</option>
<c:forEach items="${channel}" var="channel">
<option value="${channel.orgCode}">${channel.orgCode}</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label> </label>
<button type="button" class="form-control btn btn-info"
name="search">${ ui_search }</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label> </label>
<button type="button" class="form-control btn btn-info"
name="export">${ ui_export }</button>