学生请假系统学习五

学生请假数据分析 echarts 的使用

安装echarts

npm install echarts

引入

import * as echarts from "echarts";

正文

有个数据扁平化的处理把二维数据变成一个一维数组

 

<template>
  <div id="main1" style="width: 300px; height: 300px"></div>
</template>

 

 

 

export default {
  data() {
    return {
      dataX: [],
      dataY: [],
    };
  },
  methods: {
    setEcharts(option) {
      this.myChart1.setOption(option);
    },
  },
  async mounted() {
    this.myChart1 = echarts.init(document.getElementById("main1"));
    let { data } = await leavesModel.group();
    this.allList = data.list;
    let list = data.list;
    console.log(data);
    this.dataX = list.map(item => item._id);
    this.dataY = list.map(item => item.count);

    var option = {
      title: {
        text: "2106班缺勤数据"
      },
      tooltip: {},
      xAxis: {
        data: this.dataX
      },
      yAxis: {},
      series: [
        {
          name: "次数",
          type: "bar",
          barWidth: 30,
          data: this.dataY
        }
      ]
    };
    this.setEcharts(option);
    // 使用刚指定的配置项和数据显示图表。

    // 指定图表的配置项和数据
  }
};