大数据教程:数据可视化(ECharts)

大数据教程:数据可视化(ECharts)

  • 一.数据可视化概述
    • 一)数据处理流程
      • 1.数据采集
      • 2.数据清洗
      • 3.数据计算
      • 4.数据可视化
  • 二.数据可视化组件
    • 一)常见可视化组件
      • 1.ECharts
      • 2.HighCharts
      • 3.D3.js
    • 二)环境准备
      • 1.大数据环境
      • 2.开发环境
  • 三.Echarts简单实例
    • 一)下载与安装
    • 二)echarts的使用

一.数据可视化概述

将结果数据的每一个数据项作为图表的元素表示,大量的数据集构成数据图像,同时将数据的各个属性以多维度的方式展现,可以提高数据可读性。

一)数据处理流程

1.数据采集

将已经存在的数据管理起来(爬虫【深度爬取】—网页上的数据,文本文件(xls,csv)上传,数据库导出,数据流【金融证券天气 (保证实时性)】,长文本,高维数据)
本次研究基于离线数据的框架

技术点:爬虫框架,hdfs,hive,sqoop

2.数据清洗

数据降噪(噪点:对于结果数据影响较大的数据)
数据关联关系清洗出需要进行计算的数据
最终得到结构化或半结构化的数据

技术点:hql,mr

3.数据计算

统计分析:sql,mr–》分组汇总,极值,多维度展示
结果预测:spark(mllib)机器学习(分类/聚类算法库)

4.数据可视化

(把数据库中的数据集以图表的形式展现出来)

Java中的char库
Echarts,HighCharts,Dj—》数据多维度,多种形式的展示–》可视化的可配置性高,这种可配置性是通过界面化的操作制定的

二.数据可视化组件

一)常见可视化组件

1.ECharts

Echarts:百度开源项目,国内应用十分广泛,涉及金融,医疗,物流,气候检测等多个领域,目前已进入Apache孵化器

2.HighCharts

HighCcharts在09年发布,使用纯 js 编写的图表库

3.D3.js

D3.js基于数据处理文档的js库。强调网络标准,将强大的可视化组件和数据驱动方法结合到DOM操作中

二)环境准备

1.大数据环境

  • jdk
  • Hadoop
  • Mysql
  • Hive 开启远程连接

2.开发环境

  • 访问大数据环境
  • 能够使用HiveJDBC读取运算结果(用reduce也可以)
  • WebProject

三.Echarts简单实例

一)下载与安装

下载地址:https://www.echartsjs.com/zh/download.html此网址是官网给的下载地址,打开是这样的,然而并不知道该下哪一个。大数据教程:数据可视化(ECharts)_第1张图片

  • 所以另辟蹊径,重新找了一个下载地址
  • 下载地址:https://www.7down.com/soft/214165.html

  • 在下图中普通下载地址中任选一个下载

大数据教程:数据可视化(ECharts)_第2张图片
下载之后,解压在电脑任意一个你能找到的位置,解压之后是这个样子滴
大数据教程:数据可视化(ECharts)_第3张图片
我们主要要用的是echarts.min.js这个文件

二)echarts的使用

  1. 新建一个HTML文件
  2. 把echarts.min.js文件和刚才新建的HTML文件放到一个文件夹里
  3. 在HTML中编写如下代码:
<!DOCTYPE html>
<html>
<head>

    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
     
            title: {
     
                text: 'ECharts 入门示例'
            },
            tooltip: {
     },
            legend: {
     
                data:['销量']
            },
            xAxis: {
     
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
     },
            series: [{
     
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
  • 用浏览器打开编写的HTML文件,就会出现下面的折线图

大数据教程:数据可视化(ECharts)_第4张图片

你可能感兴趣的:(可视化,大数据,数据可视化)