【JavaWeb+Echarts+EL表达式】用图表形式展示数据
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表达式】用图表形式展示数据的更多相关文章
- JavaWeb基础—EL表达式与JSTL标签库
EL表达式: EL 全名为Expression Language.EL主要作用 获取数据(访问对象,访问数据,遍历集合等) 执行运算 获取JavaWeb常用对象 调用Java方法(EL函数库) 给出一 ...
- JavaWeb 之 EL表达式
EL 表达式 一.概述 1.概念 EL 表达式:Expression Language 表达式语言. 2.作用 替换和简化 jsp 页面中 java 代码的编写. 3.语法格式 ${表达式} 4.注意 ...
- JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
- javascript-使用el表达式获取后台传递的数据
js获取后台数据 CreateTime--2017年5月26日16:14:14Author:Marydon 在js中使用el表达式的前提是:HTML引用js使用内联方式(即在JSP页面内部使用js ...
- 【JavaWeb】EL表达式&过滤器&监听器
EL表达式和JSTL EL表达式 EL表达式概述 基本概念 EL表达式,全称是Expression Language.意为表达式语言.它是Servlet规范中的一部分,是JSP2.0规范加入的内容.其 ...
- 全球疫情统计APP图表形式展示
全球疫情统计APP图表展示: 将该任务分解成三部分来逐个实现: ①爬取全球的疫情数据存储到云服务器的MySQL上 ②在web项目里添加一个servlet,通过参数的传递得到对应的json数据 ③设计A ...
- javaWEB与EL表达式
EL表达式1. EL是JSP内置的表达式语言! * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本! * EL替代的是<%= ... %>,也 ...
- Javaweb之EL表达式
1.EL表达式简介 EL全名为Expression Language.EL的主要作用为: 获取数据:EL表达式主要用于替换jsp页面中的脚本表达式,以从各种类型的web域中检索java对象,获取数据. ...
- IT兄弟连 JavaWeb教程 EL表达式中的运算
EL语言支持算符运算符.关系运算符和逻辑运算符等,以完成常见的数据处理操作.所有的运算符说明见表7.2. 表2 El表达式中的运算符
随机推荐
- gradle-技能保存
gradle编译java springboot,指定使用哪个环境配置文件 首先在build.gradle里面声明一个变量 def profileName = project.hasProperty(& ...
- win10 解决.net framework 3.5 安装报错 0x80240438
打开注册表:cmd+r 输入regedit,确定:找到路径HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\WindowsUpdate\AU ...
- 【网易官方】极客战记（codecombat）攻略-地牢-轰轰
关卡连接: https://codecombat.163.com/play/level/pong-pong 挑战:使用迄今为止学到的所有编程技巧编写最短的解决方案! 简介: 单挑,这是特殊的挑战关卡! ...
- 如何开通linux机器的对外访问端口
1.先查看是否已经开通 2.没有开通,去linux机器查看防火墙,确实没有开通 3.修改防火墙 vim /etc/sysconfig/iptables 4.重启防火墙之后重新查看已经可以看到8000端 ...
- Go标准库之Context
文章引用自 Go标准库Context 在 Go http包的Server中,每一个请求在都有一个对应的 goroutine 去处理.请求处理函数通常会启动额外的 goroutine 用来访问后端服 ...
- 【C语言】实参求值的顺序
#include<stdio.h> void fun(int x,int y) { printf("x=%d,y=%d",x,y); } int main() { in ...
- 每天进步一点点------入门视频采集与处理（BT656简介）
凡是做模拟信号采集的,很少不涉及BT.656标准的,因为常见的模拟视频信号采集芯片都支持输出BT.656的数字信号,那么,BT.656到底是何种格式呢? 本文将主要介绍 标准的 8bit B ...
- yii2 password hash生成与验证方法
1.生成 $password是明文.如:123456 $this->password_hash = Yii::$app->security->generatePasswordHash ...
- knn 算法 k个相近邻居
# 一个最基本的例子 #样本数据的封装 feature = [[170,70,42],[166,56,39],[188,90,44],[165,88,40],[170,66,40],[176,80,4 ...
- selenium+python自动化用例登陆界面模板
一.基本逻辑 1.自动填写用户名和密码登录成功后跳转到相应页面 2.验证相应页面的url与给定的url是否一致,如果一致则测试通过,如果不一致则不通过 二.以jenkins登陆界面为例,代码如下 fr ...