From 63ff05e0daea7cf64d59b39d555ce1992e926d78 Mon Sep 17 00:00:00 2001 From: ljx <864490211@qq.com> Date: Thu, 17 Apr 2025 11:30:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/baozuo-demo2/CenterCmp.vue | 117 +++++++-------------- src/components/baozuo-demo2/LeftChart1.vue | 16 ++- src/components/baozuo-demo2/LeftChart2.vue | 4 +- src/components/baozuo-demo2/pieChart.vue | 3 +- 4 files changed, 55 insertions(+), 85 deletions(-) diff --git a/src/components/baozuo-demo2/CenterCmp.vue b/src/components/baozuo-demo2/CenterCmp.vue index e2b53d4..aea7f7d 100644 --- a/src/components/baozuo-demo2/CenterCmp.vue +++ b/src/components/baozuo-demo2/CenterCmp.vue @@ -217,90 +217,32 @@ export default { }, // 在mounted()中调用 mounted() { - this.createData(); this.initRightChart(); this.initGaugeCharts(); }, // 在methods中添加方法 methods: { - createData() { - // 原始数据（每个柱子的总高度，单位：%） - const rawData = this.rightData.map(item=>{return item.value}); - const categories = this.rightData.map(item=>{return item.name}); - - // 将数据按 10% 分段，生成堆叠数据 - const generateStackData = (value) => { - const segments = []; - let remaining = value; - for (let i = 0; i < 10; i++) { // 最多分成 10 段（100%） - const segmentValue = remaining >= 10 ? 10 : remaining; - if (segmentValue <= 0) break; - segments.push(segmentValue); - remaining -= segmentValue; - } - return segments; - }; - - // 生成堆叠数据系列 - const series = []; - for (let i = 0; i < 10; i++) { // 最多 10 个堆叠层 - series.push({ - type: 'bar', - stack: 'total', // 堆叠组名 - data: rawData.map(value => { - const segments = generateStackData(value); - return i < segments.length ? segments[i] : 0; // 超出分段返回 0 - }), // 替换为你的数据 - barWidth: '40%', // 设置柱状图宽度为 40% 的可用空间, - itemStyle: { - color: `rgba(135, 206, 235, ${i * 0.1+0.2})`, // 从下往上透明度变化, - borderColor: 'transparent', - borderWidth: 3, - }, - barGap: '0%', // 柱子间无间隔 - barCategoryGap: '20%' // 类目间留间隙 - }); - } - var myChart = echarts.init(document.getElementById('echarts-new')); - this.option = { - xAxis: { - type: 'category', - data: categories, - axisLabel: { - fontSize: 23, // 设置 Y 轴字体大小 - color: '#fff', // 可选：设置字体颜色 - fontWight:'bold', - interval: 0 // 强制显示所有标签 - }, - - }, - yAxis: { - type: 'value', - max: 100, - axisLine: { show: true }, - splitLine: { - show: false, // 显示 y 轴辅助线 - }, - axisLabel: { - fontSize: 25, // 设置 Y 轴字体大小 - color: '#fff', // 可选：设置字体颜色 - fontWight:'bold', - formatter: '{value}%' // 在每一个值后面添加 % - }, - }, - series: series - } - myChart.setOption(this.option); - }, // 修改柱状图y轴配置 initRightChart() { const chart = echarts.init(document.getElementById('right-echarts-new')); const option = { + legend: { + icon: 'rect', + itemWidth: 20, + itemHeight: 20, + itemGap: 40, + data: ['合格率目标'], + textStyle: { + color: '#fff', + fontSize: 20, + fontWight:'bold' + } + }, grid: { - top: '10%', + top: '15%', left: '5%', right: '5%', - bottom: '5%', + bottom: '0%', containLabel: true }, xAxis: { @@ -308,7 +250,7 @@ export default { data: this.rightChartData.map(item => item.name), axisLabel: { color: '#fff', - fontSize: 16, + fontSize: 20, rotate: 30 }, axisLine: { @@ -354,7 +296,22 @@ export default { color: '#fff', fontSize: 18 } - }] + }, + // 添加合格率目标折线 + { + name: '合格率目标', + type: 'line', + data: [98, 98, 98, 98, 98, 98,98], + symbolSize: 10, + itemStyle: { + color: '#FFA500' // 橙色折线 + }, + lineStyle: { + width: 3, + type: 'solid' + } + } + ] }; chart.setOption(option); }, @@ -367,6 +324,7 @@ export default { this.initGaugeChart('gauge-chart-3', this.middleTopData.wholePassRate); }, // 修改仪表盘样式部分 + // 修改initGaugeChart方法 initGaugeChart(id, value) { const chart = echarts.init(document.getElementById(id)); const option = { @@ -396,7 +354,7 @@ export default { width: 10, offsetCenter: [0, '-40%'], itemStyle: { - color: '#fff' + color: value < 90 ? '#FF0000' : '#fff' // 低于90显示深蓝色，否则白色 } }, axisTick: { @@ -436,7 +394,7 @@ export default { #right-echarts-new { width: 100%; padding: 40px 20px 0 0; - height: calc(100% - 120px); + height: calc(100% - 80px); } #left-rankchart { width: 100%; @@ -481,7 +439,8 @@ export default { top: 50%; transform: translateY(-50%); color: #fff; - font-size: 16px; + font-size: 20px; + font-weight: bold; } } } @@ -511,14 +470,14 @@ export default { justify-content: center; .inspection-title { - font-size: 25px; + font-size: 28px; color: #fff; font-weight: bold; margin-bottom: 10px; } .inspection-value { - font-size: 36px; + font-size: 40px; color: #08e5ff; font-weight: bold; } diff --git a/src/components/baozuo-demo2/LeftChart1.vue b/src/components/baozuo-demo2/LeftChart1.vue index a23b5bf..3997133 100644 --- a/src/components/baozuo-demo2/LeftChart1.vue +++ b/src/components/baozuo-demo2/LeftChart1.vue @@ -43,9 +43,19 @@ export default { }, methods: { createData() { - + const dates = getCurrentMonthDates(); + const today = new Date(); + const currentDay = today.getDate(); + + // 生成模拟数据，未到日期的值为0 + const generateData = () => { + return dates.map((date, index) => { + const day = parseInt(date.split('-')[1]); + return day <= currentDay ? (Math.random() * 10).toFixed(2) : 0; + }); + }; + var myChart = echarts.init(document.getElementById(this.pieId)); - console.log(myChart) this.option = { title: { // text: '本月不良率推移图', @@ -124,7 +134,7 @@ export default { name: '反白', type: 'line', smooth: true, - data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)), + data: generateData(), lineStyle: { width: 4 }, symbolSize: 12, }, diff --git a/src/components/baozuo-demo2/LeftChart2.vue b/src/components/baozuo-demo2/LeftChart2.vue index 7f4ab5d..1366450 100644 --- a/src/components/baozuo-demo2/LeftChart2.vue +++ b/src/components/baozuo-demo2/LeftChart2.vue @@ -48,7 +48,7 @@ export default { }, createData() { // 模拟数据（每个柱子的总高度，单位：%） - const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据 + const rawData = [95, 92, 98, 95, 98, 90]; // P1-P6的合格率数据 // 将数据按 10% 分段，生成堆叠数据 const generateStackData = (value) => { @@ -126,7 +126,7 @@ export default { { name: '合格率目标', type: 'line', - data: [80, 85, 83, 77, 85, 79], + data: [98, 98, 98, 98, 98, 98], symbolSize: 10, itemStyle: { color: '#FFA500' // 橙色折线 diff --git a/src/components/baozuo-demo2/pieChart.vue b/src/components/baozuo-demo2/pieChart.vue index 6c25fa6..73f5fd2 100644 --- a/src/components/baozuo-demo2/pieChart.vue +++ b/src/components/baozuo-demo2/pieChart.vue @@ -73,6 +73,7 @@ this.option = { title: { text: '本月不良指标数', + top: '0', left: 'center', textStyle: { color: '#fff', @@ -87,7 +88,7 @@ splitNumber: 4, axisName: { color: '#fff', - fontSize: 20 // 从14px修改为20px + fontSize: 25 // 从14px修改为20px }, splitArea: { show: false,