数据可视化工具简介

提示&＃xff1a;文章写完后&＃xff0c;目录可以自动生成&＃xff0c;如何生成可参考右边的帮助文档

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

1.现状分析

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

2.原因分析

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

3.预测分析

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

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

Echarts介绍

官网&＃xff1a;https://echarts.apache.org/zh/index.html

Echarts使用

1、使用命令安装Echarts&＃xff1a;

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


2、引入

• 全局引入main.js中配置&＃xff08;不推荐使用&＃xff0c;会导致包过大&＃xff0c;冗余多&＃xff09;

import * as Echarts from &＃39;echarts&＃39;;
Vue.prototype.$Echarts &＃61; Echarts;


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

let Echarts &＃61; require(&＃39;echarts/lib/echarts&＃39;);
require(&＃39;echarts/lib/chart/bar&＃39;); //所需图表


3、简单使用

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

4、组件中使用示例

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


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


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

mounted() {window.addEventListener(&＃39;resize&＃39;, () &＃61;> {this.chart.resize();});
}


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

资源监控仪表盘Grafana介绍

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

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

安装

详见官网&＃xff0c;如果安装不成功可参考这篇文章

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

使用

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