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 未加载,请刷新页面重试
';