`
wx1568905209
  • 浏览: 25118 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Jquery中用echarts3做词云,已在项目中使用

 
阅读更多

开头一定要引入这两个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>

79d045edf91c574cebfa38fd48378ab30aa.jpg

转载于:https://my.oschina.net/u/3734816/blog/2049584

分享到:
评论

相关推荐

    通过HTML + jquery + echarts 实现文字云图

    在本项目中,开发者可能使用了`echarts.setOption`方法来设置文字云图的配置,如定义颜色、字体大小、布局方式等。示例代码可能如下: ```javascript var option = { series: [{ type: 'wordCloud', sizeRange: ...

    echarts-wordcloud.js词云图插件

    echarts制作词云图需要的文件 ECharts 的词云图是一个插件类型的图表。在 ECharts 官网下载的完整版本不包含词云图,使用时,需要在引入 echarts.js 之后,另外引入词云图对应的 echarts-wordcloud.js

    jquery+echarts+php实时动态图表显示

    在本项目中,"jquery+echarts+php实时动态图表显示"是一个综合性的技术实践,它结合了前端的jQuery、ECharts和后端的PHP,实现了动态数据的实时图表展示。接下来,我们将深入探讨这些技术及其在项目中的应用。 首先...

    JQ+Echarts监控大屏实例:服务大数据可视化监控平台模板,监控大屏、模板

    Jquery+Echarts监控大屏实例:服务大数据可视化监控平台模板,包括源码、素材等。 使用Jquery-echarts实现监控...3) 或者通过 npm 获取 echarts,npm install echarts –save,详见“在 webpack 中使用 echarts” 由

    基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip

    基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视化系统源码(毕业设计).zip基于JQuery+ECharts的采购中标可视...

    jQuery+Echarts实现按年月数据统计柱状图表代码

    在本项目中,"jQuery+Echarts实现按年月数据统计柱状图表代码"是一个使用JavaScript库jQuery和Echarts创建的数据可视化应用。Echarts是一个由百度开发的开源图表库,提供了丰富的图表类型,如柱状图、折线图、饼图等...

    echarts+jquery JS文件.zip

    在ECharts的使用中,jQuery可以帮助开发者更方便地操作DOM元素,进行页面交互,例如在图表加载前后的DOM操作,或者利用jQuery的事件绑定功能实现用户与图表的互动。 将ECharts与jQuery结合使用,可以极大地提升开发...

    jquery+echarts数据大屏展示DEMO(十几个).zip

    通过学习和研究这些DEMO,开发者不仅可以掌握jQuery和ECharts的基本用法,还能了解到如何在实际项目中将它们结合,创造出吸引人的数据大屏。对于数据分析、数据可视化以及前端开发人员来说,这些都是非常有价值的...

    Jquery Echarts图表插件,自己研究总结实例+注释说明(源码)

    在ECharts中,我们通常需要通过jQuery选择器找到图表容器元素,然后初始化ECharts实例。 以下是一个基本的使用步骤: 1. 引入ECharts和jQuery库: 在HTML文件中,你需要引入ECharts的JavaScript文件和jQuery库,...

    JQCloud标签云、词云展示源码

    在"JQCloud标签云、词云展示源码"中,整合了网络资源,这意味着开发人员已经考虑到了在线数据获取和处理。这可能是通过API接口获取实时数据,或者预加载一些静态数据来创建词云。同时,鼠标划入划出信息展示的功能...

    jQuery基于Echarts实现大数据统计图表扩展代码.zip

    - 在ECharts中,使用`series.data`可以设置数据,如果数据量巨大,可能需要动态加载或延迟渲染。 5. **使用须知**: - `使用须知.txt`文件很可能是指导如何部署和使用这些代码的文档,包括安装步骤、依赖库、配置...

    jQuery+html5基于echarts.js中国地图点击弹出下级城市地图代码.zip

    在jQuery中,使用`$(document).ready()`或者简写形式`$(function() {...})`来确保在页面加载完成后再执行JavaScript代码。通过`$("#map").echarts({...})`,我们可以创建一个ECharts实例,将配置项传递给ECharts以...

    基于echarts前后端封装 springboot+jquery+echarts3.x.zip

    标题 "基于echarts前后端封装 springboot+jquery+echarts3.x.zip" 暗示了这个项目是一个结合了ECharts图表库、SpringBoot后端框架以及jQuery前端库的实战应用。ECharts是一款由百度开源的JavaScript数据可视化库,...

    jQuery+echarts数据图表时间间隔和数据个数选择代码

    在IT行业中,数据可视化是至关重要的,特别是在网页开发中,jQuery和ECharts是两种非常流行的工具,用于创建交互式和动态的数据图表。本项目聚焦于使用jQuery与ECharts结合,实现数据图表的时间间隔和数据个数的选择...

    基于echarts前后端封装 springboot+jquery+echarts3+源代码+文档说明

    附demo 可以直接在项目中使用 介绍 ==== * 对echarts前端js对象option进行封装,前端只需要传接口url和div的id * 后台提供对应的java数据结构,每种图形对应自己的抽象模板类,整个数据对象拼接的过程都已经封装好...

    jQuery echarts柱状图数据统计图表插件

    jQuery Echarts插件是基于流行的JavaScript数据可视化库ECharts的一款扩展,它简化了ECharts在jQuery环境中的使用,提供了更友好的API接口,使得开发者可以更方便地创建交互式的数据可视化图表。这款柱状图插件特别...

    jQuery+echarts数据图表时间间隔和数据个数选择代码.zip

    在本项目中,我们主要关注的是使用jQuery与ECharts库创建数据图表的实践。`jQuery+echarts数据图表时间间隔和数据个数选择代码.zip`这个压缩包包含了一个基于jQuery和ECharts的数据可视化示例,这在数据分析和展示中...

    jQuery基于echarts图表插件制作多组品牌销售数据统计柱状图表特效源码.zip

    在jQuery与ECharts结合的应用中,jQuery通常用于页面元素的选择、事件处理和数据的动态加载,而ECharts则负责实际的数据渲染和图表展示。在这个项目中,我们可以期待看到以下的知识点: 1. **jQuery基础**:jQuery...

    jQuery+Echarts实现按年月数据统计柱状图表代码.zip

    3. **初始化ECharts**:在JavaScript部分,使用`$(document).ready()`函数确保DOM加载完成后执行初始化操作。调用`echarts.init()`方法,将之前创建的div元素转化为ECharts实例。 4. **配置图表**:通过`.setOption...

Global site tag (gtag.js) - Google Analytics