<%@ include file="/config.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>Insert title here</title>
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<script type="text/javascript">
/*$(document).ready(function(){
dataX();
dataY();
});
function dataX(){
var arr=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
success:function(data)
{
var rows=eval(data);
//调用函数获取值，转换成数组模式
for(var i=0;i<rows.length;i++)
{
arr.push(rows[i].accountUse);
}
}
});
return arr;
}
function dataY(){
var arrY=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
success:function(data)
{
var rows=eval(data);
//调用函数获取值，转换成数组模式
for(var i=0;i<rows.length;i++)
{
arrY.push(rows[i].accountAmt);
}
}
});
return arrY;
}*/
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text: '固定支出统计'
},
tooltip : {
trigger: 'axis'
},
legend: {
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {
show : true,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data :(function(){
var arr=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
async: false,
success:function(data)
{
var rows=eval(data);
//调用函数获取值，转换成数组模式
for(var i=0;i<rows.length;i++)
{
arr.push(rows[i].accountUse);
}
}
});
return arr;
})()
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'支出费用',
type:'bar',
data:(function(){
var arrY=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
async: false,
success:function(data)
{
var rows=eval(data);
//调用函数获取值，转换成数组模式
for(var i=0;i<rows.length;i++)
{
arrY.push(rows[i].accountAmt);
}
}
});
return arrY;
})()
}
]
});
</script>
</html>
当用Ajax方式请求后台数据是一定要设置async: false，否则无法获取数据
/**
* 固定支出统计
*
*/
@Entity
@Table(name = "dt_account_fixed")
public class FixedExpensesAccountEntity extends BaseEntity {
/** */
private static final long serialVersionUID = 1851384083686290290L;
@Id
@GeneratedValue
private Integer id;
private String accountUse;// 用途
private String accountAmt;// 金额
private String createId;// 创建id
private String createDate;// 创建日期
private String updateId;// 更新id
private String updateDate;// 更新日期
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAccountUse() {
return accountUse;
}
public void setAccountUse(String accountUse) {
this.accountUse = accountUse;
}
public String getAccountAmt() {
return accountAmt;
}
public void setAccountAmt(String accountAmt) {
this.accountAmt = accountAmt;
}
public String getCreateId() {
return createId;
}
public void setCreateId(String createId) {
this.createId = createId;
}
public String getCreateDate() {
return createDate;
}
public void setCreateDate(String createDate) {
this.createDate = createDate;
}
public String getUpdateId() {
return updateId;
}
public void setUpdateId(String updateId) {
this.updateId = updateId;
}
public String getUpdateDate() {
return updateDate;
}
public void setUpdateDate(String updateDate) {
this.updateDate = updateDate;
}
}
/**
*
* 柱状图
*/
@Scope("prototype")
@Controller
public class FixedExpensesAccountAction extends BaseAction<FixedExpensesAccountEntity> {
/** */
private static final long serialVersionUID = 1L;
private FixedExpensesAccountEntity accountEntity = getModel();
Map jsonMap = new HashMap();
List<FixedExpensesAccountEntity> jsonList = new ArrayList<FixedExpensesAccountEntity>();
@Resource(name = "fixedExpensesAccountService")
private FixedExpensesAccountService fixedExpensesAccountService;
public String dataXY() {
jsonList = fixedExpensesAccountService.selectAll();
return "dataXY";
}
public List<FixedExpensesAccountEntity> getJsonList() {
return jsonList;
}
public void setJsonList(List<FixedExpensesAccountEntity> jsonList) {
this.jsonList = jsonList;
}
public Map getJsonMap() {
return jsonMap;
}
public void setJsonMap(Map jsonMap) {
this.jsonMap = jsonMap;
}
service和dao类就不写，service和dao主要就是实现的查询
相关推荐
本篇文章将详细探讨如何使用ECharts来创建动态柱状图，满足大屏可视化对实时数据监测的需求。 首先，我们需要理解ECharts的基本使用方法。ECharts是基于HTML5 Canvas的，因此在使用前，确保浏览器支持Canvas。...
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
ECharts 是一个由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，如柱状图、饼图等，能够方便地与后端数据进行交互，动态展示数据。本篇文章将详细讲解如何利用ECharts从后台获取数据并展示在前端...
关于ECharts柱状图-动态排序柱状图的代码实现，可以从提供的链接中获取详细讲解。链接指向的是一个博客文章，该文章详细介绍了如何使用ECharts来创建动态排序柱状图，包括相关的代码示例和实现逻辑的解释。通过阅读...
第一使用csdn分享资源，略激动大笑，本系统使用servlet+mysql+echarts 技术实现六种图表（柱状图、饼状图、折线图、散点图、雷达图、仪表盘）的静态和异步交互，使用的开发工具是eclipse。别的不多说了，需要的下载...
ECharts柱状图的代码实现不仅仅局限于单一的图表展示，它还可以通过与后端服务的交互，实现数据的动态加载和更新。比如，用户可以通过Ajax请求获取最新的统计数据，并在网页中动态展示这些数据，这在大屏可视化项目...
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
在大屏可视化应用中，ECharts柱状图作为一种重要的数据展示方式，可以使得数据更加生动直观，方便决策者在短时间内获取关键信息。通过不同颜色和形状的柱形，用户可以直观地比较各类数据的差异，并通过交互式操作...
ECharts柱状图是使用JavaScript的图表库ECharts来实现的，它是一种用于在网页上展示数据的视觉工具。柱状图是数据可视化中最常用的一种图表，它通过柱子的高度来表示数据的大小，适用于展示分类数据的数量对比。...
ECharts柱状图-柱图23.rar这个压缩包文件，很可能是一个为特定的数据可视化需求而设计的资源包，它通过ECharts库实现了一个或多个柱状图，旨在通过视觉方式有效地传达数据信息，适合应用于统计分析和大屏展示等场景...
ECharts柱状图是基于百度开源的一个数据可视化工具库ECharts（Enterprise Charts）中的一种图表类型，它用于在网页上展示数据的分布情况。柱状图是一种非常直观的图表形式，它将数据以水平或垂直的柱状结构展现出来...
ECharts柱状图是一种基于ECharts数据可视化库的图表类型，用于在网页上以柱状图形式展现数据。柱状图是一种常用的数据可视化工具，可以清晰地展示各类别数据的数量对比情况。ECharts是由百度团队推出的一个开源的...
4）利用ajax技术异步请求数据，并在成功获取数据后动态地更新图表的显示；5）可对echarts图表进行基本的样式配置。通过以上步骤，就可以实现数据的动态加载，并在网页上展示出美观且功能丰富的图表。
根据给定的压缩包文件信息，我们可以推断出“ECharts柱状图-柱图3”可能是一系列关于ECharts柱状图开发教程中的第三个实例，专注于讲解如何实现和自定义柱状图的展示效果。由于提供了具体的博客链接，读者可以通过...
由于图表的制作往往需要结合实际的数据源，用户可能还需要了解如何从后端获取数据，并将这些数据动态地应用到ECharts图表中。在本压缩包提供的文档或示例代码中，应该会包括如何将数据绑定到ECharts柱状图的具体操作...
ECharts柱状图是进行数据展示和分析的强有力工具，它能够帮助用户在各种复杂的数据分析场景中，清晰、直观地展示数据，并且通过图表的交互性，提升数据的可用性。通过学习“ECharts柱状图-柱图16”及其相关链接，...
自己练手写的几个例子： demo1和demo2是echart两种不同的写法，数据是写死的，仅供参考... demo3、demo4、demo5是ajax动态从后台获取json数据的例子。 demo3是折线图和柱状图。 demo4是饼图。 demo5是双折线(柱状)图。
在本文中，我们将探讨如何使用Vue.js和ECharts库来实现柱状图的动态展示。Vue.js是一个轻量级的前端框架，而ECharts则是一个流行的JavaScript数据可视化库，提供了丰富的图表类型，如柱状图、折线图等。下面我们将...
ECharts柱状图是其众多图表类型中的一种，特别适用于展示和比较不同类别数据的数量大小。堆叠柱状图则是柱状图的一种变体，它允许将多个柱状图重叠在一起，以展示部分与整体之间的关系。 在ECharts中创建堆叠柱状图...
ECharts柱状图是基于JavaScript的开源可视化库ECharts开发的，它能够帮助用户在网页上快速实现各种数据的可视化展示，特别是柱状图。柱状图是一种常用的图表类型，它通过条形的长度来表示数据的大小，可以清晰地对比...