<!-- 任务算法统计 -->
|
<template>
|
<div class="task-industry">
|
<div class="title">任务算法统计</div>
|
<div class="chart" ref="chartRef"></div>
|
</div>
|
</template>
|
|
<script setup>
|
import * as echarts from 'echarts';
|
import { industryJobNumPieChart } from '@/api/home/task';
|
import useEchartsResize from '@/hooks/useEchartsResize';
|
import { useStore } from 'vuex';
|
|
const store = useStore();
|
const chartRef = ref(null);
|
let { chart } = useEchartsResize(chartRef);
|
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
bottom: '2%',
|
textStyle: {
|
color: '#6B90B5',
|
fontSize: 12
|
},
|
itemWidth: 2, // 减小图例标记的宽度
|
itemHeight: 3, // 减小图例标记的高度
|
itemGap: 8, // 减小图例项之间的间距
|
formatter: '{name}' // 简化图例文本
|
},
|
series: [
|
{
|
name: '行业统计',
|
type: 'pie',
|
roseType: 'radius',
|
radius: ['20%', '70%'],
|
center: ['50%', '45%'],
|
data: [
|
{ name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
|
{ name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
|
{ name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
|
{ name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
|
{ name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
|
],
|
label: {
|
show: true,
|
position: 'outside',
|
formatter: '{c}',
|
fontSize: 12,
|
color: '#fff'
|
},
|
labelLine: {
|
show: true,
|
length: 5,
|
length2: 8,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
]
|
};
|
|
// 获取行业统计数据
|
const getIndustryJobNumPieChart = (value) => {
|
industryJobNumPieChart(value).then(res => {
|
if (res.data.code !== 0) return;
|
option.series[0].data.forEach(item => {
|
const matchData = res.data.data.find(d => d.name === item.name);
|
if (matchData) {
|
item.value = matchData.value;
|
}
|
});
|
chart.value.setOption(option);
|
});
|
};
|
|
|
// 获取行业统计数据
|
// const getIndustryJobNumPieChart = () => {
|
// industryJobNumPieChart().then(res => {
|
// if (res.data.code !== 0) return;
|
// const data = res.data.data.map(item => ({
|
// name: item.name,
|
// value: item.value,
|
// itemStyle: {
|
// color: getRandomColor()
|
// }
|
// }));
|
// option.series[0].data = data;
|
// chart.value.setOption(option);
|
// });
|
// };
|
|
// 添加监听
|
watch(() => store.state.task.taskSearchParams, (newVal) => {
|
console.log(newVal, '2222');
|
if (newVal) {
|
getIndustryJobNumPieChart(newVal);
|
}
|
}, { deep: true });
|
|
onMounted(() => {
|
getIndustryJobNumPieChart({date_enum: 'TODAY'});
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.task-industry {
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
width: 244px;
|
height: 100%;
|
.title {
|
margin-top: 10px;
|
width: 244px;
|
height: 26px;
|
background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
|
color: #CFEAFF;
|
padding-left: 38px;
|
line-height: 8px;
|
font-size: 14px;
|
}
|
.chart {
|
width: 100%;
|
height: 200px;
|
}
|
}
|
</style>
|
