Front_Team/SPDM
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update echart优化

Browse Source
This commit is contained in:
dongzhihuan
2026-03-04 18:24:18 +08:00
parent 933e48dd55
commit d63161aa82
8 changed files with 71 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/common/echartCard/commonFilterChart.vue
View File

@@ -5,9 +5,9 @@
v-bind="$attrs"
:title="title"
ref="chartRef"
:option="option"
:charts-id="chartsId"
:bar-type="barType"
@refresh="refreshChart"
>
<template #formSlot v-if="filterItems.length > 0 || Object.keys(extraFilters).length > 0">
<el-form :model="formData" label-width="auto">
@@ -156,20 +156,6 @@ const filterChange = () => {
emit('update', formatEmitData());
};
// 初始化图表
const refreshChart = async () => {
if (!chartRef.value?.commonChartRef) return;
chartRef.value.commonChartRef.disposeEchartsByKey(props.chartsId);
chartRef.value.commonChartRef.option = props.option;
chartRef.value.commonChartRef.initChart();
};
// 监听配置项
watch(
() => props.option,
async () => {
await refreshChart();
}
);
// 监听插槽中的额外筛选条件
watch(
() => props.extraFilters,

4
src/components/common/echartCard/echartsOptions.ts
View File

@@ -13,7 +13,7 @@ const commonEchartColor = {
// y轴文字颜色
yAxisColor: '#333',
// 分割线颜色
splitLineColor: '#00000015',
splitLineColor: 'rgba(0,0,0,0.05)',
// 提示框背景色
tooltipBgColor: '#fff',
// 提示框文字颜色
@@ -268,6 +268,8 @@ const barChart = (
},
]),
};
} else {
item.showBackground = false;
}
return item;
}) ?? [];

38
src/components/common/echartCard/index.vue
View File

