项目中是用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 //或 ...
随机推荐
- 通过.net反射技术实现DataReader转换成Model实体类列表
public static T ReaderToModel<T>(IDataReader dr) { try { using (dr) { if (dr.Read()) { Typ ...
- C++查找指定目录下所以指定类型的文件
/*************************************************************** 函数名称:FindFile 查找指定目录下指定文件 输入:fileNa ...
- 在android 6.0（API 23）中，Google已经移除了移除了Apache HttpClient相关的类
推荐使用HttpUrlConnection,如果要继续使用需要Apache HttpClient,需要在eclipse下libs里添加org.apache.http.legacy.jar,androi ...
- Git 更换仓库地址
github国内访问偶尔抽风速度太慢了,想把项目转到oschina上来,今天实践了一下,还是挺简单的. 1. 从原始地址 clone 一份不包含 work copy的仓库: git clone -- ...
- JavaScript知识总结<一>
JavaScript核心基础语法: 1.什么是JavaScript? 我们知道在Web标准中网页由:结构.形式.行为三部分组成:结构由标准形式XHTML.形式又标准形式CSS,那么行为的表现就由Jav ...
- 网页版视频网站可以用html5来实现吗？
当然可以用html5来实现视频网站,而且html5的诞生完全符合了百度优化,百度蜘蛛对这类的网站友好度非常高,会尽量会给高的权重,但是现在很多做 这类网站的开发还是比较习惯用websocket,这个东 ...
- ASP.NET连接远程Oracle数据库，提示试图加载格式不正确的程序
VS调试远程连接Oracle数据库,一直报错 由于本地计算机是64位的操作系统,而且也确定安装的Oracle客户端是64位的 ,但是一直提示这个错误. 试了很多方法,终于发现可能是 不能在VS中调试的 ...
- kernel 内核安装
1.kernel 下载 https://cdn.kernel.org/pub/linux/kernel/ 2.解压源码 tar -zxvf linux-*.tar.gz 3.进入目录 cd linux ...
- [后端人员耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- 移动端web开发进阶
三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS ...