一、Echarts官方应用示例介绍
二、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>