欢迎来到魔据教育大数据学院,专注大数据工程师培养!
当前位置:首页 > 学习资料 > 讲师博文 > Echarts字符云讲解

Echarts字符云讲解

时间:2017-08-17 17:15:31作者:方明

 

目标:
1.理解大数据可视化
2.什么是Echarts
3.什么是字符云
4.如何使用Echarts实现字符云
 
基础:
需要有html基础,JavaScript基础
 
一、大数据可视化
数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念,美学形式与功能需要齐头并进,通过直观地传达关键的方面与特征,从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而,设计人员往往并不能很好地把握设计与功能之间的平衡,从而创造出华而不实的数据可视化形式,无法达到其主要目的,也就是传达与沟通信息。
数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前,在研究、教学和开发领域,数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。
 
 
二、Echarts
Echarts是由百度团队更新和维护的专为大数据可视化实现的Javascript库,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
 
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
 
三、字符云
字符云就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过滤掉大量的文本信息,使浏览网页者只要一眼扫过文本就可以领略文本的主旨。
 
四、实现步骤
a) 创建index.html文件 (页面显示文件)
b) 引入js文件
i. 引入echarts.min.js文件(Echarts核心js文件)
ii. 引入worldcloud.js文件(字符云扩展js文件)
c) 设置配置数据
i. 设置模拟数据data (显示字符云的文字和值)
ii. 设置字符云配置对象option (配置字符云其他属性)
d) 绘图
i. 创建canvas画布并初始化echarts对象 (得到echarts对象用来绘制)
ii. 绘制字符云 (通过初始化得到的echarts对象绘制字符云)
 
五、具体实现
1.创建Index.html
此页面主要用来放置canvas画布,canvas画布是用来展示字符云的。
代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Echarts字符云</title>
</head>
<body>
</body>
</html>
 
2.引入js文件
要使用Echarts需要在index.html的head部分引入Echarts的核心JavaScript文件echarts.min.js
除此之外还要引入字符云的核心扩展文件worldcloud.js
代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
        <meta charset="UTF-8" />
       <title>Echarts字符云</title>
       <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 
</body>
</html>
 
3.设置配置数据
data数据为我们要在字符云中显示的文字(name)和文字的值(value),值的大小直接影响文字的大小和文字的颜色,注:这个数据应该是又大数据分析师分析之后从数据库中调取过来的,由于没有数据库和配置环境我们用模拟数据来展示。
data数据基本格式为:
[
{name:文字1,value:50},
{name:文字2,value:62},
{name:文字3,value:13}
]
在JavaScript中我们需要声明一个变量,将数据暂时存储在这个变量中,之后在配置整体字符云时使用它,在声明变量前,需要一个script标签包裹起来,script标签中的代码及为JavaScript代码。
具体代码格式如下:
<!DOCTYPE html>
<html lang="zh">
<head>
       <meta charset="UTF-8" />
       <title>Echarts字符云</title>
       <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
       //数据,键值对
       var data = [
       {
      "name": "Robin Hood  Men in Tights",
      "value": "22.72"
           },
           {
             "name": "Joheunnom nabbeunnom isanghannom",
             "value": "25.32"
           },
           {
             "name": "The Mosquito Coast",
             "value": "31.88"
           },
           {
             "name": "Hatari!",
             "value": "21.60"
           },
           {
             "name": "Tarzan Finds a Son!",
             "value": "21.19"
           },
           {
             "name": "Three Kings",
             "value": "32.94"
           },
           {
             "name": "The Man Who Would Be King",
             "value": "22.69"
           },
           {
             "name": "Mulan",
             "value": "48.79"
           },
           {
             "name": "EuroTrip",
             "value": "26.38"
           }
       ];
   </script>
</head>
<body>
</body>
</html>
option配置
option为Echarts的配置项,它包括我们需要展示图形的标题,图例,坐标轴,图形缩放,提示框,工具栏,数据,动画等配置。
option是作为一个Javascript对象的形式出现的,具体形式如下:
{
title:{},//标题
legend:{},//图例
xAxis:{},//x坐标轴
yAxis:{},//y坐标轴
series:[
data:[]//数据
],
}
这只是简单的一个option案例,详情请自行查看echarts.baidu.com
 
