原文链接：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. vue-cli 和webpack

    https://note.youdao.com/share/?id=d1851db9f0fe0a691798fac823849564&type=notebook#/C045BC3E7DC144 ...

  2. Mahout应用

    不多说,直接上干货! Mahout作为Apache基金会的顶级项目之一,Mahout的应用也极其广泛,一般分为商业应用和学术应用. 在商业应用中,Adobe AMP公司使用Mahout的聚类算法把用户 ...

  3. Trie&可持久化Trie

    WARNING:以下代码未经测试,若发现错误,欢迎指出qwq~ Trie树(字典树) 一种简单的数据结构,可存储大量字符串,可在$O(len)$的时间内完成插入,删除,查找等操作. 下面是一个简单的例 ...

  4. Navigator对象关于语言的属性

    [摘要]在做国际化WEB项目的时候,遇到了一个根据用户浏览器所使用的自然语言切换默认语言版本的问题.于是,整理了这篇文章. 首先,W3Cschool关于Navigator的各个属性值说的很明确了,这里 ...

  5. 用vue.js的v-for，v-if，computed写一个分页样式

    在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...

  6. 初识ThreadLocal

    近期公司在进行Java开发者的招聘活动,当中有一道面试题是这种:"请简单描写叙述一下ThreadLocal类的作用." 结果发现有非常多的面试者没有听说过ThreadLocal或者 ...

  7. 循环体（for/while）循环变量的设置

    1. 求滑动(移动)平均(moving average) double partialSum = 0; for (int i = 0; i < M-1; ++i) partialSum += A ...

  8. Scala具体解释---------数组、元组、映射

    一.数组 1.定长数组 声明数组的两种形式: 声明指定长度的数组 val 数组名= new Array[类型](数组长度) 提供数组初始值的数组,无需newkeyword Scala声明数组时.须要带 ...

  9. PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

  10. jmeter--使用badboy录制脚本

    JMeter录制脚本有多种方法,其中最常见的方法是用第三方工具badboy录制,另外还有JMeter自身设置(Http代理服务器+IE浏览器设置)来录制脚本,但这种方法录制出来的脚本比较多且比较乱,个 ...