feat:修复图表渲染bug

src/views/components/ChartComponent.vue

@@ -62,6 +62,7 @@
               :mode="selectedChartType === CHART_TYPES.PIE ? undefined : 'multiple'"
               :maxTagCount="2"
               :maxTagTextLength="6"
+              :showSearch="false"
               :dropdownMatchSelectWidth="false"
               :getPopupContainer="triggerNode => triggerNode.parentNode"
               placeholder="请选择指标"

src/views/components/ColumnChart.vue

@@ -6,7 +6,7 @@
       <div class="empty-text">暂无数据</div>
       <div class="empty-desc">当前查询条件下没有找到相关数据</div>
     </div>
-    <div v-else :key="chartDataKey" ref="chartContainer" class="chart-container"></div>
+    <div v-else ref="chartContainer" class="chart-container"></div>
     <div v-if="error" class="chart-error">{{ error }}</div>
   </div>
 </template>
@@ -35,8 +35,6 @@ const chartContainer = ref<HTMLElement>();
 const chartInstance = shallowRef<echarts.ECharts | null>(null);
 const error = ref<string>('');
 const isEmpty = ref<boolean>(false);
-// 用于强制重新渲染图表容器的key
-const chartDataKey = ref<number>(0);
 
 // ========== 工具函数抽离 ==========
 
@@ -737,8 +735,6 @@ const createChart = async () => {
 
 // 监听数据变化
 watch(() => props.chartData, async () => {
-  // 更新key来强制重新渲染图表容器
-  chartDataKey.value++;
   await createChart();
 });
 

src/views/components/LineChart.vue

@@ -6,7 +6,7 @@
       <div class="empty-text">暂无数据</div>
       <div class="empty-desc">当前查询条件下没有找到相关数据</div>
     </div>
-    <div v-else :key="chartDataKey" ref="chartContainer" class="chart-container"></div>
+    <div v-else ref="chartContainer" class="chart-container"></div>
     <div v-if="error" class="chart-error">{{ error }}</div>
   </div>
 </template>
@@ -35,8 +35,6 @@ const chartContainer = ref<HTMLElement>();
 const chartInstance = shallowRef<echarts.ECharts | null>(null);
 const error = ref<string>('');
 const isEmpty = ref<boolean>(false);
-// 用于强制重新渲染图表容器的key
-const chartDataKey = ref<number>(0);
 
 // ========== 工具函数抽离 ==========
 
@@ -738,8 +736,6 @@ const createChart = async () => {
 
 // 监听数据变化
 watch(() => props.chartData, async () => {
-  // 更新key来强制重新渲染图表容器
-  chartDataKey.value++;
   await createChart();
 });
 

src/views/components/PieChart.vue

@@ -6,7 +6,7 @@
       <div class="empty-text">暂无数据</div>
       <div class="empty-desc">当前查询条件下没有找到相关数据</div>
     </div>
-    <div v-else :key="chartDataKey" ref="chartContainer" class="chart-container"></div>
+    <div v-else ref="chartContainer" class="chart-container"></div>
     <div v-if="error" class="chart-error">{{ error }}</div>
   </div>
 </template>
@@ -35,8 +35,6 @@ const chartContainer = ref<HTMLElement>();
 const chartInstance = shallowRef<echarts.ECharts | null>(null);
 const error = ref<string>('');
 const isEmpty = ref<boolean>(false);
-// 用于强制重新渲染图表容器的key
-const chartDataKey = ref<number>(0);
 
 // ========== 工具函数抽离 ==========
 
@@ -404,8 +402,6 @@ const createChart = async () => {
 
 // 监听数据变化
 watch(() => props.chartData, async () => {
-  // 更新key来强制重新渲染图表容器
-  chartDataKey.value++;
   await createChart();
 });