开头一定要引入这两个js,奇怪的是,3.3.2的echarts.js我下载下来之后词云就出不来了,所以暂时只能这样了,
<script src="https://cdn.bootcss.com/echarts/3.3.2/echarts.js"></script>
<script src='/resources/dist/worldcloud.js'></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart_wordCloud'));
$(function(){
echartsCloud();//初始化echarts图
})
function echartsCloud(){
// 基于准备好的dom,初始化echarts实例
myChart.setOption({
tooltip: {},
series: [{
name:'频率',
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 2, //网格尺寸
size : ['80%','80%'],
sizeRange : [ 35, 100 ],
rotationRange : [ -50, 80 ], //旋转范围
textStyle : {
normal : {
fontFamily:'sans-serif',
color : function() {
return 'rgb('
+ [ Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160) ]
.join(',') + ')';
}
},
emphasis : {
shadowBlur : 5, //阴影距离
shadowColor : '#333' //阴影颜色
}
},
data:[],
}]
});
//异步加载数据
$.ajax({
type:"POST",
url:"/pcDocumentAction/wordCloud.action?view=json&time="+'30',
success:function(data){
myChart.setOption({
series: [{
data: data.obj
}]
});
}
});
};
function selectChange(){
var time=$("#select option:selected").val();
$.ajax({
type:"POST",
url:"/pcDocumentAction/wordCloud.action?view=json&time="+time,
success:function(data){
myChart.setOption({
series: [{
data: data.obj
}]
});
}
});
};
</script>
转载于:https://my.oschina.net/u/3734816/blog/2049584
分享到:
相关推荐
在本项目中,开发者可能使用了`echarts.setOption`方法来设置文字云图的配置,如定义颜色、字体大小、布局方式等。示例代码可能如下: ```javascript var option = { series: [{ type: 'wordCloud', sizeRange: ...
echarts制作词云图需要的文件 ECharts 的词云图是一个插件类型的图表。在 ECharts 官网下载的完整版本不包含词云图,使用时,需要在引入 echarts.js 之后,另外引入词云图对应的 echarts-wordcloud.js
在本项目中,"jquery+echarts+php实时动态图表显示"是一个综合性的技术实践,它结合了前端的jQuery、ECharts和后端的PHP,实现了动态数据的实时图表展示。接下来,我们将深入探讨这些技术及其在项目中的应用。 首先...
Jquery+Echarts监控大屏实例:服务大数据可视化监控平台模板,包括源码、素材等。 使用Jquery-echarts实现监控...3) 或者通过 npm 获取 echarts,npm install echarts –save,详见“在 webpack 中使用 echarts” 由
基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视...
在本项目中,"jQuery+Echarts实现按年月数据统计柱状图表代码"是一个使用JavaScript库jQuery和Echarts创建的数据可视化应用。Echarts是一个由百度开发的开源图表库,提供了丰富的图表类型,如柱状图、折线图、饼图等...
在ECharts的使用中,jQuery可以帮助开发者更方便地操作DOM元素,进行页面交互,例如在图表加载前后的DOM操作,或者利用jQuery的事件绑定功能实现用户与图表的互动。 将ECharts与jQuery结合使用,可以极大地提升开发...
通过学习和研究这些DEMO,开发者不仅可以掌握jQuery和ECharts的基本用法,还能了解到如何在实际项目中将它们结合,创造出吸引人的数据大屏。对于数据分析、数据可视化以及前端开发人员来说,这些都是非常有价值的...
在ECharts中,我们通常需要通过jQuery选择器找到图表容器元素,然后初始化ECharts实例。 以下是一个基本的使用步骤: 1. 引入ECharts和jQuery库: 在HTML文件中,你需要引入ECharts的JavaScript文件和jQuery库,...
在"JQCloud标签云、词云展示源码"中,整合了网络资源,这意味着开发人员已经考虑到了在线数据获取和处理。这可能是通过API接口获取实时数据,或者预加载一些静态数据来创建词云。同时,鼠标划入划出信息展示的功能...
- 在ECharts中,使用`series.data`可以设置数据,如果数据量巨大,可能需要动态加载或延迟渲染。 5. **使用须知**: - `使用须知.txt`文件很可能是指导如何部署和使用这些代码的文档,包括安装步骤、依赖库、配置...
在jQuery中,使用`$(document).ready()`或者简写形式`$(function() {...})`来确保在页面加载完成后再执行JavaScript代码。通过`$("#map").echarts({...})`,我们可以创建一个ECharts实例,将配置项传递给ECharts以...
标题 "基于echarts前后端封装 springboot+jquery+echarts3.x.zip" 暗示了这个项目是一个结合了ECharts图表库、SpringBoot后端框架以及jQuery前端库的实战应用。ECharts是一款由百度开源的JavaScript数据可视化库,...
在IT行业中,数据可视化是至关重要的,特别是在网页开发中,jQuery和ECharts是两种非常流行的工具,用于创建交互式和动态的数据图表。本项目聚焦于使用jQuery与ECharts结合,实现数据图表的时间间隔和数据个数的选择...
附demo 可以直接在项目中使用 介绍 ==== * 对echarts前端js对象option进行封装,前端只需要传接口url和div的id * 后台提供对应的java数据结构,每种图形对应自己的抽象模板类,整个数据对象拼接的过程都已经封装好...
jQuery Echarts插件是基于流行的JavaScript数据可视化库ECharts的一款扩展,它简化了ECharts在jQuery环境中的使用,提供了更友好的API接口,使得开发者可以更方便地创建交互式的数据可视化图表。这款柱状图插件特别...
在本项目中,我们主要关注的是使用jQuery与ECharts库创建数据图表的实践。`jQuery+echarts数据图表时间间隔和数据个数选择代码.zip`这个压缩包包含了一个基于jQuery和ECharts的数据可视化示例,这在数据分析和展示中...
在jQuery与ECharts结合的应用中,jQuery通常用于页面元素的选择、事件处理和数据的动态加载,而ECharts则负责实际的数据渲染和图表展示。在这个项目中,我们可以期待看到以下的知识点: 1. **jQuery基础**:jQuery...
3. **初始化ECharts**:在JavaScript部分,使用`$(document).ready()`函数确保DOM加载完成后执行初始化操作。调用`echarts.init()`方法,将之前创建的div元素转化为ECharts实例。 4. **配置图表**:通过`.setOption...