Echarts的简单使用

最近做了一个简单的数据统计页面，首选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