配置option时同data一样需要一个变量来保存,具体形式如下:
var option = {
    title:{
        text:"字符云",//标题文字
    },
    tooltip: {},//鼠标划入的提示框
    series: [{
        type: 'wordCloud', //绘图类型为字符云
        width:"100%",//所占整体宽度
        height:"98%",//所占整体高度
        gridSize: 6,//文字间距
        sizeRange: [10, 40],//文字大小[最小,最大]
        rotationRange: [0,0],//旋转最大和最小角度
        //rotationStep:30,//文字旋转单位,30表示30°的倍数
        shape: 'ellipse',//整体字符云展现的图形,ellipse为椭圆形
        textStyle: {//文字样式设置
            normal: {
                color: function() {//颜色
                    return 'rgb(' + [//返回随机生成的颜色
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {//鼠标划入样式
                shadowBlur: 10,//文字阴影模糊度
                shadowColor: '#333'//文字阴影颜色
            }
        },
        data: data//数据
    }]
};
通过注释我们可以清晰的理解option中每个参数的作用,每个都是以键值对的形式展现,其中data:data中的值为刚刚我们定义的变量值。
 
4.绘制
option配置好了,最后一步就是使用echarts方法加载option并绘制图形。
绘制步骤:
a.图片要绘制在哪儿?尺寸是什么
b.什么时候绘制?
c.怎么绘制?
 
a.我们要绘制图形首先要指定图形在何处绘制,那么需要在body中加入标签如下:
<body>
<div id=main style=height:500px;></div>
</body>
div为标签
Id为标识
style为设置绘图样式,宽度默认100%,高度默认0,设置高度为500px
b.何时绘制图形那?我们需要等到整个html文件加载完毕之后绘制图形,在Javascript中有一个方法会在页面加载完成之后执行,代码如下:
window.onload = function(){
//页面加载完成才执行这里的代码
}
 
c.如何绘制?只需两步,第一步初始化echarts,第二部加载option对象。
代码如下:
<script>
window.onload = function(){
    //初始化并返回绘制图形节点myChart
        var myChart = echarts.init(document.getElementById("main"));
        //加载option绘制图形
myChart.setOption(option);
}
</script>
 
这样一个字符云就制作完成了,整体index.html代码如下:
<!DOCTYPE html>
<html>
       <head>
              <meta charset="UTF-8">
             <title></title>
             <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
             <script src="js/worldcloud.js" type="text/javascript" charset="utf-8"></script>
             <script type="text/javascript">
                             //数据,键值对
                            var data = [
                                     {
                                       "name": "Robin Hood  Men in Tights",
                                       "value": "22.72"
                                      },
                                      {
                                        "name": "Joheunnom nabbeunnom isanghannom",
                                        "value": "25.32"
                                      },
                                      {
                                        "name": "The Mosquito Coast",
                                        "value": "31.88"
                                      },
                                      {
                                        "name": "Hatari!",
                                        "value": "21.60"
                                      },
                                      {
                                        "name": "Tarzan Finds a Son!",
                                        "value": "21.19"
                                      },
                                      {
                                        "name": "Three Kings",
                                        "value": "32.94"
                                      },
                                      {
                                        "name": "The Man Who Would Be King",
                                        "value": "22.69"
                                      },
                                      {
                                        "name": "Mulan",
                                        "value": "48.79"
                                      },
                                      {
                                        "name": "EuroTrip",
                                        "value": "26.38"
                                      }
                                  ];
                                  var option = {
                                      title:{
                                          text:"字符云",//标题文字
                                      },
                                      tooltip: {},//鼠标划入的提示框
                                      series: [{
                                          type: 'wordCloud', //绘图类型为字符云
                                          width:"100%",//所占整体宽度
                                          height:"98%",//所占整体高度
                                          gridSize: 6,//文字间距
                                          sizeRange: [10, 40],//文字大小[最小,最大]
                                          rotationRange: [0,0],//旋转最大和最小角度
                                          //rotationStep:30,//文字旋转单位,30表示30°的倍数
                                          shape: 'ellipse',//整体字符云展现的图形
                                          textStyle: {//文字样式设置
                                              normal: {
                                                  color: function() {//颜色
                                                      return 'rgb(' + [//返回随机生成的颜色
                                                          Math.round(Math.random() * 160),
                                                          Math.round(Math.random() * 160),
                                                          Math.round(Math.random() * 160)
                                                      ].join(',') + ')';
                                                  }
                                              },
                                              emphasis: {//鼠标划入样式
                                                  shadowBlur: 10,//文字阴影模糊度
                                                  shadowColor: '#333'//文字阴影颜色
                                              }
                                          },
                                          data: data
                                      }]
                                  };
    
                                  window.onload = function(){
                                      var myChart = echarts.init(document.getElementById("main"));
                                      myChart.setOption(option);
                                  };
                          </script>
                   </head>
                   <body>
                          <div id="main" style="height:500px;"></div>
                  </body>
</html>
 
 

 


更多大数据相关资讯敬请关注魔据教育,为您分享最及时的大数据资讯。
学习大数据敬请关注魔据教育微信二维码。
魔据教育微信二维码

【版权与免责声明】如发现内容存在版权问题,烦请提供相关信息发邮件至kefu@mojuedu.com,我们将及时沟通与处理。本站内容除非来源注明魔据教育,否则均为网友转载,涉及言论、版权与本站无关。

全国咨询热线:18501996998,值班手机:18501996998(7*24小时)

在线咨询:张老师QQ 320169340

企业合作服务专线:010-82340234-821, 院校合作洽谈专线:010-82340234

Copyright 2001-2019 魔据教育 - 北京华育兴业科技有限公司 版权所有,京ICP备17018991号-2

免费在线咨询立即咨询

免费索取技术资料立即索取

大数据技术交流QQ:226594285

电话咨询010-82340234