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

echarts使用jQuery有两种方式: 1. 直接在HTML文件引入jQuery库文件,并在JavaScript代码使用jQuery的API来操作echarts实例。示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts jQuery 示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> $(function () { var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; myChart.setOption(option); }); </script> </body> </html> ``` 2. 使用echarts提供的`$`对象来代替jQuery,直接在JavaScript代码使用`$`对象来操作echarts实例。示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts $ 示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; $.setOption(option); $.resize(); $.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 1 }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值