ahyd_DIB/pages/commercialBI/components/guest/customerSecond.vue

<template>
  <div class="main">
      <div class="pk">
          <div class="gender">
              <div class="left">
                  <p class="name">男</p>
                  <image class="icon" src="/static/images/commercial/man.svg"></image>
              </div>
              <p class="rate">{{man}}%</p>
          </div>
          <image class="vs" src="/static/images/commercial/vs.svg"></image>
          <div class="gender">
              <div class="right" style="float: right">
                  <image class="icon" src="/static/images/commercial/woman.svg"></image>
                  <p class="name">女</p>
              </div>
              <p class="rate">{{woman}}%</p>
          </div>
      </div>
      <div class="progress">
          <div class="man" :style="{width: man + '%'}"></div>
          <div class="woman" :style="{width: woman + '%'}"></div>
      </div>
      <div class="charts">
          <canvas v-if="!customerSecondPath" class="sexRatio" canvas-id="gender" id="gender"/>
          <image class="sexRatio" v-if="customerSecondPath" :src="customerSecondPath"></image>
      </div>
  </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "customerSecond",
    data() {
        return {
            man:'64.8',
            woman:'35.2',
            width:0,//手机宽度
            customerSecondPath:''//路径
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('gender', value)
                this.handleCarData(value)
            }
        }
    },
    methods:{
        // 处理传入的数据
        handleCarData(value) {
            let res = {
                series: value
            }
            this.drawCharts('gender', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 70
            uChartsInstance[id] = new uCharts({
                type: "bubble",
                context: ctx,
                width: _this.width,
                height: 193,
                series: data.series,
                animation: true,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00C2FF"],
                padding: [15, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                xAxis: {
                    disableGrid: true,
                    gridType: "dash",
                    splitNumber: 4,
                    boundaryGap: "justify",
                    title:'年龄: /岁',
                    titleOffsetY: 15,
                    titleOffsetX: -30,
                    min: 20,
                    max: 60
                },
                yAxis: {
                    disableGrid: false,
                    gridType: "dash",
                    showTitle:true,
                    data: [
                        {
                            title:'单位: /元',
                            min: 0,
                            max: 100,
                            titleOffsetY:-5,
                            titleOffsetX:0
                        }
                    ]
                },
                extra: {
                    bubble: {
                        border: 2,
                        opacity: 0.5
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('gender')
            },2000)
        },
        canvasToTempImage(id){
            uni.canvasToTempFilePath({
                canvasId:id,
                complete:(res)=>{
                    if (res.tempFilePath){
                        uni.getFileSystemManager().readFile({
                            filePath: res.tempFilePath,
                            encoding: 'base64',
                            success: res => {
                                let base64 = 'data:image/png;base64,' + res.data;
                                this.customerSecondPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  margin-top: 12px;
  .pk{
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .vs{
          width: 60px;
          height: 36px;
      }
      .gender{
          .left,.right{
              display: flex;
              align-items: center;
              margin-bottom: 2px;
              .name{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 20px;
              }
              .icon{
                  width: 16px;
                  height: 16px;
              }
          }

          .rate{
              font-size: 18px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #160002;
              line-height: 22px;
          }
      }
  }
  .progress{
      width: 100%;
      height: 14px;
      margin-top: 8px;
      position: relative;
      .man{
          height: 100%;
          position: absolute;
          left: 0;top: 0;
          background: #1E80FF;
          margin-right: 2px;
          border-radius: 2px 0 0 2px;
      }
      .man:after{
          position: absolute;
          content:'';
          width: 1px;
          height: 100%;
          background: #FFFFFF;
          z-index:9;
          right: 0;
          top: 0;
      }
      .woman{
          height: 100%;
          position: absolute;
          right: 0;top: 0;
          background: #00C2FF;
          border-radius: 0  2px 2px 0 ;
      }
      .woman:after{
          position: absolute;
          content:'';
          width: 1px;
          height: 100%;
          background: #FFFFFF;
          z-index:9;
          left: 0;
          top: 0;
      }
  }
  .charts{
      margin-top: 20px;
      width: 100%;
      height: 180px;
      .sexRatio{
          width: 100%;
          height: 100%;
      }
  }
}
</style>