renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zk
2023-12-15 18:33:04 +08:00
parent d614f10bb5
commit 2cc8886c2d
31 changed files with 820 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/item-d/item-d.vue
+93 -66
View File
@@ -1,76 +1,103 @@
<template>
<div>
<public-title :title="props.title">
<template #right>
{{ props.tips }}
</template>
</public-title>
<div class="inner" ref="healthChart"></div>
</div>
<div class="left-pie">
<public-title :title="props.title">
<template #right>
{{ props.tips }}
</template>
</public-title>
<div class="inner" ref="healthChart"></div>
<div class="count" v-show="props.tips">
<div class="t">总人数</div>
<div class="v">{{ userCount }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
import {screenPie} from '/@/components/item-d/pieCharts.ts';
import {onMounted, ref, unref, watch, defineProps} from 'vue';
import * as echarts from 'echarts';
import PublicTitle from '/@/components/publicTitle.vue';
import { circleRing } from '/@/components/item-d/pieCharts.ts';
import { 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: () => '',
},
});
const healthChart = ref<HTMLElement>();
const props = defineProps({
title: {
type: String,
default: () => '',
},
data: {
type: Array,
default: () => [],
},
color: {
type: Array,
default: () => [],
},
tips: {
type: String,
default: () => '',
},
userCount: {
type: Number,
},
});
const healthChart = ref<HTMLElement>();
onMounted(() => {
init();
});
const {setSpin, spinning} = useSpin();
watch(
() => props.data,
() => {
init();
}
);
onMounted(() => {
init();
});
watch(
() => props.data,
() => {
init();
async function init() {
initChart(props.data, props.userCount, props.color);
}
);
const {healthData, getValue, setHealth} = useHealth();
async function init() {
// setHealth(props.data);
// const yData = unref(getValue);
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
initChart(props.data, 78, props.color);
}
function initChart(chartData, total, color) {
let myChart = echarts.init(healthChart.value);
let options = screenPie(chartData, total, color, '{d}%');
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
function initChart(chartData, total, color) {
let myChart = echarts.init(healthChart.value);
let options = circleRing(chartData, total, color, '{d}%');
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
</script>
<style scoped lang="less">
.inner {
width: 100%;
margin: 0 auto;
height: calc(100% - 40px);
}
</style>
.inner {
width: 100%;
margin: 0 auto;
height: calc(100% - 40px);
}
.left-pie {
position: relative;
padding-bottom: 0 !important;
}
.count {
position: absolute;
width: 80%;
top: 51%;
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;
z-index: 0;
}
.t {
font-size: 14px;
font-weight: normal;
}
}
</style>
src/components/item-d/pieCharts.ts
+47 -28
View File
@@ -1,37 +1,56 @@
export function screenPie(chartData, total, color, formatter) {
return {
title: {
text: '总人数',
color: color,
tooltip: {
trigger: 'item',
show: true,
textStyle: {
fontSize: 14,
color: '#ffffff',
fontWeight: 'normal',
align: 'center',
color: '#fff',
},
subtext: total + '',
x: '38%',
y: '42%',
subtextStyle: {
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
},
legend: {
left: '74%',
top: 'center',
orient: 'vertical',
icon: 'circle',
itemGap: 8,
textStyle: {
color: '#ffffff',
fontSize: 24,
fontWeight: 'bold',
fontSize: 16,
},
},
// graphic: [
// {
// //环形图中间添加文字
// type: 'text', //通过不同top值可以设置上下显示
// left: 'center',
// top: 'center',
// style: {
// text: 45465456,
// textAlign: 'center',
// fill: '#1E7CE8', //文字的颜色
// fontSize: 20,
// lineHeight: 20,
// },
// },
// ],
series: [
{
type: 'pie',
// radius: ['50%', '86%'],
// center: ['42%', '55%'],
radius: ['50%', '76%'],
center: ['42%', '49%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: formatter,
color: '#ffffff',
fontSize: 14,
},
labelLine: {
show: true,
length: 6,
length2: 20,
minTurnAngle: 120,
},
data: chartData,
},
],
};
}
//左侧圆
export function circleRing(chartData, total, color, formatter) {
return {
color: color,
tooltip: {
trigger: 'item',
@@ -56,7 +75,7 @@ export function screenPie(chartData, total, color, formatter) {
series: [
{
type: 'pie',
radius: ['50%', '86%'],
radius: ['50%', '82%'],
center: ['42%', '55%'],
avoidLabelOverlap: false,
label: {