优化

src/views/home/component/MusicGroup.tsx

@@ -46,6 +46,7 @@ export default defineComponent({
   setup(props) {
     const activeSubject = ref('');
     const echratsRef = ref();
+    const echratsHeight = ref(400);
     const { data } = toRefs(props);
 
     /** 根据声部 过滤数据源 */
@@ -138,7 +139,7 @@ export default defineComponent({
       if (myChart) {
         myChart.dispose();
       }
-      myChart = echarts.init(echratsRef.value);
+      
       const option: EChartsOption = {
         grid: {
           left: 8,
@@ -200,12 +201,17 @@ export default defineComponent({
                 { offset: 1, color: `rgba(${group.color}, 1)` }
               ])
             },
-            barMaxWidth: 16
+            barWidth: 16
           };
         })
       };
-
-      option && myChart.setOption(option);
+      if (option) {
+        echratsHeight.value = Object.values(musicGroups.value).length * gradeList.value.length * 20;
+      }
+      nextTick(() => {
+        myChart = echarts.init(echratsRef.value);
+        option && myChart.setOption(option);
+      })
     };
 
     return () => (
@@ -234,7 +240,7 @@ export default defineComponent({
         <div
           style={{ display: data.value.length ? '' : 'none' }}
           class={styles.musicGroupContainer}>
-          <div class={styles.musicGroupEcharts} ref={echratsRef}></div>
+          <div style={{ height: echratsHeight.value + 'px'}} class={styles.musicGroupEcharts} ref={echratsRef}></div>
           <div
             class={styles.tags}
             onTouchmove={(e: Event) => e.stopPropagation()}