為什么80%的碼農都做不了架構師？>>> ??

聽說作者最近離開Baidu創業去了，以下是他個人錄制的教程，并非認識大神，有好的東西就搬運分享一下...

【http://study.163.com/course/introduction/1016007.htm?utm_source=weibo&utm_medium=webShare&utm_campaign=share&utm_content=courseIntro】

【圖一】

【圖二】

需求:

由于業務需求，如上【圖一】閥室，點擊其它類型之后，動態切換其子分類如上【圖二】閥室-其它所示，(圖表上的數值并非準確，方便開發直接改數據庫的)

就是第一層餅圖，顯示大分類，第二層餅圖，顯示大分類的對應的子分類...

API:

http://echarts.baidu.com/doc/doc.html#實例方法

馬上翻API得知，有公共事件監聽,,,官方Demo如下

http://echarts.baidu.com/doc/example/event.html

輪到上映粗狂的需求code:

/**?根據指標組初始化圖標?*/ initEChartsByKpiGroup:?function?()?{$('.pageRightBody').html('');$('.pageRightBody').append('<table?class="lastTbl"?style="clear:?both"></table>');//?根據管線底下的資源數量遍歷出圖表for?(var?e?=?0;?e?<?resourceECharts.length;?++e)?{DataHandler.getResourceKpiCfgRelationGroupByKpiGroup({version:?searchObj.version,pipeLineId:?searchObj.pipeLineId,resourceType:?resourceECharts[e].resourceType},?function?(resultKpiGroup)?{//?初始化圖標div$('.pageRightBody?.lastTbl').before('<table?class="pageRightTable"?id="pageRightTable'?+?e?+?'"?style="width:?33%;?float:?left;"><\/table>');var?$table?=?$('#pageRightTable'?+?e);var?html?=?'<td><div?class="chartContent'?+?e?+?'"?data-key="'?+?resultKpiGroup[0].resourceTypeName?+?'"?style="height:?300px;width:?100%;z-index:100;"></div></td>';//?生成資源表格到界面上$table.append(html);//?保存圖表數據對象var?pieKpiGroup?=?{};//?計算圖表中每個類別的總數var?total?=?0;//?總數var?legendData?=?new?Array();var?seriesData?=?new?Array();for?(var?i?=?0;?i?<?resultKpiGroup.length;?i++)?{total?+=?resultKpiGroup[i].num;legendData.push(resultKpiGroup[i].kpiGroupName);seriesData.push({value:?resultKpiGroup[i].num,kpiGroup:?resultKpiGroup[i].kpiGroup,name:?resultKpiGroup[i].kpiGroupName,resourceType:?resultKpiGroup[i].resourceType,resourceTypeName:?resultKpiGroup[i].resourceTypeName});}pieKpiGroup.total?=?total;pieKpiGroup.legendData?=?legendData;pieKpiGroup.seriesData?=?seriesData;$('.chartContent'?+?e).each(function?()?{//?當前點擊在哪層【1:?指標組、2:?指標分類、3:?指標詳情】var?clicklayers?=?1;var?$this?=?$(this);var?pipECharts?=?echarts.init($this[0]);var?val?=?$this.attr('data-key');var?optionKpiGroup?=?{title:?{text:?val?+?'[總數:'?+?pieKpiGroup.total?+?']',x:?'center'},tooltip:?{trigger:?'item',formatter:?"?<br/>?{c}?(ze8trgl8bvbq%)"},legend:?{orient:?'horizontal',x:?'center',y:?'50px',data:?pieKpiGroup.legendData},calculable:?true,series:?[{name:?'總數['?+?pieKpiGroup.total?+?']',type:?'pie',radius:?'50%',center:?['50%',?'60%'],data:?pieKpiGroup.seriesData}]};//?監聽資源分類點擊事件【根據clicklayers去判斷當前在哪一層】pipECharts.on(echarts.config.EVENT.CLICK,?function(param){if(clicklayers?==?1){//?1:?指標組clicklayers?=?2;$.post(path?+?'/admin/pipelineCheck/getResourceKpiCfgRelationByKpiGroup',?{version:?searchObj.version,pipeLineId:?searchObj.pipeLineId,pipeLineCode:?searchObj.pipeLineCode,resourceType:?param.data.resourceType,kpiGroup?:?param.data.kpiGroup,kpiGroupName?:?param.data.name},?function(resultKpiType){var?pieKpiType?=?{};var?total?=?0;var?legendData?=?new?Array();var?seriesData?=?new?Array();for?(var?i?=?0;?i?<?resultKpiType.length;?i++)?{total?+=?resultKpiType[i].num;legendData.push(resultKpiType[i].kpiTypeName);seriesData.push({value:?resultKpiType[i].num,kpiGroup:?resultKpiType[i].kpiGroup,kpiGroupName:?resultKpiType[i].kpiGroupName,kpiType:?resultKpiType[i].kpiType,name:?resultKpiType[i].kpiTypeName,resourceType:?resultKpiType[i].resourceType,resourceTypeName:?resultKpiType[i].resourceTypeName,version:?searchObj.version,pipeLineCode:?searchObj.pipeLineCode});}pieKpiType.total?=?total;pieKpiType.legendData?=?legendData;pieKpiType.seriesData?=?seriesData;var?optionKpiType?=?{title:?{text:?val?+?'-'+?resultKpiType[0].kpiGroupName?+?'[總數:'?+?pieKpiType.total?+?']',x:?'center'},tooltip:?{trigger:?'item',formatter:?"?<br/>?{c}?(ze8trgl8bvbq%)"},toolbox:{show?:?true,orient:?'horizontal',x:?'right',y:?'top',color?:?['#1e90ff','#22bb22','#4b0082','#d2691e'],backgroundColor:?'rgba(0,0,0,0)',borderColor:?'#ccc',borderWidth:?0,padding:?5,showTitle:?true,feature?:?{toBack?:?{show?:?true,title?:?'返回上一層',icon?:?path?+?'/resources/admin/pipelineCheck/images/ico_back.png',onclick?:?function?(){//?在第二層點擊返回上一層按鈕時，狀態字段改變【clicklayers】pipECharts.setOption(optionKpiGroup,?true);clicklayers?=?1;}}}},legend:?{orient:?'horizontal',x:?'center',y:?'50px',data:?pieKpiType.legendData},calculable:?true,series:?[{name:?'總數['?+?pieKpiType.total?+?']',type:?'pie',radius:?'50%',center:?['50%',?'60%'],data:?pieKpiType.seriesData}]};pipECharts.setOption(optionKpiType,?true);});}else?if(clicklayers?==?2){//?2:?指標分類var?title?=?param.data.resourceTypeName?+?'-'?+?param.name;//?判斷是否生成該臨時菜單if($(top.document).find('#menuContainer?li.toCheckList').length?==?0){var?url?=?'admin/pipelineCheck/toCheckList?title='?+?title?+?'&resourceType='?+?param.data.resourceType?+?'&kpiGroup='?+?param.data.kpiGroup?+?'&kpiType='?+?param.data.kpiType?+?'&version='?+?param.data.version?+?'&pipeLineCode='?+?param.data.pipeLineCode;$(top.document).find('#menuContainer').append('<li?hrefValue='?+?url?+?'?data-value-id="toCheckList"?class="toCheckList">校驗數據</li>');if($(top.document).find('#toCheckList').length){$(top.document).find('#toCheckList').attr('src',?url);}$(top.document).find('#menuContainer?li.toCheckList').click();}else{$(top.document).find('#menuContainer?li.toCheckList').click();}}else?if(clicklayers?==?3){//?3:?指標詳情}});pipECharts.setOption(optionKpiGroup,?true);});});} }

粗暴的代碼完畢,,,

自己備用初始化Echarts代碼結構

/***?初始化【用戶登錄地圖分布圖】*/initCusLoginMap:?function?(statType)?{var?cusLoginMap?=?echarts.init($('#cusLoginMap')[0]);cusLoginMap.showLoading({text:?'正在努力為您加載中...',x:?'center',y:?'center',textStyle:?{fontSize:?20},effect:?'bubble'});DataHandler.getCusLoginMapData({statType:?statType},?function(result){//?保存最大數var?maxValue?=?0;if?(result.result)?{var?stat?=?JSON.parse(result.result.stat);//?循環遍歷賦值for?(var?i?=?0;?i?<?stat.length;?i++)?{for?(var?n?=?0;?n?<?mapData.length;?n++)?{if?(stat[i].provinceCode?==?mapData[n].provinceCode)?{mapData[n].value?=?stat[i].value;//?判斷各地區中最大值，并保存if?(stat[i].value?>?maxValue)?{maxValue?=?stat[i].value;}}}}}//?根據具體圖表進行修改var?option?=?{title:?{text:?'用戶登錄地區分布圖',subtext:?subtextArray[statType],x:?'center'},?tooltip:?{trigger:?'item',formatter:?function?(params,?ticket,?callback)?{return?params.name?+?":?"?+?params.value;}},?dataRange:?{min:?0,max:?Math.ceil(maxValue?/?100)?*?100?==?0???100?:?Math.ceil(maxValue?/?100)?*?100,//?maxValue地圖只能顯示整百的數據，不然的話會帶上小數位precision:?0,splitNumber:?5,x:?'left',y:?'bottom',text:?['活躍',?'僵尸'],//?文本，默認為數值文本calculable:?true},?toolbox:?{show:?true,orient:?'vertical',x:?'right',y:?'center',feature:?{restore:?{show:?true},saveAsImage:?{show:?true}}},?series:?[{//?不同類型的圖表有不一樣的參數name:?'用戶',type:?'map',mapType:?'china',roam:?false,itemStyle:?{normal:?{label:?{show:?true}},emphasis:?{label:?{show:?true}}},?data:?mapData}]};cusLoginMap.setOption(option,?true);cusLoginMap.hideLoading();});}

轉載于:https://my.oschina.net/p2ng/blog/400720

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的ECharts饼图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。