Echarts词云图的使用介绍

一、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>

Echarts词云图的使用介绍

一、Echarts官方应用示例介绍

二、Echarts词云图实际项目使用案例介绍

猜你喜欢