当前位置:   article > 正文

Echarts的简单使用_echarts上加条件查询框

echarts上加条件查询框

最近做了一个简单的数据统计页面,首选Echarts 先看一下图1吧
 图1
这个统计很简单 就是统计人员的发帖量和关注量 然后点击年份的时候可以查看当前年 十二个月的数据如图2
图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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

前台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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/828477
推荐阅读
相关标签
  

闽ICP备14008679号