pbl-teacher-table/src/components/pages/kindStudentEva/test/component/verColumnar.vue

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
// import echarts from "echarts";

export default {
  name: "BarChart",
  props: {
    verChartData: {
      type: Array,
      required: true
    },
    verCategories: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      bLeg: ["第一次评估", "第二次评估", "第三次评估"]
    };
  },
  mounted() {
    this.initializeChart();
    var _this = this;
    // window.addEventListener("resize", () => {
    //     _this.renderChart();
    // //    this.$forceUpdate();
    // });
  },
  methods: {
    initializeChart() {
      const chart = this.$echarts.init(this.$refs.chart);

      const options = {
        xAxis: {
          type: "value",
          max: 5
        },
        tooltip: {},
        legend: {
          data: this.bLeg,
          bottom: 0 // 将图例显示在底部
        },
        grid: {
          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
        },
        yAxis: {
          type: "category",
          data: this.verCategories
        },
        series: this.bLeg.map((legendItem, index) => ({
          name: legendItem,
          data: this.verChartData[index],
          type: "bar",
          barCategoryGap: "30%"
        }))

        // [
        //   {
        //     data: this.verChartData,
        //     type: "bar",
        //     barCategoryGap: "30%"
        //   }
        // ]
      };

      chart.setOption(options);
    }
  }
};
</script>