用echarts3和worldcloud制作炫酷的字符云图

最新推荐文章于 2024-07-14 18:12:01 发布

忘了流泪

最新推荐文章于 2024-07-14 18:12:01 发布

阅读量1.6w

点赞数 3

分类专栏： web前端文章标签： web前端 echarts3 云图

本文链接：https://blog.csdn.net/qq_35052627/article/details/71082499

版权

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

最近有个项目需要做出云图来，一开始还不知道云图是什么鬼，直到需求在网上找了个图我才恍然大悟，但是大悟完就开始一脸懵逼了，这玩意怎么做？因为当时项目紧，项目经理就先叫我用photoshop画了一个云图给贴上了~~最近听同事说echart也可以实现的，就又去烦了好大一会儿，才发现echarts3的例子中并没有云图的例子，只有echarts2中有，然后试着把2中的代码弄到3下面，果然不出所料的报错了，于是就上网找方法，网上给出的解释是得引入一个worldcloud.js文件。下面就不废话直接上代码了~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/worldcloud.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
    $(function(){
        echartsCloud();//初始化echarts图
    })
function echartsCloud(){
    // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        title: {
            text: 'echarts3云图展示'
        },
        tooltip: {},
        series: [{
            type : 'wordCloud',  //类型为字符云
                shape:'smooth',  //平滑
                gridSize : 2, //网格尺寸
                size : ['80%','80%'],
                //sizeRange : [ 50, 100 ],  
                rotationRange : [ 46, 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:[],
        }]
    });
    // 异步加载数据
    $.get('./cloud.json').done(function (data) {
        // 填入数据
        myChart.setOption({
            series: [{
                data: data.dataCloud
            }]
        });
    });
}  


    </script>
</body>
</html>

上面有详细的注释，我也不多废话了，主要要注意的还是json数据的格式，今天写的时候老是请求不成功，网上看了各种方法都试了还是不行，最后去百度搜json找在线解析的网站上校验才发现我的json格式写错了，多加了一个逗号，浪费我了一个多小时的时间，哎~~看着落日又想起了我在夕阳下的奔跑，那是我失去的青春~~哈哈，下面是我写的json文件，各位要引以为戒呀。

{
"dataCloud":[
{"name": "云图","value": "200"},
{"name": "是个啥","value": "156"},
{"name": "他啥都不是","value": "122"},
{"name": "就是他呆子","value": "119"},
{"name": "傻子和疯子","value": "108"},
{"name": "营养快线","value": "101"},
{"name": "哈哈哈到家","value": "96"},
{"name": "瑞士军刀","value": "84"},
{"name": "DW情侣对表","value": "58"},
{"name": "清风抽纸","value": "55"},
{"name": "OPPO R9S","value": "46"},
{"name": "这一刻更清晰","value": "28"},
{"name": "呵呵旧宫style","value": "27"},
{"name": "债券评级","value": "26"},]
}

各位看官看到这可别急着复制粘贴，因为这个json是错误的！！知道错误在哪么？就是因为债券评级花括号后面、中括号前面的逗号~~最后一个逗号一定要去掉，否则ajax会获取不到json文件中的数据哟。。。而且这里还有一个要注意的就是value值一定要按照从大到小的顺序来写，否则你会发现你的name和value会不对照~~

刚刚又发现个问题就是要注意我上面引入js文件的引入顺序，一定要吧worldcloud.js放在echarts后面引入，否则会报错。

最后把演示地址给你们贴上：http://webmq.cn/echartsCloud/2-1.html

下载地址是：http://webmq.cn/echartscloudzip.zip

忘了流泪

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
13
评论
用echarts3和worldcloud制作炫酷的字符云图

最近有个项目需要做出云图来，一开始还不知道云图是什么鬼，直到需求在网上找了个图我才恍然大悟，但是大悟完就开始一脸懵逼了，这玩意怎么做？因为当时项目紧，项目经理就先叫我用photoshop画了一个云图给贴上了~~最近听同事说echart也可以实现的，就又去烦了好大一会儿，才发现echarts3的例子中并没有云图的例子，只有echarts2中有，然后试着把2中的代码弄到3下面，果然不出所料的报错了，于
复制链接

扫一扫

专栏目录