echarts刷新bug修复
This commit is contained in:
@@ -144,7 +144,7 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="line-chart-wrapper">
|
||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<div class="rectification-status-grid">
|
||||
<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>(() => {
|
||||
// 提取日期和对应的数据
|
||||
@@ -713,12 +723,12 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates.length > 0 ? dates : [],
|
||||
data: isEmpty ? [] : dates,
|
||||
show: !isEmpty
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: yAxisMax,
|
||||
max: isEmpty ? 10 : yAxisMax,
|
||||
show: !isEmpty
|
||||
},
|
||||
graphic: isEmpty ? [
|
||||
|
||||
@@ -146,8 +146,8 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="line-chart-wrapper">
|
||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<div class="rectification-status-grid">
|
||||
<div class="distribution-title">园区整改状态</div>
|
||||
<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 dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||
@@ -1203,7 +1213,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
data: isEmpty ? [] : dates,
|
||||
show: !isEmpty
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
@@ -143,8 +143,8 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="line-chart-wrapper">
|
||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<div class="rectification-status-grid">
|
||||
<div class="distribution-title">所属公司整改状态</div>
|
||||
<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 dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||
@@ -1162,7 +1172,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
data: isEmpty ? [] : dates,
|
||||
show: !isEmpty
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
Reference in New Issue
Block a user