fix: 图表功能优化。

This commit is contained in:
tianyongbao
2026-01-19 00:01:37 +08:00
parent 2b60a33440
commit e0cdc4aebe

View File

@@ -324,11 +324,12 @@
<view @click="changeShow">{{ setTitle }}</view> <view @click="changeShow">{{ setTitle }}</view>
</nut-col> --> </nut-col> -->
</nut-row> </nut-row>
<view class="m_t_20" v-show="showChart"> <view :style="{ position: 'relative', marginTop: '10px' }" v-show="showChart">
<view class="loading" v-show="loading"> <view class="loading-container" v-show="loading">
<Loading /> <Loading />
</view> </view>
<canvas <canvas
v-if="chartsDatas.length > 0"
class="charts" class="charts"
type="2d" type="2d"
:id=" :id="
@@ -345,11 +346,11 @@
height: chartConf.cHeight + 'px', height: chartConf.cHeight + 'px',
}" }"
></canvas> ></canvas>
<!-- <nut-empty description="暂无数据" v-show="chartsDatas.r.length == 0"> <nut-empty description="暂无数据" v-else>
<template #image> <template #image>
<img :src="pond404" /> <img :src="pond404" />
</template> </template>
</nut-empty> --> </nut-empty>
</view> </view>
</nut-col> </nut-col>
</nut-row> </nut-row>
@@ -703,9 +704,7 @@ const paramsHistory = ref({
intervalType: 1, // 时间间隔类型1-1天, 2-3天, 3-7天 intervalType: 1, // 时间间隔类型1-1天, 2-3天, 3-7天
}); });
// 图表数据 // 图表数据
const chartsDatas = ref<any>({ const chartsDatas = ref<any>([]);
r: [],
});
const uChartsOp = ref<any>({}); const uChartsOp = ref<any>({});
// 图表参数 // 图表参数
const chartConf = reactive({ const chartConf = reactive({
@@ -780,7 +779,7 @@ Taro.useDidShow(() => {
onMounted(() => { onMounted(() => {
const sysInfo = Taro.getSystemInfoSync(); const sysInfo = Taro.getSystemInfoSync();
let cWidth = (700 / 750) * sysInfo.screenWidth; let cWidth = (700 / 750) * sysInfo.screenWidth;
let cHeight = (165 / 750) * sysInfo.windowHeight; let cHeight = (220 / 750) * sysInfo.windowHeight;
let pixelRatio = sysInfo.pixelRatio; let pixelRatio = sysInfo.pixelRatio;
chartConf.cWidth = cWidth; chartConf.cWidth = cWidth;
chartConf.cHeight = cHeight; chartConf.cHeight = cHeight;
@@ -1141,7 +1140,7 @@ function drawCharts(type) {
console.log('📅 天数:', dayDev.value); console.log('📅 天数:', dayDev.value);
if (!data || data.length === 0) { if (!data || data.length === 0) {
console.error(' 数据为空,无法绘制图表'); console.log('⚠️ 数据为空,绘制图表');
loading.value = false; loading.value = false;
return; return;
} }
@@ -1503,7 +1502,8 @@ function createCharts(x, series, ids) {
scrollAlign: "left", scrollAlign: "left",
labelCount: 7, labelCount: 7,
rotateLabel: true, rotateLabel: true,
rotateAngle: 25, rotateAngle: 30,
marginTop: 10,
}, },
yAxis: { yAxis: {
disableGrid: false, disableGrid: false,
@@ -2078,6 +2078,16 @@ defineExpose({
height: 330px; height: 330px;
width: 100%; width: 100%;
} }
.loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
/** 底部弹出层 */ /** 底部弹出层 */
.rowPd { .rowPd {