Echarts詞雲圖的使用介紹
阿新 • • 發佈:2019-02-11
二、Echarts詞雲圖實際專案使用案例介紹
2.1、引用Echarts的頁面裡核心程式碼片段1
<html class="no-focus" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>首頁</title> <link rel="stylesheet" href="../static/css/epm-ui.css" th:href="@{/css/epm-ui.css}" /> <script src="/js/core/jquery.min.js" th:src="@{/js/core/jquery.min.js}"></script> <script src="/js/hplus/plugins/echarts/echarts-all.js" th:src="@{/js/hplus/plugins/echarts/echarts-all.js}"></script> <script src="/ivap/js/client_lable_page.js" th:src="@{/ivap/js/client_lable_page.js}"></script> </head>
2.2、引用Echarts的頁面裡核心程式碼片段2
<div class="epm col col-nm-12"> <div> <div class="epm bordered card"> <div class="header"> App詞雲圖<a style="float: right;"><i class="fa fa-angle-down"></i></a> </div> <div class="body slds-text-align--center"> <div id="wordCloud" style="height:600px;"></div> </div> </div> </div> </div>
2.3、client_label_page.js核心程式碼如下:
$(function() { getAppInfoAndShow(); }); function getAppInfoAndShow(){ var url="/app/root"; var content=[]; jQuery.ajax({ type:"post", url:url, async:false, data:{labelCode:"A0"}, success:function(data){ content=JSON.parse(data); } }); var echartData=new Array(); for(var i=0;i<content.length;i++){ var obj=new Object(); obj.value=content[i].appCount; obj.name=content[i].labelName; obj.label=content[i].labelCode; obj.itemStyle=wordCloudColor(); echartData[i]=obj; } showWordCloud(echartData); } function wordCloudColor(){ return { normal:{ color:'#C23531' } }; } function showWordCloud(echartData){ var myChart=echarts.init(document.getElementById("wordCloud")); option = { tooltip: { show: false }, series: [{ name: 'Google Trends', type: 'wordCloud', size: ['80%', '80%'], textRotation : [0, 45, -45], textPadding: 0, autoSize: { enable: true, minSize: 14 }, data:echartData }] }; myChart.on(echarts.config.EVENT.CLICK, getIntoAppPage); myChart.setOption(option); } function getIntoAppPage(param){ location.href="/appPage?labelName="+param.data.name; }
2.4、後臺部分核心程式碼片段1 controller
/**
* 獲取31個App類別標籤
* @param labelCode app編碼
* @return json app物件
*/
@ResponseBody
@RequestMapping(value="/app/root")
public String getApplicationCustLabel(@RequestParam(required = true) String labelCode) {
List<AppCustLabel> applicationCustLabels = clientLabelService.getAllApplicationCustLabel(labelCode);
return JSON.toJSONString(applicationCustLabels);
}
}
2.5、後臺部分核心程式碼片段2 service
/**
* 獲取31個類別標籤
* @param labelCode
* @return
*/
public List<AppCustLabel> getAllApplicationCustLabel(String labelCode) {
List<AppCustLabel> applicationCustLabels = clientLabelMapper.findByLabelCodeContaining(labelCode);
for(AppCustLabel cpplicationCustLabel : applicationCustLabels) {
cpplicationCustLabel.setAppCount(clientLabelMapper.countAppByLabelCode(cpplicationCustLabel.getLabelCode()));
}
Collections.sort(applicationCustLabels,new Comparator<AppCustLabel>(){
@Override
public int compare(AppCustLabel o1, AppCustLabel o2) {
return o2.getAppCount().compareTo(o1.getAppCount());
}
});
return applicationCustLabels;
}
2.6、核心程式碼controller 2
//詞雲圖頁面跳轉,根據傳遞的app的值,預設第一頁面
@RequestMapping("/appPage")
public String getAppPage(@RequestParam(value = "labelName", required = false, defaultValue = "world") String labelName, Model model) {
Integer initStartPageNum=0;
params.put("labelName", labelName);
params.put("initStartPageNum", initStartPageNum);
params.put("pageCount", pageCount);
List<OneColumnAppList> oneColumnAppList = appManagementService.getOneColumnAppList(params);
Integer oneColumnAppListTotalNum = appManagementService.getTotalListNum(labelName);
Integer totalPageNum = (oneColumnAppListTotalNum % pageCount == 0) ? oneColumnAppListTotalNum / pageCount : (oneColumnAppListTotalNum / pageCount + 1);
model.addAttribute("totalPageNum", totalPageNum);
model.addAttribute("oneColumnAppList", oneColumnAppList);
model.addAttribute("appName", labelName);
return "pages/appPage";
}
2.7、核心sql 1
<select id="findByLabelCodeContaining" parameterType="java.lang.String" resultMap="APPLabelCode">
select
distinct(LABEL_CODE), LABEL_NAME
from v_DIM_IA_PREFER_LABEL_APP
where LABEL_code LIKE '%'||#{0}||'%'
</select>
2.8、核心sql 2 <select id="countAppByLabelCode" parameterType="java.lang.String" resultType="java.lang.Integer">
select
count(*)
from v_DIM_IA_APP_VISUAL_LIST
where LABEL_list_code LIKE '%'||#{0}||'%'
</select>
2.9、reslutMap AppLabelCode
<resultMap type="com.bonc.demo.domain.ivap.AppCustLabel" id="APPLabelCode">
<result property="labelCode" column="LABEL_CODE"/>
<result property="labelName" column="LABEL_NAME"/>
</resultMap>