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>
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要实现echarts词云图自定义形状,可以使用echarts-wordcloud插件。 首先,在html文件中引入echartsecharts-wordcloud插件的js文件。 然后,在js文件中定义词云图的配置项option,设置series属性的type为'wordCloud',并设置shape属性为自定义形状的svg路径,例如: ```javascript option = { series: [{ type: 'wordCloud', shape: 'path://M10 10 h 80 v 80 h -80 Z', // 自定义形状的svg路径 ... }] }; ``` 其中,'path://'是固定前缀,后面跟上svg路径即可。 最后,调用echarts的setOption方法渲染词云图即可。 需要注意的是,自定义形状要求是一个封闭的路径,不能有交叉或重叠的部分,否则会导致渲染异常。 ### 回答2: Echarts词云图是一种用于展示文本内容词频的可视化图表。在词云图中,词语的大小和颜色表示该词的重要程度或出现频率。 Echarts提供了自定义形状的功能,使得我们可以通过特定的形状来呈现词云图。实现自定义形状的步骤如下: 1. 准备自定义形状的图像:首先,我们需要准备一个自定义的形状图像作为词云图的背景,可以是PNG、SVG等格式的图像。这个图像将成为词云图的形状。 2. 将图像转换为颜色矩阵:使用图片处理工具,将图像转换为一个颜色的矩阵,矩阵的每个元素表示该位置的颜色值。可以使用Python的PIL库或其他工具进行这一步骤。 3. 创建echarts词云图使用Echarts库创建词云图,并将自定义的形状矩阵作为词云图的形状参数传入。可以设置词云图中词语的大小、颜色等属性。 4. 加载词频数据:将文本的词频数据传入词云图中,词云图会根据词频数据自动计算词语的大小和颜色,并根据形状参数进行布局,将词语填充到形状中。 5. 渲染和展示:最后,将词云图渲染到页面上,并展示出来。 通过以上步骤,我们可以实现在Echarts词云图使用自定义形状。这样,我们可以根据不同的需求和场景,选择适合的形状来展示词云图,增加图表的个性化和趣味性。 ### 回答3: echarts词云图可以通过自定义形状来增加图表的个性化效果。自定义形状通常使用一个图片作为词云的形状模板,然后根据图片的轮廓来生成词云的布局。 首先,准备一个形状模板图片,比如一个心形。将模板图片转换为Base64编码的字符串,可以使用在线工具或者编程方式进行转换。然后,将该字符串作为配置项中的maskImage属性的值传递给echarts词云图的配置。 在配置项中,需要设置maskImage为形状模板图片的Base64编码字符串。同时,可以设置词云布局的相关属性,如词云大小、词云字体、词云形状等等。通过相应的配置项,可以实现对词云图的形状进行自定义。 在使用echarts生成词云图时,可以将自定义的形状模板图片和词语数据结合起来,生成一张带有特定形状的词云图。词语的位置和大小会根据形状的轮廓进行调整,从而使词云图呈现出与形状模板相匹配的效果。 总之,通过echarts词云图的自定义形状功能,我们可以根据需求选择合适的形状模板,并与词语数据结合,生成个性化、独特的词云图。这为展示文本数据提供了更加丰富多样的可视化方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值