提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
数据可视化工具简介
- 什么是数据可视化
- 数据可视化分析有什么作用
- 如何实现数据可视化
- 1、通过写代码的方式实现各种大屏的制作
- Echarts介绍
- Echarts使用
- 2、通过可视化工具实现各种大屏的制作
- 资源监控仪表盘Grafana介绍
- 安装
- 使用
什么是数据可视化
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。在实际工作中，数据分析能够帮助管理者进行判断和决策，以便采取适当策略与行动。
数据可视化分析有什么作用
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 --save2、引入
- 全局引入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 进行资源的告警等。
