样式微调
This commit is contained in:
parent
f5ab5c09b4
commit
63ff05e0da
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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' // 橙色折线
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue