125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<div class="left-pie" style="height: 100%">
|
|
<div class="inner" ref="healthChart"></div>
|
|
<div class="count">
|
|
<div class="t">总人数</div>
|
|
<div class="v" style="text-align: center">{{ userCount }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { circleRing } from '/src/views/indexSun/threeLeftNewItem/pieCharts.ts';
|
|
import { nextTick, onMounted, ref, watch } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
color: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
tips: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
userCount: {
|
|
type: Number,
|
|
},
|
|
chooseIndex: {
|
|
type: Number,
|
|
default: () => 0,
|
|
},
|
|
themeType: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
});
|
|
const healthChart = ref<HTMLElement>();
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
init();
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
async function init() {
|
|
initChart(props.data, props.userCount, props.color);
|
|
}
|
|
|
|
function initChart(chartData, total, color) {
|
|
nextTick(() => {
|
|
let myChart = echarts.init(healthChart.value);
|
|
let options = circleRing(chartData, total, color, props.chooseIndex);
|
|
myChart.setOption(options);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.inner::after {
|
|
//content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #051a2b;
|
|
}
|
|
|
|
.left-pie {
|
|
position: relative;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.count {
|
|
position: absolute;
|
|
//left: 41%;
|
|
//top: 30%;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
> div {
|
|
width: 80px;
|
|
text-align: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.t {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
</style>
|