基于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>

效果：

标签： html 前端

本文转载自: https://blog.csdn.net/weixin_66547608/article/details/140312426
版权归原作者 张謹礧 所有，如有侵权，请联系我们删除。

基于vue的可视化大屏2

发表评论

“基于vue的可视化大屏2”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航