moblor-vue 0.1.84 → 0.1.85

package/dist/moblor-components.esm.js

@@ -364,6 +364,8 @@ var MoBarChart = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     Object.defineProperty(MoBarChart.prototype, "actualMargin", {
@@ -398,7 +400,6 @@ var MoBarChart = /** @class */ (function (_super) {
         configurable: true
     });
     MoBarChart.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     MoBarChart.prototype.mounted = function () {
@@ -422,6 +423,9 @@ var MoBarChart = /** @class */ (function (_super) {
                 }
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -450,24 +454,30 @@ var MoBarChart = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    MoBarChart.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     MoBarChart.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.5 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -493,6 +503,9 @@ var MoBarChart = /** @class */ (function (_super) {
             || (!this.hasLineChart && this.aggregates.length > 1)) {
             this.renderLabel();
         }
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     MoBarChart.prototype.init = function () {
         var _this = this;
@@ -511,10 +524,6 @@ var MoBarChart = /** @class */ (function (_super) {
         if (!mainChartElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        if (legendsElement) {
-            select(legendsElement).selectAll('*').remove();
-        }
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸
@@ -566,24 +575,32 @@ var MoBarChart = /** @class */ (function (_super) {
         this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
         this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
         this.height = this.svgHeight - this.actualMargin.top - this.actualMargin.bottom;
+        select(mainChartElement).selectAll('*').remove();
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         var mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%');
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%');
         var legendsSvg = null;
         if (legendsElement) {
             // Legends SVG: viewBox 宽度 = 容器实际宽度，确保文字截断基于真实宽度
             legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         // 创建图表组
         this.svg = mainSvg
@@ -1419,7 +1436,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-1636fefd_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-0e9b3dcc_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -1483,6 +1500,8 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     Object.defineProperty(MoBarChartHorizontal.prototype, "actualMargin", {
@@ -1497,7 +1516,6 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         configurable: true
     });
     MoBarChartHorizontal.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     MoBarChartHorizontal.prototype.mounted = function () {
@@ -1506,21 +1524,24 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         // 使用 ResizeObserver 监听容器尺寸变化，实现基于容器高宽比的布局切换
         if (typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver(function () {
-                // ResizeObserver 在 observe 时会立即触发一次，跳过首次触发
                 if (_this.isFirstCheck) {
                     _this.isFirstCheck = false;
                     return;
                 }
-                // 使用 requestAnimationFrame 延迟执行，避免 DOM 修改触发 ResizeObserver 死循环
-                if (!_this.isLayoutChecking) {
-                    _this.isLayoutChecking = true;
-                    requestAnimationFrame(function () {
-                        _this.isLayoutChecking = false;
-                        _this.checkLayoutAndRedraw();
-                    });
+                if (_this.isLayoutChecking) {
+                    return;
                 }
+                _this.isLayoutChecking = true;
+                requestAnimationFrame(function () {
+                    _this.checkLayoutAndRedraw();
+                    // 重绘完成后重置标志，让 ResizeObserver 可以再次响应
+                    _this.isLayoutChecking = false;
+                });
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -1549,24 +1570,31 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    MoBarChartHorizontal.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     MoBarChartHorizontal.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        // 尺寸没变化则跳过重绘，避免 ResizeObserver 死循环
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -1593,6 +1621,9 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         if (this.categories.length > 0) {
             this.renderLabel();
         }
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     MoBarChartHorizontal.prototype.init = function () {
         var _this = this;
@@ -1623,10 +1654,6 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         if (!mainChartElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        if (legendsElement) {
-            select(legendsElement).selectAll('*').remove();
-        }
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
@@ -1678,22 +1705,30 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
         this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
         this.height = this.svgHeight - this.actualMargin.top - this.actualMargin.bottom;
+        select(mainChartElement).selectAll('*').remove();
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         this.mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%');
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%');
         if (legendsElement) {
             this.legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         if (this.groupType === 'stacked100' && this.categories.length > 0) {
             this.xAxisScale = scaleLinear()
@@ -2125,7 +2160,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   var __vue_inject_styles__$1 = function (inject) {
     if (!inject) { return }
-    inject("data-v-6d12389a_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-0d5c8f23_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2195,10 +2230,11 @@ var PieChart = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     PieChart.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     PieChart.prototype.mounted = function () {
@@ -2222,6 +2258,9 @@ var PieChart = /** @class */ (function (_super) {
                 }
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -2250,24 +2289,30 @@ var PieChart = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    PieChart.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     PieChart.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.6 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -2283,6 +2328,9 @@ var PieChart = /** @class */ (function (_super) {
         }
         this.renderInnerLabel();
         this.changeContent();
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     PieChart.prototype.changeContent = function () {
         var chartDataForLegend = this.chartDataForLegend;
@@ -2319,8 +2367,6 @@ var PieChart = /** @class */ (function (_super) {
         if (!mainChartElement || !legendsElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
@@ -2372,22 +2418,28 @@ var PieChart = /** @class */ (function (_super) {
         this.legendSvgHeight = legendStartY + legendsCount * legendItemHeight + 20;
         this.width = Math.min(this.svgWidth, this.svgHeight);
         this.height = this.svgHeight;
+        select(mainChartElement).selectAll('*').remove();
+        select(legendsElement).selectAll('*').remove();
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         var mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%');
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%');
         if (legendsElement) {
             this.legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         else {
             this.legendsSvg = null;
@@ -2711,7 +2763,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   var __vue_inject_styles__$2 = function (inject) {
     if (!inject) { return }
-    inject("data-v-c8322450_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-47043ace_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -2773,6 +2825,8 @@ var LineChart = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     Object.defineProperty(LineChart.prototype, "actualMargin", {
@@ -2790,7 +2844,6 @@ var LineChart = /** @class */ (function (_super) {
         configurable: true
     });
     LineChart.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     LineChart.prototype.mounted = function () {
@@ -2814,6 +2867,9 @@ var LineChart = /** @class */ (function (_super) {
                 }
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -2842,24 +2898,30 @@ var LineChart = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    LineChart.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     LineChart.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -2878,6 +2940,9 @@ var LineChart = /** @class */ (function (_super) {
         if (this.showValue) {
             this.renderData();
         }
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     LineChart.prototype.init = function () {
         var _this = this;
@@ -2891,10 +2956,6 @@ var LineChart = /** @class */ (function (_super) {
         if (!mainChartElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        if (legendsElement) {
-            select(legendsElement).selectAll('*').remove();
-        }
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
@@ -2947,24 +3008,32 @@ var LineChart = /** @class */ (function (_super) {
         this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
         this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
         this.height = this.svgHeight - this.actualMargin.top - this.actualMargin.bottom;
+        select(mainChartElement).selectAll('*').remove();
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         this.mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%')
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%')
             .append('g')
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
         if (legendsElement) {
             this.legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         else {
             this.legendsSvg = null;
@@ -3455,7 +3524,7 @@ __vue_render__$3._withStripped = true;
   /* style */
   var __vue_inject_styles__$3 = function (inject) {
     if (!inject) { return }
-    inject("data-v-2b999d7a_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-35425756_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3510,10 +3579,11 @@ var FunnelChart = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     FunnelChart.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     FunnelChart.prototype.mounted = function () {
@@ -3537,6 +3607,9 @@ var FunnelChart = /** @class */ (function (_super) {
                 }
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -3565,24 +3638,30 @@ var FunnelChart = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    FunnelChart.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     FunnelChart.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -3590,6 +3669,9 @@ var FunnelChart = /** @class */ (function (_super) {
         this.init();
         this.renderFunnel();
         this.renderLegend();
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     FunnelChart.prototype.init = function () {
         var _this = this;
@@ -3616,8 +3698,6 @@ var FunnelChart = /** @class */ (function (_super) {
         if (!mainChartElement || !legendsElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
@@ -3709,22 +3789,28 @@ var FunnelChart = /** @class */ (function (_super) {
                 _this.refactoredData.push(temp);
             }
         });
+        select(mainChartElement).selectAll('*').remove();
+        select(legendsElement).selectAll('*').remove();
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         this.mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%');
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%');
         if (legendsElement) {
             this.legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         else {
             this.legendsSvg = null;
@@ -3932,7 +4018,7 @@ __vue_render__$4._withStripped = true;
   /* style */
   var __vue_inject_styles__$4 = function (inject) {
     if (!inject) { return }
-    inject("data-v-09f079a3_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-6a42ee76_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -4515,10 +4601,11 @@ var ScatterChart = /** @class */ (function (_super) {
         _this.resizeObserver = null;
         _this.isFirstCheck = true;
         _this.isLayoutChecking = false;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     ScatterChart.prototype.onDataChanged = function () {
-        this.beforeRedraw();
         this.redraw();
     };
     ScatterChart.prototype.mounted = function () {
@@ -4542,6 +4629,9 @@ var ScatterChart = /** @class */ (function (_super) {
                 }
             });
             this.resizeObserver.observe(this.$el);
+            if (this.$el.parentElement) {
+                this.resizeObserver.observe(this.$el.parentElement);
+            }
         }
         // 首次渲染
         requestAnimationFrame(function () {
@@ -4570,24 +4660,30 @@ var ScatterChart = /** @class */ (function (_super) {
             _this.resizeTimer = null;
         }, 200);
     };
+    ScatterChart.prototype.getLayoutSize = function () {
+        var rect = this.$el.getBoundingClientRect();
+        var parent = this.$el.parentElement;
+        return { width: rect.width, height: (parent === null || parent === void 0 ? void 0 : parent.clientHeight) || rect.height };
+    };
     /** 检查容器高宽比，切换布局模式并重新渲染 */
     ScatterChart.prototype.checkLayoutAndRedraw = function () {
         var _this = this;
-        var rect = this.$el.getBoundingClientRect();
-        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var rect = this.getLayoutSize();
         var isNarrow = rect.width > 0 && rect.height > 0
             && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
         var layoutChanged = isNarrow !== this.isNarrowLayout;
+        if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
         this.isNarrowLayout = isNarrow;
         if (layoutChanged) {
             // 布局模式切换后，等 CSS 生效再重新渲染
             this.$nextTick(function () {
-                _this.beforeRedraw();
                 _this.redraw();
             });
         }
         else {
-            this.beforeRedraw();
             this.redraw();
         }
     };
@@ -4600,6 +4696,9 @@ var ScatterChart = /** @class */ (function (_super) {
         if (this.groupings.length > 1 && this.categories.length > 0) {
             this.renderLabel();
         }
+        var rect = this.getLayoutSize();
+        this.lastRenderedWidth = rect.width;
+        this.lastRenderedHeight = rect.height;
     };
     ScatterChart.prototype.init = function () {
         var _this = this;
@@ -4613,10 +4712,6 @@ var ScatterChart = /** @class */ (function (_super) {
         if (!mainChartElement) {
             return; // 模板还未就绪，跳过渲染
         }
-        select(mainChartElement).selectAll('*').remove();
-        if (legendsElement) {
-            select(legendsElement).selectAll('*').remove();
-        }
         // 使用容器布局状态
         var isNarrowLayout = this.isNarrowLayout;
         // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
@@ -4667,24 +4762,32 @@ var ScatterChart = /** @class */ (function (_super) {
         this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
         this.width = this.svgWidth - this.margin.left - this.margin.right;
         this.height = this.svgHeight - this.margin.top - this.margin.bottom;
+        select(mainChartElement).selectAll('*').remove();
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
         // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         this.mainSvg = select(mainChartElement)
             .append('svg')
+            .attr('width', this.svgWidth)
+            .attr('height', this.svgHeight)
             .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
             .attr('preserveAspectRatio', 'xMinYMin meet')
             .style('display', 'block')
             .style('width', '100%')
-            .style('height', '100%')
+            .style('height', isNarrowLayout ? this.svgHeight + "px" : '100%')
             .append('g')
             .attr('transform', "translate(" + this.margin.left + ", " + this.margin.top + ")");
         if (legendsElement) {
             this.legendsSvg = select(legendsElement)
                 .append('svg')
+                .attr('width', this.legendSvgWidth)
+                .attr('height', this.legendSvgHeight)
                 .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
                 .attr('preserveAspectRatio', 'xMinYMin meet')
                 .style('display', 'block')
                 .style('width', '100%')
-                .style('height', '100%');
+                .style('height', isNarrowLayout ? 'auto' : '100%');
         }
         else {
             this.legendsSvg = null;
@@ -5020,7 +5123,7 @@ __vue_render__$7._withStripped = true;
   /* style */
   var __vue_inject_styles__$7 = function (inject) {
     if (!inject) { return }
-    inject("data-v-d711764e_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-429fd9e9_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  font: 1rem sans-serif;\n  text-align: center;\n}\n.mo-chart.x-scroll {\n  overflow-x: scroll;\n}\n.mo-piece-active:active {\n  opacity: 0.8;\n}\n.mo-inner-arc {\n  fill: #000;\n  opacity: 0.28;\n}\n.mo-inner-text {\n  font-size: clamp(8px, 1vmin, 1.6rem);\n  fill-opacity: 1;\n}\n.mo-summary-label {\n  fill: #323233;\n}\n.mo-summary-value {\n  fill: #00A383;\n}\n.mo-axis path {\n  fill: none;\n  stroke-width: 0;\n}\n.mo-space-line {\n  stroke: #e4e7ed;\n  stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n  stroke: #e4e5e9;\n  stroke-width: 1px;\n}\n.mo-axis-point {\n  fill: #abb4c7;\n}\n.mo-data-line {\n  fill: none;\n  stroke: #b8b8b8;\n  stroke-width: 1.5px;\n}\n.mo-data-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #3e3f41;\n}\n.mo-axis-text {\n  font-size: clamp(1rem, 1vmin, 1.2rem);\n  fill: #323233;\n}\n.mo-axis-label {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-axis-div-label {\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-legend-text {\n  font-size: clamp(1.2rem, 1vmin, 1.6rem);\n  fill: #3e4759;\n}\n.mo-legend-percentage {\n  font-size: 1.6rem;\n}\n.mo-label-inner {\n  text-anchor: middle;\n  font-size: clamp(1rem, 1vmin, 1.6rem);\n  fill: #000;\n}\n.mo-gauge-back-arc {\n  stroke-width: 6;\n  stroke-linejoin: round;\n  stroke: #f9f9f9;\n}\n.mo-gauge-value {\n  text-anchor: middle;\n  fill: #323233;\n}\n.mo-gauge-range {\n  font-size: 1.6rem;\n  fill: #323233;\n  text-anchor: middle;\n}\n.mo-gauge-max-value {\n  font-size: 1.4rem;\n  fill: #3e4759;\n  text-anchor: middle;\n}\n.mo-gauge-value-arc {\n  stroke-width: 6;\n  stroke: url(#MoGaugeGradient);\n  stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n  fill: #6e71ca;\n}\n.mo-gauge-tick {\n  stroke: #323233;\n  stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n  fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n  fill: url(#MoLineAreaGradient);\n  stroke-width: 0;\n  opacity: 0.6;\n}\n.mo-line-point {\n  fill: #00A383;\n  stroke: #fff;\n  stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  border-radius: 18px;\n  border: 1px solid #c5c7c9;\n  margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n}\n.mo-triangle-mark {\n  position: relative;\n  top: 22px;\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid white;\n}\n.mo-triangle {\n  margin-right: auto;\n  margin-left: auto;\n  height: 20px;\n  width: 20px;\n  border: 10px solid transparent;\n  border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n  position: relative;\n  text-align: center;\n  font-size: 1.4rem;\n  color: #3e4759;\n}\n.mo-tip-content:before {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #c5c7c9;\n  position: absolute;\n  top: -20px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content:after {\n  width: 0px;\n  height: 0px;\n  border: 10px transparent solid;\n  border-bottom-color: #fff;\n  position: absolute;\n  top: -18px;\n  left: calc(50% - 10px);\n  content: \"\";\n}\n.mo-tip-content .left-nav {\n  width: 15%;\n  float: left;\n}\n.mo-tip-content .left-nav img {\n  -webkit-transform: rotate(180deg);\n  -moz-transform: rotate(180deg);\n  transform: rotate(180deg);\n  margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n  width: 15%;\n  float: right;\n}\n.mo-tip-content .right-nav img {\n  margin-top: 10px;\n}\n.mo-tip-content .tip {\n  width: 70%;\n  max-width: 70%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  float: left;\n}\n.mo-tip-content .tip .label {\n  margin-left: 10px;\n}\n.mo-metric {\n  width: 100%;\n  height: 100%;\n  color: #323233;\n}\n.mo-metric .mo-metric-inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n  width: 100%;\n}\n.mo-metric .mo-metric-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n  padding-right: 5px;\n  font-size: clamp(4rem, 4rem + 2vw, 6rem);\n  font-weight: 500;\n  word-break: break-word;\n}\n.mo-table {\n  width: 100%;\n  height: 100%;\n}\n.mo-table .mo-table-row {\n  color: #323233;\n  position: relative;\n}\n.mo-table .mo-table-row:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 50% 100%;\n  left: 0;\n  bottom: 0;\n  height: 1px;\n  width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n  transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n  transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 0% 50%;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n  transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n  background-color: #00A383;\n  color: #fff;\n  font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n  position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #39a393;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n  background-color: #c8cacc;\n  font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n  display: inline-block;\n  box-sizing: border-box;\n  font-size: 1.6rem;\n  height: 30px;\n  line-height: 30px;\n  text-align: left;\n  padding: 0 5px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n  content: \"\";\n  position: absolute;\n  bottom: auto;\n  right: auto;\n  background-color: #e3e5e8;\n  display: block;\n  z-index: 15;\n  transform-origin: 100% 50%;\n  right: 0;\n  top: 0;\n  width: 1px;\n  height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n  transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n  padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n  font-size: 2.2rem;\n  position: relative;\n  top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n  text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n  width: 18px;\n  margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n  display: flex;\n  flex-direction: column;\n  height: auto !important;\n  margin: auto 0;\n}\n.table-chart-container .mo-table {\n  height: auto;\n  max-height: 100%;\n  overflow-y: auto;\n}\n.mo-label-line {\n  stroke: #c8cacc;\n  stroke-width: 0.5px;\n}\n.mo-label-title {\n  font-size: clamp(1.4rem, 1vmin, 1.8rem);\n  fill: #3e4759;\n  text-anchor: start;\n}\n.mo-cover {\n  width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n  fill: #fff;\n}\n.chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n.chart-container.chart-having-tips {\n  flex-direction: column;\n}\n.chart-container .chart-and-legends {\n  width: 100%;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  min-height: 0;\n}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  max-height: 600px;\n  margin: auto 0;\n}\n.chart-container .chart-legends {\n  width: 20%;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n  width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: none;\n  height: auto;\n  min-height: 0;\n  max-height: none;\n  margin: 0;\n  width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n  height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  flex: none;\n  height: auto;\n  width: 100%;\n  min-height: 0;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.chart-limit-tips {\n  padding: 0.5rem;\n  width: 100%;\n  min-height: 3rem;\n  color: #eda762;\n  font-size: clamp(1.4rem, 1vmin, 1.6rem);\n  text-align: left;\n  display: flex;\n  align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n  .mo-axis-text,\n  .mo-axis-number,\n  .mo-axis-div-label,\n  .mo-summary-label,\n  .mo-legend-text,\n  .mo-label-title {\n    fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n    color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 50% 100%;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n    width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n    transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n    transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #646466;\n    display: block;\n    z-index: 15;\n    transform-origin: 0% 50%;\n    left: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n    transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n    background-color: #2c2c2e;\n    color: #f2f2f7;\n    font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n    content: \"\";\n    position: absolute;\n    bottom: auto;\n    right: auto;\n    background-color: #444447;\n    display: block;\n    z-index: 15;\n    transform-origin: 100% 50%;\n    right: 0;\n    top: 0;\n    width: 1px;\n    height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n    transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n    color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n    color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n    color: #f2f2f7;\n}\n.mo-axis-div-label {\n    fill: #f2f2f7;\n}\n.mo-gauge-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n    fill: #f2f2f7;\n}\n.mo-gauge-tick {\n    stroke: #fff;\n}\n.mo-gauge-pointer {\n    fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n    fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n    stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -5528,7 +5631,7 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
     };
     DashboardDataConvertor.prototype.refactorMetadata = function (metadata, data) {
         var newMetadata = {};
-        var _a = data.reportResult || {}, reportMetadata = _a.reportMetadata, reportExtendedMetadata = _a.reportExtendedMetadata;
+        var _a = (data && data.reportResult) || {}, reportMetadata = _a.reportMetadata, reportExtendedMetadata = _a.reportExtendedMetadata;
         var properties = metadata.properties;
         if (reportMetadata) {
             newMetadata.reportId = reportMetadata.id;
@@ -5598,7 +5701,7 @@ var DashboardDataConvertor = /** @class */ (function (_super) {
         return newMetadata;
     };
     DashboardDataConvertor.prototype.refactorData = function (metadata, data) {
-        var reportResult = data.reportResult;
+        var reportResult = (data || {}).reportResult;
         var properties = metadata.properties;
         var newData;
         if (properties && properties.visualizationType === 'RichText') {
@@ -6103,8 +6206,8 @@ var ReportDataConvertor = /** @class */ (function (_super) {
         this.tableData = this.refactorTableData(reportData);
     };
     ReportDataConvertor.prototype.refactorMetadata = function (reportData) {
-        var reportMetadata = reportData.reportMetadata, reportExtendedMetadata = reportData.reportExtendedMetadata;
-        var groupingColumnInfo = reportExtendedMetadata.groupingColumnInfo, aggregateColumnInfo = reportExtendedMetadata.aggregateColumnInfo;
+        var _a = reportData || {}, reportMetadata = _a.reportMetadata, reportExtendedMetadata = _a.reportExtendedMetadata;
+        var _b = reportExtendedMetadata || {}, groupingColumnInfo = _b.groupingColumnInfo, aggregateColumnInfo = _b.aggregateColumnInfo;
         var chart = reportMetadata.chart, currency = reportMetadata.currency;
         if (!chart) {
             return {
@@ -6155,9 +6258,9 @@ var ReportDataConvertor = /** @class */ (function (_super) {
     };
     ReportDataConvertor.prototype.refactorData = function (reportData) {
         var _this = this;
-        var factMap = reportData.factMap, reportMetadata = reportData.reportMetadata, groupingsDown = reportData.groupingsDown;
-        var chart = reportMetadata.chart, aggregates = reportMetadata.aggregates, metaGroupingsDown = reportMetadata.groupingsDown;
-        var groupings = groupingsDown.groupings;
+        var _a = reportData || {}, factMap = _a.factMap, reportMetadata = _a.reportMetadata, groupingsDown = _a.groupingsDown;
+        var _b = reportMetadata || {}, chart = _b.chart, aggregates = _b.aggregates, metaGroupingsDown = _b.groupingsDown;
+        var groupings = (groupingsDown || {}).groupings;
         var pieces = [];
         if (chart) {
             var chartGroupings = chart.groupings, summaries_1 = chart.summaries;
@@ -6286,8 +6389,8 @@ var ReportDataConvertor = /** @class */ (function (_super) {
         return 1;
     };
     ReportDataConvertor.prototype.refactorTableData = function (reportData) {
-        var reportMetadata = reportData.reportMetadata;
-        var reportFormat = reportMetadata.reportFormat;
+        var reportMetadata = (reportData || {}).reportMetadata;
+        var reportFormat = (reportMetadata || {}).reportFormat;
         if (reportFormat === 'MATRIX') {
             return this.convertMatrix(reportData);
         }