当前位置: 首页 > news >正文

基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端

可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能 占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧 由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态 显示当前系统日期、星期、时间,格式。 在管理端进行添加数据后,数据可视化图表进行相应变化。 1.能耗总览仪表盘,统计分析耗电量、耗水量、碳排放量的总数, 以不同颜色的仪表盘形式展示耗电量、耗水量、碳排放量的总数,在 环状图中间区域显示各数据的数据值。 2.能耗占比环状图,请分析各能耗的消耗数占能耗总数的比例, 扇形图中包括两部分内容:能耗占比图中需显示办公耗电量、办公用 水量、生产用水量、生产耗电量的数量及占能耗总数的比例。环状图 应用不同颜色区分显示各个能耗的占比,中间区域需显示能耗总数。

下面展示左边代码,部分代码,一键三连私聊博主获得完整文件+后端。此大屏数据与后端联动。!!!!!!!!!

<template>

  <div>

    <div class="top">

      <!-- 能耗总览  仪表盘-->

      <dv-border-box-8

        style="width: 100%; height: 18.5em; margin-top: 19px; background: none"

      >

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >能耗总览</dv-decoration-7

        >

        <div id="topinit" style="width: 33.3%; height: 250px"></div>

        <div id="topinit2" style="width: 33.3%; height: 250px"></div>

        <div id="topinit3" style="width: 33.3%; height: 250px"></div>

      </dv-border-box-8>

    </div>

    <div class="center">

      <!-- 能耗占比  环状图-->

      <dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >能耗占比</dv-decoration-7

        >

        <div id="centerinit" style="width: 100%; height: 260px"></div>

      </dv-border-box-8>

    </div>

    <div class="footer">

      <!-- 库存预警  排序表-->

      <dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">

        <dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"

          >库存预警</dv-decoration-7

        >

        <dv-scroll-board

          :config="config"

          style="width: 99%; height: 260px; margin-left: 4px"

        />

      </dv-border-box-8>

    </div>

  </div>

</template>

<script>

// 均是日数据化

// 能耗总览

import { productPowerReportByDay } from "@/api/dv/carbon.js";

// 能耗占比

import { getEmissionPercent } from "@/api/dv/carbon.js";

// 库存预警

import { listInventory } from "@/api/dv/carbon.js";

