342 lines
7.6 KiB
Vue
342 lines
7.6 KiB
Vue
<template>
|
|
<div class="main-part-charts">
|
|
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg2.png') + ')' }">
|
|
<template v-for="(n, index) in valData" :key="index">
|
|
<div class="num-txt-warp">
|
|
<div class="num-txt">
|
|
<div class="label">
|
|
<span class="label-val">{{ n.name }}</span>
|
|
</div>
|
|
<div class="val">
|
|
<span class="val-val">{{ n.value }}</span>
|
|
<span class="unit">{{ n.unit }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="code-pie">
|
|
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
let valData = reactive([
|
|
{ value: 356, name: '追溯主体', unit: '家' },
|
|
{ value: 25, name: '检测机构', unit: '家' },
|
|
{ value: 199, name: '生成溯源码', unit: '次' },
|
|
]);
|
|
const chartsData = reactive({
|
|
option: {
|
|
backgroundColor: 'transparent',
|
|
title: {
|
|
zlevel: 0,
|
|
text: 806,
|
|
subtext: '设备管理',
|
|
top: '38%',
|
|
left: '80%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 10,
|
|
color: '#fff',
|
|
},
|
|
show: false,
|
|
},
|
|
color: [
|
|
{
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(40, 218, 239, 1)' },
|
|
{ offset: 1, color: 'rgba(130, 249, 255, 0.8)' },
|
|
],
|
|
},
|
|
{
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(198, 201, 24, 1)' },
|
|
{ offset: 1, color: 'rgba(198, 201, 24, 0.8)' },
|
|
],
|
|
},
|
|
{
|
|
x: 1,
|
|
y: 1,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(83, 165, 23, 1)' },
|
|
{ offset: 1, color: 'rgba(83, 165, 23, 0.8)' },
|
|
],
|
|
},
|
|
{
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(75, 238, 114, 0.2)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(75, 238, 114, 1)', // 100% 处的颜色
|
|
},
|
|
],
|
|
},
|
|
{
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255, 19, 0, 0.2)', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(251, 95, 79, 1)', // 100% 处的颜色
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
valData: [
|
|
{
|
|
type: 'pie',
|
|
name: '外层细圆环',
|
|
radius: ['58%', '60%'],
|
|
center: ['20%', '50%'],
|
|
hoverAnimation: true,
|
|
startAngle: 0,
|
|
clockWise: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(40, 218, 239, 0.8)',
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: [10],
|
|
},
|
|
{
|
|
type: 'pie',
|
|
name: '内层细圆环',
|
|
radius: ['38%', '40%'],
|
|
center: ['20%', '50%'],
|
|
hoverAnimation: true,
|
|
startAngle: 0,
|
|
clockWise: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(40, 218, 239, 0.5)',
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: [10],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
startAngle: 0,
|
|
radius: 70,
|
|
clockWise: false,
|
|
hoverAnimation: false,
|
|
center: ['20%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
color: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.5,
|
|
colorStops: [
|
|
{ offset: 1, color: 'rgba(129, 197, 200, 0.1)' },
|
|
{ offset: 0, color: 'rgba(129, 197, 200, 0)' },
|
|
],
|
|
globalCoord: false,
|
|
},
|
|
shadowBlur: 10,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: 100,
|
|
},
|
|
],
|
|
},
|
|
//环形
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
clockwise: false,
|
|
startAngle: -90,
|
|
radius: ['45%', '55%'],
|
|
center: ['20%', '50%'],
|
|
hoverAnimation: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
},
|
|
},
|
|
zlevel: 1,
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: valData,
|
|
},
|
|
//环形分割线
|
|
{
|
|
name: '分割线',
|
|
type: 'gauge',
|
|
radius: '75%',
|
|
center: ['20%', '50%'],
|
|
clockwise: true,
|
|
startAngle: 90, // 起始角度
|
|
endAngle: -360, // 结束角度
|
|
splitNumber: 50, // 分割线数量
|
|
zlevel: 2,
|
|
detail: {
|
|
offsetCenter: [10, 20],
|
|
formatter: ' ',
|
|
},
|
|
axisLine: {
|
|
show: false, // 隐藏轴线
|
|
},
|
|
axisTick: {
|
|
show: false, // 隐藏刻度
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
length: 10, // 分割线的长度
|
|
lineStyle: {
|
|
color: '#1e4960',
|
|
width: 1, // 分割线的宽度
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false, // 隐藏标签
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (chartsData.valData && chartsData.valData.length) {
|
|
chartsData.valData.forEach((m, index) => {
|
|
let num = 100;
|
|
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
.main-part-charts {
|
|
height: 100%;
|
|
|
|
position: relative;
|
|
.code-num-txt {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 60%;
|
|
transform: translateY(-50%);
|
|
height: 90%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
display: inline-flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
gap: 4;
|
|
.num-txt-warp {
|
|
width: 100%;
|
|
padding-left: 18%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
height: calc((100% - 8px) / 3);
|
|
}
|
|
.num-txt {
|
|
width: 72%;
|
|
display: inline-flex;
|
|
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
.val,
|
|
.label {
|
|
vertical-align: middle;
|
|
display: inline-flex;
|
|
}
|
|
.val {
|
|
.val-val {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
display: inline-flex;
|
|
background: linear-gradient(360deg, #34c7d1, #fff); /* 渐变颜色 */
|
|
-webkit-background-clip: text; /* 裁剪背景为文字形状 */
|
|
background-clip: text;
|
|
letter-spacing: -1px;
|
|
-webkit-text-fill-color: transparent; /* 设置文字颜色为透明 */
|
|
}
|
|
}
|
|
.label {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.label-val {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
display: inline-flex;
|
|
transform: skewX(-8deg);
|
|
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
-webkit-background-clip: text;
|
|
letter-spacing: 1px;
|
|
color: #fff;
|
|
text-shadow: -2px 0 0 1px #add8f1;
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-size: 8px;
|
|
color: #34c7d1;
|
|
padding: 6px 0 0 6px;
|
|
}
|
|
}
|
|
}
|
|
.code-pie {
|
|
position: absolute;
|
|
right: left;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|