Echarts -- 条件查询ajax动态获取数据

最新推荐文章于 2025-04-03 14:05:43 发布

孺牛的猫

最新推荐文章于 2025-04-03 14:05:43 发布

阅读量4.9k

点赞数 1

分类专栏： echarts 文章标签： echarts echarts ajax

本文链接：https://blog.youkuaiyun.com/wj18570504421/article/details/78874351

版权

本文分享了使用Echarts进行条件查询和Ajax动态获取数据的经验。通过访问插件官网、查看官方实例并结合实际需求，了解Echarts的基本使用。遇到问题时，借助谷歌搜索、官方文档和社区交流来解决问题。提供了包含完整前后端代码的资源链接，展示了根据多个条件展示折线图和DataTable表格的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因为需要用到了Echarts这个插件，下面是自己的一点使用心得

效果图：

直接上代码：

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>

最低0.47元/天解锁文章