pbl-teacher-table/src/components/pages/dataBoardNew/student/stuAct/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: {
    pusaDep: {
      type: Array,
    },
  },
  data() {
    return {
      chartObj: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}%",
        },
        // legend: {
        //   data: ["评价", "授课", "创建", "登录"],
        // },
        series: [
          {
            type: "funnel",
            left: "5%",
            top: 10,
            bottom: 0,
            width: "95%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [
              // { value: 20, name: "登录" },
              // { value: 40, name: "创建" },
              // { value: 60, name: "授课" },
              // { value: 80, name: "评价" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    setChart(array) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          this.$el.querySelector("#charts_canvas")
        );
        // 初始化雷达图
        this.option.series[0].data = array;
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
    setArray(array){
        let _array = array;

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

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