Echarts後臺獲取資料
阿新 • • 發佈：2018-12-18
記錄一下,畢竟不是專業搞前端的
後臺程式碼
@Controller public class EchartsDemo { @ResponseBody @RequestMapping("/hello") public Map hello(){ Map map = new HashMap(); List list = new ArrayList(); list.add("哈哈"); list.add("與配偶同住"); list.add("與子女同住"); list.add("僅與重度殘疾子女共同居住"); list.add("與配偶及子女同住"); list.add("與其他親屬同住"); list.add("與父母同住"); list.add("與其他人同住"); List<EchartsEntity> EchartsEntitys = new ArrayList<>(); EchartsEntitys.add(new EchartsEntity("1001","哈哈")); EchartsEntitys.add(new EchartsEntity("1020","與配偶同住")); EchartsEntitys.add(new EchartsEntity("1300","與子女同住")); EchartsEntitys.add(new EchartsEntity("1100","僅與重度殘疾子女共同居住")); EchartsEntitys.add(new EchartsEntity("1300","與配偶及子女同住")); EchartsEntitys.add(new EchartsEntity("1040","與父母同住")); EchartsEntitys.add(new EchartsEntity("10","與其他人同住")); map.put("EchartsEntitys",EchartsEntitys); map.put("str",list); return map ; } }
頁面程式碼
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <!-- 這裡是載入剛下好的echarts.min.js，注意路徑 --> <script src="../static/eCharts/js/echarts.min.js" th:src="@{/static/eCharts/js/echarts.min.js}"></script> <script src="../static/eCharts/js/jquery-1.11.0.min.js" th:src="@{/static/eCharts/js/jquery-1.11.0.min.js}"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 800px;height:400px;"></div> <script type="text/javascript"> $(function () { $.ajax({ type : "get",//向後臺請求的方式，有post，get兩種方法 url : "/hello",//url填寫的是請求的路徑 cache : false,//快取是否開啟 data : { }, dataType : 'json',//請求的資料型別 success : function(data) {//請求的返回成功的方法 if (data!=null ) { var data1 = data.str; var data2 = data.EchartsEntitys; haha(data1,data2); } else { alert("載入失敗"); } }, error : function(XMLHttpRequest, textStatus, errorThrown) {//請求的失敗的返回的方法 alert("小夥子,出異常了"); } }); function haha (data1,data2) { option = { backgroundColor: "#031845", color: ['#2edfa3', '#bce672', '#ff4777', '#70f3ff', '#4b5cc4', '#f47983', '#8d4bbb', '#6635EF', '#FFAFDA'], tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'horizontal', icon: 'circle', bottom: 20, x: 'center', textStyle: { color: '#fff' }, data: data1 }, series: [{ name: '訪問來源', type: 'pie', selectedMode: 'single', radius: [0, '38%'], label: { normal: { show: false, position: 'inner', formatter: '{d}%', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 10 } } }, labelLine: { normal: { show: false } }, data: data2 }, { name: '訪問來源', type: 'pie', radius: ['40%', '42%'], label: { normal: { formatter: '{b|{b}}\n{hr|}\n{d|{d}%}', rich: { b: { fontSize: 10, color: '#fff', align: 'left', padding: 4 }, hr: { borderColor: '#12EABE', width: '100%', borderWidth: 2, height: 0 }, d: { fontSize: 10, color: '#fff', align: 'left', padding: 4 }, c: { fontSize: 10, color: '#fff', align: 'center', padding: 4 } } } }, labelLine: { normal: { show: true, length: 20, length2: 20, lineStyle: { type: 'dashed', width: 2 } } }, data: data2 } ] }; // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); } }) </script> </body> </html>
效果顯示
