style：模板管理-报表元素样式优化

src/views/mes/printTemplate/ReportTemplateDesigner.vue

@@ -229,7 +229,7 @@ const chartProvider = function () {
                 var chart = echarts.init(dom, null, {renderer: "svg"});
                 chart.setOption({
                   animation: false,
-                  grid: { top: 20, right: 20, bottom: 30, left: 40 },
+                  grid: { top: '3%', right: '3%', bottom: '8%', left: '8%', containLabel: true },
                   xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
                   yAxis: { type: 'value' },
                   series: [{
@@ -241,6 +241,34 @@ const chartProvider = function () {
                     areaStyle: { color: 'rgba(84,112,198,0.15)' }
                   }]
                 });
+                var resizeObserver = null;
+                var tryObserve = function() {
+                  if (dom.parentNode) {
+                    var parentW = dom.parentNode.clientWidth;
+                    var parentH = dom.parentNode.clientHeight;
+                    if (parentW > 20 && parentH > 20) {
+                      dom.style.width = parentW + "px";
+                      dom.style.height = parentH + "px";
+                      chart.resize();
+                      resizeObserver = new ResizeObserver(function(entries) {
+                        for (var i = 0; i < entries.length; i++) {
+                          var entry = entries[i];
+                          var w = entry.contentRect.width;
+                          var h = entry.contentRect.height;
+                          if (w > 20 && h > 20) {
+                            dom.style.width = w + "px";
+                            dom.style.height = h + "px";
+                            chart.resize();
+                          }
+                        }
+                      });
+                      resizeObserver.observe(dom.parentNode);
+                      return;
+                    }
+                  }
+                  requestAnimationFrame(tryObserve);
+                };
+                requestAnimationFrame(tryObserve);
                 return dom;
               } else {
                 return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';
@@ -269,7 +297,7 @@ const chartProvider = function () {
                 var chart = echarts.init(dom, null, {renderer: "svg"});
                 chart.setOption({
                   animation: false,
-                  grid: { top: 20, right: 20, bottom: 30, left: 40 },
+                  grid: { top: '3%', right: '3%', bottom: '8%', left: '8%', containLabel: true },
                   xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] },
                   yAxis: { type: 'value' },
                   series: [{
@@ -278,6 +306,34 @@ const chartProvider = function () {
                     itemStyle: { color: '#91cc75' }
                   }]
                 });
+                var resizeObserver = null;
+                var tryObserve = function() {
+                  if (dom.parentNode) {
+                    var parentW = dom.parentNode.clientWidth;
+                    var parentH = dom.parentNode.clientHeight;
+                    if (parentW > 20 && parentH > 20) {
+                      dom.style.width = parentW + "px";
+                      dom.style.height = parentH + "px";
+                      chart.resize();
+                      resizeObserver = new ResizeObserver(function(entries) {
+                        for (var i = 0; i < entries.length; i++) {
+                          var entry = entries[i];
+                          var w = entry.contentRect.width;
+                          var h = entry.contentRect.height;
+                          if (w > 20 && h > 20) {
+                            dom.style.width = w + "px";
+                            dom.style.height = h + "px";
+                            chart.resize();
+                          }
+                        }
+                      });
+                      resizeObserver.observe(dom.parentNode);
+                      return;
+                    }
+                  }
+                  requestAnimationFrame(tryObserve);
+                };
+                requestAnimationFrame(tryObserve);
                 return dom;
               } else {
                 return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';
@@ -307,11 +363,11 @@ const chartProvider = function () {
                 chart.setOption({
                   animation: false,
                   tooltip: { trigger: 'item' },
-                  legend: { bottom: '0%', left: 'center' },
+                  legend: { bottom: '3%', left: 'center' },
                   series: [{
                     type: 'pie',
-                    radius: ['40%', '70%'],
+                    radius: ['35%', '75%'],
-                    center: ['50%', '45%'],
+                    center: ['50%', '50%'],
                     label: { show: false },
                     emphasis: { scale: false },
                     data: printData?.pieData || [
@@ -323,6 +379,34 @@ const chartProvider = function () {
                     ]
                   }]
                 });
+                var resizeObserver = null;
+                var tryObserve = function() {
+                  if (dom.parentNode) {
+                    var parentW = dom.parentNode.clientWidth;
+                    var parentH = dom.parentNode.clientHeight;
+                    if (parentW > 20 && parentH > 20) {
+                      dom.style.width = parentW + "px";
+                      dom.style.height = parentH + "px";
+                      chart.resize();
+                      resizeObserver = new ResizeObserver(function(entries) {
+                        for (var i = 0; i < entries.length; i++) {
+                          var entry = entries[i];
+                          var w = entry.contentRect.width;
+                          var h = entry.contentRect.height;
+                          if (w > 20 && h > 20) {
+                            dom.style.width = w + "px";
+                            dom.style.height = h + "px";
+                            chart.resize();
+                          }
+                        }
+                      });
+                      resizeObserver.observe(dom.parentNode);
+                      return;
+                    }
+                  }
+                  requestAnimationFrame(tryObserve);
+                };
+                requestAnimationFrame(tryObserve);
                 return dom;
               } else {
                 return '<div style="width:100%;height:100%;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;">ECharts 未加载，请刷新页面重试</div>';