Echarts报表动态加载

最新推荐文章于 2023-02-27 14:41:27 发布
最新推荐文章于 2023-02-27 14:41:27 发布
阅读量622 收藏
点赞数
分类专栏： Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT18911008884/article/details/78520289
版权 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout=""
    layout:decorator="layout_new">
<head>
<meta charset="UTF-8" />
<!-- 引入 ECharts 文件 -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/date/laydate.js}"></script>
<script th:src="@{/echarts/jQuery-jcDate.js}"></script>
<script th:src="@{/echarts/echarts.js}" charset="utf-8"></script>
<script th:src="@{/echarts/theme/infographic.js}" charset="utf-8"></script>

</head>
<body>
    <div class="row J_mainContent" id="content-main"
        layout:fragment="content">

        <div class="wrapper wrapper-content  ">

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>
                                <i class="fa fa-tasks"></i> <a th:text="${menuName}">统计图表</a>
                            </h5>
                            <p class="pull-right">
                                <button type="button" class="btn btn-primary btn-xs"
                                    onclick="javascript:window.location.href=window.location.href;">
                                    <i class="fa fa-refresh"></i> 刷新
                                </button>
                                &nbsp;
                            </p>
                        </div>


                    </div>
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form class="form-horizontal clearfix" id="searchForm"
                                method="get" th:action="@{/Echarts/}">
                                <div class="form-group col-xs-12 col-sm-6 col-md-3">
                                    <label class="col-sm-4 control-label">旧版本名称</label>
                                    <div class="col-sm-8">
                                        <select id="previous_version_name" name="previous_version_name"
                                            class="form-control">
                                            <option value="">请选择</option>
                                            <option value="JJ01">JJ01</option>
                                            <option value="JJ02">JJ012</option>
                                            <option value="JJ03">JJ03</option>
                                            <option value="JJ05">JJ05</option>
                                            <option value="JJ07">JJ07</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-6 col-md-3">
                                    <label class="col-sm-4 control-label">新版本名称</label>
                                    <div class="col-sm-8">
                                        <select id="new_version_name" name="new_version_name"
                                            class="form-control">
                                            <option value="">请选择</option>
                                            <option value="J1-otaA-all-00502001">J1-otaA-all-00502001</option>
                                            <option value="J1-ota-all-00502001">J1-ota-all-00502001</option>

                                        </select>

                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-6 col-md-3">
                                    <label class="col-sm-4 control-label tr">起始时间</label>

                                    <div class="col-sm-8">
                                        <input class="inline laydate-icon" placeholder="开始日期"
                                            id="start" name="start" /> <input
                                            class="inline laydate-icon" placeholder="结束日期" id="end"
                                            name="end" />
                                    </div>
                                </div>


                                <div class="form-group col-xs-12 col-sm-6 col-md-3">
                                    <div class="col-sm-12 col-sm-offset-2">
                                        <button class="btn btn-primary" type="button"
                                            onclick="search()">查询</button>
                                    </div>
                                </div>
                            </form>
                            <hr />
                        </div>
                    </div>
                </div>
            </div>


            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: auto; height: 400px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例

                search();
                function search() {
                    var start = $("#start").val();
                    var end = $("#end").val();
                    var previous_version_name = $("#previous_version_name").val();
                    var new_version_name = $("#new_version_name").val();
                    var myChart = echarts.init(document.getElementById('main'),
                            'infographic');
                    myChart.setOption({
                        title : {
                            text : '升级情况'
                        },
                        tooltip : {
                            trigger : 'axis'
                        },
                        legend : {
                            data : [ '升级成功', '升级失败' ]
                        },
                        grid : {
                            left : '3%',
                            right : '4%',
                            bottom : '3%',
                            containLabel : true
                        },
                        toolbox : {
                            show : true,
                            feature : {
                                dataZoom : {
                                    yAxisIndex : 'none'
                                },
                                dataView : {
                                    readOnly : false
                                },
                                magicType : {
                                    type : [ 'line', 'bar' ]
                                },
                                restore : {},
                                saveAsImage : {}
                            }
                        },
                        xAxis : {
                            type : 'category',
                            boundaryGap : false,
                            data : []
                        },
                        yAxis : {
                            type : 'value'
                        },
                        series : []
                    });

                    var date = []; //类别数组（实际用来盛放X轴坐标值）
                    var success_nums = []; //销量数组（实际用来盛放Y坐标值）
                    var errnum = []; //升级失败
                    $.ajax({
                        type : "post",
                        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                        url : "/Echarts/echarts", //请求发送到TestServlet处
                        data : {
                            start : start,
                            end : end,
                            new_version_name : new_version_name,
                            previous_version_name : previous_version_name
                        },
                        dataType : "json", //返回数据形式为json
                        success : function(result) {
                            //请求成功时执行该函数内容，result即为服务器返回的json对象
                            if (result == "") {
                                swal("提示！", "暂无数据", "warning");
                                return;
                            }
                            if (result) {
                                for ( var i in result) {
                                    date.push(result[i].in_date);
                                }
                                for ( var j in result) {
                                    success_nums.push(result[j].count);
                                }
                                for ( var y in result) {
                                    errnum.push(result[y].errnum);
                                }
                                myChart.setOption({ //加载数据图表
                                    xAxis : {
                                        data : date
                                    },
                                    series : [ {
                                        name : '升级成功',
                                        type : 'line',
                                        data : success_nums
                                    }, {
                                        name : '升级失败',
                                        type : 'line',
                                        data : errnum
                                    }, ]
                                });
                            }
                        },
                        error : function(errorMsg) {
                            //请求失败时执行该函数
                            swal("错误！", "图表请求数据失败!", "error");
                            myChart.hideLoading();
                        }
                    })
                }
                !function() {
                    laydate.skin('molv');//切换皮肤，库
                    laydate({
                        elem : '#demo'
                    });//绑定元素
                }();

                //日期范围限制
                var start = {
                    elem : '#start',
                    format : 'YYYY-MM-DD hh:mm:ss',
                    //min: laydate.now(), //设定最小日期为当前日期
                    max : laydate.now(), //最大日期
                    istime : true,
                    istoday : false,
                    choose : function(datas) {
                        end.min = datas; //开始日选好后，重置结束日的最小日期
                        end.start = datas //将结束日的初始值设定为开始日
                    }
                };

                var end = {
                    elem : '#end',
                    format : 'YYYY-MM-DD hh:mm:ss',
                    //min: laydate.now(),
                    max : laydate.now(), //设定最大日期为当前日期
                    //max: '2099-06-16',
                    istime : true,
                    istoday : false,
                    choose : function(datas) {
                        start.max = datas; //结束日选好后，充值开始日的最大日期
                    }
                };
                laydate(start);
                laydate(end);
            </script>
        </div>

    </div>
