zoukankan      html  css  js  c++  java

  • 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=" 900px; height: 350px;"></div>  
    4.     <div id="main2" style=" 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=" 900px; height: 350px;"></div>  
    14.     <div id="main2" style=" 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 示例', //主标题文本，支持使用   换行。  
    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=" 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 示例', //主标题文本，支持使用   换行。  
    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后前端妹子，爱编程，爱运营，爱折腾。
    坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
  • 相关阅读:
    【数据结构】线性表&&顺序表详解和代码实例
    【智能算法】超详细的遗传算法(Genetic Algorithm)解析和TSP求解代码详解
    【智能算法】用模拟退火(SA, Simulated Annealing)算法解决旅行商问题 (TSP, Traveling Salesman Problem)
    【智能算法】迭代局部搜索（Iterated Local Search, ILS）详解
    10. js时间格式转换
    2. 解决svn working copy locked问题
    1. easyui tree 初始化的两种方式
    10. js截取最后一个斜杠后面的字符串
    2. apache整合tomcat部署集群
    1. apache如何启动
  • 原文地址：https://www.cnblogs.com/ting6/p/9725610.html
Copyright © 2011-2022 走看看