标签：count affair name color let 实训 可视化 山东大学 echarts

文章目录

• • 一、数据可视化讲解
  • • 1.选用工具
    • 2.具体代码
  • 二、效果展示

一、数据可视化讲解

1.选用工具

选用Echarts可视化组件，在vue中搭建Echart的环境，选择理由是其有优美的交互动画，不需要自己再去处理

2.具体代码

将统计好的数据放入data return的变量中，在Echarts具体方法中进行调用。

<template>
  <div class="DataAnalyze">
    <div style="height: 120px;width:100%;margin-top:20px;padding-bottom: 20px">
      <div style="display: inline-block">
        <div class="box_bottom" style="left: 250px">
          <div class="box_title">
            <span>总事务</span>
          </div>
          <div class="box_data">
            <span>{{ count_all_affair }}</span>
          </div>
        </div>
        <div class="box_top" style="background-color: #67C23A;left: 250px">
          <i class=" el-icon-files" style="display:block;line-height: 80px"></i>
        </div>
      </div>

      <div style="display: inline-block">
        <div class="box_bottom" style="left: 450px">
          <div class="box_title">
            <span>全程跟踪</span>
          </div>
          <div class="box_data">
            <span>{{ count_all_quancheng_affair }}</span>
          </div>
        </div>
        <div class="box_top" style="background-color: #E6A23C;left: 450px">
          <i class=" el-icon-edit" style="display:block;line-height: 80px"></i>
        </div>
      </div>

      <div style="display: inline-block">
        <div class="box_bottom" style="left: 650px">
          <div class="box_title">
            <span>报销</span>
          </div>
          <div class="box_data">
            <span>{{ count_all_baoxiao_affair }}</span>
          </div>
        </div>
        <div class="box_top" style="background-color: #409EFF;left: 650px">
          <i class=" el-icon-bell" style="display:block;line-height: 80px"></i>
        </div>
      </div>

      <div style="display: inline-block">
        <div class="box_bottom" style="left: 850px">
          <div class="box_title">
            <span>已完成</span>
          </div>
          <div class="box_data">
            <span>{{ count_all_finished_affair }}</span>
          </div>
        </div>
        <div class="box_top" style="background-color: #F56C6C;left: 850px">
          <i
            class=" el-icon-document-checked"
            style="display:block;line-height: 80px"
          ></i>
        </div>
      </div>

      <div style="display: inline-block">
        <div class="box_bottom" style="left: 1050px">
          <div class="box_title">
            <span>未完成</span>
          </div>
          <div class="box_data">
            <span>{{ count_all_waiting_affair }}</span>
          </div>
        </div>
        <div class="box_top" style="background-color: #909399;left: 1050px">
          <i
            class=" el-icon-document-delete"
            style="display:block;line-height: 80px"
          ></i>
        </div>
      </div>
    </div>

    <div style="height: 335px;width: 1030px;overflow-y:auto ">
      <div id="type" class="Garaph" style="margin-left: 8px"></div>
      <div id="state" class="Garaph" style="margin-left: 8px"></div>
      <div id="finished" class="Garaph" style="margin-left: 8px"></div>
      <div id="time"></div>
    </div>
  </div>
</template>

<script scoped>
import { getExactTime } from "../../TimeFormat";
import { getDate } from "../../TimeFormat";

