<%@ 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从后台获取数据并展示在前端...
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
第一使用csdn分享资源，略激动大笑，本系统使用servlet+mysql+echarts 技术实现六种图表（柱状图、饼状图、折线图、散点图、雷达图、仪表盘）的静态和异步交互，使用的开发工具是eclipse。别的不多说了，需要的下载...
4）利用ajax技术异步请求数据，并在成功获取数据后动态地更新图表的显示；5）可对echarts图表进行基本的样式配置。通过以上步骤，就可以实现数据的动态加载，并在网页上展示出美观且功能丰富的图表。
自己练手写的几个例子： demo1和demo2是echart两种不同的写法，数据是写死的，仅供参考... demo3、demo4、demo5是ajax动态从后台获取json数据的例子。 demo3是折线图和柱状图。 demo4是饼图。 demo5是双折线(柱状)图。
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，用于在网页上展示数据。在C#环境中，我们可以利用Echarts与后端服务器进行交互，动态地从数据库或其他数据源获取...
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
首先，ECharts柱状图是一种常见的数据表示方式，适用于展示分类数据的数量差异。在ECharts中，你可以通过配置项设置柱状图的颜色、宽度、标签、数据项等属性，使得图表更加直观和具有吸引力。例如，你可以通过`...
在本文中，我们将探讨如何使用Vue.js和ECharts库来实现柱状图的动态展示。Vue.js是一个轻量级的前端框架，而ECharts则是一个流行的JavaScript数据可视化库，提供了丰富的图表类型，如柱状图、折线图等。下面我们将...
以下是一个简单的ECharts柱状图和折线图的配置示例： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '柱状图与折线图组合' }, tooltip: {}, ...
ECharts 是一个由百度开发的基于 JavaScript 的开源可视化图表库，它支持丰富的视觉效果和多种图表类型，如柱状图、折线图、饼图、散点图等，同时也包括了像树状图这样的复杂图表。在 ECharts 3 版本中，图标功能...
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，支持大量的自定义选项，可以满足各种复杂的可视化需求。在本示例中，我们...
在本文中，我们将深入探讨如何使用 Vue.js 和 ECharts 框架来实现一个横向柱状图。Vue.js 是一个轻量级的前端框架，它提供了组件化开发的便利性，而 ECharts 是一个功能丰富的数据可视化库，适用于创建各种图表。 ...
Echarts是一个由百度开发的开源图表库，提供了丰富的图表类型，如柱状图、折线图、饼图等，能够方便地进行数据展示和分析。jQuery则是一个广泛使用的JavaScript库，它简化了DOM操作，事件处理和动画制作，使得网页...
首先，我们需要了解ECharts柱状图的基本概念。柱状图是一种常见的数据可视化方式，通过竖直的条形长度来表示数据的大小。在堆叠图中，各个系列的数据不是各自独立显示，而是堆叠在一起，以便于比较不同系列在同一...
ECharts是一款由百度开源的、基于JavaScript的图表库，支持折线图、柱状图、饼图、散点图等多种图表类型，还支持地图、仪表盘等复杂图表。ECharts具有良好的可定制性和高性能，适合在大数据量下进行数据可视化。 3...
jQuery ECharts柱状图数据统计图表插件是一个用于可视化数据的高效工具，它结合了jQuery的易用性和ECharts的强大功能。ECharts是由百度开发的一个轻量级、高性能的图表库，支持各种图表类型，包括柱状图、折线图、...
3. **地图与柱状图的联动**：通过监听地图的`click`事件，获取被点击的地区信息，然后动态修改柱状图的`data`，实现地图与柱状图的联动更新。 4. **数据加载**：若数据存储在JSON文件中，可以使用`$.ajax`或`fetch`...