效果图:
代码:
<template>
<div class="chart-container">
<!-- 叠加的背景图片 -->
<div class="background-image"></div>
<div class="background-image1"></div>
<div class="background-image2"></div>
<div class="background-image3"></div>
<!-- echarts 图表 -->
<div class="echarts-chart" ref="myEchartsTop"></div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
const router = useRouter();
const myEchartsTop = ref<HTMLInputElement | null>(null);
let chartTop: echarts.ECharts;
const loadData = async val => {
let params = {};
if (val) {
params = { search_EQ_C_id: val };
} else {
}
initChart();
};
const statuSumData = ref([
{ value: 60, name: '已完成', itemStyle: { color: '#36e386' } },
{ value: 25, name: '未完成', itemStyle: { color: '#fbd153' } },
{ value: 15, name: '超时', itemStyle: { color: '#e53153' } }
]);
const initChart = () => {
if (!myEchartsTop.value) {
return;
}
chartTop = echarts.init(myEchartsTop.value);
const option: echarts.EChartsOption = {
title: [
{
text: `巡更总数 ${statuSumData.value.reduce((acc, cur) => acc + cur.value, 0)}`,
//subtext: '设备总数',
left: '14%', // 将 x 改成 left
top: 'center', // 将 y 改成 top
textStyle: {
fontSize: 14,
fontWeight: 'bold',
color: '#fff'
}
}
],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
top: 'middle',
right: '5%',
orient: 'vertical',
itemGap: 50, // 设置图例项之间的间隔为20像素
icon: 'circle',
textStyle: {
color: '#fff', // 设置图例文字颜色为白色
fontSize: '23px'
},
formatter: function (name) {
const seriesData = statuSumData.value;
const total = seriesData.reduce((acc, cur) => acc + cur.value, 0);
const dataIndex = seriesData.findIndex(item => item.name === name);
const value = seriesData[dataIndex].value;
// 添加条件判断,避免除法错误
const percentage = total !== 0 ? ((value / total) * 100).toFixed(0) : 0;
return `${name}: ${percentage}%`;
}
},
series: [
{
name: '设备类型',
type: 'pie',
center: ['23%', '50%'], // 设置图表位置
radius: ['52%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: 16,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: statuSumData.value
}
]
};
chartTop.setOption(option);
window.onresize = function () {
chartTop.resize();
};
};
defineExpose({
loadData
});
onMounted(async () => {
await loadData();
});
</script>
<style lang="less" scoped>
.chart-container {
position: relative;
}
.background-image {
position: absolute;
top: 9.5%;
left: 3%;
width: 81%;
height: 81%;
background: url('@/assets/images/lowerCamelCase.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
opacity: 1; /* 根据需要调整透明度 */
}
.background-image1 {
position: absolute;
top: 8%;
left: 50%;
width: 100%;
height: 24%;
background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
opacity: 0.7; /* 根据需要调整透明度 */
}
.background-image2 {
position: absolute;
top: 38%;
left: 50%;
width: 100%;
height: 24%;
background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
opacity: 0.7; /* 根据需要调整透明度 */
}
.background-image3 {
position: absolute;
top: 68%;
left: 50%;
width: 100%;
height: 24%;
background: url('@/assets/images/lowerCamelCase2.png') no-repeat 0 0 / 50% 100%; /* 替换为你的背景图片路径 */
opacity: 0.8; /* 根据需要调整透明度 */
}
.echarts-chart {
width: 100%;
height: 250px; /* 调整为适当的高度 */
}
</style>