<template>
  <div class="bar-chart"  style="width: 100%; height: 250px;font-size: 10px;" ref="chart"></div>
</template>

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

export default {
  name: "BarChart",
  props: {
    chartData: {
      type: Array,
      required: true
    },
    categories: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      bLeg: ["我的", "班级平均"]
    };
  },
  mounted() {
    this.renderChart();
    // console.log("x", this.chartData, this.categories);
    // var _this = this;
    // window.addEventListener("resize", () => {
    //     _this.renderChart();
    // //  this.$forceUpdate();
    // });
  },
  methods: {
    renderChart() {
      const chartContainer = this.$refs.chart;
      const chart = this.$echarts.init(chartContainer);

      const options = {
        // title: {
        //   text: "平均分" // 设置标题
        // },
        tooltip: {},
        legend: {
          data: this.bLeg,
          bottom: 0, // 将图例显示在底部 
          icon: 'circle' // 修改图例项的形状为圆形
        },
        // color: ["#FD9588",'#F5B763'], // 设置柱状图的颜色
        xAxis: {
          type: "category",
          data: this.categories
        },
        yAxis: {
          type: "value",
          max: "5"
        },
        series: this.bLeg.map((legendItem, index) => ({
          name: legendItem,
          data: this.chartData[index],
          type: "bar"
          // barCategoryGap: "30%"
        }))
        // series: [
        //   {
        //     data: this.chartData,
        //     type: "bar"
        //   }
        // ]
      };

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

<style scoped>
.bar-chart {
  width: 100%;
  height: 250px;
}
</style>
