1. Echarts环境配置

https://www.echartsjs.com/zh/download.html

选择需要的，然后等待Build完成之后，就会自动弹出下载框啦！

把下载好的js放在web目录下~

然后在对应的jsp内导入噢~<script src="echarts.min.js"></script>

2.Echarts代码

https://www.echartsjs.com/examples/zh/index.html官方文档非常好使！大拇指！

参考博客:https://blog.csdn.net/qq_41186788/article/details/79607005(实例）

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="<%=request.getContextPath()%>/echarts/echarts.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script>

<title>Insert title here</title>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>

</body>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>

3.EL表达式

先在Servlet里setAttribute噢！

Map:

List

直接f.属性名就好啦！

4.EL表达式在js里如何使用呢~

https://blog.csdn.net/qq_38880700/article/details/82771822（el表达式循环遍历数组,list和json）

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var pants=[];
<c:forEach items="${list}" var="l">
pants.push("${l}");
</c:forEach>
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: pants
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

【JavaWeb+Echarts+EL表达式】用图表形式展示数据的更多相关文章

  1. JavaWeb基础—EL表达式与JSTL标签库

    EL表达式: EL 全名为Expression Language.EL主要作用 获取数据(访问对象,访问数据,遍历集合等) 执行运算 获取JavaWeb常用对象 调用Java方法(EL函数库) 给出一 ...

  2. JavaWeb 之 EL表达式

    EL 表达式 一.概述 1.概念 EL 表达式:Expression Language 表达式语言. 2.作用 替换和简化 jsp 页面中 java 代码的编写. 3.语法格式 ${表达式} 4.注意 ...

  3. JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】

    什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...

  4. javascript-使用el表达式获取后台传递的数据

      js获取后台数据 CreateTime--2017年5月26日16:14:14Author:Marydon 在js中使用el表达式的前提是:HTML引用js使用内联方式(即在JSP页面内部使用js ...

  5. 【JavaWeb】EL表达式&过滤器&监听器

    EL表达式和JSTL EL表达式 EL表达式概述 基本概念 EL表达式,全称是Expression Language.意为表达式语言.它是Servlet规范中的一部分,是JSP2.0规范加入的内容.其 ...

  6. 全球疫情统计APP图表形式展示

    全球疫情统计APP图表展示: 将该任务分解成三部分来逐个实现: ①爬取全球的疫情数据存储到云服务器的MySQL上 ②在web项目里添加一个servlet,通过参数的传递得到对应的json数据 ③设计A ...

  7. javaWEB与EL表达式

    EL表达式1. EL是JSP内置的表达式语言!  * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本!  * EL替代的是<%= ... %>,也 ...

  8. Javaweb之EL表达式

    1.EL表达式简介 EL全名为Expression Language.EL的主要作用为: 获取数据:EL表达式主要用于替换jsp页面中的脚本表达式,以从各种类型的web域中检索java对象,获取数据. ...

  9. IT兄弟连 JavaWeb教程 EL表达式中的运算

    EL语言支持算符运算符.关系运算符和逻辑运算符等,以完成常见的数据处理操作.所有的运算符说明见表7.2. 表2  El表达式中的运算符

随机推荐

  1. 剑指offer 面试题43. 1~n整数中1出现的次数

    leetcode上也见过一样的题,当时不会做 看了一下解法是纯数学解法就没看,结果剑指offer上也出现了这道题,那还是认真看下吧 对于数字abcde,如果第一位是1,比如12345,即计算f(123 ...

  2. 使用命令把SpringBoot项目打包成可运行的jar包（简洁，操作性强）

    前几天接到一个需求,要把原系统中一个数据处理小功能搬出原系统,拉出来单独做一个SpringBoot项目,然后打成jar包扔到Windows服务器上运行,这样数据处理的时候如果遇到堵塞就不至于整个系统都 ...

  3. Linux - Shell - #!/bin/bash

    概述 简单解释一下 shell 脚本卡头的 #!/bin/bash 水一篇, 少一篇 背景 shell 脚本中的注释 通常是 以# 卡头的行 但是有时候执行 shell 的时候, 会有这种内容 #!/ ...

  4. 题解 UVA1335 【Beijing Guards】

    UVA1335 Beijing Guards 双倍经验:P4409 [ZJOI2006]皇帝的烦恼 如果只是一条链,第一个护卫不与最后一个护卫相邻,那么直接贪心,找出最大的相邻数的和. 当变成环,贪心 ...

  5. 主库增加表空间导致DG同步失败

    由于主库表空间不足,同事给表空间增加数据文件,第二天收到反馈说备库未同步. 1.主.备查看归档序列号,发现主.备归档正常同步. SQL>archive log list 2.在主库端查询v$ar ...

  6. 偏移分页器、游标分页器、Django-filter插件

    复习 """ 1.drf-jwt签发与校验源码 签发token的请求 - 登录请求 - ObtainJSONWebToken - post - 将账号密码丢给序列化类处理 ...

  7. 吴裕雄 python 机器学习——多项式贝叶斯分类器MultinomialNB模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,naive_bayes from skl ...

  8. Java中查询某个日期下所有时间段的数据

    除了利用时间段进行查询外,还有一个方法: 利用mybatis中的函数,将datetime转为date <if test="purch_date!= null and purch_dat ...

  9. [远古回忆]发现了以前的一些wow截图 这里也备份一下

    看邮箱里面通知 网易相册24号就停服了..赶紧找到以前的账号登录了进去瞅瞅 看看有什么重要的东西需要备份的 想不到发现了很多惊喜 虽然因为年代久远和网易相册提供的免费服务 很多文件图片和其他资料有接近 ...

  10. JVM工具使用和Linux-top命令解析

    top 命令 top 命令查看现在线程占用资料的情况. 第三行,cpu状态信息,具体属性说明如下: us — 用户空间占用CPU的百分比.(重要) sy — 内核空间占用CPU的百分比. ni — 改 ...