提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
数据可视化工具简介
什么是数据可视化
数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。在实际工作中,数据分析能够帮助管理者进行判断和决策,以便采取适当策略与行动。
数据可视化分析有什么作用
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 进行资源的告警等。