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

一：下载 echarts.min.js

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

二： echats入门案例

1、引入 ECharts 和 JQuery

  1. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  2. <script src="./js/echarts.min.js"></script>

2、准备一个具备高宽的 DOM 容器。

  1. <body>
  2. <div id="main1" style="width: 900px; height: 350px;"></div>
  3. <div id="main2" style="width: 900px; height: 350px;"></div>
  4. </body>

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

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

4、效果图

三：EChats + Ajax 完成数据交互

1、封装EChats返回的结果集

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

2、Controller层，模拟数据

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

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

  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完整代码

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

4、效果图

文末福利：

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

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

【领取方法】

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

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

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

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

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

EChats+Ajax之柱状图的数据交互的更多相关文章

  1. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  2. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  3. jquery ajax 后台和前台数据交互 C#

    <input type="button" id="updateInfo" value="更改货载重量" /> <div i ...

  4. AJAX请求.net controller数据交互过程

    AJAX发出请求 $.ajax({ url: "/Common/CancelTaskDeal", //CommonController下的CancelTaskDeal方法 type ...

  5. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  6. JavaScript模板引擎实现数据交互

    经过1年的磨练,近期终于稍微明白到,前端是怎么做到企业要求的:数据交互. 1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事? 2,可以通过JS框架和JS模板来实现 ...

  7. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  8. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  9. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

随机推荐

  1. js23---工厂模式1

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. Android开发经验之点击图片判断是否在图片范围之内

    package xiaosi.grivaty; import android.content.Context; import android.graphics.Bitmap; import andro ...

  3. Appium_python3 抓取客户端toast

    在客户端登录或者退出登录的时候会有吐司提示,因此需要抓取来验证用户登录成功或者注销成功: 在获取toast之前需要添加   desired_caps['automationName'] = 'Uiau ...

  4. numpy_basic2

    # 六.numpy的常用函数 1. 读取文件 逻辑上可被解释为二维数组的文本文件: 数据项1<分隔符>数据项2<分隔符>...<分隔符>数据项n numpy.loa ...

  5. Microsoft SQL Server Version List（SQL Server 版本）

    原帖地址 What version of SQL Server do I have? This unofficial build chart lists all of the known Servic ...

  6. layout-maxWidth属性用法

    对于maxWidth属性,相信大家都不陌生.不过,今天我遇到了一个问题,就是当我希望一个relayout的宽度有个最大值的时候,用maxWidth却没办法实现.这里总结下maxWidth 的用法 1. ...

  7. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第三篇：ASP.NET MVC全局观

    摘要      本文对ASP.NET MVC的全局运行机理进行一个简要的介绍,以使得朋友们更好的理解后续文章. 前言      在上一篇文章中,我们实现了第一个ASP.NET MVC页面.对于没有接触 ...

  8. [Angular] Update FormArray with patchValue

    Currently, patchValue doesn't support update FormArray. The workarround is you need to empty the for ...

  9. [Android 性能优化系列]内存之提升篇--应用应该怎样管理内存

    大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...

  10. Altium Designer中敷铜和板子一样大