echart動態載入多個柱形圖
前臺
service層
@Service("hosdeptStatusService")
@Transactional
public class HosdeptServiceImpl implements HosdeptStatusService {
@Autowired
private HosdeptStatusDAO hosdeptStatisDAO;
/**
* 原生sql實現
*/
@Autowired
private BaseDAO baseDao;
@Override
public List<Map<String, String>> queryNumAndDate(String orgCode) {
String sql="select DEPT_NAME,BUSY_DATE,ORG_CODE,O_NUM from (select DEPT_NAME,BUSY_DATE,ORG_CODE,O_NUM from PHP_MOBILE_HOS_DEPT_STATUS order by BUSY_DATE) where rownum<=7"
+ " and t.ORG_CODE='"+ orgCode + "'"+" order by rownum DESC";
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
List<Map<String, Object>> mapList = baseDao.mapQueryBySql(sql);
for (Map<String, Object> map : mapList){
Map<String, String> mp=new HashMap<String, String>();
mp.put("deptName", map.get("DEPT_NAME").toString());
mp.put("busyDate", map.get("BUSY_DATE").toString());
mp.put("oNum", map.get("O_NUM").toString());
list.add(mp);
}
return list;
}
@Override
public List<Map<String, String>> oldPeopVis(String orgCode) {
// TODO Auto-generated method stub
return null;
}
@Override
public Response queryDeptStaicData(String orgCode) {
String sql="SELECT t.DEPT_NAME FROM PHP_MOBILE_HOS_DEPT_STATUS t where " +" t.ORG_CODE='"+ orgCode + "'" + " and t.DEPT_NAME is not null GROUP BY t.DEPT_NAME";
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
//獲得醫院的所有科室
List<Map<String, Object>> deptNameList = baseDao.mapQueryBySql(sql);
for (Map<String, Object> map : deptNameList){
Map<String, String> data = new HashMap<String, String>();
//迴圈獲得科室名稱
Object DEPT_NAME = map.get("DEPT_NAME");
if(DEPT_NAME != null && !"".equals(DEPT_NAME) && !"null".equals(DEPT_NAME)) {
StringBuffer dateStr = new StringBuffer();//時間
StringBuffer oNumStr = new StringBuffer();//門診量
String sql1="select DEPT_NAME,BUSY_DATE,ORG_CODE,O_NUM from (select DEPT_NAME,BUSY_DATE,ORG_CODE,O_NUM from PHP_MOBILE_HOS_DEPT_STATUS order by BUSY_DATE) where rownum<=7"
+ " and DEPT_NAME='"+ DEPT_NAME + "'"+" order by rownum DESC";
//通過部門名稱獲取時間和門診量
List<Map<String, Object>> dateAndNumList = baseDao.mapQueryBySql(sql1);
if(dateAndNumList != null) {
for (Map<String, Object> map1 : dateAndNumList){
dateStr.append(map1.get("BUSY_DATE").toString()).append(",");
oNumStr.append(map1.get("O_NUM").toString()).append(",");
}
String as1 = dateStr.toString();
String as2 = oNumStr.toString();
data.put("BUSY_DATE", as1.substring(0,as1.length() - 1));
data.put("O_NUM", as2.substring(0,as2.length() - 1));
data.put("DEPT_NAME", DEPT_NAME.toString());
}
list.add(data);
}else {
return new FailedResponse("科室名稱為空");
}
}
if(list.size() > 0) {
return new ObjectResponse<List<Map<String, String>>>(list);
}else {
return new FailedResponse("沒有取到醫院下的科室資料");
}
}
@Override
public Response queryHositoryInfo(String orgCode) {
String sql="SELECT t.ORGANNAME,t.ADDRESS,t.TEL FROM hc_gy_sys.SYS_ORGANIZATION t WHERE "
+" t.ORGANCODE='"+ orgCode + "'" ;
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
//通過醫院ID獲取醫詳情資訊
List<Map<String, Object>> dateAndNumList = baseDao.mapQueryBySql(sql);
if (dateAndNumList!=null) {
for (Map<String, Object> map : dateAndNumList){
Map<String, String> mp=new HashMap<String, String>();
Object ORGANNAME = map.get("ORGANNAME");
Object ADDRESS = map.get("ADDRESS");
Object TEL = map.get("TEL");
if(ORGANNAME != null && !"".equals(ORGANNAME) && !"null".equals(ORGANNAME)) {
mp.put("organName", ORGANNAME.toString());
}
if(ADDRESS != null && !"".equals(ADDRESS) && !"null".equals(ADDRESS)) {
mp.put("address", ADDRESS.toString());
}
if(TEL != null && !"".equals(TEL) && !"null".equals(TEL)) {
mp.put("tel", TEL.toString());
}
list.add(mp);
}
}else {
return new FailedResponse("沒有取到醫院資料");
}
if(list.size() > 0) {
return new ObjectResponse<List<Map<String, String>>>(list);
}else {
return new FailedResponse("沒有取到醫院資料");
}
}
}
baseDao
@SuppressWarnings("unchecked")
@Override
public List<Map<String, Object>> mapQueryBySql(String sql) {
List<Map<String, Object>> list = null;
Session session = null;
try {
session = sessionFactory.openSession();
list = session.createSQLQuery(sql).setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
} catch (Exception e) {
e.printStackTrace();
} finally {
if (session != null && session.isOpen()) {
session.close();
session = null;
}
}
return list;
}
後臺js使用：
app.hospital.dept.busy = {
orgCode:"",
open : function(orgCode){
debugger;
app.hospital.dept.busy.orgCode = orgCode;
if(typeof(navigator.connection) != "undefined" && typeof(Connection) != "undefined"){
if(navigator.connection.type == Connection.NONE) {
app.alert('網路連線不穩定，請檢查網路後重新整理重試。', '網路異常');
} else {
app.viewMain.router.load({url: 'pages/guide/deptBusy.html'});
}
}else{
app.viewMain.router.load({url: 'pages/guide/deptBusy.html'});
}
},
init : function() {
debugger;
//alert(app.hospital.dept.busy.orgCode);
app.api.hospital.queryDeptStaicData({
data : {orgCode : app.hospital.dept.busy.orgCode},
success : function(result) {
debugger;
if (result.responseCode == "0") {
app.alert(result.responseMsg, '錯誤');
} else {
var datasTemp = result.datas;
for(var i=0; i<datasTemp.length; i++){
var id = "deptEchartsDiv_"+i;
var template = j$("#deptEchartsDivTemplate").clone();
var div = j$(template.html());
div.attr("id",id);
j$("#deptEchartsShowDiv").append(div);
var bd = datasTemp[i].BUSY_DATE;
var onum = datasTemp[i].O_NUM;
var dn = datasTemp[i].DEPT_NAME;
app.hospital.dept.busy.createEcharts(id,dn,bd.split(","),onum.split(","));
}
}
},
error : app.api.error
});
/*app.api.hospital.queryHositoryInfo({
data : {orgCode : app.hospital.dept.busy.orgCode},
success : function(result) {
debugger;
if (result.responseCode == "0") {
app.alert(result.responseMsg, '錯誤');
} else {
var datasTemp = result.datas;
//alert(datasTemp);
var template = $('#tmpl-hospital-introduction-list').html();
$('#hospital-introduction-list').html($m.tmpl(template, datasTemp));
}
},
error : app.api.error
});*/
},
createEcharts : function(id,name,bd,onum){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: name
},
legend: {
data:['科室']
},
grid: { // 控制圖的大小，調整下面這些值就可以，
x: 40,
x2: 100,
y2: 150,// y2可以控制 X軸跟Zoom控制元件之間的間隔，避免以為傾斜後造成 label重疊到zoom上
},
xAxis: {
data: bd,
axisLabel:{
/*interval:0,//橫軸資訊全部顯示
rotate:-30,//-30度角傾斜顯示*/
formatter:function(val){
return val.split("").join("\n");
}
}
},
series: [{
name: '門診量',
type: 'bar',
data: onum
}]
};
myChart.setOption(option);
}
};
// 增加醫院標註
app.hospital.busy.map.addMarker({
longitude : hdata[i].coord.longitude,
latitude : hdata[i].coord.latitude,
//iconUrl : 'images/icon/hospital/' + hdata[i].busyLevel + '.png',
markerOffset : {
x: width,
y: -30
},
html : '<div class="map-window hospital-busy-marker">'+
'<div><img src="images/icon/hospital/' + hdata[i].busyLevel + '.png" /></div>'+
'<div><span class = "busy-level-img-background-'+hdata[i].busyLevel+'" > '+hdata[i].name+' </span></div>'+
'</div>',
content : '<div class="map-window map-busy">' + '<div class="hospital-name" >' + hdata[i].name
+ '</div>' + departmentStr + '<div class="busy-title" >繁忙程度</div>'
+ '<div class="busy-level-img busy-level-img-background-' + hdata[i].busyLevel + '" >'
+ hdata[i].busyDisply + '</div>' + treatmentStr + '<div onclick="app.hospital.dept.busy.open(\''+hdata[i].orgCode+'\');">檢視詳情</div></div>'
});
}
}
前臺頁面
<div data-page="page-hospital-dept-busy" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link icon-only">
<i class="icon icon-back color-white"></i>
</a>
</div>
<div class="center">醫院熱度詳情</div>
<div class="right">
</div>
</div>
</div>
<div class="page-content bg-white">
<div class="list-block media-list" id="hospital-introduction-list">
</div>
<script type="text/html" id="tmpl-hospital-introduction-list">
<!--% for (var i=0; i <o.length; i++) { %-->
<ul>
<li>
<div class="item-inner" >
<div class="item-title">{%=o[i].organName%}</div>
<div class="item-title">{%=o[i].address%}</div>
<div class="item-title">{%=o[i].tel%}</div>
</div>
</li>
</ul>
<!--% } %-->
</script>
</div>
<div class="page-content bg-white" id="deptEchartsShowDiv">
</div>
<div id="deptEchartsDivTemplate">
<div style="width: 100%;height:400px;"></div>
</div>
</div>
相關推薦
echart動態載入多個柱形圖
前臺 service層 @Service("hosdeptStatusService") @Transactional public class HosdeptServiceImpl implements HosdeptStatusService { @Auto
Echart--多個柱形圖
http cat center itemstyle pre img tip item idt 設置數據: 效果圖: optionAll: { title: { text: ‘營收情況‘, left: ‘
ajax動態賦值highcharts柱形圖
實現的效果為 1.jsp頁面 <!-- 引入highcharts官方js --> <script src="js/highcharts.js"></script> <script> $(function(){ //獲得h
32、python繪製柱形圖、單個、多個、堆積、雙向柱形圖
目錄 一、繪圖函式 二、案例 第一、單個柱形圖 第二個、多個柱形圖 第三、堆積柱形圖 第四、雙向柱形圖 柱形圖：一種長方形的單位長度，根據資料大小回繪製的統計圖，用來比較兩個或以上的資料（時間或類別） 一、繪圖函式 bar（left，right，
echart柱形圖-一條柱子顯示多個數據
personCountOption = { backgroundColor:'#fff', tooltip: { trigger: 'item', axisPointer: {
echart折線圖 柱形圖 資料格式化 動態繫結資料 frame處理
var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.reques
echart動態載入資料繪製雙柱狀圖
//編輯組織資料，這裡後臺返回的data格式為{'categ': ['男', '女'], 'data': [[2, 136, 38, 4, 1, 0], [3, 75, 25, 5, 1, 0]], 'name': ['青少年', '青年人', '中年人', '老年前期', '老年人',
echarts+ajax+json動態生成多個不同隨機顏色的柱狀圖
前端部分程式碼： <div id="main" style="width: 1200px;height:600px;"></div> <script type="text/javascript">$(function(){$.ajax({
Echart--單個柱形圖
normal osi width data inter nor itl body char 效果圖: dom: <div class="chartAll" ref="chartAll"></div> js: let chartAll = t
【Echarts】簡單實現——第一個柱狀圖的實現（在後臺動態獲取資料）
第一次接觸這個東西，感覺還有點濛濛的。經過兩天的努力終於搞明白。下面我用自己的方式實現以下，方便大家理解。 下面是我使用一個簡單的mvc框架來實現這個demo。 效果圖： 步驟： 1、新建一個mvc框架的專案。 2、新建控制器：EchartsBa
echart修改在柱形圖上顯示為0的情況
function genBar(id){ var myChart = echarts.init(document.getElementById(id)); myChart.title = '正負條形圖';
ajax動態賦值echarts（餅圖和柱形圖）
本文以柱形圖和餅形圖ajax動態賦值為例 一、餅形圖賦值步驟 （1）jsp頁面 <!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!
Android之MPAndroidChart的動態柱形圖
匯入MPAndroidChart的jar包以後就寫個工具類：package itsoha.com.tffic.Utils; import android.content.Context; import android.graphics.Color; import com.
網頁，html5,canvas，js 動態繪製柱形圖
<!DOCTYPE html> <head><title>chart demo</title> <style> #chartContainer{
Fusioncharts ---多折線圖，多柱形圖(2D)
1,使用到這個外掛的情況是，做報表。很突然的情況，要給某個公司做報表，看見專案中前輩使用的是fusioncharts這個外掛，於是也就接著使用了。本次展示多折線圖，和多柱形圖(2D)。 2，圖表的實現包括3個部分 a)資料庫對資料進行查詢拼裝 b)控制層
d3 畫簡單的柱形圖
pen oca func vba head 高度 turn cti ret <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3
柱形圖，餅狀圖JavaScript
column 註意 文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({
在Echarts 柱形圖的單擊事件中寫入自定義的參數
cnblogs img ges == innerhtml .com echart 通過 code
ECHARTS柱形圖和餅圖數值顯示
echartsECHARTS柱形圖和餅圖數值顯示，官方文檔寫的很不錯，這裏自己單獨梳理一下，以後可能會用的到。1、柱形圖數值顯示 在option添加： label:{ normal:{ show: true, position: ‘to
d3.js——給柱形圖添加事件出現的問題總結
htm 代碼 lac ring tle log 顏色 out edge 首先做出一個動態的柱形圖（這兒用的d3.js的版本是v3，用v4的話有些函數會發生變化） 效果圖： 代碼： <!DOCTYPE html> <html lang="en">