vue:echarts引入以及获取动态数据

原创已于 2022-04-17 15:07:11 修改 · 3.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-17 15:03:14 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何在Vue项目中利用Echarts库动态获取并展示人事管理系统和员工考勤数据。通过柱状图和饼图，分别呈现了人事、财务、行政、市场部门的数据以及员工的正常、迟到、早退、缺勤和请假情况。代码示例详细解释了数据获取、封装及Echarts图表配置的过程。

参考链接：echarts引入
动态获取数据:

<template>
  <el-card class="box-card">
    <h1 align="center">人事管理系统</h1>
    <div id="zhu" style="width: 100%;height: 400px;"></div>
    <div id="bin" style="width: 100%;height: 400px;"></div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      /**
       * 获取员工数据
       */
      getAllEmployee() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employee/getAllEmployee',
          data: {

          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          //数据封装
          var data = [
            response.data.data.records[0].rs,
            response.data.data.records[0].cw,
            response.data.data.records[0].xz,
            response.data.data.records[0].sc
          ]

          this.getZhu(data);
        }).catch((error) => {
          console.log(error)
        })
      },
      //柱状图
      getZhu: function (data) {
        let myEchart = this.$echarts.init(document.getElementById("zhu"));
        myEchart.setOption({
          xAxis: {  //x轴
            //  数据条目名称
            data: ['人事', '财务', '行政', '市场']
          },
          yAxis: {}, //y轴
          series: [
            {
              type: 'bar',    //图表类别: bar :柱状图
              //  值
              data: data
            }
          ]
        })
      },
      /**
       * 获取出勤数据
       */
      getAttendanceTableDate() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/employeeAttendance/getAntt',
          data: {
          }
        }).then((response) => {
          if (response.data.msg != "SUCCESS") {
            this.$message.error(response.data.msg);
          }
          //数据封装
          var data = [
            {value: response.data.data.records[0].zc, name: '正常'},
            {value: response.data.data.records[0].cd, name: '迟到'},
            {value: response.data.data.records[0].zt, name: '早退'},
            {value: response.data.data.records[0].qq, name: '缺勤'},
            {value: response.data.data.records[0].qj, name: '请假'}
          ]
          this.getBin(data);
        }).catch((error) => {
          console.log(error)
        })
      },
      getBin: function (data) {
        let myEchart = this.$echarts.init(document.getElementById("bin"));
        myEchart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '员工考勤',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
    },
    //  *注意不要写在creatd()里  会出现dom元素未加载报错
    //  推荐写在mounted()里
    mounted() {
      this.getAllEmployee();
      this.getAttendanceTableDate();
    },
    created() {

    }
  }
</script>
<style lang="less" scoped
  .box-card {
    margin: 10px;
  }
</style>