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);如下圖所示：再次刷新瀏覽器，等折線出來後，點擊上面的點如下圖所示：