fix: 图表功能优化。
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user