数据可视化工具简介

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

什么是数据可视化

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。在实际工作中，数据分析能够帮助管理者进行判断和决策，以便采取适当策略与行动。

数据可视化分析有什么作用

1.现状分析

    告诉你过去发生了什么，告诉你企业现阶段的整体运营情况，通过各个经营指标的完成情况来衡量企业的运营状态，以说明企业整体运营是更好了还是坏了，好的程度是如何，坏的程度又到哪里。

2.原因分析

    告诉你某一现状为什么发生，经过第一阶段的现状分析，我们对企业的运营情况有了一个基本的了解，但是不知道运营情况具体好在哪里，差在哪里，是什么原因引起的。这时候我们就需要开展原因分析，以进一步确定业务变动的具体原因。

3.预测分析

    告诉你将来会发生什么，在了解企业运营现状后，有时候还需要对企业未来发展趋势做出预测，为企业制定经营目标以及提供有效的策略参考与决策依据，以确保企业的可持续健康发展。

如何实现数据可视化

1、通过写代码的方式实现各种大屏的制作

Echarts介绍

    大部分人可能会选择Echarts组件来做数据可视化，Echarts是百度的一款开源数据图表组件产品，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 Echarts：百度开发的数据可视化库，国内图表库的 “领军人物”

官网：https://echarts.apache.org/zh/index.html

Echarts使用

1、使用命令安装Echarts：

npm install echarts --save
或
yarn add  echarts --save

2、引入

• 全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）

import * as Echarts from 'echarts';
Vue.prototype.$Echarts = Echarts;

• 组件内按需引入 ( 推荐使用 )

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表

3、简单使用

首先应该明确Echarts图形必须满足四项刚性条件才可以绘制：

• 准备一个具有宽高的容器（container）；
• 每次绘制之前需要初始化（init）；
• 必须设置配置，否则无从绘制（option）；
• 改变数据时必须传入改变的数据，否则监听不到新数据（setOption）；

4、组件中使用示例

<!-- 准备具有宽高的容器 -->
<div id="chart" style="width: 100%; height: 100%" ref="chart"></div>

export default {
    name: 'echarts01',
    data () {
      return {
        chart: null
      }
      }, //图表实例
    mounted () {
      this.init()
    },
    methods: {
      init () {
        console.log(this.$Echarts)
        //2.初始化
        this.chart = this.$Echarts.init(this.$refs.chart)
        //3.配置数据
        let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          }, //X轴
          yAxis: { type: 'value' }, //Y轴
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
            }], //配置项
        }
        // 4.传入数据
        this.chart.setOption(option)
      },

    },
  }

自适应窗口大小：
为了兼容性，需要做到每个图表根据屏幕变化而自适应宽高

单个 / 多个图表均生效：

mounted() {
   window.addEventListener('resize', () => {
       this.chart.resize();
   });
}

---

2、通过可视化工具实现各种大屏的制作

资源监控仪表盘Grafana介绍

    Grafana是用于可视化大型测量数据的开源程序，他提供了强大和优雅的方式去创建、共享、浏览数据。dashboard中显示了你不同metric数据源中的数据。

Grafana最常用于因特网基础设施和应用分析，但在其他领域也有机会用到，比如：工业传感器、家庭自动化、过程控制等等。

Grafana有热插拔控制面板和可扩展的数据源，目前已经支持Graphite、InfluxDB、OpenTSDB、Elasticsearch等等40多种数据库类型。

安装

详见官网，如果安装不成功可参考这篇文章

安装完成后使用 brew services start grafana 命令启动服务，登录 Grafana 监控界面。brew services stop grafana 命令关闭服务.
默认的 Grafana 的用户名和密码都是 admin，建议在登录后先修改为更复杂的密码。

使用

您可选择内置的监控模板 ，查看 Pod 和 Node 的监控 Dahsboard。
本示例使用的 Grafana 版本内置了两个模板，一个负责展示节点级别的物理资源，一个负责展示 Pod 相关的资源。开发者也可以通过添加自定义的 Dashboard 的方式进行更复杂的展现，也可以基于 Grafana 进行资源的告警等。

---