devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于vue的可视化大屏2_vue大屏

作者：一键难忘520 | 2024-07-30 13:28:04

赞

踩

vue大屏

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

一个引入代码，引入全局 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 ，实现了三个子元素在水平方向上两端对齐的布局效果。

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

  1. <template>
  2.   <div>
  3.     <div class="env_content">
  4.       <env-left />
  5.       <env-center />
  6.       <env-right />
  7.     </div>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12. import envLeft from "./components/envLeft.vue";
  13. import envRight from "./components/envRight.vue";
  14. import envCenter from "./components/envCenter.vue";
  15. export default {
  16.   components: { envLeft, envCenter, envRight },
  17. };
  18. </script>
  19.  
  20. <style scoped>
  21. .env_content {
  22.   display: flex;
  23.   justify-content: space-between;
  24. }
  25. </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 有上边距。

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

  1. <template>
  2.   <div class="content">
  3.     <div>
  4.       <dv-border-box-8 :reverse="true">
  5.         <div class="head">
  6.           <div class="head_content">
  7.             <h1>2.5</h1>
  8.             <h2>风力(级)</h2>
  9.           </div>
  10.           <div class="head_content">
  11.             <h1>5</h1>
  12.             <h2>风速(m/s)</h2>
  13.           </div>
  14.           <div class="head_content">
  15.             <h1>45</h1>
  16.             <h2>光照(klm)</h2>
  17.           </div>
  18.         </div>
  19.       </dv-border-box-8>
  20.     </div>
  21.  
  22.     <div class="body">
  23.       <!-- 风速监测表 -->
  24.       <dv-border-box-6
  25.         ><Echart :options="options1" height="500px"
  26.       /></dv-border-box-6>
  27.       <!-- 城市空气污染物监测表 -->
  28.       <dv-border-box-10>
  29.         <div style="padding: 5px">
  30.           <dv-scroll-board :config="airData" style="height: 300px" />
  31.         </div>
  32.       </dv-border-box-10>
  33.     </div>
  34.   </div>
  35. </template>
  36.  
  37. <script>
  38. import Echart from "@/common/echart/index.vue";
  39. import * as echarts from "echarts";
  40. export default {
  41.   components: { Echart },
  42.   data() {
  43.     return {
  44.       options1: {
  45.         color: ["#80FFA5"],
  46.         title: {
  47.           text: "24小时风速监测",
  48.         },
  49.         tooltip: {
  50.           trigger: "axis",
  51.           axisPointer: {
  52.             type: "cross",
  53.             label: {
  54.               backgroundColor: "#6a7985",
  55.             },
  56.           },
  57.         },
  58.         legend: {
  59.           data: ["air spend"],
  60.         },
  61.         toolbox: {
  62.           feature: {
  63.             saveAsImage: {},
  64.           },
  65.         },
  66.         grid: {
  67.           left: "3%",
  68.           right: "4%",
  69.           bottom: "3%",
  70.           containLabel: true,
  71.         },
  72.         xAxis: [
  73.           {
  74.             name: "h",
  75.             type: "category",
  76.             boundaryGap: false,
  77.             data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
  78.           },
  79.         ],
  80.         yAxis: [
  81.           {
  82.             name: "风速m/s",
  83.             type: "value",
  84.             min: 0,
  85.             max: 6,
  86.           },
  87.         ],
  88.         series: [
  89.           {
  90.             type: "line",
  91.             stack: "Total",
  92.             smooth: true,
  93.             lineStyle: {
  94.               width: 0,
  95.             },
  96.             showSymbol: false,
  97.             areaStyle: {
  98.               opacity: 0.8,
  99.               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  100.                 {
  101.                   offset: 0,
  102.                   color: "rgb(128, 255, 165)",
  103.                 },
  104.                 {
  105.                   offset: 1,
  106.                   color: "rgb(1, 191, 236)",
  107.                 },
  108.               ]),
  109.             },
  110.             emphasis: {
  111.               focus: "series",
  112.             },
  113.             data: [
  114.               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,
  115.             ],
  116.           },
  117.         ],
  118.       },
  119.       airData: {
  120.         header: ["城市", "首要污染物", "等级", "AQI"],
  121.         data: [
  122.           ["平桥区区", "——", "优", 34],
  123.           ["浉河区区", "——", "优", 31],
  124.           ["罗山县", "O3", "轻度污染", 94],
  125.           ["息县", "PM2.5", "良", 52],
  126.           ["光山县", "——", "优", 34],
  127.           ["新县", "——", "优", 31],
  128.           ["潢川县", "O3", "轻度污染", 94],
  129.           ["商城县", "PM2.5", "良", 52],
  130.           ["淮滨县", "——", "优", 31],
  131.           ["固始县", "O3", "轻度污染", 94]
  132.         ],
  133.       },
  134.     };
  135.   },
  136. };
  137. </script>
  138.  
  139. <style scoped>
  140. .content {
  141.   width: 30%;
  142. }
  143. .head {
  144.   padding: 10px;
  145.   height: 80px;
  146.   display: flex;
  147.   justify-content: space-around;
  148. }
  149. .head_content {
  150.   display: flex;
  151.   flex-direction: column;
  152.   justify-content: space-between;
  153.   align-items: center;
  154. }
  155. .body {
  156.   margin-top: 10px;
  157. }
  158. </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 布局。
  1. <template>
  2.   <div class="content">
  3.     <div>
  4.       <dv-border-box-8 :reverse="true">
  5.         <div class="head">
  6.           <div class="head_content">
  7.             <h1>35</h1>
  8.             <h2>PM2.5(μg/m³)</h2>
  9.           </div>
  10.           <div class="head_content">
  11.             <h1>75</h1>
  12.             <h2>PM10(mg/m³)</h2>
  13.           </div>
  14.           <div class="head_content">
  15.             <h1>125</h1>
  16.             <h2>TSP(mg/m³)</h2>
  17.           </div>
  18.         </div>
  19.       </dv-border-box-8>
  20.     </div>
  21.  
  22.     <div class="body">
  23.       <!-- 城市空气污染物比例占比 -->
  24.       <div class="body_table1">
  25.         <dv-border-box-6 style="padding: 10px">
  26.           <h2>主要污染物分布</h2>
  27.           <Echart
  28.             :options="options1"
  29.             height="400px"
  30.             width="400px"
  31.             style="margin: auto"
  32.           />
  33.         </dv-border-box-6>
  34.       </div>
  35.       <!-- 城市空气污染物监测 -->
  36.       <div>
  37.         <dv-border-box-6 style="padding: 10px">
  38.           <h2>空气污染物监测</h2>
  39.           <Echart :options="options2" height="340px" width="500px" />
  40.         </dv-border-box-6>
  41.       </div>
  42.     </div>
  43.   </div>
  44. </template>
  45.  
  46. <script>
  47. import Echart from "@/common/echart/index.vue";
  48. export default {
  49.   components: { Echart },
  50.   data() {
  51.     return {
  52.       options1: {
  53.         legend: {
  54.           top: "bottom",
  55.         },
  56.         toolbox: {
  57.           show: true,
  58.           feature: {
  59.             mark: { show: true },
  60.             dataView: { show: true, readOnly: false },
  61.             restore: { show: true },
  62.             saveAsImage: { show: true },
  63.           },
  64.         },
  65.         series: [
  66.           {
  67.             name: "Nightingale Chart",
  68.             type: "pie",
  69.             radius: [50, 180],
  70.             center: ["50%", "50%"],
  71.             roseType: "area",
  72.             itemStyle: {
  73.               borderRadius: 8,
  74.             },
  75.             data: [
  76.               { value: 15, name: "SO2" },
  77.               { value: 50, name: "PM2.5" },
  78.               { value: 80, name: "PM10" },
  79.               { value: 60, name: "NO2" },
  80.               { value: 106, name: "O3" },
  81.               { value: 90, name: "CO" },
  82.  
  83.             ],
  84.           },
  85.         ],
  86.       },
  87.       options2: {
  88.         tooltip: {
  89.           trigger: "axis",
  90.         },
  91.         legend: {
  92.           data: ["PM2.5", "PM10", "SO2", "NO2", "O3"],
  93.         },
  94.         grid: {
  95.           left: "3%",
  96.           right: "4%",
  97.           bottom: "3%",
  98.           containLabel: true,
  99.         },
  100.         toolbox: {
  101.           feature: {
  102.             saveAsImage: {},
  103.           },
  104.         },
  105.         xAxis: {
  106.           type: "category",
  107.           boundaryGap: false,
  108.           data: ["1月", "3月", "5月", "7月", "9月", "11月"],
  109.         },
  110.         yAxis: {
  111.           type: "value",
  112.         },
  113.         series: [
  114.           {
  115.             name: "PM2.5",
  116.             type: "line",
  117.             data: [41, 60, 43, 46, 70, 50],
  118.             smooth: true,
  119.           },
  120.           {
  121.             name: "PM10",
  122.             type: "line",
  123.             data: [71, 78, 90, 70, 76, 80],
  124.             smooth: true,
  125.           },
  126.           {
  127.             name: "SO2",
  128.             type: "line",
  129.             data: [15, 23, 20, 15, 19, 10],
  130.             smooth: true,
  131.           },
  132.           {
  133.             name: "NO2",
  134.             type: "line",
  135.             data: [103, 90, 60, 70, 40, 35],
  136.             smooth: true,
  137.           },
  138.           {
  139.             name: "O3",
  140.             type: "line",
  141.             data: [60, 70, 85, 105, 120, 80],
  142.             smooth: true,
  143.           },
  144.         ],
  145.       },
  146.     };
  147.   },
  148. };
  149. </script>
  150.  
  151. <style scoped>
  152. .content {
  153.   width: 30%;
  154. }
  155. .head {
  156.   padding: 10px;
  157.   height: 80px;
  158.   display: flex;
  159.   justify-content: space-around;
  160. }
  161. .head_content {
  162.   display: flex;
  163.   flex-direction: column;
  164.   justify-content: space-between;
  165.   align-items: center;
  166. }
  167. .body {
  168.   margin-top: 10px;
  169. }
  170. .body_table1 {
  171.   display: flex;
  172. }
  173. </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 布局。
  1. <template>
  2.   <div class="content">
  3.     <div>
  4.       <dv-border-box-8 :reverse="true">
  5.         <div class="head">
  6.           <div class="head_content">
  7.             <h1>25</h1>
  8.             <h2>温度(℃)</h2>
  9.           </div>
  10.           <div class="head_content">
  11.             <h1>40</h1>
  12.             <h2>湿度(%rh)</h2>
  13.           </div>
  14.           <div class="head_content">
  15.             <h1>65</h1>
  16.             <h2>噪声(dB)</h2>
  17.           </div>
  18.         </div>
  19.       </dv-border-box-8>
  20.     </div>
  21.  
  22.     <div class="body">
  23.       <!-- 温度监测表 -->
  24.       <dv-border-box-6
  25.         ><Echart :options="options1" height="400px"
  26.       /></dv-border-box-6>
  27.       <!-- 城市噪音监测表与城市湿度 -->
  28.       <div class="body_table1">
  29.         <div>
  30.           <dv-border-box-2 style="padding: 10px">
  31.             <h2>噪音监测</h2>
  32.             <dv-capsule-chart
  33.               :config="noiseData"
  34.               style="width: 370px; height: 380px"
  35.             />
  36.           </dv-border-box-2>
  37.         </div>
  38.         <div>
  39.           <dv-border-box-2 style="padding: 10px">
  40.             <h2>湿度</h2>
  41.             <Echart :options="options2" height="380px" width="300px" />
  42.           </dv-border-box-2>
  43.         </div>
  44.       </div>
  45.     </div>
  46.   </div>
  47. </template>
  48.  
  49. <script>
  50. import Echart from "@/common/echart/index.vue";
  51. import * as echarts from "echarts";
  52. export default {
  53.   components: { Echart },
  54.   data() {
  55.     return {
  56.       options1: {
  57.         color: ["#005fa2"],
  58.         title: {
  59.           text: "24小时温度监测",
  60.         },
  61.         tooltip: {
  62.           trigger: "axis",
  63.           axisPointer: {
  64.             type: "cross",
  65.             label: {
  66.               backgroundColor: "#6a7985",
  67.             },
  68.           },
  69.         },
  70.         legend: {
  71.           data: ["air spend"],
  72.         },
  73.         toolbox: {
  74.           feature: {
  75.             saveAsImage: {},
  76.           },
  77.         },
  78.         grid: {
  79.           left: "3%",
  80.           right: "4%",
  81.           bottom: "3%",
  82.           containLabel: true,
  83.         },
  84.         xAxis: [
  85.           {
  86.             name: "h",
  87.             type: "category",
  88.             boundaryGap: false,
  89.             data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
  90.           },
  91.         ],
  92.         yAxis: [
  93.           {
  94.             name: "摄氏度",
  95.             type: "value",
  96.           },
  97.         ],
  98.         series: [
  99.           {
  100.             type: "line",
  101.             stack: "Total",
  102.             smooth: true,
  103.             lineStyle: {
  104.               width: 0,
  105.             },
  106.             showSymbol: false,
  107.             areaStyle: {
  108.               opacity: 0.8,
  109.               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  110.                 {
  111.                   offset: 0,
  112.                   color: "rgb(35, 67, 234)",
  113.                 },
  114.                 {
  115.                   offset: 1,
  116.                   color: "rgb(121, 185, 235)",
  117.                 },
  118.               ]),
  119.             },
  120.             emphasis: {
  121.               focus: "series",
  122.             },
  123.             data: [14, 14, 14, 14, 18, 20, 21, 20, 19, 18, 16, 15],
  124.           },
  125.         ],
  126.       },
  127.       airData: {
  128.         header: ["城市", "首要污染物", "等级", "AQI"],
  129.         data: [
  130.           ["平桥区区", "——", "优", 34],
  131.           ["浉河区区", "——", "优", 31],
  132.           ["罗山县", "O3", "轻度污染", 94],
  133.           ["息县", "PM2.5", "良", 52],
  134.           ["光山县", "——", "优", 34],
  135.           ["新县", "——", "优", 31],
  136.           ["潢川县", "O3", "轻度污染", 94],
  137.           ["商城县", "PM2.5", "良", 52],
  138.           ["淮滨县", "——", "优", 31],
  139.           ["固始县", "O3", "轻度污染", 94]
  140.         ],
  141.       },
  142.       noiseData: {
  143.         data: [
  144.           {
  145.             name: "平桥区",
  146.             value: 167,
  147.           },
  148.           {
  149.             name: "浉河区",
  150.             value: 67,
  151.           },
  152.           {
  153.             name: "罗山县",
  154.             value: 123,
  155.           },
  156.           {
  157.             name: "光山县",
  158.             value: 55,
  159.           },
  160.           {
  161.             name: "息县",
  162.             value: 98,
  163.           },
  164.           {
  165.             name: "新县",
  166.             value: 57,
  167.           },
  168.           {
  169.             name: "潢川县",
  170.             value: 98,
  171.           },
  172.           {
  173.             name: "商城县",
  174.             value: 57,
  175.           },
  176.           {
  177.             name: "固始县",
  178.             value: 98,
  179.           },
  180.           {
  181.             name: "淮滨县",
  182.             value: 57,
  183.           },
  184.         ],
  185.       },
  186.       options2: {
  187.         tooltip: {
  188.           formatter: "{a} <br/>{b} : {c}%",
  189.         },
  190.         series: [
  191.           {
  192.             name: "Pressure",
  193.             type: "gauge",
  194.             detail: {
  195.               formatter: "{value}",
  196.             },
  197.             data: [
  198.               {
  199.                 value: 50,
  200.                 name: "%rh",
  201.               },
  202.             ],
  203.           },
  204.         ],
  205.       },
  206.     };
  207.   },
  208. };
  209. </script>
  210.  
  211. <style scoped>
  212. .content {
  213.   width: 38%;
  214. }
  215. .head {
  216.   padding: 10px;
  217.   height: 80px;
  218.   display: flex;
  219.   justify-content: space-around;
  220. }
  221. .head_content {
  222.   display: flex;
  223.   flex-direction: column;
  224.   justify-content: space-between;
  225.   align-items: center;
  226. }
  227. .body {
  228.   margin-top: 10px;
  229. }
  230. .body_table1 {
  231.   display: flex;
  232. }
  233. </style>

效果：

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/903914
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号