使用Java读取本地文件在网页上画Echars图
本帖最后由 ProgramerFangL 于 2017-11-14 17:50 编辑先简单介绍一下写这个代码的原因。最近在工作中有一个要做的事情就是根据别人给出的数据，一般是一种类似于top10的数据，如下
需要将这种数据用echars出一个饼状图或者柱状图。刚开始的做法就是找在线的echars网站，类似于下图这种的
然后将里面的数据变成自己的，但是当出图量多了以后（是不是感觉好无聊的工作，，但是确实需要人做）。虽然这个工作不是我在做，但是在线的做法太慢，严重影响了速率，所以我写了一个虽然很low但是还是可以实现需求的JavaWeb代码。具体逻辑就是访问网站，向后台提交请求，后台读取数据返回给前端页面，前端将返回的数据出图。废话就到这儿了，开始直接贴代码.。
这是一个实体类，对应于数据的格式，因为一般数据都是相当于key value格式的，所以只有两个属性name和value
public class Product {
private String name; //key名称
private int value; //value值
public Product(String name, int value) {
this.name = name;
this.value = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}
下面是一个用于读取本地文件的IO流：
import java.io.BufferedReader;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class ReadData {
public static List<Product> readLine(){
List list = new ArrayList();
try {
FileReader fr = new FileReader("D:\\top10.txt");//本地需要出图的文件路径
BufferedReader br = new BufferedReader(fr);
String valueString = null;
while((valueString = br.readLine())!= null){
String[] strs=valueString.split(" ");//将文件中的每行内容按什么方式切割
int value = Integer.valueOf(strs);
String name = strs;
Product pd = new Product(name, value);//将每一行数据封装成一个实体类，加入list中
list.add(pd);
System.out.println(valueString);
}
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return list;
}
public static void main(String[] args) {
readLine();
}
}
下面是一个servle类，用于接收请求并处理，主要看doPost（）方法：
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import test.Product;
import test.ReadData;
/**
* Servlet implementation class DataServlet
*/
@WebServlet("/DataServlet")
public class DataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DataServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
List<Product> list = ReadData.readLine();//获取读取的本地文件内容
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
System.out.println(json);
}
}
下面要贴的就是一个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 lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="echarts-all.js"></script>
<!-- <script type="text/javascript" src="echarts-all.js"></script> -->
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>
<body>
<!-- <img border="0" src="image/title.png" style="width:70px;height:70px"> -->
<headerstyle="height:90px;background:url(image/header2.jpg) no-repeat center">
</header>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div>
<div id="test" style="width: 800px;height:600px;margin-right:300px;float:right"></div>
</div>
<footer style="margin-top:600px;background-color: ;">
<hr>
<div style="text-align: center">
</div>
</footer>
<script type="text/javascript">
var yuan = echarts.init(document.getElementById('test'));
yuan.setOption({
title : {
text: '某站点用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
}
]
});
var names=[]; //类别数组（实际用来盛放X轴坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "DataServlet", //请求发送到DataServlet处
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result.name); //挨个取出类别并填入类别数组
}
yuan.setOption({title : {
text: 'XXXXTOP10',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
data:names,
x : 'left',
orient : 'vertical'
},
series: [{
// 根据名字对应到相应的系列
name: '访问来源',
type:'pie',
radius : '55%',
data: result
}]
});
}
yuan.hideLoading();
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
yuan.hideLoading();
}
})
</script>
</body>
</html>
最后的出图效果如下：
虽然网页很丑，但是节省了时间，方便了工作，提高了效率。发现错误或有改进意见的请帮忙提出。谢谢 我最近就打算搞一套数据分析系统出来 第二梦 发表于 2017-11-14 18:16
我最近就打算搞一套数据分析系统出来
数据分析是指哪一方面的？？可以的话，可以一起搞啊，我之前用spark也做过数据分析，以及日志分析这一块的 Chart.js就可以做报表了...把数据转成Json传前台就行了，你这个功能是完成了，没有复用性啊 重头再来 发表于 2017-11-14 18:30
Chart.js就可以做报表了...把数据转成Json传前台就行了，你这个功能是完成了，没有复用性啊
针对需求来的，，复用性确实。。。尴尬
页:
[1]