更新 src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
This commit is contained in:
parent
6bac6dc89d
commit
92d48433b8
@ -1,21 +1,7 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '历史数据图表',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<PageLayout :navbarShow="false">
|
||||
<view>
|
||||
<!-- ECharts图表 -->
|
||||
<view class="chart-container">
|
||||
<l-echart ref="chart" @finished="initChart" />
|
||||
<view >
|
||||
<l-echart ref="chart" @finished="drawChart" />
|
||||
</view>
|
||||
</view>
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -75,7 +61,7 @@
|
||||
|
||||
// 1. 修复：生成图表配置（返回配置对象，供赋值给chartOption.value）
|
||||
const generateOptions = () => {
|
||||
console.log(23)
|
||||
|
||||
const serie = []; // 局部变量：存储系列配置
|
||||
const yData = []; // 局部变量：存储Y轴配置
|
||||
const xData = []; // 局部变量：存储X轴数据
|
||||
@ -114,7 +100,7 @@
|
||||
const legendName = `${yFieldItem.name}(${yFieldItem.unit})`;
|
||||
legendData.push(legendName);
|
||||
|
||||
console.log(1, legendData)
|
||||
|
||||
|
||||
// 调整Y轴位置（ssll放左侧，其他放右侧）
|
||||
if (yFieldItem.field === 'ssll') {
|
||||
@ -122,7 +108,7 @@
|
||||
yaxisTemp.nameGap = -15;
|
||||
} else {
|
||||
yaxisTemp.position = 'right';
|
||||
yaxisTemp.offset = 40 * positionIndex;
|
||||
yaxisTemp.offset = 30 * positionIndex;
|
||||
positionIndex++;
|
||||
}
|
||||
|
||||
@ -131,6 +117,7 @@
|
||||
yaxisTemp.min = yFieldItem.min ?? 0; // 兜底：无min时设为0
|
||||
yaxisTemp.max = yFieldItem.max ?? 100; // 兜底：无max时设为100
|
||||
yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底
|
||||
// yaxisTemp.show=false
|
||||
|
||||
yData.push(yaxisTemp);
|
||||
|
||||
@ -149,6 +136,7 @@
|
||||
|
||||
// 修复this.serie.push错误：向局部变量seriepush
|
||||
serie.push(serieTemp);
|
||||
|
||||
}
|
||||
|
||||
// 修复：返回完整配置对象
|
||||
@ -162,12 +150,13 @@
|
||||
trigger: 'axis',
|
||||
alwaysShowContent: true,
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
type: 'line',
|
||||
show:false
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
showTitle: true,
|
||||
orient: 'vertical',
|
||||
orient: 'horizontal',
|
||||
feature: {
|
||||
dataView: {
|
||||
show: true,
|
||||
@ -180,19 +169,21 @@
|
||||
show: true
|
||||
}
|
||||
},
|
||||
left: '0%',
|
||||
top: '10%'
|
||||
right: '10%',
|
||||
top: '0'
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
itemGap: 5,
|
||||
padding: [35, 5, 25, 5],
|
||||
type: 'scroll'
|
||||
type: 'scroll',
|
||||
show:true
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: `${10 + positionIndex * 10}%`, // 动态调整右侧间距（避免Y轴标签被截断）
|
||||
width:'auto',
|
||||
top: '20%',
|
||||
left: '5px',
|
||||
right: '5px', // 动态调整右侧间距（避免Y轴标签被截断）
|
||||
bottom: 20,
|
||||
containLabel: true
|
||||
},
|
||||
@ -201,6 +192,7 @@
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
show:true,
|
||||
data: xData
|
||||
},
|
||||
yAxis: yData,
|
||||
@ -211,6 +203,7 @@
|
||||
// 2. 修复：数据处理（正确访问响应式变量）
|
||||
const processSeriesData = () => {
|
||||
const ssData = props.dataList;
|
||||
|
||||
// 修复：访问chartOption.value的属性
|
||||
const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据（避免直接修改） series
|
||||
const serie = [...chartOption.value.series]; // 拷贝原系列数据
|
||||
@ -238,7 +231,9 @@
|
||||
// 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误）
|
||||
serie.forEach((serieItem, mm) => {
|
||||
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）
|
||||
@ -251,7 +246,7 @@
|
||||
series: serie,
|
||||
yAxis: yData
|
||||
};
|
||||
console.log(22, chartOption.value)
|
||||
|
||||
};
|
||||
|
||||
// 3. 修复：计算数组最大值（过滤NaN，避免排序错误）
|
||||
@ -272,10 +267,8 @@
|
||||
() => props.dataList,
|
||||
(newVal) => {
|
||||
if (newVal.length === 0) return; // 空数据不处理
|
||||
console.log(33, props.dataList)
|
||||
console.log(44, props.yFields)
|
||||
initChart()
|
||||
updateChart();
|
||||
drawChart()
|
||||
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
@ -283,36 +276,24 @@
|
||||
);
|
||||
|
||||
// 5. 修复：初始化图表（正确赋值chartOption.value）
|
||||
const initChart = async () => {
|
||||
const drawChart = async () => {
|
||||
// 生成配置并赋值给响应式变量
|
||||
chartOption.value = generateOptions();
|
||||
processSeriesData()
|
||||
if (!chart.value) return;
|
||||
|
||||
// 初始化ECharts实例（去掉setTimeout，用async/await更可靠）
|
||||
const myChart = await chart.value.init(echarts);
|
||||
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(() => {
|
||||
setTimeout(() => {
|
||||
initChart();
|
||||
drawChart();
|
||||
}, 500)
|
||||
|
||||
});
|
||||
@ -329,45 +310,5 @@
|
||||
</script>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user