EChats+Ajax之柱状图的数据交互

原文链接：https://blog.csdn.net/qq_37936542/article/details/79723710

一：下载 echarts.min.js



选择完整版进行下载，精简版和常用版限制的某些功能




二： echats入门案例

1、引入 ECharts 和 JQuery

[html] view plain copy
  1. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  2. <script src="./js/echarts.min.js"></script>  

2、准备一个具备高宽的 DOM 容器。
[html] view plain copy
  1. <body>  
  2.   
  3.     <div id="main1" style="width: 900px; height: 350px;"></div>  
  4.     <div id="main2" style="width: 900px; height: 350px;"></div>  
  5.   
  6. </body>  


3、然后通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Insert title here</title>  
  8. </head>  
  9. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  10. <script src="./js/echarts.min.js"></script>  
  11. <body>  
  12.   
  13.     <div id="main1" style="width: 900px; height: 350px;"></div>  
  14.     <div id="main2" style="width: 900px; height: 350px;"></div>  
  15.   
  16. </body>  
  17.   
  18. <script type="text/javascript">  
  19.     var zChart = echarts.init(document.getElementById("main1"));// 柱形图模板一  
  20.   
  21.     var option = {  
  22.         color : [ '#3398DB' ],  
  23.         title : {  
  24.             text : 'ECharts 示例', //主标题文本，支持使用 \n 换行。  
  25.             link : '', //主标题文本超链接  
  26.             textStyle : { //该属性用来定义主题文字的颜色、形状等  
  27.                 color : '#3398DB',  
  28.             }  
  29.         },  
  30.         tooltip : {  
  31.             trigger : 'axis',  
  32.             axisPointer : { // 坐标轴指示器，坐标轴触发有效  
  33.                 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'  
  34.             }  
  35.         },  
  36.         grid : {  
  37.             left : '6%',  
  38.             right : '20%',  
  39.             bottom : '20%',  
  40.             containLabel : true  
  41.         },  
  42.         xAxis : [ { //x轴列表展示  
  43.             type : 'category',  
  44.             data : [ '哈士奇', '斗牛犬', '田园犬', '吉娃娃' ],  
  45.         } ],  
  46.         yAxis : [ { //定义y轴刻度  
  47.             type : 'value',  
  48.             scale : true,  
  49.             name : '月销量',  
  50.             max : 140,  
  51.             min : 0,  
  52.             splitNumber : 20,  
  53.             boundaryGap : [ 0.2, 0.2 ]  
  54.         } ],  
  55.         series : [ {  
  56.             name : '销量',  
  57.             type : 'bar', //bar 柱状图     line 折线图 等  
  58.             barWidth : '40%', //柱的宽度  
  59.             data : [ '120', '30', '80', '65' ]  
  60.         } ]  
  61.     };  
  62.     zChart.setOption(option);  
  63.   
  64.     var xChart = echarts.init(document.getElementById('main2'));// 柱形图模板二  
  65.   
  66.     var option1 = {  
  67.         title : {  
  68.             text : $("#signSet option:selected").val() == '' ? $(  
  69.                     "#signSet option:eq(1)").html() : $(  
  70.                     "#signSet option:selected").html(),  
  71.         },  
  72.         color : [ '#2474f6', '#006699', '#d84a38' ],  
  73.         tooltip : {  
  74.             trigger : 'axis',  
  75.             axisPointer : { // 坐标轴指示器，坐标轴触发有效  
  76.                 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'  
  77.             }  
  78.         },  
  79.         legend : {  
  80.             data : [ '正常', '迟到', '未到' ]  
  81.         },  
  82.         grid : {  
  83.             left : '3%',  
  84.             right : '4%',  
  85.             bottom : '3%',  
  86.             containLabel : true  
  87.         },  
  88.         xAxis : [ {  
  89.             type : 'category',  
  90.             data : [ '一班', '二班', '三班', '四班' ]  
  91.         } ],  
  92.         yAxis : [ {  
  93.             type : 'value',  
  94.             scale : true,  
  95.             name : '月销量',  
  96.             max : 60,  
  97.             min : 0,  
  98.             splitNumber : 20,  
  99.             boundaryGap : [ 0.2, 0.2 ]  
  100.         } ],  
  101.         series : [ {  
  102.             name : '正常',  
  103.             type : 'bar',  
  104.             data : [ '54', '49', '58', '56' ]  
  105.         },  
  106.   
  107.         {  
  108.             name : '迟到',  
  109.             type : 'bar',  
  110.             data : [ '5', '8', '4', '2' ]  
  111.         }, {  
  112.             name : '未到',  
  113.             type : 'bar',  
  114.             data : [ '3', '2', '1', '2' ],  
  115.   
  116.             markLine : {  
  117.                 lineStyle : {  
  118.                     normal : {  
  119.                         type : 'dashed'  
  120.                     }  
  121.                 },  
  122.                 data : [ [ {  
  123.                     type : 'min'  
  124.                 }, {  
  125.                     type : 'max'  
  126.                 } ] ]  
  127.             }  
  128.         }, ]  
  129.     }  
  130.     xChart.setOption(option1);  
  131. </script>  
  132. </html>  


4、效果图



三：EChats + Ajax 完成数据交互


1、封装EChats返回的结果集

