简单使用echarts
1.引入: <!-- 引入 echarts.js --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script> <!-- 引入jquery.js --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script><!---最好用<script></script>,不要<script/>--> 2.body: <!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div> 3.异步请求: var names = []; //类别数组(实际用来盛放X轴坐标值) var nums = []; //销量数组(实际用来盛放Y坐标值) $.ajax({ type: "post", async: true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url: "${pageContext.request.contextPath}/hello", //请求发送到TestServlet处 data: {}, dataType: "json", //返回数据形式为json success: function (result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 if (result) { for (var i = 0; i < result.length; i++) { names.push(result[i].name); //挨个取出类别并填入类别数组 } for (var i = 0; i < result.length; i++) { nums.push(result[i].score); //挨个取出销量并填入销量数组 } myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: '成绩', data: nums }] }); } }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }) 4.数据格式: ["1","2","3","4","5"];//后台传的数据一定要是这样的数据格式
只是为了更好的团圆...