297 lines
8.3 KiB
Vue
297 lines
8.3 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="pk">
|
|
<div class="gender">
|
|
<div class="left">
|
|
<p class="name">男</p>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
|
|
</div>
|
|
<p class="rate">{{man}}%</p>
|
|
</div>
|
|
<image class="vs" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/vs.svg"></image>
|
|
<div class="gender">
|
|
<div class="right" style="float: right">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/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 + '%'}" @click="handleShow(0)">
|
|
<view class="meng" v-if="genderList[0]">男生{{man}}%</view>
|
|
</div>
|
|
<div class="woman" :style="{width: woman + '%'}" @click="handleShow(1)">
|
|
<view class="meng" v-if="genderList[1]">女生{{woman}}%</view>
|
|
</div>
|
|
</div>
|
|
<div class="charts">
|
|
<canvas class="sexRatio" canvas-id="gender" id="gender" @tap="tap"/>
|
|
<!-- <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:0,
|
|
woman:0,
|
|
width:0,//手机宽度
|
|
customerSecondPath:'',//路径
|
|
genderList:[false,false],
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
this.handleCarData(value)
|
|
},
|
|
deep:true,
|
|
immediate:true,
|
|
}
|
|
},
|
|
methods:{
|
|
tap(e){
|
|
uChartsInstance[e.target.id].touchLegend(e);
|
|
},
|
|
handleShow(num){
|
|
let list = []
|
|
this.genderList.forEach(()=>{
|
|
list.push(false)
|
|
})
|
|
this.genderList = list
|
|
this.genderList[num] = true
|
|
},
|
|
// 处理传入的数据
|
|
handleCarData(value) {
|
|
this.man = value.man
|
|
this.woman = value.woman
|
|
let res = {
|
|
series: value.res
|
|
}
|
|
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: 240,
|
|
series: data.series,
|
|
animation: false,
|
|
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: "solid",
|
|
splitNumber: 5,
|
|
boundaryGap: "justify",
|
|
title:'年龄: /岁',
|
|
titleOffsetY: 15,
|
|
titleOffsetX: -30,
|
|
min: 10,
|
|
max: 60,
|
|
axisLineColor:'#F2F2F5'
|
|
},
|
|
yAxis: {
|
|
disableGrid: false,
|
|
gridType: "solid",
|
|
showTitle:true,
|
|
splitNumber:6,
|
|
gridColor:'#F2F2F5',
|
|
data: [
|
|
{
|
|
title:'单位: /元',
|
|
min: 0,
|
|
max: 120,
|
|
titleOffsetY:-5,
|
|
titleOffsetX:0,
|
|
fontColor:'#786B6C',
|
|
axisLineColor:'#F2F2F5'
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
bubble: {
|
|
border: 1,
|
|
opacity: 0.25
|
|
}
|
|
}
|
|
});
|
|
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{
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 32px);
|
|
height: 14px;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
margin-left: 16px;
|
|
.man{
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;top: 0;
|
|
background: #1E80FF;
|
|
margin-right: 2px;
|
|
border-radius: 2px 0 0 2px;
|
|
.meng{
|
|
width: 90px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
height: 24px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 0;top: -20px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 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 ;
|
|
.meng{
|
|
width: 90px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
height: 24px;
|
|
position: absolute;
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
z-index: 9;
|
|
left: 0;top: -20px;
|
|
background: rgba(0,0,0,0.6);
|
|
color:#fff;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.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: 220px;
|
|
.sexRatio{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|