
<style>
.sexChart {
  height: 100%;
}
</style>
<template>
  <div class="sexChart" ref="sexChart">
    
  </div>
</template>
<script>
export default {
  props: ["chartData", "strArr"],
  data() {
    return {};
  },
  watch: {},
  mounted() {
    this.init();
    let myChart = this.$echarts.init(this.$refs.sexChart);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.sexChart);
      let option = {
        grid: {
          left: "10%",
          right: "5%",
        },
        xAxis: {
          data: this.strArr,
          type: "category",
          axisLabel: {
            color: "#333333",
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#969696",
            formatter: "{value} %",
          },
          max: 100,
        },
        series: [
          {
            data: this.chartData,
            type: "bar",
            itemStyle: {
              color: "#409efe",
            },
            barWidth: "44",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
