diff --git a/src/views/mes/printTemplate/ReportTemplateDesigner.vue b/src/views/mes/printTemplate/ReportTemplateDesigner.vue index 21249c26..b72f83c4 100644 --- a/src/views/mes/printTemplate/ReportTemplateDesigner.vue +++ b/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 '
ECharts 未加载,请刷新页面重试
'; @@ -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 '
ECharts 未加载,请刷新页面重试
'; @@ -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%'], - center: ['50%', '45%'], + radius: ['35%', '75%'], + 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 '
ECharts 未加载,请刷新页面重试
';