基于vue的可视化大屏2

这个可视化大屏分为四个部分

一个引入代码，引入全局 index.vue.

左边代码centerleft.vue

右边代码centerright.vue

中间代码center.vue

主代码：

这是一段 Vue 框架的代码。

在 <template> 部分：

  • 定义了一个根 div 元素。
  • 其中包含一个名为 env_content 的 div 元素，它内部包含三个自定义组件 envLeft 、 envCenter 和 envRight 。

在 <script> 部分：

  • 引入了三个组件：envLeft.vue 、 envCenter.vue 和 envRight.vue 。
  • 定义了默认的导出对象，其中 components 属性中注册了这三个引入的组件。

在 <style scoped> 部分：

  • 为 env_content 类定义了样式，使用 flex 布局，并设置了元素之间的间距为 space-between ，实现了三个子元素在水平方向上两端对齐的布局效果。

总体来说，这段代码通过组件化的方式构建了一个页面结构，并使用样式进行了布局设置。

<template><div><div class="env_content"><env-left /><env-center /><env-right /></div></div>
</template><script>
import envLeft from "./components/envLeft.vue";
import envRight from "./components/envRight.vue";
import envCenter from "./components/envCenter.vue";
export default {components: { envLeft, envCenter, envRight },
};
</script><style scoped>
.env_content {display: flex;justify-content: space-between;
}
</style>

左边代码

模板（<template>）部分：

  • 整体被一个具有 content 类的 div 包裹。
    • 内部的第一个 div 中包含一个自定义组件 dv-border-box-8 ，其内部有一个 head 部分。
      • head 中又包含三个具有 head_content 类的 div ，每个内部都有一个 h1 和 h2 元素，分别展示不同的风力、风速和光照数据。
    • 第二个 div 具有 body 类，包含两个部分。
      • 第一个部分是一个自定义组件 dv-border-box-6 ，内部使用 Echart 组件来展示风速监测图表，并通过 options1 对象配置了图表的各种属性，如颜色、标题、提示框、图例、工具框、网格、坐标轴和数据系列等。
      • 第二个部分是一个自定义组件 dv-border-box-10 ，内部通过 dv-scroll-board 组件展示城市空气污染物监测数据。

脚本（<script>）部分：

  • 引入了 Echart 组件和 echarts 库。
  • 定义了默认导出对象。
    • components 中注册了 Echart 组件。
    • data 函数返回了两个数据对象：options1 用于配置风速监测图表，airData 用于提供城市空气污染物监测数据。

样式（<style scoped>）部分：

  • content 类的 div 宽度设置为 30% 。
  • head 类的 div 有内边距、高度，并使用 flex 布局实现元素之间的等间距排列。
  • head_content 类的 div 使用 flex-direction: column 实现纵向布局，并通过 justify-content: space-between 和 align-items: center 来调整内部元素的垂直和水平对齐方式。
  • body 类的 div 有上边距。

总体而言，这段代码构建了一个展示风力、风速、光照以及风速和城市空气污染物监测数据的页面组件，并通过配置数据和样式来呈现相应的内容和布局。

