一、桑基图简介
桑基图是一种特殊的流图, 它主要用来表示原材料、能量等如何从初始形式经过中间过程的加工、转化到达最终形式，如下所示为最基本的事物状态随时间推移的变化。桑基图的type为sankey，
它是echart3中新出现的类型，需要加载echart3类库才能实现。
二、桑基图制作
1、如下是上图的前端实现：
1 var statisChangeChart = echarts.init(document.getElementById('statusChangeChart')); 2 statisChangeChart.showLoading(loadOption); 3 Global.post("/deviceAlarm/getStatisChange?curDay="+curDay+"&preDay="+preDay).done(function(data) { 4 statisChangeChart.hideLoading(); 5 statisChangeChart.setOption(option = { 6 title: { 7 text: '' 8 }, 9 tooltip: { 10 trigger: 'item', 11 triggerOn: 'mousemove' 12 }, 13 color : [ 'green', 'red', 'yellow'], 14 series: [ 15 { 16 type: 'sankey',20 layout: 'none', 21 data:data.datas, 22 links:data.links, 23 itemStyle: { 24 normal: { 25 borderWidth: 1, 26 borderColor: '#aaa' 27 } 28 }, 29 lineStyle: { 30 normal: { 31 curveness: 0.5 32 } 33 } 34 } 35 ] 36 }); 37 });
这里核心的部分是两个数组：data.datas和data.links，data.datas包含的是数据，data.links包含的是数据变化关系，数据示例如下：
data: [{name: '数据1',value: 10}, {name: '数据2',value: 20},{name: '数据3', value: 20}, {name: '数据4',value: 10}]
links: [{ source: '数据1',target: '数据3',value:9}, {source: '数据2',target: '数据3',value:11},
{ source: '数据1', target: '数据4',value:1}, {source: '数据2',target: '数据4',value:9}]
这里能量变化解释如下：
数据1有数据10个，数据2有数据20个
数据1 有9个 变为了数据3；
数据1 有1个 变为了数据4；
数据2 有11个 变为了数据3；
数据2 有9个 变为了数据4；
现在数据3有数据20个，数据4有数据10个。
三、上图的java后台实现部分
1 @RequestMapping(value = { "/getStatisChange" })
2 @ResponseBody 3 public Map<String,Object> getStatisChange(HttpServletRequest request, HttpServletResponse response) { 4 Map<String, Object> result = new HashMap<String, Object>(); 5 try { 6 String curDay=request.getParameter("curDay"); 7 String preDay=request.getParameter("preDay"); 8 String curStartTime = curDay + " 00:00:00"; 9 String curEndTime = curDay + " 23:59:59"; 10 String preStartTime = preDay + " 00:00:00"; 11 String preEndTime = preDay + " 23:59:59"; 12 String pregoodname = "(" + preDay.substring(8, 10) + "日)好"; 13 String premidname = "(" + preDay.substring(8, 10) + "日)中"; 14 String prebadname = "(" + preDay.substring(8, 10) + "日)差"; 15 String curgoodname = "(" + curDay.substring(8, 10) + "日)好"; 16 String curmidname = "(" + curDay.substring(8, 10) + "日)中"; 17 String curbadname = "(" + curDay.substring(8, 10) + "日)差"; 18 19 List<Map<String, Object>> datalist = new ArrayList<Map<String, Object>>(); 20 List<Map<String, Object>> dataprelist = tInspectionMarkAllDao.getProjectStatusCount(preStartTime, preEndTime); 21 Map<String, Object> datapre = dataprelist.get(0); 22 Map<String, Object> pregood = new HashMap<String, Object>(); 23 pregood.put("name",pregoodname); 24 pregood.put("value", datapre.get("good_count")); 25 datalist.add(pregood); 26 Map<String, Object> premid = new HashMap<String, Object>(); 27 premid.put("name",premidname); 28 premid.put("value", datapre.get("mid_count")); 29 datalist.add(premid); 30 Map<String, Object> prebad = new HashMap<String, Object>(); 31 prebad.put("name",prebadname); 32 prebad.put("value", datapre.get("bad_count")); 33 datalist.add(prebad); 34 List<Map<String, Object>> datacurlist = tInspectionMarkAllDao.getProjectStatusCount(curStartTime, curEndTime); 35 Map<String, Object> datacur = datacurlist.get(0); 36 Map<String, Object> curgood = new HashMap<String, Object>(); 37 curgood.put("name",curgoodname); 38 curgood.put("value", datacur.get("good_count")); 39 datalist.add(curgood); 40 Map<String, Object> curmid = new HashMap<String, Object>(); 41 curmid.put("name",curmidname); 42 curmid.put("value", datacur.get("mid_count")); 43 datalist.add(curmid); 44 Map<String, Object> curbad = new HashMap<String, Object>(); 45 curbad.put("name",curbadname); 46 curbad.put("value", datacur.get("bad_count")); 47 datalist.add(curbad); 48 49 int STATUS_GREEN = 2; 50 int STATUS_YELLOW = 3; 51 int STATUS_RED = 4; 52 List<Map<String, Object>> linkslist = new ArrayList<Map<String, Object>>(); 53 List<Map<String, Object>> greentoyellow = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_YELLOW, curStartTime, curEndTime, STATUS_GREEN, preStartTime, pr eEndTime); 54 Map<String, Object> gty = new HashMap<String, Object>(); 55 gty.put("source", pregoodname); 56 gty.put("target", curmidname); 57 gty.put("value", greentoyellow.size()); 58 linkslist.add(gty); 59 60 List<Map<String, Object>> greentored = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_RED, curStartTime, curEndTime, STATUS_GREEN, preStartTime, preEndTi me); 61 Map<String, Object> gtr = new HashMap<String, Object>(); 62 gtr.put("source", pregoodname); 63 gtr.put("target", curbadname); 64 gtr.put("value", greentored.size()); 65 linkslist.add(gtr); 66 67 List<Map<String, Object>> yellowtogreen = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_GREEN, curStartTime, curEndTime, STATUS_YELLOW, preStartTime, pr eEndTime); 68 Map<String, Object> ytg = new HashMap<String, Object>(); 69 ytg.put("source", premidname); 70 ytg.put("target", curgoodname); 71 ytg.put("value", yellowtogreen.size()); 72 linkslist.add(ytg); 73 74 List<Map<String, Object>> yellowtored = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_RED, curStartTime, curEndTime, STATUS_YELLOW, preStartTime, preEnd Time); 75 Map<String, Object> ytr = new HashMap<String, Object>(); 76 ytr.put("source", premidname); 77 ytr.put("target", curbadname); 78 ytr.put("value", yellowtored.size()); 79 linkslist.add(ytr); 80 81 List<Map<String, Object>> redtogreen = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_GREEN, curStartTime, curEndTime, STATUS_RED, preStartTime, preEndTi me); 82 Map<String, Object> rtg = new HashMap<String, Object>(); 83 rtg.put("source", prebadname); 84 rtg.put("target", curgoodname); 85 rtg.put("value", redtogreen.size()); 86 linkslist.add(rtg); 87 88 List<Map<String, Object>> redtoyellow = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_YELLOW, curStartTime, curEndTime, STATUS_RED, preStartTime, preEnd Time); 89 Map<String, Object> rty = new HashMap<String, Object>(); 90 rty.put("source", prebadname); 91 rty.put("target", curmidname); 92 rty.put("value", redtoyellow.size()); 93 linkslist.add(rty); 94 95 List<Map<String, Object>> greentogreen = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_GREEN, curStartTime, curEndTime, STATUS_GREEN, preStartTime, preE ndTime); 96 Map<String, Object> gtg = new HashMap<String, Object>(); 97 gtg.put("source", pregoodname); 98 gtg.put("target", curgoodname); 99 gtg.put("value", greentogreen.size()); 100 linkslist.add(gtg); 101 102 List<Map<String, Object>> yellowtoyellow = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_YELLOW, curStartTime, curEndTime, STATUS_YELLOW, preStartTime, preEndTime); 103 Map<String, Object> yty = new HashMap<String, Object>(); 104 yty.put("source", premidname); 105 yty.put("target", curmidname); 106 yty.put("value", yellowtoyellow.size()); 107 linkslist.add(yty); 108 109 List<Map<String, Object>> redtored = tInspectionMarkAllDao.getProjectStatusChangeList(STATUS_RED, curStartTime, curEndTime, STATUS_RED, preStartTime, preEndTime); 110 Map<String, Object> rtr = new HashMap<String, Object>(); 111 rtr.put("source", prebadname); 112 rtr.put("target", curbadname); 113 rtr.put("value", redtored.size()); 114 linkslist.add(rtr); 115 116 result.put("datas", datalist); 117 result.put("links", linkslist); 118 } catch(Exception e) { 119 LOGGER.error(e.toString(), e); 120 } 121 return result; 122 }