ldeyun/jeecgBootUniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新 src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue

Browse Source
This commit is contained in:
ldeyun 2025-09-15 15:05:38 +00:00
parent 6bac6dc89d
commit 92d48433b8
1 changed files with 35 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
View File

@ -1,21 +1,7 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '历史数据图表',
},
}
</route>
<template> <template>
<PageLayout :navbarShow="false">
<view > <view >
<!-- ECharts图表 --> <l-echart ref="chart" @finished="drawChart" />
<view class="chart-container">
<l-echart ref="chart" @finished="initChart" />
</view> </view>
</view>
</PageLayout>
</template> </template>
<script setup> <script setup>
@ -75,7 +61,7 @@
// 1. 修复：生成图表配置（返回配置对象，供赋值给chartOption.value） // 1. 修复：生成图表配置（返回配置对象，供赋值给chartOption.value）
const generateOptions = () => { const generateOptions = () => {
console.log(23)
const serie = []; // 局部变量：存储系列配置 const serie = []; // 局部变量：存储系列配置
const yData = []; // 局部变量：存储Y轴配置 const yData = []; // 局部变量：存储Y轴配置
const xData = []; // 局部变量：存储X轴数据 const xData = []; // 局部变量：存储X轴数据
@ -114,7 +100,7 @@
const legendName = `${yFieldItem.name}(${yFieldItem.unit})`; const legendName = `${yFieldItem.name}(${yFieldItem.unit})`;
legendData.push(legendName); legendData.push(legendName);
console.log(1, legendData)
// 调整Y轴位置（ssll放左侧，其他放右侧） // 调整Y轴位置（ssll放左侧，其他放右侧）
if (yFieldItem.field === 'ssll') { if (yFieldItem.field === 'ssll') {
@ -122,7 +108,7 @@
yaxisTemp.nameGap = -15; yaxisTemp.nameGap = -15;
} else { } else {
yaxisTemp.position = 'right'; yaxisTemp.position = 'right';
yaxisTemp.offset = 40 * positionIndex; yaxisTemp.offset = 30 * positionIndex;
positionIndex++; positionIndex++;
} }
@ -131,6 +117,7 @@
yaxisTemp.min = yFieldItem.min ?? 0; // 兜底：无min时设为0 yaxisTemp.min = yFieldItem.min ?? 0; // 兜底：无min时设为0
yaxisTemp.max = yFieldItem.max ?? 100; // 兜底：无max时设为100 yaxisTemp.max = yFieldItem.max ?? 100; // 兜底：无max时设为100
yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底 yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底
// yaxisTemp.show=false
yData.push(yaxisTemp); yData.push(yaxisTemp);
@ -149,6 +136,7 @@
// 修复this.serie.push错误：向局部变量seriepush // 修复this.serie.push错误：向局部变量seriepush
serie.push(serieTemp); serie.push(serieTemp);
} }
// 修复：返回完整配置对象 // 修复：返回完整配置对象
@ -162,12 +150,13 @@
trigger: 'axis', trigger: 'axis',
alwaysShowContent: true, alwaysShowContent: true,
axisPointer: { axisPointer: {
type: 'cross' type: 'line',
show:false
} }
}, },
toolbox: { toolbox: {
showTitle: true, showTitle: true,
orient: 'vertical', orient: 'horizontal',
feature: { feature: {
dataView: { dataView: {
show: true, show: true,
@ -180,19 +169,21 @@
show: true show: true
} }
}, },
left: '0%', right: '10%',
top: '10%' top: '0'
}, },
legend: { legend: {
data: legendData, data: legendData,
itemGap: 5, itemGap: 5,
padding: [35, 5, 25, 5], padding: [35, 5, 25, 5],
type: 'scroll' type: 'scroll',
show:true
}, },
grid: { grid: {
top: '15%', width:'auto',
left: '5%', top: '20%',
right: `${10 + positionIndex * 10}%`, // 动态调整右侧间距（避免Y轴标签被截断） left: '5px',
right: '5px', // 动态调整右侧间距（避免Y轴标签被截断）
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -201,6 +192,7 @@
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
}, },
show:true,
data: xData data: xData
}, },
yAxis: yData, yAxis: yData,
@ -211,6 +203,7 @@
// 2. 修复：数据处理（正确访问响应式变量） // 2. 修复：数据处理（正确访问响应式变量）
const processSeriesData = () => { const processSeriesData = () => {
const ssData = props.dataList; const ssData = props.dataList;
// 修复：访问chartOption.value的属性 // 修复：访问chartOption.value的属性
const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据（避免直接修改） series const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据（避免直接修改） series
const serie = [...chartOption.value.series]; // 拷贝原系列数据 const serie = [...chartOption.value.series]; // 拷贝原系列数据
@ -238,7 +231,9 @@
// 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误） // 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误）
serie.forEach((serieItem, mm) => { serie.forEach((serieItem, mm) => {
const maxValue = maxArrValue(serieItem.data); const maxValue = maxArrValue(serieItem.data);
yData[mm].max = Math.round(maxValue * 1.2) || 100; // 兜底：最大值为0时设为100 console.log(1,maxValue)
yData[mm].max = Math.round(maxValue * 12)/10 || 100; // 兜底：最大值为0时设为100
console.log(2,yData[mm].max)
}); });
// 修复：更新响应式数据（必须通过.value） // 修复：更新响应式数据（必须通过.value）
@ -251,7 +246,7 @@
series: serie, series: serie,
yAxis: yData yAxis: yData
}; };
console.log(22, chartOption.value)
}; };
// 3. 修复：计算数组最大值（过滤NaN，避免排序错误） // 3. 修复：计算数组最大值（过滤NaN，避免排序错误）
@ -272,10 +267,8 @@
() => props.dataList, () => props.dataList,
(newVal) => { (newVal) => {
if (newVal.length === 0) return; // 空数据不处理 if (newVal.length === 0) return; // 空数据不处理
console.log(33, props.dataList) drawChart()
console.log(44, props.yFields)
initChart()
updateChart();
}, { }, {
deep: true, deep: true,
immediate: true immediate: true
@ -283,36 +276,24 @@
); );
// 5. 修复：初始化图表（正确赋值chartOption.value） // 5. 修复：初始化图表（正确赋值chartOption.value）
const initChart = async () => { const drawChart = async () => {
// 生成配置并赋值给响应式变量 // 生成配置并赋值给响应式变量
chartOption.value = generateOptions(); chartOption.value = generateOptions();
processSeriesData()
if (!chart.value) return; if (!chart.value) return;
// 初始化ECharts实例（去掉setTimeout，用async/await更可靠） // 初始化ECharts实例（去掉setTimeout，用async/await更可靠）
const myChart = await chart.value.init(echarts); const myChart = await chart.value.init(echarts);
myChart.setOption(chartOption.value); myChart.setOption(chartOption.value);
// 窗口resize时重绘（优化体验）
window.addEventListener('resize', () => {
myChart.resize();
});
}; };
// 6. 修复：更新图表（正确访问chartOption.value）
const updateChart = () => {
if (!myChart.value || !chartOption.value) {
console.warn('ECharts实例未初始化！');
return;
}
processSeriesData();
myChart.value.setOption(chartOption.value, true);
};
// 生命周期：挂载时初始化 // 生命周期：挂载时初始化
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
initChart(); drawChart();
}, 500) }, 500)
}); });
@ -329,45 +310,5 @@
</script> </script>
<style scoped> <style scoped>
.chart-container {
width: 100%;
height: 30vh;
min-height: 200px;
padding: 20rpx;
background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 16rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
/* 加载占位符（数据为空时显示） */
.chart-container::before {
content: '数据加载中...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
font-size: 28rpx;
z-index: 1;
/* 数据加载完成后隐藏 */
opacity: v-bind('chartOption.value.series?.length > 0 ? 0 : 1');
}
.chart-wrapper {
width: 100%;
height: 100%;
transition: opacity 0.3s ease;
}
/* 移动端优化：调整右侧间距（避免Y轴标签被截断） */
@media screen and (max-width: 768px) {
.chart-container {
height: 30vh;
min-height: 200px;
padding: 10rpx;
border-radius: 12rpx;
}
}
</style> </style>