echarts刷新bug修复
This commit is contained in:
@@ -144,7 +144,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="line-chart-wrapper">
|
<div class="line-chart-wrapper">
|
||||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="rectification-status-grid">
|
<div class="rectification-status-grid">
|
||||||
<div class="distribution-title">区域整改状态</div>
|
<div class="distribution-title">区域整改状态</div>
|
||||||
@@ -669,6 +669,16 @@ const riskChartOption = computed<EChartsOption>(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 隐患管理图表 key,用于强制刷新图表
|
||||||
|
const hiddenDangerChartKey = computed(() => {
|
||||||
|
// 基于数据长度和内容生成 key,确保数据变化时图表能正确刷新
|
||||||
|
const dataLength = hiddenDangerTrend.value.length
|
||||||
|
const dataHash = dataLength > 0
|
||||||
|
? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
|
||||||
|
: 'empty'
|
||||||
|
return `hidden-danger-${dataLength}-${dataHash}`
|
||||||
|
})
|
||||||
|
|
||||||
// 隐患管理折线图配置
|
// 隐患管理折线图配置
|
||||||
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||||
// 提取日期和对应的数据
|
// 提取日期和对应的数据
|
||||||
@@ -713,12 +723,12 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: dates.length > 0 ? dates : [],
|
data: isEmpty ? [] : dates,
|
||||||
show: !isEmpty
|
show: !isEmpty
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
max: yAxisMax,
|
max: isEmpty ? 10 : yAxisMax,
|
||||||
show: !isEmpty
|
show: !isEmpty
|
||||||
},
|
},
|
||||||
graphic: isEmpty ? [
|
graphic: isEmpty ? [
|
||||||
|
|||||||
@@ -146,8 +146,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="line-chart-wrapper">
|
<div class="line-chart-wrapper">
|
||||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="rectification-status-grid">
|
<div class="rectification-status-grid">
|
||||||
<div class="distribution-title">园区整改状态</div>
|
<div class="distribution-title">园区整改状态</div>
|
||||||
<div v-if="parkRectificationStatus.length === 0" class="empty-data-tip">
|
<div v-if="parkRectificationStatus.length === 0" class="empty-data-tip">
|
||||||
@@ -1182,6 +1182,16 @@ const riskChartOption = computed<EChartsOption>(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 隐患管理图表 key,用于强制刷新图表
|
||||||
|
const hiddenDangerChartKey = computed(() => {
|
||||||
|
// 基于数据长度和内容生成 key,确保数据变化时图表能正确刷新
|
||||||
|
const dataLength = hiddenDangerTrend.value.length
|
||||||
|
const dataHash = dataLength > 0
|
||||||
|
? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
|
||||||
|
: 'empty'
|
||||||
|
return `hidden-danger-${dataLength}-${dataHash}`
|
||||||
|
})
|
||||||
|
|
||||||
// 隐患管理折线图配置
|
// 隐患管理折线图配置
|
||||||
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||||
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||||
@@ -1203,7 +1213,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: dates,
|
data: isEmpty ? [] : dates,
|
||||||
show: !isEmpty
|
show: !isEmpty
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
|||||||
@@ -143,8 +143,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="line-chart-wrapper">
|
<div class="line-chart-wrapper">
|
||||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="rectification-status-grid">
|
<div class="rectification-status-grid">
|
||||||
<div class="distribution-title">所属公司整改状态</div>
|
<div class="distribution-title">所属公司整改状态</div>
|
||||||
<div v-if="companyRectificationStatus.length === 0" class="empty-data-tip">
|
<div v-if="companyRectificationStatus.length === 0" class="empty-data-tip">
|
||||||
@@ -1141,6 +1141,16 @@ const riskChartOption = computed<EChartsOption>(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 隐患管理图表 key,用于强制刷新图表
|
||||||
|
const hiddenDangerChartKey = computed(() => {
|
||||||
|
// 基于数据长度和内容生成 key,确保数据变化时图表能正确刷新
|
||||||
|
const dataLength = hiddenDangerTrend.value.length
|
||||||
|
const dataHash = dataLength > 0
|
||||||
|
? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
|
||||||
|
: 'empty'
|
||||||
|
return `hidden-danger-${dataLength}-${dataHash}`
|
||||||
|
})
|
||||||
|
|
||||||
// 隐患管理折线图配置
|
// 隐患管理折线图配置
|
||||||
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||||
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||||
@@ -1162,7 +1172,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: dates,
|
data: isEmpty ? [] : dates,
|
||||||
show: !isEmpty
|
show: !isEmpty
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
|||||||
Reference in New Issue
Block a user