import axios from "axios";
export default {
  components: {},
  data() {
    return {
      header: "false",

      //统计数据
      //总事务数
      count_all_affair: "",
      //全程跟踪审计项目
      count_all_quancheng_affair: "",
      //报销审计项目
      count_all_baoxiao_affair: "",
      //已完成项目
      count_all_finished_affair: "",
      //未完成项目
      count_all_waiting_affair: "",
      //提交资料状态项目
      count_all_tijiao_affair: "",
      //审批中状态项目
      count_all_shenpizhong_affair: "",
      //审批失败状态项目
      count_all_failed_affair: "",

      //所有审计员审计实务统计信息
      auditorList: [],

      //mychart全局对象
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: ""
    };
  },
  props: {
    isShow: Boolean
  },
  watch: {
    isShow(newValue, oldValue) {
      if (newValue == true) {
        this.refresh_DataAnalyze();
      }
    }
  },
  methods: {
    setGaraph() {
      this.getTypeGaraph(); //事务类型饼图
      this.getStateGaraph(); //事务状态饼图
      this.getFinishedGaraph(); //已完成、未完成饼图
      this.getTimeGaraph();
    },
    refresh_DataAnalyze() {
      axios
        .get("https://baixx.site/api/draw_info", {
          headers: {
            token: sessionStorage.getItem("token")
          }
        })
        .then(res => {
          //定义临时变量，用于统计
          //总事务数
          let count_all_affair = 0;
          //全程跟踪审计项目
          let count_all_quancheng_affair = 0;
          //报销审计项目
          let count_all_baoxiao_affair = 0;
          //已完成项目
          let count_all_finished_affair = 0;
          //未完成项目
          let count_all_waiting_affair = 0;
          //提交资料状态项目
          let count_all_tijiao_affair = 0;
          //审批中状态项目
          let count_all_shenpizhong_affair = 0;
          //审批失败状态项目
          let count_all_failed_affair = 0;

          //初始化统计所有审计员审计事务的变量
          let auditorList = [];
          let n = 0;
          //-----------遍历所有审计员---------------
          for (let item of res.data.content) {
            //当前审计员的名字
            let auditorName = item.user.name;
            let post = item.user.post;

            //初始化每个审计员的统计事务类型信息
            let count_person_all_affair = 0;
            //全程跟踪审计项目
            let count_person_quancheng_affair = 0;
            //报销审计项目
            let count_person_baoxiao_affair = 0;
            //已完成项目
            let count_person_finished_affair = 0;
            //未完成项目
            let count_person_waiting_affair = 0;
            //初始化auditor对象
            let auditor = {
              auditorName: "",
              总事务: "",
              全程跟踪: "",
              报销: "",
              已完成: "",
              未完成: ""
            };

            //审计员进入循环
            if (post == 1) {
              n++;
              //---------------遍历该审计员的所有事务---------------
              for (let affair of item.affairList) {
                //统计所有事务信息
                let type = affair.kind === 20 ? "报销审计" : "全程跟踪审计";
                let state = affair.state;
                //事务具体状态
                if (state === 10) {
                  state = "提交资料中";
                  count_all_tijiao_affair++;
                } else if (state === 11) {
                  state = "审批中";
                  count_all_shenpizhong_affair++;
                } else if (state === 12) {
                  state = "审批失败";
                  count_all_failed_affair++;
                } else if (state === 13) {
                  state = "审批结束";
                }
                //总事务数加1
                count_all_affair++;
                count_person_all_affair++;
                //事务类型
                if (type == "报销审计") {
                  count_all_baoxiao_affair++;
                  count_person_baoxiao_affair++;
                } else {
                  count_all_quancheng_affair++;
                  count_person_quancheng_affair++;
                }
                //是否完成
                if (state == "审批结束") {
                  count_all_finished_affair++;
                  count_person_finished_affair++;
                } else {
                  count_all_waiting_affair++;
                  count_person_waiting_affair++;
                }
              }
              auditor.auditorName = auditorName;
              auditor.总事务 = count_person_all_affair;
              auditor.全程跟踪 = count_person_quancheng_affair;
              auditor.报销 = count_person_baoxiao_affair;
              auditor.已完成 = count_person_finished_affair;
              auditor.未完成 = count_person_waiting_affair;
              auditorList.push(auditor);
            }
          }
          this.auditorList = auditorList;

          //头部五个统计信息赋值
          //统计数据
          this.count_all_affair = count_all_affair;
          //全程跟踪审计项目
          this.count_all_quancheng_affair = count_all_quancheng_affair;
          //报销审计项目
          this.count_all_baoxiao_affair = count_all_baoxiao_affair;
          //已完成项目
          this.count_all_finished_affair = count_all_finished_affair;
          //未完成项目
          this.count_all_waiting_affair = count_all_waiting_affair;
          //提交资料状态项目
          this.count_all_tijiao_affair = count_all_tijiao_affair;
          //审批中状态项目
          this.count_all_shenpizhong_affair = count_all_shenpizhong_affair;
          //审批失败状态项目
          this.count_all_failed_affair = count_all_failed_affair;

          //加载图表
          this.setGaraph();
        });
    },
    getTimeGaraph() {
      //直接引用进来使用
      var echarts = require("echarts");
      if (
        this.myChart1 != null &&
        this.myChart1 != "" &&
        this.myChart1 != undefined
      ) {
        this.myChart1.dispose();
      }
      // 基于准备好的dom，获取main节点init初始化echarts实例
      this.myChart1 = echarts.init(document.getElementById("time"));
      // 指定图表的配置项和数据
      var option;

      option = {
        legend: {},
        tooltip: {},
        color: ["#67C23A", "#E6A23C", "#409EFF", "#F56C6C", "#909399"],
        dataset: {
          dimensions: [
            "auditorName",
            "总事务",
            "全程跟踪",
            "报销",
            "已完成",
            "未完成"
          ],
          source: this.auditorList
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option);
    },
    getTypeGaraph() {
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      if (
        this.myChart2 != null &&
        this.myChart2 != "" &&
        this.myChart2 != undefined
      ) {
        this.myChart2.dispose();
      }
      this.myChart2 = echarts.init(document.getElementById("type"));
      // 指定图表的配置项和数据
      var option = {
        //这里的颜色是显示在部分扇形里的，依次调用颜色
        color: [
          "#E6A23C",
          "#409EFF",
          "#ffaa00",
          "#c2c2c2",
          "#ff55ff",
          "#ffff00",
          "#ca8622",
          "#aaaaff",
          "#aaff00",
          "#aa0000",
          "#c4ccd3"
        ],
        title: {
          text: "审计项目类型情况",
          x: "center",
          textStyle: {
            color: "#666",
            fontSize: 20
          }
        },
        legend: {
          orient: "vertical",
          // left: "left",
          bottom: "bottom",
          data: ["全程跟踪审计", "报销审计"] //名称
        },
        tooltip: {},
        series: [
          {
            // name: '营收',
            type: "pie", //饼状视图
            radius: "70%",
            data: [
              {
                value: this.count_all_quancheng_affair,
                name: "全程跟踪审计"
              },
              {
                value: this.count_all_baoxiao_affair,
                name: "报销审计"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              position: "inside", //如果需要文字显示在图形里面则设置
              normal: {
                show: true,
                formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                position: "inner"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart2.setOption(option);
    },
    getStateGaraph() {
      var echarts = require("echarts");
      if (
        this.myChart3 != null &&
        this.myChart3 != "" &&
        this.myChart3 != undefined
      ) {
        this.myChart3.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart3 = echarts.init(document.getElementById("state"));
      // 指定图表的配置项和数据
      var option = {
        //这里的颜色是显示在部分扇形里的，依次调用颜色
        color: ["#9e0909", "#67C23A", "#191d1a", "#F56C6C"],
        title: {
          text: "审计项目具体状态情况",
          x: "center",
          textStyle: {
            color: "#666",
            fontSize: "20"
          }
        },
        legend: {
          orient: "vertical",
          // left: "left",
          bottom: "bottom",
          data: ["提交资料中", "审批中", "审批失败", "审批结束"] //名称
        },
        tooltip: {},
        series: [
          {
            // name: '营收',
            type: "pie", //饼状视图
            radius: "70%",
            data: [
              {
                value: this.count_all_tijiao_affair,
                name: "提交资料中"
              },
              {
                value: this.count_all_shenpizhong_affair,
                name: "审批中"
              },
              {
                value: this.count_all_failed_affair,
                name: "审批失败"
              },
              {
                value: this.count_all_finished_affair,
                name: "审批结束"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              // position: "inside", //如果需要文字显示在图形里面则设置
              normal: {
                show: true,
                formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                position: "inner"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart3.setOption(option);
    },
    getFinishedGaraph() {
      var echarts = require("echarts");
      if (
        this.myChart4 != null &&
        this.myChart4 != "" &&
        this.myChart4 != undefined
      ) {
        this.myChart4.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart4 = echarts.init(document.getElementById("finished"));
      // 指定图表的配置项和数据
      var option = {
        //这里的颜色是显示在部分扇形里的，依次调用颜色
        color: ["#F56C6C", "#909399"],
        title: {
          text: "审计项目具体状态情况",
          x: "center",
          textStyle: {
            color: "#666",
            fontSize: "20"
          }
        },
        legend: {
          orient: "vertical",
          // left: "left",
          bottom: "bottom",
          data: ["已完成", "未完成"] //名称
        },
        tooltip: {},
        series: [
          {
            // name: '营收',
            type: "pie", //饼状视图
            radius: "70%",
            data: [
              {
                value: this.count_all_finished_affair,
                name: "已完成"
              },
              {
                value: this.count_all_waiting_affair,
                name: "未完成"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              // position: "inside", //如果需要文字显示在图形里面则设置
              normal: {
                show: true,
                formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                position: "inner"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart4.setOption(option);
    }
  }
};
</script>

<style scoped>
.DataAnalyze {
  /*background-color: #ededed;*/
  margin-top: -5px;
  margin-left: 20px;
  padding-top: 10px;
  top: 20px;
  left: 20px;
  height: 505px;
  width: 1050px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  /*overflow-y: auto;*/
}
.box_bottom {
  margin-top: -15px;
  position: absolute;
  width: 170px;
  height: 110px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  z-index: 1;
}
.box_top {
  font-size: 40px;
  text-align: center;
  color: white;
  margin-top: -20px;
  position: absolute;
  width: 80px;
  height: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  z-index: 2;
}
.box_title {
  clear: both;
  position: relative;
  margin-top: 10px;
  float: left;
  left: 85px;
  font-weight: 700;
  font-size: 20px;
  color: #666;
}
.box_data {
  clear: both;
  position: relative;
  margin-top: 15px;
  float: left;
  left: 100px;
  font-weight: 500;
  font-size: 20px;
  color: #666;
}
.Garaph {
  height: 325px;
  width: 330px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  display: inline-block;
  margin-top: 3px;
}
#time {
  margin-top: 55px;
  margin-left: 10px;
  margin-bottom: 5px;
  height: 325px;
  width: 1010px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}
/*去掉el-table里的所有边框*/
/deep/ .el-table td,
.el-table th {
  border: none;
}
a {
  text-decoration: none;
  color: black;
  margin-left: 30px;
}
a:hover {
  color: red;
}
/*scope里要加上/deep/ */
/deep/ .el-table .white {
  background-color: white;
}
/deep/ .el-table .dark {
  background-color: #f6f1f1;
}
</style>

二、效果展示

标签：count,affair,name,color,let,实训,可视化,山东大学,echarts
来源： https://blog.csdn.net/xdl229/article/details/117772873

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。