@@ -5,6 +5,13 @@
<div class="operation-container">
<slot v-if="showFilterContent" name="formSlot"></slot>
<el-space>
<el-icon
v-if="showChangeModel && barType === 'barChart'"
class="common-icon-style"
:title="isStack ? '切换为平铺状态' : '切换为堆叠状态'"
@click="changeModel"
><Switch
/></el-icon>
<el-popover
v-if="$slots.formSlot && !showFilterContent"
:visible="popoverVisible"
@@ -61,6 +68,7 @@ const props = withDefaults(
loading?: boolean; // 加载状态
nodata?: boolean; // 无数据状态
option?: any;
showChangeModel?: boolean; // 是否展示切换堆叠/平铺的按钮
}>(),
{
title: '',
@@ -71,6 +79,7 @@ const props = withDefaults(
loading: false,
nodata: false,
option: () => {},
showChangeModel: false,
}
);
// const emits = defineEmits(['refresh']);
@@ -91,16 +100,43 @@ defineExpose({
const refreshChart = async () => {
if (!commonChartRef.value) return;
commonChartRef.value.disposeEchartsByKey(props.chartsId);
commonChartRef.value.option = props.option;
commonChartRef.value.option = chartOption.value;
commonChartRef.value.initChart();
};
// 监听配置项
const chartOption = ref<any>();
const isStack = ref(false);
watch(
() => props.option,
async () => {
chartOption.value = props.option;
isStack.value = chartOption.value.series?.[0]?.stack === 'total';
await refreshChart();
}
);
// 切换柱状图状态
const changeModel = async () => {
if (isStack.value) {
chartOption.value.series.forEach((item: any) => {
delete item.stack;
item.label.show = false;
});
isStack.value = false;
} else {
chartOption.value.series.forEach((item: any) => {
item.stack = 'total';
item.label = {
show: true,
formatter: (params: any) => {
return params.value || '';
},
};
});
isStack.value = true;
}
await refreshChart();
};
</script>
<style scoped lang="scss">
.container {

6
src/views/task/dashboard/components/dataStatistics.vue
View File

@@ -56,9 +56,9 @@ const statusColorList = [
'rgb(179, 225, 157)', // 已闭环
];
const performanceColorList = [
'rgb(200, 201, 204)',
getThemeColor('--el-color-danger'),
getThemeColor('--el-color-success'),
'rgb(200, 201, 204)', // 未分析
getThemeColor('--el-color-danger'), // 不合格
getThemeColor('--el-color-success'), // 合格
];
// 难度系数颜色列表
const difficultyCountColorList = [

18
src/views/task/dashboard/components/dataStatistics/performanceCompletion.vue
View File

@@ -16,12 +16,13 @@
<script lang="ts" setup>
import { ref } from 'vue';
import commonFilterChart from '@/components/common/echartCard/commonFilterChart.vue';
import { TASK_CALCULATE_STATUS_OBJ } from '@/utils/enum/task';
import {
getCommonCompleteStatisticsApi,
getPerformanceCompleteStatisticsByDisciplineApi,
} from '@/api/project/node';
import { useDict } from '@/utils/useDict';
const { RESULT_ACHIEVE_STATUS } = useDict('RESULT_ACHIEVE_STATUS');
const props = defineProps({
// x轴 机台、学科discipline
resultTagType: {
@@ -61,17 +62,12 @@ const initCompleteChart = async (formData: any) => {
res.data?.result?.map((item: any) => {
return item.name;
}) || [];
const allExeStatus = Object.keys(TASK_CALCULATE_STATUS_OBJ);
titles =
allExeStatus?.map((item: any) => {
return TASK_CALCULATE_STATUS_OBJ[item] || item;
}) || [];
const names = allExeStatus || [];
for (let i = 0; i < names.length; i++) {
const str = names[i];
const allExeStatus = Object.keys(RESULT_ACHIEVE_STATUS.value.O);
titles = Object.values(RESULT_ACHIEVE_STATUS.value.O);
for (let i = 0; i < allExeStatus.length; i++) {
const str = allExeStatus[i];
const obj: any = {
name: TASK_CALCULATE_STATUS_OBJ[str] || str,
name: titles[i],
type: 'bar',
emphasis: {

2
src/views/task/dashboard/components/dataStatistics/projectTaskComplete.vue
View File

@@ -50,7 +50,7 @@ const getProjectGroupTaskCompleteStatistics = async (formData: any) => {
label: {
show: true,
formatter: (params: any) => {
return params.value;
return params.value || '';
},
},
};

2
src/views/task/dashboard/components/dataStatistics/userTaskCompleteChart.vue
View File

@@ -47,7 +47,7 @@ const getUserGroupTaskCompleteStatistics = async (formData: any) => {
label: {
show: true,
formatter: (params: any) => {
return params.value;
return params.value || '';
},
},
};

28
src/views/task/projectDetail/components/statisticAnalysis.vue
View File

@@ -100,9 +100,10 @@ import { useDict } from '@/utils/useDict';
import { TASK_CALCULATE_STATUS_OPTIONS } from '@/utils/enum/task';
import { getThemeColor } from '@/utils/theme';
const { TASK_ACHIEVE_STATUS, DIFFICULTY_COEFFICIENT } = useDict(
const { TASK_ACHIEVE_STATUS, DIFFICULTY_COEFFICIENT, RESULT_ACHIEVE_STATUS } = useDict(
'TASK_ACHIEVE_STATUS',
'DIFFICULTY_COEFFICIENT'
'DIFFICULTY_COEFFICIENT',
'RESULT_ACHIEVE_STATUS'
);
const taskCalculateStatusLegendData = TASK_CALCULATE_STATUS_OPTIONS.map((item) => ({
name: item.label,
@@ -146,6 +147,11 @@ const completionStatusColorList = [
getThemeColor('--el-color-danger'),
getThemeColor('--el-color-success'),
];
const performanceColorList = [
'rgb(200, 201, 204)', // 未分析
getThemeColor('--el-color-danger'), // 不合格
getThemeColor('--el-color-success'), // 合格
];
const difficultyCountColorList = [
'#67c23a',
'rgb(179, 225, 157)',
@@ -437,8 +443,9 @@ const queryPerfCompletionByWorkspace = async () => {
xData = res.data.result.map((item: any) => {
return item.name;
});
for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
const item = TASK_CALCULATE_STATUS_OPTIONS[i];
const allExeStatus = RESULT_ACHIEVE_STATUS.value.A;
for (let i = 0; i < allExeStatus.length; i++) {
const item = allExeStatus[i];
const obj: any = {
name: item.label,
type: 'bar',
@@ -454,9 +461,9 @@ const queryPerfCompletionByWorkspace = async () => {
}
}
const option = {
color: completionStatusColorList,
color: performanceColorList,
legend: {
data: taskCalculateStatusLegendData,
data: Object.values(RESULT_ACHIEVE_STATUS.value.O),
},
xAxis: {
data: xData,
@@ -531,8 +538,9 @@ const queryPerfCompletionByDiscipline = async () => {
xData = res.data.result.map((item: any) => {
return item.name;
});
for (let i = 0; i < TASK_CALCULATE_STATUS_OPTIONS.length; i++) {
const item = TASK_CALCULATE_STATUS_OPTIONS[i];
const allExeStatus = RESULT_ACHIEVE_STATUS.value.A;
for (let i = 0; i < allExeStatus.length; i++) {
const item = allExeStatus[i];
const obj: any = {
name: item.label,
type: 'bar',
@@ -548,9 +556,9 @@ const queryPerfCompletionByDiscipline = async () => {
}
}
const option = {
color: completionStatusColorList,
color: performanceColorList,
legend: {
data: taskCalculateStatusLegendData,
data: Object.values(RESULT_ACHIEVE_STATUS.value.O),
},
xAxis: {
data: xData,