</body>
</html>
代码_搬运工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts报表系统.zip
11-22
基于echarts饼状图、柱状图拆线图合成，表状图，等效果，并从json调用数据实现了动态加载数据的效果。
echarts滚动条滚动表格数据跟着变化
zhaoyifei01的博客
04-23 1328
【代码】echarts滚动条滚动表格数据跟着变化。
echarts游标 + dataV表格动态
qq_33404590的博客
02-02 245
echarts游标
没有那么难，基于 Echarts + Python Flask 动态实时大屏轻松可以实现
m0_59596937的博客
10-06 5108
支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。目前开通了技术交流群，群友已超过3000人，添加时最好的备注方式为：来源+兴趣方向，方便找到更快获取资料、入群。方式②、微信搜索公众号：Python学习与数据挖掘，后台回复：大屏。方式①、添加微信号：dkl88191，备注：来自CSDN+大屏。支持在每个echarts图表中独立控制定时更新的间隔。对横跨多个行列的格子定义。
Echarts动态生成图表，图表类型进行切换，长数据区域展示
yolo_link的博客
07-30 4052
也就是x轴，y轴的数据啦，你可以直接定义好，也可以使用接口数据（这样就是属于动态的了）。具体的内容在配置项里讲—>>>就是你在这个容器内，设置了其他的开关控制数据的变化。这时候呢，之前渲染好的图表就要替换成依靠新数据生成的新图表。千万千万不要选择直接替换！！！你会发现，新图表和老图表直接哥俩好，重叠在一起了。。。不能在单个容器上初始化多个 ECharts 实例功能看着老全了，就是有bug。动态类型切换的时候，活性不是很自由的切换。多句嘴，之前Echarts的工具栏的提示是中文的，现在的版本一般都提示英文。
ECharts使用心得(echart map)
02-06
上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现...
解决echarts数据二次渲染不成功的问题
11-20
最近在使用echarts做报表需求，二次生成报表时数据合并,无法正确显示。 第一次渲染： 第二次渲染： 可以看到这里的echarts项的series变为2个(如上图)，但是渲染后的效果series项还是和第一次相同。 解决办法： ...
JimuReport:积木报表，是一款免费的企业级低代码报表！比如excel操作风格，在线拖拽完成报表设计！功能涵盖
03-22
吉木报告v1.3.0-beta | 20210319功能涵盖，数据报表，打印设计，图表报表，大屏设计等！ Web版报表设计器，可以使用excel操作风格，通过拖拽完成报表设计。秉承“简单，易用，专业”的产品理念，极大地降低报表开发...
vue实现折线图 可按时间查询
10-14
主要为大家详细介绍了vue实现折线图，可按时间查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Python Flask + Echarts 轻松制作动态酷炫大屏（ 附代码）
Python数据挖掘
02-27 7824
说明: 其中做了。​。
Echarts图——饼图动态
qq_44891434的博客
03-10 2721
Echarts图——饼图动态 代码 <template> <div style="width: 100%; height: 100%" id="chartsL"></div> </template> <script> import echarts from "echarts"; export default { mounted() { this.drawLine(); }, methods: { drawLin.
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
仙魁XAN
08-19 7220
Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
echarts动态图表
02-07 969
option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { // data:['最新成交价', '预购队列'] data:['最新成交价'] },
前端使用Echart实现动态图表
PCGuo999的博客
06-29 3578
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts 包含了以下特性：(1)下载的源代码也可以在 ECharts 的官网上直接下载更多丰富的版本，包含了不同主题跟语言，下载地址：https://echarts.apache.org/zh/download.html(2)使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 3.使用 (1)导入echart.js (2)为 ECharts 准备一
echarts动态报表
Wanglas的博客
06-29 978
php请求部分//会员增长数量 public function vipInc(){ $name='user'; $user=M($name); //计算7天会员增长数量 for ($i=1,$j=0 ; $i < 8; $i++,$j++) { $today=strtotime(date('Ymd'));
动态创建多个echarts图表
热门推荐
qq_34158117的博客
05-24 1万+
效果: <template> <div class="wrapper"> <Row v-for="(items, index) in secondeData" :key="index"> <Col span="12" v-for="m in items" :key="m"> <div ...
Echarts 实现报表功能
Slien_zuo的博客
03-11 6013
当前项目有个报表的模块,之前想用highcharts来实现,但是最近CSDN上了解到百度已经将Echarts开源了,而且还是一个反响不错的开源框架, 借此提议项目组用这框架实现业务的需求.一. 首先下载echarts.js   在此提供官网的地址 http://echarts.baidu.com/download.html二. 引入Echarts&lt;!DOCTYPE html&gt; &lt;...
产品-Axure9（英文版），使用Echarts动态表格
Blog belong to 二狗
12-02 641
产品-Axure9（英文版），使用Echarts动态表格
echarts ajax动态加载数据
最新发布
05-11
Echarts 的数据可以通过 ajax 动态加载，以下是一个简单的示例： 1. HTML 页面中引入 echarts 和 jQuery 库 ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值