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