genderChart.vue

<template>
  <div class="gender-distribute">
    <div class="distribute-detail">
      <div class="gender-box">
        <span class="gender-photo"></span>
        <span class="gender-ratio">{{$t('head.man')}} {{ options.maleRatio }}</span>
      </div>
      <div class="gender-box">
        <span class="gender-photo gender-female"></span>
        <span class="gender-ratio">{{$t('head.woman')}} {{ options.femaleRatio }}</span>
      </div>
    </div>
    <div class="gender-bar-wrap">
      <span
        class="gender-bar gender-male-bar"
        :style="{ width: options.maleRatio }"
        @mousemove="ratioPos"
        @mouseover="showRatio($event, 'male', options.maleRatio)"
        @mouseout="hideGenderRatio"
      ></span>
      <span
        class="gender-bar gender-female-bar"
        :style="{ width: options.femaleRatio }"
        @mousemove="ratioPos"
        @mouseover="showRatio($event, 'female', options.femaleRatio)"
        @mouseout="hideGenderRatio"
      ></span>
    </div>
    <div class="gender-tooltip" v-show="genderTip.show" :style="{ left: genderTip.left }">
      <span class="gender-tooltip-text">{{ genderTip.sex }}:</span>
      <span class="gender-tooltip-text">{{ genderTip.ratio }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      genderTip: {
        show: false,
        left: "",
        sex: "",
        ratio: ""
      }
    };
  },
  watch: {
    // options(val) {
    //     this.drawRatio(this.id, val)
    // }
  },
  mounted() {
    // this.drawRatio(this.id, this.options)
  },
  methods: {
    // drawRatio(domId, option) {
    //     let myChart = this.$echarts.init(document.getElementById(domId));
    // }
    showRatio(ev, gender, ratio) {
      let e = ev || window.event;
      this.genderTip.left = e.layerX + "px";
      this.genderTip.sex = gender === "male" ? "男" : "女";
      this.genderTip.ratio = ratio;
      this.genderTip.show = true;
    },
    ratioPos($event) {
      this.genderTip.left = $event.layerX + "px";
    },
    hideGenderRatio() {
      this.genderTip.show = false;
    }
  }
};
</script>

<style scoped>
.gender-distribute {
  position: relative;
  padding: 0.18rem 8% 0.78rem 10%; /* 0.6rem 8% 0.78rem 10% */
  margin-top: 9.4%;
}

.gender-distribute:after {
  content: "";
  display: block;
  width: 1px;
  height: 3rem;
  background: #dcdcdc;
  position: absolute;
  right: 0;
  top: 0;
}

.distribute-detail {
  overflow: hidden;
}
.gender-box {
  float: left;
  text-align: center;
  width: 50%;
}

.gender-photo {
  display: block;
  width: 1.98rem; /*1.41*/
  height: 2rem; /*1.41*/
  border-radius: 50%;
  background: url(~@/assets/img/male.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 0 auto 0.17rem;
}

.gender-female {
  background: url(~@/assets/img/female.png) no-repeat center center;
  background-size: 100% 100%;
}

.gender-ratio {
  display: block;
  font-size: 0.16rem;
  color: #444444;
  margin: 0 auto;
}

.gender-bar-wrap {
  height: 0.13rem;
  margin-top: 0.44rem; /*.56*/
  border-radius: 0.06rem;
  background-color: #f6f6f6;
  overflow: hidden;
  cursor: pointer;
}

.gender-bar {
  float: left;
  height: 100%;
  background: #3bb8ff;
}
.gender-male-bar {
  /* width: 40%; */
}

.gender-female-bar {
  /* width: 60%; */
  background: #ffc62e;
}

.gender-tooltip {
  position: absolute;
  border-style: solid;
  white-space: nowrap;
  z-index: 9999999;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgb(255, 255, 255);
  border-width: 0px;
  border-color: rgb(51, 51, 51);
  border-radius: 4px;
  color: rgb(51, 51, 51);
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  line-height: 21px;
  padding: 0px;
  left: 1244px;
  bottom: 40px;
  box-shadow: rgba(3, 3, 3, 0.4) 0px 0px 10px -4px;
}

.gender-tooltip-text {
  font-size: 16px;
  height: 31px;
  color: #333;
  border-radius: 4px;
  line-height: 31px;
  padding-left: 10px;
  padding-top: 6px;
}

.gender-tooltip-text:last-of-type {
  padding-right: 15px;
}
</style>