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

    Echarts字符云讲解

    时间:2017-08-17 17:15:31作者:[!--zuozhe--]

     

    目标:
    1.理解大数据可视化
    2.什么是Echarts
    3.什么是字符云
    4.如何使用Echarts实现字符云
     
    基础:
    需要有html基础,JavaScript基础
     
    一、大数据可视化
    数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。但是,这并不就意味着数据可视化就?#27426;?#22240;为要实现其功能用途而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念,美学形式与功能需要齐头并进,通过直观地传达关键的方面与特征,从而实现对于相当稀疏而又复杂的数据集的深入洞察。?#27426;?#35774;计人员往往并不能很好地把握设计与功能之间的平衡,从而创造出华而不实的数据可视化形式,无法达到其主要目的,也就是传达与沟通信息。
    数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前,在研究、教学和开发领域,数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟?#30446;?#23398;可视化领域与较年轻的信息可视化领域的统一。
     
     
    二、Echarts
    Echarts是由百度团队更新和维护的专为大数据可视化实现的Javascript库,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层?#35272;?#36731;量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定?#39057;?#25968;据可视化图表。
    ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统?#39057;?#30418;形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
     
    ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
     
    三、字符云
    字符云就是对网络文本中出现频?#24335;?#39640;的“关键词”予以视觉?#31995;?#31361;出,形成“关键词云层”或“关键词渲染”,从而过滤掉大量的文本信息,使浏览网页者只要一眼扫过文本就可以领略文本的主旨。
     
    四、实现步骤
    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画布是用来?#25925;?#23383;符云的。
    代码如下
    <!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),值的大小直接影响文字的大小和文字的颜色,注:这个数据应该是又大数据分析师分析之后从数据库中调取过来的,由于没有数据库和配置环境我们用模拟数据来?#25925;盡?/span>
    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的配置项,它包括我们需要?#25925;就?#24418;的标题,图例,坐标轴,图形缩放,提?#31350;潁?#24037;具栏,数据,动画等配置。
    option是作为一个Javascript对象的形式出现的,具体形式如下:
    {
    title:{},//标题
    legend:{},//图例
    xAxis:{},//x坐标轴
    yAxis:{},//y坐标轴
    series:[
    data:[]//数据
    ],
    }
    这只是简单的一个option案例,详情请自行查看echarts.baidu.com
     
    配置option时同data一样需要一个变量来保存,具体形式如下:
    var option = {
        title:{
            text:"字符云",//标题文字
        },
        tooltip: {},//鼠标划入的提?#31350;?/span>
        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'//文字阴?#25226;?#33394;
                }
            },
            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.何时绘制图?#25991;牽?#25105;们需要等到整个html文件加载完?#29616;?#21518;绘制图形,在Javascript中有一个方法会在页面加载完成之后执?#26657;?#20195;码如下:
    window.onload = function(){
    //页面加载完成才执行这里的代码
    }
     
    c.如何绘制?只需?#35762;劍?#31532;一步初始化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: {},//鼠标划入的提?#31350;?/span>
                                          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'//文字阴?#25226;?#33394;
                                                  }
                                              },
                                              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>
     
     

     


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

    【版权与免责声明】如发现内容存在版权问题,烦请提供相关信息发?#22987;?#33267;[email protected],我们将及时沟通与处理。本站内容除非来源注明魔据教育,否则均为网友转载,涉?#25226;?#35770;、版权与本站无关。

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

    在线咨询:张老师QQ 320169340

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

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

    安徽十一选五开奖号码
  • 极速时时彩怎么玩啊 2019年度中国福彩票销售 3d试机号最近30期列表 500w重庆时时彩开奖 网球比分雷速 体彩排列三走势图和值 2019年4月20日福彩3d 吉林新快3开奖 阿飞六合图库资料大全 河南福利彩票幸运武林 北京快三合值走势图 成都彩票中奖哪里去领 青海11选5今天开奖 6场半全场14092期分析 福建快三走势图和值