<template><div class="content"><div><dv-border-box-8 :reverse="true"><div class="head"><div class="head_content"><h1>2.5</h1><h2>风力(级)</h2></div><div class="head_content"><h1>5</h1><h2>风速(m/s)</h2></div><div class="head_content"><h1>45</h1><h2>光照(klm)</h2></div></div></dv-border-box-8></div><div class="body"><!-- 风速监测表 --><dv-border-box-6><Echart :options="options1" height="500px"/></dv-border-box-6><!-- 城市空气污染物监测表 --><dv-border-box-10><div style="padding: 5px"><dv-scroll-board :config="airData" style="height: 300px" /></div></dv-border-box-10></div></div>
</template><script>
import Echart from "@/common/echart/index.vue";
import * as echarts from "echarts";
export default {components: { Echart },data() {return {options1: {color: ["#80FFA5"],title: {text: "24小时风速监测",},tooltip: {trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#6a7985",},},},legend: {data: ["air spend"],},toolbox: {feature: {saveAsImage: {},},},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{name: "h",type: "category",boundaryGap: false,data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],},],yAxis: [{name: "风速m/s",type: "value",min: 0,max: 6,},],series: [{type: "line",stack: "Total",smooth: true,lineStyle: {width: 0,},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgb(128, 255, 165)",},{offset: 1,color: "rgb(1, 191, 236)",},]),},emphasis: {focus: "series",},data: [1, 1.3, 1.1, 0.8, 2.4, 3.5, 3.1, 1.2, 2.5, 4.2, 3.2, 1.5, 0.9,],},],},airData: {header: ["城市", "首要污染物", "等级", "AQI"],data: [["平桥区区", "——", "优", 34],["浉河区区", "——", "优", 31],["罗山县", "O3", "轻度污染", 94],["息县", "PM2.5", "良", 52],["光山县", "——", "优", 34],["新县", "——", "优", 31],["潢川县", "O3", "轻度污染", 94],["商城县", "PM2.5", "良", 52],["淮滨县", "——", "优", 31],["固始县", "O3", "轻度污染", 94]],},};},
};
</script><style scoped>
.content {width: 30%;
}
.head {padding: 10px;height: 80px;display: flex;justify-content: space-around;
}
.head_content {display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.body {margin-top: 10px;
}
</style>

 效果：

右边代码

模板（<template>）部分：

  • 整体由一个具有 content 类的 div 包裹。
    • 第一个 div 内包含一个自定义的 dv-border-box-8 组件，其内部有 head 部分，head 又包含三个具有 head_content 类的 div ，分别展示了 PM2.5、PM10 和 TSP 的数据及对应的单位。
    • 第二个 div 具有 body 类，包含两个主要部分。
      • 第一个部分是 body_table1 类的 div，其中包含一个自定义的 dv-border-box-6 组件，展示了标题“主要污染物分布”和使用 Echart 组件绘制的饼图。
      • 第二个部分是另一个自定义的 dv-border-box-6 组件，展示了标题“空气污染物监测”和使用 Echart 组件绘制的不同污染物在不同月份的折线图。

脚本（<script>）部分：

  • 引入了 Echart 组件。
  • 定义了默认导出对象。
    • components 中注册了 Echart 组件。
    • data 函数返回了两个 options 对象：options1 用于配置主要污染物分布的饼图，options2 用于配置空气污染物监测的折线图。

样式（<style scoped>）部分：

  • content 类的 div 宽度设置为 30% 。
  • head 类的 div 有内边距、高度，并使用 flex 布局实现元素之间的等间距排列。
  • head_content 类的 div 使用纵向的 flex 布局，并调整内部元素的垂直和水平对齐方式。
  • body 类的 div 有上边距。
  • body_table1 类的 div 使用 flex 布局。
<template><div class="content"><div><dv-border-box-8 :reverse="true"><div class="head"><div class="head_content"><h1>35</h1><h2>PM2.5(μg/m³)</h2></div><div class="head_content"><h1>75</h1><h2>PM10(mg/m³)</h2></div><div class="head_content"><h1>125</h1><h2>TSP(mg/m³)</h2></div></div></dv-border-box-8></div><div class="body"><!-- 城市空气污染物比例占比 --><div class="body_table1"><dv-border-box-6 style="padding: 10px"><h2>主要污染物分布</h2><Echart:options="options1"height="400px"width="400px"style="margin: auto"/></dv-border-box-6></div><!-- 城市空气污染物监测 --><div><dv-border-box-6 style="padding: 10px"><h2>空气污染物监测</h2><Echart :options="options2" height="340px" width="500px" /></dv-border-box-6></div></div></div>
</template><script>
import Echart from "@/common/echart/index.vue";
export default {components: { Echart },data() {return {options1: {legend: {top: "bottom",},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true },},},series: [{name: "Nightingale Chart",type: "pie",radius: [50, 180],center: ["50%", "50%"],roseType: "area",itemStyle: {borderRadius: 8,},data: [{ value: 15, name: "SO2" },{ value: 50, name: "PM2.5" },{ value: 80, name: "PM10" },{ value: 60, name: "NO2" },{ value: 106, name: "O3" },{ value: 90, name: "CO" },],},],},options2: {tooltip: {trigger: "axis",},legend: {data: ["PM2.5", "PM10", "SO2", "NO2", "O3"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: "category",boundaryGap: false,data: ["1月", "3月", "5月", "7月", "9月", "11月"],},yAxis: {type: "value",},series: [{name: "PM2.5",type: "line",data: [41, 60, 43, 46, 70, 50],smooth: true,},{name: "PM10",type: "line",data: [71, 78, 90, 70, 76, 80],smooth: true,},{name: "SO2",type: "line",data: [15, 23, 20, 15, 19, 10],smooth: true,},{name: "NO2",type: "line",data: [103, 90, 60, 70, 40, 35],smooth: true,},{name: "O3",type: "line",data: [60, 70, 85, 105, 120, 80],smooth: true,},],},};},
};
</script><style scoped>
.content {width: 30%;
}
.head {padding: 10px;height: 80px;display: flex;justify-content: space-around;
}
.head_content {display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.body {margin-top: 10px;
}
.body_table1 {display: flex;
}
</style>

 效果：

中间代码

模板（<template>）部分：

  • 整体被一个具有 content 类的 div 包裹。
    • 第一个 div 内包含一个自定义的 dv-border-box-8 组件，其内部的 head 部分有三个 head_content 类的 div ，分别展示了温度、湿度和噪声的数据及单位。
    • 第二个 div 具有 body 类，包含两个主要部分。
      • 第一个部分是一个自定义的 dv-border-box-6 组件，用于展示温度监测的图表。
      • 第二个部分是 body_table1 类的 div ，其中又包含两个子 div 。
        • 第一个子 div 包含一个自定义的 dv-border-box-2 组件，展示噪音监测的相关内容。
        • 第二个子 div 包含一个自定义的 dv-border-box-2 组件，展示湿度的相关图表。

脚本（<script>）部分：

  • 引入了 Echart 组件和 echarts 库。
  • 定义了默认导出对象。
    • components 中注册了 Echart 组件。
    • data 函数返回了多个数据对象：
      • options1 用于配置 24 小时温度监测的折线图。
      • airData （似乎未被实际使用）。
      • noiseData 用于噪音监测的数据。
      • options2 用于配置湿度监测的仪表盘图表。

样式（<style scoped>）部分：

  • content 类的 div 宽度设置为 38% 。
  • head 类的 div 有内边距、高度，并使用 flex 布局实现元素之间的等间距排列。
  • head_content 类的 div 使用纵向的 flex 布局，并调整内部元素的垂直和水平对齐方式。
  • body 类的 div 有上边距。
  • body_table1 类的 div 使用 flex 布局。
<template><div class="content"><div><dv-border-box-8 :reverse="true"><div class="head"><div class="head_content"><h1>25</h1><h2>温度(℃)</h2></div><div class="head_content"><h1>40</h1><h2>湿度(%rh)</h2></div><div class="head_content"><h1>65</h1><h2>噪声(dB)</h2></div></div></dv-border-box-8></div><div class="body"><!-- 温度监测表 --><dv-border-box-6><Echart :options="options1" height="400px"/></dv-border-box-6><!-- 城市噪音监测表与城市湿度 --><div class="body_table1"><div><dv-border-box-2 style="padding: 10px"><h2>噪音监测</h2><dv-capsule-chart:config="noiseData"style="width: 370px; height: 380px"/></dv-border-box-2></div><div><dv-border-box-2 style="padding: 10px"><h2>湿度</h2><Echart :options="options2" height="380px" width="300px" /></dv-border-box-2></div></div></div></div>
</template><script>
import Echart from "@/common/echart/index.vue";
import * as echarts from "echarts";
export default {components: { Echart },data() {return {options1: {color: ["#005fa2"],title: {text: "24小时温度监测",},tooltip: {trigger: "axis",axisPointer: {type: "cross",label: {backgroundColor: "#6a7985",},},},legend: {data: ["air spend"],},toolbox: {feature: {saveAsImage: {},},},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{name: "h",type: "category",boundaryGap: false,data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],},],yAxis: [{name: "摄氏度",type: "value",},],series: [{type: "line",stack: "Total",smooth: true,lineStyle: {width: 0,},showSymbol: false,areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgb(35, 67, 234)",},{offset: 1,color: "rgb(121, 185, 235)",},]),},emphasis: {focus: "series",},data: [14, 14, 14, 14, 18, 20, 21, 20, 19, 18, 16, 15],},],},airData: {header: ["城市", "首要污染物", "等级", "AQI"],data: [["平桥区区", "——", "优", 34],["浉河区区", "——", "优", 31],["罗山县", "O3", "轻度污染", 94],["息县", "PM2.5", "良", 52],["光山县", "——", "优", 34],["新县", "——", "优", 31],["潢川县", "O3", "轻度污染", 94],["商城县", "PM2.5", "良", 52],["淮滨县", "——", "优", 31],["固始县", "O3", "轻度污染", 94]],},noiseData: {data: [{name: "平桥区",value: 167,},{name: "浉河区",value: 67,},{name: "罗山县",value: 123,},{name: "光山县",value: 55,},{name: "息县",value: 98,},{name: "新县",value: 57,},{name: "潢川县",value: 98,},{name: "商城县",value: 57,},{name: "固始县",value: 98,},{name: "淮滨县",value: 57,},],},options2: {tooltip: {formatter: "{a} <br/>{b} : {c}%",},series: [{name: "Pressure",type: "gauge",detail: {formatter: "{value}",},data: [{value: 50,name: "%rh",},],},],},};},
};
</script><style scoped>
.content {width: 38%;
}
.head {padding: 10px;height: 80px;display: flex;justify-content: space-around;
}
.head_content {display: flex;flex-direction: column;justify-content: space-between;align-items: center;
}
.body {margin-top: 10px;
}
.body_table1 {display: flex;
}
</style>

效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3225215.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

免费插件集-illustrator插件-Ai插件-测量简单路径面积和周长

免费插件集-illustrator插件-Ai插件-测量简单路径面积和周长

文章目录 1.介绍2.安装3.通过窗口>扩展>知了插件4.功能解释5.总结 1.介绍 本文介绍一款免费插件&#xff0c;加强illustrator使用人员工作效率&#xff0c;进行测量路径面积和周长处理。首先从下载网址下载这款插件 https://download.csdn.net/download/m0_67316550/878…
阅读更多...
【C++报错已解决】Invalid Use of ‘void’ Expression

【C++报错已解决】Invalid Use of ‘void’ Expression

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一&#xff1a;调整函数返回类型方法二…
阅读更多...
猎人维修大师免狗版

猎人维修大师免狗版

技术文档摘要 标题&#xff1a; 多功能维修工具集合概述 摘要&#xff1a; 本文档提供了一组多功能维修工具的概述&#xff0c;这些工具旨在为专业技术人员提供便利&#xff0c;以执行设备维修和软件解锁等任务。文档列出了各个工具的主要功能和应用场景。 关键词&#xff1…
阅读更多...
机器人伦理分析：从扫地机器人到智能伙伴

机器人伦理分析：从扫地机器人到智能伙伴

我发过一个泡泡&#xff1a;机器人和扫地机器人。 意犹未尽&#xff0c;我觉得这是一个值得讨论下去的话题。或者是未来话题 在科技迅猛发展的今天&#xff0c;机器人已经从简单的执行工具演变为能够执行复杂任务的智能实体。特别是在家庭环境中&#xff0c;扫地机器人已经成为…
阅读更多...
C 语言中的联合（Union）的用途是什么？

C 语言中的联合（Union）的用途是什么？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…
阅读更多...
JS代码动态打印404页面源码

JS代码动态打印404页面源码

JS代码动态打印404页面源码&#xff0c;适合做网站错误页&#xff0c;具有js动态打印效果&#xff0c;喜欢的朋友可以拿去 源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务…
阅读更多...
LLM-大模型私有模型训练步骤方法总结

LLM-大模型私有模型训练步骤方法总结

文章目录 前言预训练&#xff08;Pretrained&#xff09;步骤模型选择确定应用场景数据采集清理数据预训练模型 微调&#xff08;Fine Tuning&#xff09;合规对齐 (Alignment)集成 LLM 至 APP总结 前言 本文将从宏观层面说明 LLM 私有模型的训练步骤&#xff0c;包括预训练&a…
阅读更多...
Flutter 开启混淆打包apk，并反编译apk确认源码是否被混淆

Flutter 开启混淆打包apk，并反编译apk确认源码是否被混淆

第一步&#xff1a;开启混淆并打包apk flutter build apk --obfuscate --split-debug-info./out/android/app.android-arm64.symbols 第二步&#xff1a;从dex2jar download | SourceForge.net 官网下载dex2jar 下载完终端进入该文件夹&#xff0c;然后运行以下命令就会在该…
阅读更多...
java中方法的使用

java中方法的使用

方法的使用 方法的概念什么是方法方法定义方法的调用过程实参和形参的关系 方法重载为什么需要方法重载方法重载的概念方法签名 递归递归的概念递归过程分析递归练习 方法的概念 什么是方法 方法就是一个代码片段&#xff0c;类似于C语言的函数。 方法存在的意义&#xff1a;…
阅读更多...
诸葛亮的连环计 责任链模式

诸葛亮的连环计 责任链模式

“万事谋定而后动&#xff0c;一环扣一环&#xff0c;方能成大事。” 在三国时期&#xff0c;诸葛亮以其超凡的智慧闻名天下。在他众多的计策中&#xff0c;有一个鲜为人知却极具智慧的连环计&#xff0c;完美诠释了现代软件设计中的责任链模式。让我们一同探索这个巧妙的计策…
阅读更多...
zookeeper加入开机启动项

zookeeper加入开机启动项

Windows的任务计划程序&#xff08;Task Scheduler&#xff09;是一个强大的工具&#xff0c;允许你安排程序在特定时间自动运行&#xff0c;包括开机时。 打开任务计划程序&#xff1a; 按下Win R键&#xff0c;打开“运行”对话框。输入taskschd.msc并回车&#xff0c;打开…
阅读更多...
数据结构--单向链表篇（python实现）

数据结构--单向链表篇（python实现）

写在开头 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的指针(Pointer) 链表的优缺点 优点 不需要预先知道数据大小&#xff0c;实现灵…
阅读更多...
前端面试题37（js递归）

前端面试题37（js递归）

在JavaScript中&#xff0c;递归是一种编程技术&#xff0c;它允许函数调用自身来解决问题。这种方法通常用于处理分治策略的算法&#xff0c;比如遍历树形结构、计算阶乘、 Fibonacci数列等。下面通过几个示例来说明如何使用递归。 1. 计算阶乘 阶乘是一个经典的递归示例&am…
阅读更多...
硬盘分区读不出来的应对策略与数据恢复实战

硬盘分区读不出来的应对策略与数据恢复实战

在日常的计算机使用过程中&#xff0c;硬盘分区读不出来的问题时常困扰着用户。这一故障不仅可能导致重要数据的突然失联&#xff0c;还可能对系统的稳定运行造成威胁。硬盘分区读不出来&#xff0c;往往表现为在文件资源管理器中无法访问特定分区&#xff0c;系统提示错误或分…
阅读更多...
信创：鲲鹏(arm64)+麒麟(kylin v10)离线部署k8s和kubesphere(含离线部署新方式)

信创：鲲鹏(arm64)+麒麟(kylin v10)离线部署k8s和kubesphere(含离线部署新方式)

本文将详细介绍&#xff0c;如何基于鲲鹏CPU(arm64)和操作系统 Kylin V10 SP2/SP3&#xff0c;利用 KubeKey 制作 KubeSphere 和 Kubernetes 离线安装包&#xff0c;并实战部署 KubeSphere 3.3.1 和 Kubernetes 1.22.12 集群。 服务器配置 主机名IPCPUOS用途master-1192.168.10…
阅读更多...
jitsi 使用JWT验证用户身份

jitsi 使用JWT验证用户身份

前言 Jitsi Meet是一个很棒的会议系统，但是默认他运行所有人创建会议，这样在某种程度上，我们会觉得他不安全，下面我们就来介绍下使用JWT来验证用户身份 方案 卸载旧的lua依赖性sudo apt-get purge lua5.1 liblua5.1-0 liblua5.1-dev luarocks添加ubuntu的依赖源，有则不需…
阅读更多...
D2D用户的功率优化算法研究

D2D用户的功率优化算法研究

D2D通信技术是指两个对等的用户节点之间直接进行通信的一种通信方式。在由D2D通信用户组成的分布式网络中&#xff0c;每个用户节点都能发送和接收信号&#xff0c;并具有自动路由(转发消息)的功能。网络的参与者共享它们所拥有的一部分硬件资源&#xff0c;包括信息处理、存储…
阅读更多...
HTML5表单的自动验证、取消验证、自定义错误信息

HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证 通过在元素中使用属性的方法&#xff0c;该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性说明required输入内容是否不为空pattern输入的内容是否符合指定格式min、max输入的数值是否在min~max范围step判断…
阅读更多...
使用Maven命令将第三方jar包安装到maven本地仓库

使用Maven命令将第三方jar包安装到maven本地仓库

使用Maven命令将第三方jar包安装到maven本地仓库 事例&#xff1a; 第三方jar包 &#xff1a;common-pojo-1.0-SNAPSHOT.jar Maven命令 mvn install:install-file -Dfilejar包在本地磁盘的路径 -DgroupId组织名称 -DartifactId项目名称 -Dversion版本号 -Dpackaging打包方式 完…
阅读更多...
【初阶数据结构】1.算法复杂度

【初阶数据结构】1.算法复杂度

文章目录 1.数据结构前言1.1 数据结构1.2 算法1.3 如何学好数据结构和算法 2.算法效率2.1 复杂度的概念2.2 复杂度的重要性 3.时间复杂度3.1 大O的渐进表示法3.2 时间复杂度计算示例3.2.1 示例13.2.2 示例23.2.3 示例33.2.4 示例43.2.5 示例53.2.6 示例63.2.7 示例7 4.空间复杂…
阅读更多...
最新文章

Copyright @ 2022~2023