写一个前端大数据可视化的网页，主要包含设备在线数、在线比例、产能，良率状况、宕机状况、远程连接等
时间: 2023-07-10 20:04:44 浏览: 52
这是一份简单的前端大数据可视化网页，包含了设备在线数、在线比例、产能，良率状况、宕机状况、远程连接等。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>大数据可视化</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/g2plot@1.0.8/dist/g2plot.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="chart">
<h2>设备在线统计</h2>
<div class="chart-container" ref="chart1"></div>
</div>
<div class="chart">
<h2>在线比例</h2>
<div class="chart-container" ref="chart2"></div>
</div>
<div class="chart">
<h2>产能</h2>
<div class="chart-container" ref="chart3"></div>
</div>
<div class="chart">
<h2>良率状况</h2>
<div class="chart-container" ref="chart4"></div>
</div>
<div class="chart">
<h2>宕机状况</h2>
<div class="chart-container" ref="chart5"></div>
</div>
<div class="chart">
<h2>远程连接</h2>
<div class="chart-container" ref="chart6"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/g2plot@1.0.8/dist/g2plot.min.js"></script>
<script>
var app = new Vue({
el: "#app",
mounted() {
this.renderChart1();
this.renderChart2();
this.renderChart3();
this.renderChart4();
this.renderChart5();
this.renderChart6();
},
methods: {
// 设备在线统计
renderChart1() {
const chartData = [
{ name: "设备A", value: 120 },
{ name: "设备B", value: 300 },
{ name: "设备C", value: 200 },
{ name: "设备D", value: 400 },
];
const chart = new G2Plot.Pie(this.$refs.chart1, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
radius: 0.8,
data: chartData,
angleField: "value",
colorField: "name",
label: {
visible: true,
style: {
fontSize: 10,
},
},
legend: {
visible: false,
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: item.name, value: item.value + " 台" };
},
},
});
chart.render();
},
// 在线比例
renderChart2() {
const chartData = [
{ name: "在线", value: 80 },
{ name: "离线", value: 20 },
];
const chart = new G2Plot.Pie(this.$refs.chart2, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
radius: 0.8,
data: chartData,
angleField: "value",
colorField: "name",
label: {
visible: true,
style: {
fontSize: 10,
},
},
legend: {
visible: false,
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: item.name, value: item.value + "%" };
},
},
});
chart.render();
},
// 产能
renderChart3() {
const chartData = [
{ date: "2021-06-01", value: 200 },
{ date: "2021-06-02", value: 300 },
{ date: "2021-06-03", value: 250 },
{ date: "2021-06-04", value: 350 },
{ date: "2021-06-05", value: 400 },
{ date: "2021-06-06", value: 450 },
{ date: "2021-06-07", value: 500 },
];
const chart = new G2Plot.Line(this.$refs.chart3, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
data: chartData,
xField: "date",
yField: "value",
yAxis: {
label: {
formatter: (val) => {
return val + " 件";
},
},
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: "产能", value: item.value + " 件" };
},
},
});
chart.render();
},
// 良率状况
renderChart4() {
const chartData = [
{ date: "2021-06-01", value: 90 },
{ date: "2021-06-02", value: 80 },
{ date: "2021-06-03", value: 85 },
{ date: "2021-06-04", value: 82 },
{ date: "2021-06-05", value: 88 },
{ date: "2021-06-06", value: 92 },
{ date: "2021-06-07", value: 95 },
];
const chart = new G2Plot.Line(this.$refs.chart4, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
data: chartData,
xField: "date",
yField: "value",
yAxis: {
label: {
formatter: (val) => {
return val + "%";
},
},
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: "良率", value: item.value + "%" };
},
},
});
chart.render();
},
// 宕机状况
renderChart5() {
const chartData = [
{ name: "设备A", value: 0.01 },
{ name: "设备B", value: 0.03 },
{ name: "设备C", value: 0.02 },
{ name: "设备D", value: 0.05 },
];
const chart = new G2Plot.Ring(this.$refs.chart5, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
data: chartData,
innerRadius: 0.6,
radius: 0.8,
colorField: "name",
angleField: "value",
label: {
visible: true,
type: "outer",
formatter: (item) => {
return item.name + " " + (item.value * 100).toFixed(0) + "%";
},
},
legend: {
visible: false,
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: item.name, value: (item.value * 100).toFixed(0) + "%" };
},
},
});
chart.render();
},
// 远程连接
renderChart6() {
const chartData = [
{ name: "设备A", value: 0.7 },
{ name: "设备B", value: 0.6 },
{ name: "设备C", value: 0.5 },
{ name: "设备D", value: 0.4 },
];
const chart = new G2Plot.Bar(this.$refs.chart6, {
forceFit: true,
title: {
visible: false,
},
description: {
visible: false,
},
data: chartData,
xField: "value",
yField: "name",
yAxis: {
label: {
autoRotate: false,
},
},
color: "#1890ff",
label: {
visible: true,
position: "right",
style: {
fontSize: 10,
},
formatter: (item) => {
return (item.value * 100).toFixed(0) + "%";
},
},
legend: {
visible: false,
},
tooltip: {
visible: true,
formatter: (item) => {
return { name: item.name, value: (item.value * 100).toFixed(0) + "%" };
},
},
});
chart.render();
},
},
});
</script>
</body>
</html>
```
这个网页使用了 Vue.js 和 G2Plot 库来实现数据可视化。
其中，设备在线统计、在线比例和宕机状况使用了饼图（Pie），产能和良率状况使用了折线图（Line），远程连接使用了条形图（Bar）。
在每个图表中，都使用了 tooltip 来显示鼠标悬停时的信息，可以通过 formatter 属性来自定义显示的内容。同时，也可以自定义图例（legend）、标签（label）等元素的样式和显示方式。
相关推荐
最新推荐
如何在网页前端里可视化你的知识图谱
如何在网页前端里可视化你的知识图谱 最近费尽千辛万苦构造了一份可以用（大概）的知识图谱，并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo，顺带想实现一些可视化知识图谱的功能。 ...
智慧交通大数据可视化管理平台建设方案.docx
“智慧交通大数据可视化与虚拟仿真突发事件应对管理决策服务平台”是一个针对交通管控单位的综合型辅助管理决策服务平台和三维仿真突发事件应对系统，系统以实际的交通设备和运输能力分布为基础，运用虚拟现实技术、...
基于当前现状大数据可视化应用的发展趋势.docx
伴随着中国移动互联网的快速发展、直播出现、短视频的飞快发展壮大，大家的生活方式也在产生着变动：从报刊、杂志期刊、广播电台到现如今的互联网上的新闻报道消息推送，这正表明了一个状况，大家从文字阅读渐渐地的...
用Pandas和Folium做一个新冠数据可视化
目录数据集介绍可视化步骤1. 导入pandas等需要的库2. 读取数据，查看基本情况3. 读取城市坐标数据4. 按省份统计人数5. 合并城市坐标数据 与 省份数据6. 绘制地图写入HTML文件，并用浏览器打开完整代码 数据集介绍 1...
CODESYS之可视化控件属性(一).docx
前面已经讲解了控件的移动以及控件颜色的...X表示距离可视化界面左侧的距离，Y表示距离可视化界面上侧距离 Width表示矩形框宽度，Height表示矩形框高度，Angle表示矩形框的旋转角度 Center中心指的是矩形框黑点的中心
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
用matlab绘制高斯色噪声情况下的频率估计CRLB，其中w(n)是零均值高斯色噪声，w(n)=0.8*w(n-1)+e(n)，e(n)服从零均值方差为se的高斯分布
以下是用matlab绘制高斯色噪声情况下频率估计CRLB的代码：
```matlab
% 参数设置
N = 100; % 信号长度
se = 0.5; % 噪声方差
w = zeros(N,1); % 高斯色噪声
w(1) = randn(1)*sqrt(se);
for n = 2:N
w(n) = 0.8*w(n-1) + randn(1)*sqrt(se);
end
% 计算频率估计CRLB
fs = 1; % 采样频率
df = 0.01; % 频率分辨率
f = 0:df:fs/2; % 频率范围
M = length(f);
CRLB = zeros(M,1);
for
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。