html+echars图表加日期检索

简介: html+echars图表加日期检索

1.java后台
/** 出库入库饼状图
*/
@Override
public Map data1(WResInfo info) {
Map map = new HashMap<>();
List wResInfoList = wResInfoMapper.selectWResInfoList(info);
//入库
List collect = wResInfoList.stream().filter(s -> s.getCtState().equals("1")).collect(Collectors.toList());
map.put(String.valueOf(collect.size()), "入库");
map.put(String.valueOf(wResInfoList.size() - collect.size()), "出库");
return map;
}

/***
 * 入库柱状图
 * @return
 */
@Override
public Map<String, Object> data2(WResInfo info) {
    Map<String, Object> map = new HashMap<>();

    List<WResInfo> wResInfoList = wResInfoMapper.data2(info);

    //物证名称
    List<String> ctWzName = wResInfoList.stream().map(e -> e.getDictLabel()).collect(Collectors.toList());

    //数量
    List<String> num = wResInfoList.stream().map(e -> e.getCtOther1()).collect(Collectors.toList());
    map.put("name",ctWzName );
    map.put("num",num );
    return map;
}

/***
 * 出库柱状图
 * @return
 */
@Override
public Map<String, Object> data3(WResInfo info) {
    Map<String, Object> map = new HashMap<>();

    List<WResInfo> wResInfoList = wResInfoMapper.data3(info);

    //物证名称
    List<String> ctWzName = wResInfoList.stream().map(e -> e.getDictLabel()).collect(Collectors.toList());

    //数量
    List<String> num = wResInfoList.stream().map(e -> e.getCtOther1()).collect(Collectors.toList());
    map.put("name",ctWzName );
    map.put("num",num );
    return map;
}
<select id="selectWResInfoList" parameterType="WResInfo" resultMap="WResInfoResult">
    <include refid="selectWResInfoVo"/>
    <where>  
        <if test="ctWzName != null  and ctWzName != ''"> and ct_wz_name like concat('%', #{ctWzName}, '%')</if>
        <if test="ctState != null  and ctState != ''"> and ct_state = #{ctState}</if>
        <if test="ctWzType != null  and ctWzType != ''"> and ct_wz_type = #{ctWzType}</if>
        <if test="dtRksjDate != null "> and dt_rksj_date &gt;=  #{dtRksjDate}</if>
        <if test="dtCksjDate != null "> or dt_cksj_date &gt;= #{dtCksjDate}</if>
    </where>
</select>

<select id="data2" parameterType="WResInfo" resultMap="WResInfoResult">
       select
             b.DICT_LABEL as dictLabel,
             count(b.DICT_LABEL) as ct_other1
       from w_res_info AS a left join sys_dict_data as b on a.ct_wz_type = b.dict_value and b.dict_type = 'wz_type'
    <where>
        <if test="dtRksjDate != null "> and a.dt_rksj_date &gt;=   #{dtRksjDate}</if>
        <if test="dtCksjDate != null "> or a.dt_cksj_date &gt;= #{dtCksjDate}</if>
        and a.ct_state = '1'
        group by b.DICT_LABEL
    </where>

</select>

<select id="data3" parameterType="WResInfo" resultMap="WResInfoResult">
       select
             b.DICT_LABEL as dictLabel,
             count(b.DICT_LABEL) as ct_other1
       from w_res_info AS a left join sys_dict_data as b on a.ct_wz_type = b.dict_value and b.dict_type = 'wz_type'
    <where>
        <if test="dtRksjDate != null "> and a.dt_rksj_date &gt;=   #{dtRksjDate}</if>
        <if test="dtCksjDate != null "> or a.dt_cksj_date &gt;= #{dtCksjDate}</if>
        and a.ct_state = '0'
        group by b.DICT_LABEL
    </where>
</select>

2.html

<!DOCTYPE html>
























  • 物证入库时间:

                 
    物证出库时间:

         
    搜索








<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>物证出库入库统计图</h5>
        </div>
        <div class="ibox-content no-padding">
            <div class="container-div">
                <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
                <div id="main" style="height:600px"></div>
            </div>
            <div th:include="include :: footer"></div>
        </div>
    </div>
</div>


<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>物证入库分类统计图</h5>
        </div>
        <div class="ibox-content no-padding">
            <div class="container-div">
                <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
                <div id="main2" style="height:600px"></div>
            </div>
            <div th:include="include :: footer"></div>
        </div>
    </div>
</div>
<div class="col-sm-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>物证出库分类统计图</h5>
        </div>
        <div class="ibox-content no-padding">
            <div class="container-div">
                <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
                <div id="main3" style="height:600px"></div>
            </div>
            <div th:include="include :: footer"></div>
        </div>
    </div>
</div>





3.截图

image.png
image.png

相关文章
|
JavaScript 大数据 BI
Superset图表通过iframe嵌入Html网页展示一文详解
Superset图表通过iframe嵌入Html网页展示一文详解
1876 0
Superset图表通过iframe嵌入Html网页展示一文详解
|
2月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
111 2
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
36 0
|
6月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
45 0
|
7月前
|
BI
html+echars的统计报表
html+echars的统计报表
|
7月前
|
C++
常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322
日期和时间,对于不同系统和平台之间的数据交换和互操作至关重要。本文将对比 HTML 标准、ISO 8601、RFC 3339 和 RFC 5322,为读者提供参考。
109 0
常用日期和时间标准对比:HTML, ISO 8601, RFC 3339, RFC 5322
|
监控 前端开发 数据可视化
数据可视化:内网流量监控软件的实时图表展示与HTML/CSS实现
在管理和监控内部网络流量时,数据可视化是一项至关重要的任务。它不仅可以帮助您更好地理解网络流量的趋势和模式,还可以及时发现潜在的问题。本文将介绍如何使用Ruby编写内网流量监控软件的扩展插件,以实现实时图表展示,同时提供自动提交监控数据到网站的解决方案。
368 0
|
开发框架 JSON 数据可视化
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
214 1
实时显示日期、时间、城市天气(HTML+JS)
实时显示日期、时间、城市天气(HTML+JS)
1032 0
实时显示日期、时间、城市天气(HTML+JS)
|
移动开发 HTML5
HTML5统计图表数据初始动画
在线演示 本地下载
1196 0