【Echarts】Echarts2.0動態載入扇形圖。
阿新 • • 發佈：2019-02-16
Echarts在資料視覺化方面廣泛使用，記錄一個使用Echarts動態載入扇形圖的例子。方便以後使用。
HTML程式碼：
<head> <title>社會治理</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script src="/LeaderDeskBak/static/jquery/jquery-1.8.3.js" charset="utf-8"></script> <script type="text/javascript" src="/LeaderDeskBak/static/js/echarts-all.js" charset="utf-8"></script> <script type="text/javascript" src="/LeaderDeskBak/static/echarts/esl.js" charset="utf-8"></script> <script type="text/javascript" src="/LeaderDeskBak/static/echarts/echarts.js" charset="utf-8"></script> <script type="text/javascript" src="/LeaderDeskBak/static/jquery/jquery-1.9.1.min.js" charset="utf-8"></script> </head> <body> <div id="total" style="width: 100%;text-align: center;height: 30px;padding-top:5px;vertical-align:center "> <label style="font-size:16px;font-weight: bolder;color: #4782DB">城市事件上報情況統計</label> <div class="fenge" style="height:10px;width:100%;"></div> <div id="shuju" class="tubiao" style="height:400px;width:100%; text-align:right"> </div> </div> </body> <script type="text/javascript"> //繪製圖表需要的指標 var indexCodes =''; //圖表的時間範圍 var statisticsDate = 10; //圖表的地域範圍 var statisticsArea ='441900' ; $(document).ready(function() { drawtu(); }); function drawtu(){ require.config({ paths:{ echarts:'/LeaderDeskBak/static/echarts' } }); require( ['echarts', 'echarts/theme/macarons', 'echarts/chart/line', 'echarts/chart/pie', 'echarts/chart/bar', 'echarts/chart/funnel', 'echarts/chart/gauge' ], function (ec,theme) { drawGovernanceforDriver(ec,theme); }); } function drawGovernanceforDriver(ec,theme){ var myChart = echarts.init(document.getElementById('shuju')); var options = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { //orient : 'vertical', //豎著顯示 x : 'left', data:[] }, toolbox: { orient : 'vertical', x : 'right', y: 'bottom', show : true, feature : { /* magicType : { //功能列 show: true, type: ['pie', 'funnel'], //圖餅轉換 option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, */ restore : {show: true}, } }, calculable : false, series : [ { name:'資料佔比', type:'pie', center:['50%', '60%'], //圓心座標 radius : ['40%', '60%'], //內外圓半徑 itemStyle : { normal : { label : { show : true }, labelLine : { show : true, length:'1' } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[] } ] }; myChart.showLoading({ text: "圖表資料正在努力載入..." }); $.ajax({ type: 'GET', url : '/LeaderDeskBak/lodeCockPit/getGovernanceforDriver', dataType: 'json', success:function(data){ var legendData=[]; var seriesData=[]; if(data!=null && data.legendArr.length>0){ legendData=data.legendArr; for(var i=0;i<data.legendArr.length;i++){ seriesData.push({ 'value':data.valueArr[i], 'name': legendData[i], }); } }; options.legend.data=legendData; options.series[0]['data']=seriesData; myChart.setOption(options); }, error:function(){ //資料介面異常處理 var legendData=['']; var seriesData = [{ name:'', type: 'bar', data: [0] }]; options.legend.data=legendData; options.series.data=seriesData; myChart.setOption(options); }, complete:function(){ //不管資料介面成功或異常，都終於載入提示 myChart.hideLoading();//停止動畫載入提示 } }); } </script> </html>
controller程式碼：
@ResponseBody
@RequestMapping(value="/getGovernanceforDriver")
public Map<String, Object> getGovernanceforDriver(){
logger.info("333");
Map<String, Object> data = service.getGovernanceforDriver();
return data;
}service層程式碼：
public Map<String, Object> getGovernanceforDriver(){ List<Governance> governances = dao.getGovernance(); Map<String, Object> data = new HashMap<String, Object>(); List<Object> legendArr = new ArrayList<Object>(); List<Object> valueArr = new ArrayList<Object>(); if(governances.size()>0){ List<GovernanceforDriver> governanceforDrivers = new ArrayList<GovernanceforDriver>(); for(Governance governance:governances){ GovernanceforDriver governanceforDriver = new GovernanceforDriver(); governanceforDriver.setCommunityName(governance.getCommunityName()); governanceforDriver.setCommunityId(governance.getCommunityId()); governanceforDrivers.add(governanceforDriver); legendArr.add(governanceforDriver.getCommunityName()); valueArr.add(governanceforDriver.getCommunityId()); } data.put("legendArr", legendArr); data.put("valueArr",valueArr); }else{ data.put("legendArr", null); data.put("valueArr",null); } return data; }
效果圖：
僅此記錄，以防忘記。