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后前端妹子，爱编程，爱运营，爱折腾。
    坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
  • 相关阅读:
    Spark学习笔记1
    Scala学习笔记
    Scala实现网站流量实时分析
    使用Docker搭建Spark集群（用于实现网站流量实时分析模块）
    使用Docker搭建Hadoop集群(伪分布式与完全分布式)
    Docker配置阿里云镜像源
    从centos7镜像到搭建kubernetes集群（kubeadm方式安装）
    来做一个简单的成绩查询！（输入输出）
    String类的知识点（不断更新）
    人机猜拳游戏Java
  • 原文地址：https://www.cnblogs.com/wangting888/p/9701605.html
Copyright © 2011-2022 走看看