javawebecharts开发

① java使用echarts需要导入哪些包

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.FileReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Scanner;
public class AddList {

private String filePath = "";
private String bakPath = "";
private String content = "";

Scanner sc = new Scanner(System.in);

public String readFile(){
content = "";
if (isNull(filePath)) {
System.out.println("
文件
存储
路径：
");
filePath = sc.nextLine();
}
File file = new File(filePath);
FileReader fr = null;
try {
if (file.exists()) {
fr = new FileReader(file);
char[] chars = new char[1024];
int n = 0;
while((n = fr.read(chars)) != -1){
String string = new String(chars, 0, n);
content = content + string;
}
} else {
System.out.println("
文件不存在
");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (fr != null) {
try {
fr.close();
} catch (IOException e) {
e.printStackTrace();
}

}
}
return content;
}

public void writeFile(String path){
File file = new File(path);
FileOutputStream fos = null;
mkDirs(path);
try {
fos = new FileOutputStream(file);
BufferedOutputStream bos = new BufferedOutputStream(fos);
PrintWriter pw = new PrintWriter(bos, true);
pw.print(content);
pw.flush();
} catch (FileNotFoundException e) {
e.printStackTrace();
} finally {
if (fos != null) {
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

public void writeFile(){
if (isNull(filePath)) {
System.out.println("
文件存储路径：
");
filePath = sc.nextLine();
}
File file = new File(filePath);
FileOutputStream fos = null;
mkDirs(filePath);
try {
fos = new FileOutputStream(file);
BufferedOutputStream bos = new BufferedOutputStream(fos);
PrintWriter pw = new PrintWriter(bos, true);
pw.print(content);
pw.flush();
} catch (FileNotFoundException e) {
e.printStackTrace();
} finally {
if (fos != null) {

try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

public void mkDirs(String filepath){
if (filepath.indexOf("\\") != -1) {
filepath = filepath.replaceAll("\\", "/");
}
int n = filepath.indexOf("//");
String path = filepath.substring(0, n) + "//";
filepath = filepath.substring(filepath.indexOf("//") + 1, filepath.length());
String[] files = filepath.split("/");
for (int i = 0; i < files.length - 1; i++) {
path = path + files[i];
File file = new File(path);
if (!file.exists()) {
file.mkdir();
}
}
}

public void addImfor(){
System.out.println("--------
增加记录
---------");
String name = "";
String tel = "";
String email = "";
content = readFile();
while(true){
System.out.println("
姓名：
");
name = sc.next();
System.out.println("
电话：
");
tel = sc.next();
System.out.println("Email
：
");
email = sc.next();
content = content + name + "<>" + tel + "<>" + email +"<==>";
System.out.println("0
、
Exit 1
、继续
");
int i = sc.nextInt();
if (i == 0) {
break;
}
}

② java，echarts

就是构造2个数组，月份数组和钱数组，给echarts用，让echarts画出来每个月份的钱的统计图

③ 怎么用java编写echarts代码

html代码：放2个div，取个id就行。引用写好的js。测试类型echarts代码：1、在BusinessJs/echarts.js中引用echarts及zrender：

④ 用什么插件在java做报表

个人推荐用echarts,这个插件是网络的开源插件，效果相当不错文档完善使用方便，本人目前也在使用，有对应的ECharts - Java类库，ECharts-Java是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构 Option。（http://echarts..com/是对应的官网）希望能够帮到您。

⑤ 在java EE中怎么使用Echarts

@Override
public Option selectRemoveCauses() throws BusinessException {
//查询前20
PageHelper.startPage(1, 20, false);
//数据库查询获取统计数据
List<Map<String, Object>> list = kc22Mapper.selectRemoveCauses();
//为了数据从大到小排列，这里需要倒叙
Collections.sort(list, new Comparator<Map<String, Object>>() {
@Override
public int compare(Map<String, Object> o1, Map<String, Object> o2) {
return -1;
}
});
//创建Option
Option option = new Option();
option.title("剔除药品").tooltip(Trigger.axis).legend("金额（元）");
//横轴为值轴
option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
//创建类目轴
CategoryAxis category = new CategoryAxis();
//柱状数据
Bar bar = new Bar("金额（元）");
//饼图数据
Pie pie = new Pie("金额（元）");
//循环数据
for (Map<String, Object> objectMap : list) {
//设置类目
category.data(objectMap.get("NAME"));
//类目对应的柱状图
bar.data(objectMap.get("TOTAL"));
//饼图数据
pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
}
//设置类目轴
option.yAxis(category);
//饼图的圆心和半径
pie.center(900,380).radius(100);
//设置数据
option.series(bar, pie);
//由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档
option.grid().x(180);
//返回Option
return option;
}

代码中的注释很详细。

Service返回Option后，在Controller层返回，Controller层代码如下：

[java] view plain 在CODE上查看代码片派生到我的代码片
@RequestMapping(" www.hbbz08.com /removecauses")
public
@ResponseBody
WebResult removecauses() throws Exception {
WebResult result = new WebResult();
try {
Option option = injuryService.selectRemoveCauses();
result.isOK();
result.setData(option);
} catch (BusinessException e) {
result.setException(e);
}
return result;
}

SpringMVC配置的返回JSON，这里的WebResult不用多考虑，就是一层统一的封装，和ECharts图表无关。

然后是前台页面，使用jQuery的getJSON方法获取数据，完整的页面代码如下：

[html] view plain 在CODE上查看代码片派生到我的代码片
<body style="padding:0">
<div style="padding:10px;clear: both;">
<div id="psLine" style="height:600px;"></div>
</div>
</body>
<script src="jslib/echarts/echarts-all.js"></script>
<script type="text/javascript">
//图表
var psLineChar = echarts.init(document.getElementById('psLine'));

//查询
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的读取数据中...'});
$.getJSON('analysis/removecauses.html', function (data) {
if (data.success) {
psLineChar.setOption(data.data, true);
psLineChar.hideLoading();
} else {
alert('提示', data.msg);
}
});
}
//载入图表
loadDrugs();
转

⑥ javaweb 开发有哪些地图插件是到乡镇级别的

<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>网络地图</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map..com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性; var point = new BMap.Point(120.2,30.25); //创建点坐标 map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(); //激活滚轮调整大小功能 map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角； map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方； map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方； map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //结果呈现设置， map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。 // alert(html.innerHTML) }//这一段可以不要，只不过是为学习更深层次应用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script></body></html>第二种： 谷歌
首先引入 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
代码如下
js代码
var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中国地图全图
var optMap =
{
zoom: 15,
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('container'),optMap);
map.setOptions({Zoom:18,center:myLatlng});

html
<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>

⑦ javaweb平面图怎么实现

javaweb平面图实现的话需要用java的applet即可。

拓展资料：

（IDEA和Eclipse上均可运行）

设计一个简易地图(类似房间平面图)，图上标有多个检测区域(下面已标注要检测哪五个)，区域上显示当前的检测数值和状态(红，黄，绿)。

点击检测区域，弹出对话框，对话框中内容包括:

检测数值的实时曲线，可能有多个（实时的意思是要显示检测区域部分的后端数据，以echarts的曲线图形式展示）

同时，也可以用表格的方式，显示上述检测数值，同时表格数据可以导出EXCEL格式文件

检测区域的对话框可以同时显示(非模态方式)，也可以只能单一显示(模态方式)（不使用数据库调用，只用表格）

客户端的所有请求（如：温度等的数值记录）都通过服务端的TOMCAT上的java程序实现4.服务端编写所有请求的实现过程，以JSON格式方式返回请求内容

多行显示不同的检测内容，把状态按钮调到每行的前面作为各自的状态（红黄绿三种）。

检测区域：

厨房：一氧化碳浓度，温度

主卧：温度，湿度，噪声

阳台：温度，湿度，风力

餐厅：温度，湿度，光亮

主卫：温度，湿度

⑧ 我想制作一个简单的javaweb地图展示数据的界面，比如一块区域数据大，地图显示颜色就深，有什么好思路。

类似下图吗？用地图者就可以做成了。

⑨ 如何用java整合echarts生成饼图

首先要把echarts所需的js和swf文件导入进去

//后台拼图标所需xml
StringBufferoutXml=newStringBuffer();//任务列表xml字符串
@Action("/task/loadMyTaskPercentXml")
()
{
HttpServletResponseres=ServletActionContext.getResponse();
res.setHeader("Cache-Control","no-store");
res.setHeader("Pragma","no-cache");
res.setDateHeader("Expires",0);
res.setContentType("text/xml;charset=GBK");
PrintWriterout=res.getWriter();
StringBufferoutXml=newStringBuffer(
"<?xmlversion="1.0"encoding="GBK"?> ");
outXml
.append("<chartbaseFontSize='12'caption='任务统计'subcaption=''yAxisMinValue='51650.1'yAxisMaxValue='71118.3'xaxisname='日期'yaxisname='数量'hovercapbg='FFECAA'hovercapborder='F47E00'formatNumberScale='0'decimalPrecision='0'showvalues='1'numdivlines='10'numVdivlines='0'shownames='1'rotateNames='1'>");
outXml.append(" ");
outXml.append("<setname='已完成任务(%)");
outXml.append("'value='"+s1.replace("%","")+"");
outXml.append("'/>");
outXml.append(" ");
outXml.append("<setname='未完成任务(%)");
outXml.append("'value='"+s2.replace("%","")+"");
outXml.append("'/>");
outXml.append(" ");
outXml.append("</chart> ");
out.print(outXml.toString());
out.flush();
out.close();
returnnull;
}
在后台进行拼装xml，并且返回到页面
<divstyle="display:none"id="taskListGraph">${outXml}</div>
<scripttype="text/javascript">
vartext=document.getElementById("taskListGraph").innerHTML
varchart2=newFusionCharts("${base}/swf/Bar2D.swf?ChartNoDataText=暂无数据&XMLLoadingText=正在载入数据，请稍候","chart02","610","276");
chart2.setDataXML(text);
chart2.render('jdbox');
chart2.addParam("wmode","Opaque");
</script>
这样图就生成好了！

⑩ 如何利用echarts图表插件获取圆饼图块切换参数

首先，在JavaWeb项目中新建一个JSP页面someChart.jsp，引入echarts核心JS如下图所示：由于这里要用到折线图，需要将折线图的JS引入require(['echarts','echarts/chart/line'],如下图所示：图形要在页面上显示，需要一个容器，这里在body里定义一个div如下图所示：现在，编写形成折线图的核心jsfunction(ec){varline=ec.init(document.getElementById('lineChart'));varoption={tooltip:{show:true},legend:{data:['销量']},xAxis:[{type:'category',data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]}],yAxis:[{type:'value'}],series:[{"name":"苹果销售量","type":"line","data":[8956,2025,3640,5610,8910,5720,3467,9023,8367,5342,6754,8753]}]};line.setOption(option);}如下图所示：启动Tomcat服务器，在浏览器上运行JSP页面，会看到一个折线图如下图所示：点击折线上的折点，会获取到X轴和Y轴值，说明这个需要给图一个点击事件，具体代码如下：functionqueryXY(param){varseriesIndex=param.seriesIndex;vardataIndex=param.dataIndex;varseriesName=param.seriesName;varname=param.name;vardata=param.data;varvalue=param.value;console.dir(param);}由于在js利用console打印，可以在火狐浏览器上查看相应的参数指标，具体如下图所示：在函数中添加alert，将参数指标打印在页面上varstr="seriesIndex:"+seriesIndex+"****"+"dataIndex:"+dataIndex+"****"+"seriesName:"+seriesName+"****"+"name:"+name+"****"+"data:"+data+"****"+"value:"+value;alert(str);如下图所示：再次刷新浏览器，等折线出来后，点击上面的点如下图所示：