窗口变化-调整量能转化图表

src/views/components/emoEnergyConverter.vue

@@ -65,9 +65,9 @@ const generateGraphics = (min, max) => {
 
 function initQXNLZHEcharts(kline, qxnlzhqData) {
   // 测试数据 ！！！ 删掉
-  // qxnlzhqData.topxh = ["2025/04/04", "2025/04/15"]
-  // qxnlzhqData.lowxh = ["2025/04/08", "2025/04/18"]
-  // qxnlzhqData.qixh = ["2025/04/10", "2025/04/21"]
+  qxnlzhqData.topxh = ["2025/04/04", "2025/04/15"]
+  qxnlzhqData.lowxh = ["2025/04/08", "2025/04/18"]
+  qxnlzhqData.qixh = ["2025/04/10", "2025/04/21"]
   if (qxnlzhqEchartsInstance) {
     qxnlzhqEchartsInstance.dispose();
   }
@@ -311,8 +311,8 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         type: 'bar',
         stack: 'total',
         data: middleRangeData1,
-        barWidth: '10%',
-        barCategoryGap: '45%',
+        barWidth: '20%',
+        barCategoryGap: '40%',
         itemStyle: {
           normal: {
             color: 'rgba(0,0,0,0)' // 默认透明
@@ -326,8 +326,8 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         type: 'bar',
         stack: 'total',
         data: middleRangeData,
-        barWidth: '10%',
-        barCategoryGap: '45%',
+        barWidth: '20%',
+        barCategoryGap: '40%',
         itemStyle: {
           normal: {
             color: 'rgba(0,0,0,0)' // 默认透明
@@ -424,6 +424,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   };
   // 应用配置
   qxnlzhqEchartsInstance.setOption(option);
+  // 监听窗口大小变化，调整图表尺寸
+  window.addEventListener('resize', () => {
+    qxnlzhqEchartsInstance.resize()
+  })
 }
 
 onBeforeUnmount(() => {
@@ -436,6 +440,6 @@ onBeforeUnmount(() => {
 <style scoped>
 #qxnlzhqEcharts {
   width: 100%;
-  height: 600px;
+  height: 700px;
 }
 </style>