美化echarts

src/features/allAnalysis/ScoreRate.vue

@@ -23,7 +23,7 @@
             <a-button @click="openModal1">说明</a-button>
           </div>
           <div class="tw-flex tw-gap-4">
-            <table class="custom-table">
+            <table class="custom-table" style="width: 400px">
               <tr>
                 <th>分数段</th>
                 <th>频数</th>
@@ -40,8 +40,12 @@
               </tr>
             </table>
 
-            <div style="width: 400px; height: 300px">
-              <v-chart class="chart" :option="segementsLine(course)" />
+            <div style="flex-grow: 1">
+              <v-chart
+                class="chart"
+                :option="segementsLine(course)"
+                :autoresize="true"
+              />
             </div>
           </div>
 
@@ -55,7 +59,7 @@
             </div>
           </div>
           <div v-if="course.rangeConfig" class="tw-flex tw-gap-4">
-            <table class="custom-table">
+            <table class="custom-table" style="width: 450px">
               <tr>
                 <th>分数段</th>
                 <th>频数</th>
@@ -72,8 +76,12 @@
               </tr>
             </table>
 
-            <div style="width: 400px; height: 300px">
-              <v-chart class="chart" :option="rangeSegementsLine(course)" />
+            <div style="flex-grow: 1">
+              <v-chart
+                class="chart"
+                :option="rangeSegementsLine(course)"
+                :autoresize="true"
+              />
             </div>
           </div>
           <div v-else>请先进行分段设置。</div>
@@ -320,5 +328,3 @@ function rangeSegementsLine(course: any) {
   } as EChartsOption;
 }
 </script>
-
-<style scoped></style>

src/features/paperAnalysis/QuestionBianPai.vue

@@ -7,12 +7,20 @@
       :pagination="{ pageSize: 200, hideOnSinglePage: true }"
     ></a-table>
 
-    <div class="tw-flex tw-gap-4 tw-pt-4">
-      <div style="width: 400px; height: 300px">
-        <v-chart class="chart" :option="chartOption(props.questions)" />
+    <div class="tw-flex tw-flex-1 tw-gap-4 tw-pt-4">
+      <div style="flex-grow: 1">
+        <v-chart
+          class="chart"
+          :option="chartOption(props.questions)"
+          :autoresize="true"
+        />
       </div>
 
-      <a-button @click="openModal">说明</a-button>
+      <a-button
+        style="margin-left: -100px; margin-right: 20px"
+        @click="openModal"
+        >说明</a-button
+      >
     </div>
   </div>
 </template>