项目中是用eCharts
1.首先在项目中引入echart.js库。
<!DOCTYPE HTML>
<%@page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib prefix="b" uri="/bonc-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="/struts-tags" prefix="struts"%>
<%String contextPath = request.getContextPath();%>
<html>
<head>
<script src="<%=contextPath%>/resources/echarts/echarts.js" type="text/javascript"></script>
</head>
2.建立对应的放图的地方div标签
两个div分别表示一个饼图和一个折线图
<div id="method1" style="width:1350px;height:450px;">
<jsp:include page="BusinessMarketFee-method1.jsp"></jsp:include>
</div>
<div id="meth2" style="width:1350px;height:450px;">
<jsp:include page="BusinessMarketFee-meth2.jsp"></jsp:include>
</div>
3.饼图的代码:
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="b" uri="/bonc-tags"%>
<%String contextPath = request.getContextPath();%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<body>
</body>
<script type="text/javascript">
function method_1(){
//获取参数
var o1=$("#acctmonth").val();
var departmentName;
var totaldata;
$.ajax({
url:'BusinessMarketFee!getparams.action',
data:{acctmonth:o1},
async:false,
success:function(data){
departmentName=data.departName;
totaldata=data.totalfei;
}
});
//alert(totaldata);
if(departmentName==null||departmentName==""){
departmentName=['暂无数据']
}
require.config({
paths: {
echarts: '<%=contextPath%>/resources/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
function drawPie(ec){
//图表渲染的容器对象
//加载图表
var myChart = ec.init(document.getElementById("method1"));
var option={
title : {
text: '合计比重图',
x:'left'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x : 'right',
y : 'center',
data: departmentName
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '60%',
center: ['50%', '60%'],
data: (function(){
var res = [];
var len = departmentName.length;
while (len--) {
res.push({
name: departmentName[len],
value: totaldata[len]
});
}
return res;
})(),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
}
);
}
</script>
</html>
说明: 其中的ajax请求是通过java代码获取数据库的相关数据，获取数据的相关代码如下:
4.获取数据后，通过JSON对象转换，传到前端页面，前端页面根据JSONl来获取对应的数据。
// 绘图逻辑
public void getparams() {
Map<String, String> params = getParams_();
List echartList = dao.queryForList("fee.businessMarketFee.getEchartList", params);
format(echartList);
} private void format(List list) {
List<String> departName = new ArrayList<String>();
List totalfei = new ArrayList<>();
List khjlfei = new ArrayList<>();
List scxsfei = new ArrayList<>();
List ywzdfei = new ArrayList<>();
List ywzsfei = new ArrayList<>();
List ywylfei = new ArrayList<>();
List ywypfei = new ArrayList<>();
List ywzdqtfei = new ArrayList<>();
List ywspfei = new ArrayList<>();
List ywjtfei = new ArrayList<>();
List xsctzfei = new ArrayList<>();
List schyfei = new ArrayList<>();
// ---循环大法
for (int i = 0; i < list.size(); i++) {
Map map = (Map) list.get(i);
departName.add((String) map.get("DEPT_NAME"));
totalfei.add(map.get("TOTALFEI"));
khjlfei.add(map.get("KHJLFEI"));
scxsfei.add(map.get("SCXSFEI"));
ywzdfei.add(map.get("YWZDFEI"));
ywzsfei.add(map.get("YWZSFEI"));
ywylfei.add(map.get("YWYLFEI"));
ywypfei.add(map.get("YWYPFEI"));
ywzdqtfei.add(map.get("YWZDQTFEI"));
ywspfei.add(map.get("YWSPFEI"));
ywjtfei.add(map.get("YWJTFEI"));
xsctzfei.add(map.get("XSCTZFEI"));
schyfei.add(map.get("SCHYFEI"));
}
doEchart(departName, totalfei, khjlfei, scxsfei, ywzdfei, ywzsfei, ywylfei, ywypfei, ywzdqtfei, ywspfei,
ywjtfei, xsctzfei, schyfei);
} private void doEchart(List<String> departName, List totalfei, List khjlfei, List scxsfei, List ywzdfei,
List ywzsfei, List ywylfei, List ywypfei, List ywzdqtfei, List ywspfei, List ywjtfei, List xsctzfei,
List schyfei) {
Map<String, List> params = new TreeMap<String, List>();
params.put("departName", departName);
params.put("totalfei", totalfei);
params.put("khjlfei", khjlfei);
params.put("scxsfei", scxsfei);
params.put("ywzdfei", ywzdfei);
params.put("ywzsfei", ywzsfei);
params.put("ywylfei", ywylfei);
params.put("ywypfei", ywypfei);
params.put("ywzdqtfei", ywzdqtfei);
params.put("ywspfei", ywspfei);
params.put("ywjtfei", ywjtfei);
params.put("xsctzfei", xsctzfei);
params.put("schyfei", schyfei);
setEchart(params);
} private void setEchart(Map<String, List> params) {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/json; charset=utf-8");
JSONObject json = new JSONObject();
json.putAll(params);
PrintWriter p = null;
try {
p = response.getWriter();
p.println(json.toString());
} catch (IOException e) {
e.printStackTrace();
} finally {
p.close();
} }
5.折线图的相关代码:(java代码就是上面的代码，只放html代码)：
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="b" uri="/bonc-tags"%>
<%String contextPath = request.getContextPath();%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<body>
</body>
<script type="text/javascript">
function meth1(){
//获取参数
var o1=$("#acctmonth").val();
var departmentName;
var totaldata;
$.ajax({
url:'BusinessMarketFee!getparams.action',
data:{acctmonth:o1},
async:false,
success:function(data){
departmentName=data.departName;
totaldata=data.totalfei;
}
});
//alert(totaldata);
if(departmentName==null||departmentName==""){
departmentName=['暂无数据']
}
require.config({
paths: {
echarts: '<%=contextPath%>/resources/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar'
],
function DrawEchart(ec){
//图表渲染的容器对象
//加载图表
var myChart=ec.init(document.getElementById("meth1"));
var option={
title: {
text: '合计费用'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['合计费用']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: departmentName,
axisLabel :{interval:0,rotate:20,
textStyle : {
color : '#000',
margin: 2
}
}
},
yAxis: {
type: 'value'
},
series: [
{
name:'合计费用',
type:'line',
data: totaldata,
itemStyle:{
normal:{
color:function(params){
var colorList=['red'];
return colorList[0];
}
}
}
}
]
};
myChart.setOption(option);
}
);
}
</script>
</html>
6.绘图如下
饼图：
折线图：
项目中是用eCharts的更多相关文章
- Angular 项目中如何使用 ECharts
在有些使用 ECharts 库的 Angular 项目中,通常除了安装 npm 包之外,还会在 angular.json 中配置 “build.options.scripts”,将 “node_mod ...
- 实际项目中，看 ECharts 和 HighCharts 渲染性能对比，表面看衣装，本质看内功！！！
最近做项目,使用的是echarts显示图表数据,但是数据量比较多的时候,有卡顿的情况.后来同事拿echarts和HighCharts做了对比,仅供大家参考.同时感谢同事做的工作. 一.查询1天的源数据 ...
- vue项目中安装使用echarts
安装:cnpm install echarts -S (安装依赖并引入到 package.json) 官网安装说明:http://echarts.baidu.com/tutorial.html#%E5 ...
- 解决：vue项目中多个echarts图表只有最后一个随浏览器变化改变大小
window.onresize = () => { this.initChart()} 改为 window.addEventListener('resize', () => { this. ...
- 在ASP.NET MVC 项目中 使用 echarts 画统计图
echarts 官方地址:http://echarts.baidu.com/ 一.根据图中的数据怎么从数据库中获取并组装成对应格式: 从数据库中获取对应数据,然后在项目中引用Newtonsoft.Js ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- angular6项目中使用echarts图表的方法（有一个坑，引用报错）
1.安装相关依赖(采用的webpack) npm install ecahrts --save npm install ngx-echarts --save 2.angular.json 配置echa ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
随机推荐
- ODBC，OLEDB,ADO,ADO.net,JDBC 理解
一 .ODBC 开放式数据库互联(Open Database connectivity), 93年微软推出的实现应用程序 和关系数据库直接 通讯的借口标准.只能用于关系数据库 . 注意事项 : 必须先 ...
- [LeetCode]447 Number of Boomerangs
Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...
- oracle中用户删除不了，ORA-01940提示 “无法删除当前已连接用户”
Oracle删除用户的提示无法删除当前已连接用户两种解决方法如下: 1.先锁定用户.然后查询进程号,最后删除对应的进程.在删除对应的用户 SQL>alter user XXX account l ...
- Java多线程理解
首先说一下进程和线程的区别 进程:是计算机运用程序实例,拥有独立的内存空间和数据(猜测内存堆应该是作用的进程上),一个进程包含多个子线程,不同进程相互独立: 线程:cpu执行的基本单位,拥有独立的寄存 ...
- 使用OFBIZ 时，使用的键入提示。
对商品的键入提示 ,效果如图(当输入关键字时,会提示出相应的数据) 首先要引入相应的插件 页面字段 js方法
- PYTHON学习之路_PYTHON基础（1）
学习内容: 1.Python介绍 2.Python程序初接触和变量 3.Python用户交互 4.Python数据类型 5.Python循环if...(elif)...else 6.Python循环w ...
- C++中的注解理解
SAL: the Microsoft Source Code Annotation Language. SAL: the Microsoft Source Code Annotation Langua ...
- C# Http Get 提交请求
/// <summary> /// HTTP GET方式请求数据. /// </summary> /// <param name="url">U ...
- Gbase配置
喵了个咪的.到目前为止,自己已经用过SQL SERVER,My SQL,Oracle,SQLite,加上南大通用GBASE 五种数据库了.虽然每种都用的不深 注:GBASE提供了C的API,查看手册即 ...
- 原来在linux上切换jdk的版本是这么简单
上次在linux上切换jdk版本的时候,还配置了半天的环境变量,今天又查了一下,原来是这么的简单 1. 查看相应的jdk是否在 ubuntu的jdk菜单里,查看: (输全哦) update-alter ...