[html] view plain copy
  1. package com.debo.echats;  
  2.   
  3. import java.util.List;  
  4.   
  5. /**  
  6.  * 封装echats需要的结果集  
  7. * @ClassName: EchatsRes   
  8. * @Description: TODO  
  9. * @author A18ccms a18ccms_gmail_com   
  10. * @date 2018年3月28日 上午9:38:54   
  11. *  
  12.  */  
  13. public class EchatsRes {  
  14.       
  15.     private List<String> xData;  
  16.     private List<Integer> yData;  
  17.     public List<String> getxData() {  
  18.         return xData;  
  19.     }  
  20.     public void setxData(List<String> xData) {  
  21.         this.xData = xData;  
  22.     }  
  23.     public List<Integer> getyData() {  
  24.         return yData;  
  25.     }  
  26.     public void setyData(List<Integer> yData) {  
  27.         this.yData = yData;  
  28.     }  
  29.     @Override  
  30.     public String toString() {  
  31.         return "EchatsRes [xData=" + xData + ", yData=" + yData + "]";  
  32.     }  
  33. }  

2、Controller层，模拟数据
[html] view plain copy
  1. package com.debo.echats;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.stereotype.Controller;  
  7. import org.springframework.web.bind.annotation.RequestMapping;  
  8. import org.springframework.web.bind.annotation.RequestMethod;  
  9. import org.springframework.web.bind.annotation.ResponseBody;  
  10.   
  11. @Controller  
  12. @RequestMapping("/echats")  
  13. public class Echats {  
  14.   
  15.       
  16.     @ResponseBody //返回json格式数据  
  17.     @RequestMapping(method = RequestMethod.GET)  
  18.     public EchatsRes echats() {  
  19.           
  20.         //为了简单,这里省略从数据库查询数据,选择直接模拟  
  21.         List<String> xList = new ArrayList<String>();  
  22.         List<Integer> yList = new ArrayList<Integer>();  
  23.   
  24.         xList.add("哈士奇");  
  25.         xList.add("斗牛犬");  
  26.         xList.add("田园犬");  
  27.         xList.add("吉娃娃");  
  28.   
  29.         yList.add(120);  
  30.         yList.add(30);  
  31.         yList.add(80);  
  32.         yList.add(55);  
  33.   
  34.         EchatsRes echatsRes = new EchatsRes();  
  35.         echatsRes.setxData(xList);  
  36.         echatsRes.setyData(yList);  
  37.   
  38.         return echatsRes;  
  39.     }  
  40.   
  41. }  

注意：@responseBody注解需要jackson依赖

[html] view plain copy
  1. <dependency>  
  2.     <groupId>com.fasterxml.jackson.core</groupId>  
  3.     <artifactId>jackson-core</artifactId>  
  4.     <version>2.4.3</version>  
  5. </dependency>  
  6. <dependency>  
  7.     <groupId>com.fasterxml.jackson.core</groupId>  
  8.     <artifactId>jackson-databind</artifactId>  
  9.     <version>2.4.3</version>  
  10. </dependency>  

3、jsp完整代码

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>EChats和Ajax数据交互</title>  
  8.   
  9. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  10. <script src="./js/echarts.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14.     <div><input type="button" id="show" value="点击显示图表"></div>  
  15.     <!-- 柱状图 -->  
  16.     <div id="main" style="width: 900px; height: 350px;"></div>  
  17.   
  18. </body>  
  19.   
  20. <script type="text/javascript">  
  21.       
  22.     var zChart = echarts.init(document.getElementById("main"));// 柱形图模板  
  23.       
  24.     $("#show").on("click", function() {  
  25.         $.ajax({  
  26.             url : "/demo/echats.do",  
  27.             type : 'GET',  
  28.             success : function(data) {  
  29.                 fun(data.xData, data.yData);  
  30.             },  
  31.             error : function(data){  
  32.                 alert(1);  
  33.             }  
  34.         });  
  35.     })  
  36.   
  37.     function fun(x_data, y_data) {  
  38.   
  39.         var option = {  
  40.             color : [ '#3398DB' ],  
  41.             title : {  
  42.                 text : 'ECharts 示例', //主标题文本，支持使用 \n 换行。  
  43.                 link : '', //主标题文本超链接  
  44.                 textStyle : { //该属性用来定义主题文字的颜色、形状等  
  45.                     color : '#3398DB',  
  46.                 }  
  47.             },  
  48.             tooltip : {  
  49.                 trigger : 'axis',  
  50.                 axisPointer : { // 坐标轴指示器，坐标轴触发有效  
  51.                     type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'  
  52.                 }  
  53.             },  
  54.             grid : {  
  55.                 left : '6%',  
  56.                 right : '20%',  
  57.                 bottom : '20%',  
  58.                 containLabel : true  
  59.             },  
  60.             xAxis : [ { //x轴列表展示  
  61.                 type : 'category',  
  62.                 data : x_data,  
  63.             } ],  
  64.             yAxis : [ { //定义y轴刻度  
  65.                 type : 'value',  
  66.                 scale : true,  
  67.                 name : '月销量',  
  68.                 max : 140,  
  69.                 min : 0,  
  70.                 splitNumber : 20,  
  71.                 boundaryGap : [ 0.2, 0.2 ]  
  72.             } ],  
  73.             series : [ {  
  74.                 name : '销量',  
  75.                 type : 'bar', //bar 柱状图     line 折线图 等  
  76.                 barWidth : '40%', //柱的宽度  
  77.                 data : y_data  
  78.             } ]  
  79.         };  
  80.   
  81.         zChart.setOption(option);  
  82.     }  
  83.       
  84. </script>  
  85. </html>  

4、效果图




文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：jianshu.com/p/e8197d4d9

福利二：微信小程序入门与实战全套详细视频教程。


【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。





原文作者：祈澈姑娘
原文链接：jianshu.com/u/05f416aef
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。


posted @ 2018-03-28 16:46  前端视听  阅读(256)  评论(0)  编辑  收藏  举报