From 2ce9bd5adcd6ffd054f7c5148ab480b36ff6f56a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 12 May 2025 13:52:51 +0800
Subject: [PATCH] 个人工作台待办事项，综合统计分析
---
src/views/wel/components/flyratio.vue | 100 ++++++++++++++++++++++----------------------------
1 files changed, 44 insertions(+), 56 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index 00c6fbe..6a0138e 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -61,27 +61,31 @@
{ immediate: true }
);
const pieInit = resList => {
- // 处理数据，过滤掉没有name的项
- const validData = resList.filter(item => item.name);
+ // 1. 过滤无效数据并排序
+ const validData = resList
+ .filter(item => item.name)
+ .sort((a, b) => b.value - a.value); // 从大到小排序
+
const colors = [
- '#F87E04',
- '#FFC400',
- '#08BC44',
- '#07B5FF',
- '#A98DFF',
- '#9ABFFF'
-];
+ '#F87E04', // 橙色
+ '#FFC400', // 黄色
+ '#08BC44', // 绿色
+ '#07B5FF', // 蓝色
+ '#A98DFF', // 紫色
+ '#9ABFFF' // 浅蓝
+ ];
+
+ // 2. 准备图表数据
const optionData = {
yAxisData: validData.map(item => item.name),
seriesData: validData.map(item => item.value),
};
+ // 3. ECharts配置项
const option = {
tooltip: {
trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- },
+ axisPointer: { type: 'shadow' },
formatter: '{b}: {c}',
},
grid: {
@@ -92,60 +96,44 @@
},
xAxis: {
type: 'value',
- splitLine: {
- lineStyle: {
- color: '#E5E5E5',
- },
- },
- axisLabel: {
- color: '#35455aa6',
- },
+ splitLine: { lineStyle: { color: '#E5E5E5' } },
+ axisLabel: { color: '#35455aa6' },
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
- data: optionData.yAxisData, // 使用处理后的分类数据
- axisLabel: {
- color: '#35455aa6',
- },
- axisLine: {
- lineStyle: {
- color: '#D1D1D1',
- },
- },
- axisTick: {
- show: false,
- },
+ data: optionData.yAxisData,
+ axisLabel: { color: '#35455aa6' },
+ axisLine: { lineStyle: { color: '#D1D1D1' } },
+ axisTick: { show: false },
+ // 4. 确保排序后的数据从上到下显示（最大值在顶部）
+ inverse: true
},
- series: [
- {
- type: 'bar',
- data: optionData.seriesData, // 使用处理后的数值数据
- itemStyle: {
- // 修改为根据索引返回不同颜色
+ series: [{
+ type: 'bar',
+ data: optionData.seriesData,
+ itemStyle: {
color: (params) => {
- if (params.dataIndex < 5) {
- // 前5条使用固定颜色
- return colors[params.dataIndex % colors.length];
- }
- // 第6条及之后保持原渐变
- return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: '#93BAFF' },
- { offset: 1, color: '#C5DEFF' }
- ]);
+ // 前6项使用固定颜色循环，之后使用渐变
+ return params.dataIndex < colors.length
+ ? colors[params.dataIndex]
+ : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#93BAFF' },
+ { offset: 1, color: '#C5DEFF' }
+ ]);
}
- },
- barWidth: '30%',
- label: {
- show: true,
- position: 'right',
- formatter: '{c}',
- },
},
- ],
+ barWidth: '30%',
+ label: {
+ show: true,
+ position: 'right',
+ formatter: '{c}',
+ },
+ }]
};
- jcchart.value.setOption(option);
+ // 5. 设置图表选项
+ jcchart.value.setOption(option, true); // true表示不合并选项
};
onMounted(() => {
getIndustryJobNumPieChart();
--
Gitblit v1.9.3