赞
踩
最近做了一个简单的数据统计页面,首选Echarts 先看一下图1吧
这个统计很简单 就是统计人员的发帖量和关注量 然后点击年份的时候可以查看当前年 十二个月的数据如图2
首先去Echarts下载最新版本:Echarts下载
目前我使用的是最新版本:echarts-5.3.2
下载后解压文件如下图
进入dist文件夹 将echarts.js或echarts.min.js放到项目中的js文件夹里 方便使用
前台代码HTML:
<!-- 面板开始 --> <div class="form-group" style="margin-left: 15%;"> <!-- 年份下拉框 --> <label for="name" style="margin-left: -8%;">年份:</label> <select id="selectYear" class="form-control" style="display: initial; width:15%"></select> <!-- 员工下拉框 --> <label for="name" style="margin-left: 1%;">员工:</label> <select id="selectUser" class="form-control" style="display: initial; width:15%"></select> <!-- 查询 --> <button id="selectButton" οnclick="myCahrts()" type="button" class="btn btn-primary" style="margin-left:1%;">查询</button> </div> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="mainLeft" style="width: 850px;height:600px;margin: 3% 0 0 -0.5%;float:left;"></div> <div id="mainRight" style="width: 810px;height:600px;margin: 3% 0 0 -0.5%;float:right;"></div> <!-- 面板结束 --> <!-- 引入所需的js --> <script th:src="@{/js/echarts.js}"></script>
前台js:
// 初始化页面 window.onload = function () { // 年份LIst var yearList = eval("(" + $("#yearListValue").val() + ")"); // 发表文章员工list var userList = eval("(" + $("#userListValue").val() + ")"); // 清空年份下拉框 $("#selectYear").empty(); // 清空员工下拉框 $("#selectUser").empty(); $("#selectYear").prepend("<option value=''>请选择</option>"); $("#selectUser").prepend("<option value=''>请选择</option>"); // 循环年份list 给年份下拉框赋值 for(var i=0; i<yearList.length;i++){ $("#selectYear").append("<option value="+ yearList[i] +">"+ yearList[i] +"年</option>"); } // 循环员工list 给员工下拉框赋值 for(var i=0; i<userList.length;i++){ $("#selectUser").append("<option value="+ userList[i].id +">"+ userList[i].name +"</option>"); } // 调用Echarts方法 初始化组件 myCahrts(); } // ajax获取Echarts数据 function myCahrts
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。