export default {

  name: "LeftContain",

  components: {},

  data() {

    return {

      paramsFrom: {

        pageNum: 1,

        pageSize: 20,

      },

      // 库存预警

      config: {},

      // 能耗总览

      // 耗电量

      totalPowerConsume: 0,

      // 耗水量

      totalWaterConsume: 0,

      // 碳排放量

      totalCarbonEmission: 0,

      // 耗能占比

      totals: 0,

      // 办公用水量 +  办公耗电量

      totalOfficeWaterConsumes: 0,

      totalOfficePowerConsumes: 0,

      // 生产用水量 +  生产耗电量

      totalWaterConsumes: 0,

      totalPowerConsumes: 0,

    };

  },

  created() {

    this.getDataTop();

  },

  methods: {

    // 获取数据

    getDataTop() {

      productPowerReportByDay().then((res) => {

        this.$nextTick(() => {

          this.inittop();

          this.inittop2();

          this.inittop3();

        });

        this.totalCarbonEmission = res.rows[0].totalCarbonEmission;

        this.totalPowerConsume =

          res.rows[0].totalOfficePowerConsume + res.rows[0].totalPowerConsume;

        this.totalWaterConsume =

          res.rows[0].totalWaterConsume + res.rows[0].totalOfficeWaterConsume;

      });

      getEmissionPercent().then((res) => {

        this.$nextTick(() => {

          this.initcenter();

        });

        this.totalOfficePowerConsumes = res.data[0].totalOfficePowerConsume;

        this.totalOfficeWaterConsumes = res.data[0].totalOfficeWaterConsume;

        this.totalPowerConsumes = res.data[0].totalPowerConsume;

        this.totalWaterConsumes = res.data[0].totalWaterConsume;

        this.totals =

          res.data[0].totalOfficePowerConsume +

          res.data[0].totalOfficeWaterConsume +

          res.data[0].totalPowerConsume +

          res.data[0].totalOfficePowerConsume;

      });

      listInventory(this.paramsFrom).then((res) => {

        this.config = {

          header: ["编号", "物料", "仓库", "库存", "状态"],

          data: [],

          index: false,

          headerBGC: "#43f5ff",

          oddRowBGC: "rgba(190,20,128,0.5)",

          evenRowBGC: "#43ad7f7f",

          columnWidth: [50],

          align: ["center"],

        };

        this.config.data = res.rows.map((item) => {

          return [

            item.id,

            item.materialName,

            item.warehouseName,

            item.totalInventory,

            this.getStatus(item),

          ];

        });

      });

    },

    getStatus(item) {

      if (

        item.inventoryLimit > item.totalInventory &&

        item.totalInventory > item.inventoryLower

      ) {

        return "正常";

      } else if (item.totalInventory < item.inventoryLower) {

        return "不足";

      } else {

        return "溢出";

      }

    },

    // 能耗总览-定义仪表盘

    inittop() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            // 最大数

            max: totalPowerConsume + 1000,

            name: "Pressure",

            type: "gauge",

            // 进度

            progress: {

              show: true,

            },

            // 数据数字

            detail: {

              color: "orange",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            // 标题

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            // 刻度数字

            axisLabel: {

              show: false,

            },

            // 指针大小

            pointer: {

              width: 4,

            },

            // 数据

            data: [

              {

                value: totalPowerConsume,

                name: "耗电量",

              },

            ],

            // 指针颜色

            itemStyle: {

              color: "orange",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    inittop2() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit2");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            max: totalWaterConsume + 5000,

            name: "Pressure",

            type: "gauge",

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            axisLabel: {

              show: false,

            },

            progress: {

              show: true,

            },

            pointer: {

              width: 4,

            },

            detail: {

              color: "green",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            data: [

              {

                value: totalWaterConsume,

                name: "耗水量",

              },

            ],

            itemStyle: {

              color: "green",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    inittop3() {

      let totalPowerConsume = this.totalPowerConsume;

      let totalCarbonEmission = this.totalCarbonEmission;

      let totalWaterConsume = this.totalWaterConsume;

      var chartDom = document.getElementById("topinit3");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          formatter: "{a} <br/>{b} : {c}%",

        },

        series: [

          {

            max: totalCarbonEmission + 10000,

            name: "Pressure",

            type: "gauge",

            progress: {

              show: true,

            },

            pointer: {

              width: 4,

            },

            axisLabel: {

              show: false,

            },

            axisLine: {

              show: true,

              lineStyle: {},

            },

            detail: {

              color: "blue",

              fontSize: 22,

              valueAnimation: true,

              formatter: "{value}",

            },

            title: {

              show: true,

              offsetCenter: [0, "80%"],

              color: "white",

            },

            data: [

              {

                value: totalCarbonEmission,

                name: "碳排放量",

              },

            ],

            itemStyle: {

              color: "blue",

            },

          },

        ],

      };

      option && myChart.setOption(option);

    },

    // 能耗占比-环状图

    initcenter() {

      let totalOfficePowerConsumes = this.totalOfficePowerConsumes;

      let totalOfficeWaterConsumes = this.totalOfficeWaterConsumes;

      let totalPowerConsumes = this.totalPowerConsumes;

      let totalWaterConsumes = this.totalWaterConsumes;

      let totalS = this.totals;

      var chartDom = document.getElementById("centerinit");

      var myChart = this.$echarts.init(chartDom);

      var option;

      option = {

        tooltip: {

          trigger: "item",

        },

        // 是否显示隐藏图例的一些操作

        legend: {

          show: false,

          top: "5%",

          left: "center",

        },

        series: [

          // 外圈 暂时不加引导线

          {

            name: "能耗占比",

            type: "pie",

            radius: ["40%", "70%"],

            avoidLabelOverlap: false,

            label: {

              show: true,

              position: "outside",

              // formatter: "{b} : {c*100}%",

              formatter(params) {

                return params.name + (params.value / totalS) * 100 + "%";

              },

            },

            labelLine: {

              show: true,

              length: 6,

              length2: 7,

              lineStyle: {

                color: "red",

                width: 21,

              },

            },

            emphasis: {

              label: {

                show: true,

                fontSize: 40,

                fontWeight: "bold",

              },

            },

            labelLine: {

              show: false,

            },

            data: [

              { value: totalOfficePowerConsumes, name: "办公耗电量" },

              { value: totalOfficeWaterConsumes, name: "办公用水量" },

              { value: totalPowerConsumes, name: "生产耗电量" },

              { value: totalWaterConsumes, name: "生产耗水量" },

            ],

          },

          // 内圈,把半径设为0

          {

            name: "能耗总数",

            type: "pie",

            radius: ["0%", "0%"],

            avoidLabelOverlap: false,

            // 显示数据

            label: {

              show: true,

              color: "#fff",

              position: "inside",

              formatter: "{c}\n{b}",

            },

            // 鼠标放上去变大

            emphasis: {

              label: {

                show: true,

                fontSize: 40,

                fontWeight: "bold",

                color: "#fff",

              },

            },

            labelLine: {

              show: false,

            },

            data: [

              {

                value: totalS,

                name: "总数",

              },

            ],

          },

        ],

      };

      option && myChart.setOption(option);

    },

  },

};

</script>

<style lang="scss" scoped>

* {

  background: none;

}

.top {

  background: none;

}

#topinit,

#topinit3,

#topinit2 {

  display: flex;

  float: left;

}

</style>

相关文章:

基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端

可视化平台中&#xff0c;数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分&#xff0c;左侧由能耗总览、耗能 占比、库存预警构成&#xff0c;中间由数据总览、销售计划完成率构成&#xff0c;右侧 由销售…...

FastAPI模块化:为复杂应用程序提供清晰的结构

开题描述&#xff1a; 在现代软件开发中&#xff0c;随着应用程序规模的扩大和功能的增加&#xff0c;传统的单体架构逐渐暴露出其局限性。FastAPI&#xff0c;作为一款高性能的现代Web框架&#xff0c;通过其模块化设计提供了一种解决方案。本文将探讨FastAPI模块化如何为构建…...

【Hot100】LeetCode—215. 数组中的第K个最大元素

目录 1- 思路快速选择 2- 实现⭐215. 数组中的第K个最大元素——题解思路 3- ACM实现 原题连接&#xff1a;215. 数组中的第K个最大元素 1- 思路 快速选择 第 k 大的元素的数组下标&#xff1a; int target nums.length - k 1- 根据 partition 分割的区间来判断当前处理方式…...

pycharm如何安装selenium

在pycharm中打开一个项目后,点击Setting(ALTCtrlS快捷键) 然后点击install package完成后点击关闭这个窗口,就可以在代码中使用selenium了 成功后出现如下界面 编写一段正常可以运行操作chorme浏览器的 from selenium import webdriver # 指定ChromeDriver的路径driver we…...

css三点闪烁(可用于加载样式、标题等)

代码案例 HTML <div class"flexAlign loading"><div class"loading_item"></div><div class"loading_item"></div><div class"loading_item"></div> </div> <div class"ot…...

支持向量机 (Support Vector Machines, SVM)

支持向量机 (Support Vector Machines, SVM) 通俗易懂算法 支持向量机&#xff08;SVM&#xff09;是一种用于分类和回归任务的机器学习算法。在最简单的情况下&#xff0c;SVM是一种线性分类器&#xff0c;适用于二分类问题。它的基本思想是找到一个超平面&#xff08;在二维…...

上海市计算机学会竞赛平台2024年8月月赛丙组调和级数

题目描述 给定一个整数 nn&#xff0c;记 ⌊x⌋⌊x⌋ 表示不超过实数 xx 的最大整数&#xff0c;请求出 ⌊n1⌋⌊n2⌋⌊n3⌋⋯⌊nn−1⌋⌊nn⌋⌊1n​⌋⌊2n​⌋⌊3n​⌋⋯⌊n−1n​⌋⌊nn​⌋ 输入格式 单个整数&#xff1a;表示 nn 输出格式 单个整数&#xff1a;表示答…...

【重学 MySQL】二十、运算符的优先级

【重学 MySQL】二十、运算符的优先级 MySQL 运算符的优先级&#xff08;由高到低&#xff09;注意事项示例 在 MySQL 中&#xff0c;运算符的优先级决定了在表达式中各个运算符被计算的先后顺序。了解运算符的优先级对于编写正确且高效的 SQL 语句至关重要。以下是根据高权威性…...

十种优化MySQL数据库的最佳建议

优化MySQL数据库可以提高查询性能和系统响应能力&#xff0c;以下是一些MySQL数据库优化的建议&#xff1a; 优化查询语句&#xff1a;避免使用SELECT *&#xff0c;只选择需要的字段&#xff1b;使用索引来加快查询速度&#xff1b;避免使用慢查询。 优化表结构&#xff1a;使…...

springboot组件使用-mybatis组件使用

文章目录 springboot使用mybatis组件1. 添加依赖2. 配置数据源3. 创建实体类4. 创建Mapper接口5. 创建Mapper XML文件6. 使用Mapper7. 启动类配置 mybtis 动态SQL1. Mapper 注解2. Select 注解3. Insert 注解4. Update 注解5. Delete 注解6. Results 注解7. Param 注解8. Cache…...

Ribbon 源码分析【Ribbon 负载均衡】

前言 在 Spring Cloud 2020 版本以后&#xff0c;移除了对 Netflix 的依赖&#xff0c;也就移除了负载均衡器 Ribbon&#xff0c;Spring Cloud 官方推荐使用 Loadbalancer 替换 Ribbon&#xff0c;而在 LoadBalancer 之前 Spring Cloud 一直使用的是 Ribbon 来做负载[均衡器的…...

Python | Leetcode Python题解之第385题迷你语法分析器

题目&#xff1a; 题解&#xff1a; class Solution:def deserialize(self, s: str) -> NestedInteger:if s[0] ! [:return NestedInteger(int(s))stack, num, negative [], 0, Falsefor i, c in enumerate(s):if c -:negative Trueelif c.isdigit():num num * 10 int…...

进程间通信-进程池

目录 理解​ 完整代码 完善代码 回收子进程&#xff1a;​ 不回收子进程&#xff1a; 子进程使用重定向优化 理解 #include <iostream> #include <unistd.h> #include <string> #include <vector> #include <sys/types.h>void work(int rfd) {…...

【PYTHON 基础系列-request 模块介绍】

一、requests库简介 使用requests库能快速构建 HTTP 请求&#xff0c;而无需深入了解底层网络协议细节。其API设计直观&#xff0c;使得发送请求就像调用函数一样简单&#xff0c;同时提供了丰富的选项以满足复杂网络交互的需求。这种设计使得无论是初学者还是经验丰富的开发者…...

springboot 实现策略模式通过id进入不同的服务类service

在Spring Boot中实现策略模式&#xff0c;通常是将不同的算法封装在单独的类中&#xff0c;并使它们可以相互替换。这些类通常都实现同一个接口。在Spring Boot应用中&#xff0c;你可以通过Spring的依赖注入&#xff08;DI&#xff09;来管理这些策略类的实例&#xff0c;并通…...

AUC真的什么情形下都适合吗

AUC(Area Under the ROC Curve)是一个广泛使用的性能评价指标,它衡量了分类模型在不同阈值下区分正类和负类的能力。然而,在某些情况下,AUC可能不是最准确的评价指标,以下是几种可能的情况: 数据极度不均衡:在数据极度不均衡的情况下,即使模型只预测多数类,AUC也可能…...

Flutter基本组件Text使用

Text是一个文本显示控件&#xff0c;用于在应用程序界面中显示单行或多行文本内容。 Text简单Demo import package:flutter/material.dart;class MyTextDemo extends StatelessWidget {const MyTextDemo({super.key});overrideWidget build(BuildContext context) {return Sca…...

DDS基本原理--FPGA学习笔记

DDS信号发生器原理&#xff1a; timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2024/09/04 15:20:30 // Design Name: hilary // Module Name: DDS_Module //module DDS_Module(Clk,Reset_n,Fword,Pword,Data);input Clk;input Reset_n;input [31:0]…...

有temp表包含A,B两列,使用SQL,对B列进行处理,形成C列,按A列顺序,B列值不变,则C列累计技术,B列值变化,则C列重新开始计数

有temp表&#xff0c;使用SQL&#xff0c;对B列进行处理&#xff0c;形成C列&#xff0c;按A列顺序&#xff0c;B列值不变&#xff0c;则C列累计技术&#xff0c;B列值变化&#xff0c;则C列重新开始计数 建表语句如下 CREATE TABLE temp(A STRING ,B STRING );INSERT INTO …...

【H2O2|全栈】关于HTML(6)HTML基础(五 · 完结篇)

HTML基础知识 目录 HTML基础知识 前言 准备工作 标签的具体分类&#xff08;五&#xff09; 本文中的标签在什么位置中使用&#xff1f; 表单&#xff08;二&#xff09; 下拉选择菜单 文本域 案例 拓展标签 iframe框架 案例 预告和回顾 后话 前言 本系列博客介…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...