fix: 资费chart

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -110,9 +110,7 @@
             <a-col :span="12">
                 <a-tabs>
                     <a-tab-pane key="1" title="月用量">
-                        <div class="chart">
-                            <div ref="chartContainer" style="width: 100%;height: 100%;" />
-                        </div>
+                        <div class="chart" style="width:100%" id="chartContainer" />
                     </a-tab-pane>
                     <a-tab-pane key="2" title="卡套餐信息">
                         <a-table :columns="columnsCard" :data="dataCard" :scroll="{ x: 'auto' }" :pagination="false" />
@@ -145,7 +143,7 @@
     </a-modal>
 </template>
 <script setup>
-import { onMounted, ref, nextTick } from "vue";
+import { onMounted, ref } from "vue";
 import { getDataCDR, PauseSIMService, RecoverSIMService, OffSIMCard } from '@/api/path/lotCard.api'
 import { Getdictionary } from '@/mixins/index'
 import { Message } from '@arco-design/web-vue'
@@ -159,8 +157,7 @@ const visible = ref(false)
 const Card_info = ref({})
 const dataPackage = ref()
 const dataSource = ref([]);
-const chartContainer = ref(null)
-const chart = ref(null)
+
 // 图表插件
 const option = ref({
     xAxis: {
@@ -366,6 +363,7 @@ const intData = async () => {
             .filter(val => val.usage !== undefined)
             .map(val => val.usage);
         option.value.series[0].data.push(...usageData);
+        initChart()
     }
 }
 
@@ -393,15 +391,19 @@ const handleCancel = () => {
     visible.value = false
 };
 
+// 图表
+const initChart = () => {
+    const dom = echarts.init(document.getElementById("chartContainer"));
+    dom.setOption(option.value);
+    window.addEventListener("resize",()=>{
+        dom.resize();
+    })
+}
+
 defineExpose({ open })
 
 
 onMounted(() => {
-    nextTick(() => {
-        chart.value = echarts.init(chartContainer.value)  // 初始化图表实例
-
-        chart.value.setOption(option.value)  // 设置图表配置项
-    })
 })
 </script>