From e1326172aa2d97e97d0ddff8df680899f78adf4b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 19 May 2025 15:36:56 +0800
Subject: [PATCH] feat:图片修改成svg,更换字体
---
src/views/wel/components/flyratio.vue | 81 ++++++++++++++++++++--------------------
1 files changed, 41 insertions(+), 40 deletions(-)
diff --git a/src/views/wel/components/flyratio.vue b/src/views/wel/components/flyratio.vue
index c4ce7f3..5eec008 100644
--- a/src/views/wel/components/flyratio.vue
+++ b/src/views/wel/components/flyratio.vue
@@ -9,7 +9,8 @@
</div>
</div>
<div class="nestCenter">
- <div class="chart" ref="echartsRef"></div>
+ <div class="chart" ref="echartsRef" ></div>
+
</div>
</div>
</template>
@@ -48,27 +49,20 @@
{ immediate: true }
);
const pieInit = resList => {
- // 1. 过滤无效数据并排序
- const validData = resList
- .filter(item => item.name)
- .sort((a, b) => b.value - a.value); // 从大到小排序
-
+ 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',
@@ -94,42 +88,49 @@
axisLine: { lineStyle: { color: '#D1D1D1' } },
axisTick: { show: false },
// 4. 确保排序后的数据从上到下显示（最大值在顶部）
- inverse: true
+ inverse: true,
},
- series: [{
- type: 'bar',
- data: optionData.seriesData,
- itemStyle: {
- color: (params) => {
- // 前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' }
- ]);
- }
+ series: [
+ {
+ type: 'bar',
+ data: optionData.seriesData,
+ itemStyle: {
+ color: params => {
+ // 前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}',
- },
- }]
+ ],
};
// 5. 设置图表选项
- jcchart.value.setOption(option, true); // true表示不合并选项
+ jcchart.value.setOption(option, true);
};
onMounted(() => {
getIndustryJobNumPieChart();
+
});
</script>
<style scoped lang="scss">
.machineNest {
-width: 100%;
+ width: 100%;
+ .custom-text {
+ font-size: 14px;
+color: #7C8091;
+ }
.nestTop {
.card-title {
display: flex;
@@ -156,7 +157,7 @@
color: #7c8091;
}
.total-number {
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
font-weight: bold;
font-size: 32px;
color: #2a54ff;
@@ -185,7 +186,7 @@
color: #383838;
}
.status-value {
- font-family: 'YouSheBiaoTiHei';
+ font-family: 'Source Han Sans CN';
font-weight: bold;
font-size: 20px;
}
--
Gitblit v1.9.3