<template>
  <div class="grade-analysis part-box">
    <div class="analysis-part">
      <v-chart :options="barOption" v-if="barOption" autoresize></v-chart>
    </div>
  </div>
</template>

<script>
import chartOption from "@/constants/chartOptions";

export default {
  name: "grade-analysis",
  data() {
    return {
      barOption: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    parseGroupBarData(datas) {
      if (!datas.length) {
        return { names: [], dataList: [] };
      }
      var names = datas[0].data.map(function(item) {
        return item.markerName;
      });
      var dataList = datas.map(function(item) {
        return {
          name: item.name,
          data: item.data.map(function(elem) {
            return elem.prop;
          })
        };
      });
      return {
        names: names,
        dataList: dataList
      };
    },
    initData() {
      const data = [
        {
          data: [{ prop: 37.5, markerId: 98, markerName: "pj001" }],
          name: "A"
        },
        { data: [{ prop: 62.5, markerId: 98, markerName: "pj001" }], name: "B" }
      ];
      this.barOption = chartOption.getBarGroupOption(
        this.parseGroupBarData(data),
        "档位分布图"
      );
    }
  }
};
</script>
