pbl-teacher-table/src/components/pages/dataBoardNew/student/studentInfo3/index.vue

<template>
  <div class="data_body">
    <div style="width: 100%; height: 100%">
      <div
        id="charts_canvas"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
      EworksNumArray: {
          type: Array,
      },
  },
  data() {
      return {
          chartObj: null,
          ooption: {
              xdata: [],
              data: [],
          },
          option: {
              // title: {
              //     text: '在线时长',
              //     textStyle: {
              //         fontSize: 12,
              //     },
              //     padding: [5, 0, 0, 10]
              // },
              tooltip: {
                  trigger: "axis",
                  axisPointer: {
                      type: "shadow",
                  },
              },
              dataZoom: [
                  {
                      // start: 50,
                      type: 'inside',
                      xAxisIndex: 0
                  },
                  {
                      type: 'slider',
                      xAxisIndex: 0
                  }
              ],
              grid: {
                  top: '5%',
                  left: '5%',
                  right: '10%',
                  bottom: '15%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: [],
                  // data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
              },

              yAxis: {
                  type: 'value',

              },
              series: [
                  {
                      name: "作业数量",
                      type: 'bar',
                      // data: [180, 50, 70, 90, 100, 130],
                      data: [],
                      itemStyle: {
                          normal: {
                              color: function (params) {
                                  return "#106bff";
                              },
                          },
                      },
                  }
              ]
          },
      };
  },
  methods: {
      setChart(option) {
          // 雷达图显示的标签
          let newPromise = new Promise((resolve) => {
              resolve();
          });
          //然后异步执行echarts的初始化函数
          newPromise.then(() => {
              const chartObj = this.$echarts.init(
                  //劳动课程
                  this.$el.querySelector("#charts_canvas")
              );
              this.option.xAxis.data = option.xdata;
              this.option.series[0].data = option.data;
              // 初始化雷达图
              this.chartObj = chartObj;
              this.chartObj.setOption(this.option);
          });
      },
      setArray(Array) {
          this.ooption = {
              xdata: [],
              data: [],
          }
          let _array = Array
          for (var i = 0; i < _array.length; i++) {
              this.ooption.xdata.push(_array[i].name)
              this.ooption.data.push(_array[i].works)
          }

          if (!this.chartObj) {
              this.setChart(this.ooption);
          } else {
              this.option.xAxis.data = this.ooption.xdata;
              this.option.series[0].data = this.ooption.data;
              this.chartObj.setOption(this.option);
          }
      }
  },
  watch: {
      EworksNumArray: {
          immediate: true,
          deep: true,
          handler(newValue, oldValue) {
              this.setArray(newValue)
              this.$forceUpdate();
          },
      },
  },
  mounted() {
      this.setArray(this.EworksNumArray)
      var _this = this;
      window.addEventListener("resize", () => {
          if (_this.chartObj) {
              _this.chartObj.resize();
          }
      });
  },
};
</script>

<style scoped>
.data_body {
  height: 100%;
  position: relative;
  border-radius: 5px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  width: 95%;
  /* background: #fff; */
}
</style>