moblor-vue 0.1.78 → 0.1.80

package/dist/moblor-components.esm.js

@@ -333,6 +333,10 @@ var MoBarChart = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         // 常量定义
         _this.TITLE_HEIGHT = 20;
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        // 布局切换阈值: 容器高宽比 >= 1.8 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.8;
         _this.MIN_WIDTH = 20;
         _this.svgWidth = 0;
         _this.svgHeight = 0;
@@ -355,6 +359,11 @@ var MoBarChart = /** @class */ (function (_super) {
         _this.labelGroup = null;
         _this.displayData = [];
         _this.maxDisplayCount = 20;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     Object.defineProperty(MoBarChart.prototype, "actualMargin", {
@@ -393,7 +402,74 @@ var MoBarChart = /** @class */ (function (_super) {
         this.redraw();
     };
     MoBarChart.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    MoBarChart.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    MoBarChart.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    MoBarChart.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.5 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     MoBarChart.prototype.redraw = function () {
         this.init();
@@ -408,9 +484,11 @@ var MoBarChart = /** @class */ (function (_super) {
         if (this.hasLineChart) {
             this.renderLine(data);
         }
-        // 清除现有的标签
-        this.labelGroup.selectAll('*').remove();
-        this.labelGroup.attr('transform', 'translate(0, 0)');
+        // 清除现有的标签（仅在有 legends 容器时）
+        if (this.labelGroup) {
+            this.labelGroup.selectAll('*').remove();
+            this.labelGroup.attr('transform', 'translate(0, 0)');
+        }
         if (this.categories.length > 0
             || (!this.hasLineChart && this.aggregates.length > 1)) {
             this.renderLabel();
@@ -430,36 +508,94 @@ var MoBarChart = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度 - 仅在存在 legends 容器时计算
+        if (legendsElement) {
+            var legendsRect = legendsElement.getBoundingClientRect();
+            if (legendsRect.width > 0) {
+                this.legendSvgWidth = legendsRect.width;
+            }
+            else if (legendsElement.clientWidth > 0) {
+                this.legendSvgWidth = legendsElement.clientWidth;
+            }
+            else {
+                // 根据布局模式估算宽度
+                var containerWidth = this.$el.getBoundingClientRect().width;
+                if (isNarrowLayout) {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+                }
+                else {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.33 : 150;
+                }
+            }
+        }
+        // Legends 高度 - 始终基于图例数量计算
+        var legendsCount = this.getLegendsCount();
+        var itemHeight = isNarrowLayout ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        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;
-        // 创建新的SVG
+        // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         var mainSvg = select(mainChartElement)
             .append('svg')
-            .attr('width', this.svgWidth)
-            .attr('height', this.svgHeight);
-        var legendsSvg = select(legendsElement)
-            .append('svg')
-            .attr('width', this.legendSvgWidth)
-            .attr('height', this.legendSvgHeight);
+            .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
+            .attr('preserveAspectRatio', 'xMinYMin meet')
+            .style('display', 'block')
+            .style('width', '100%')
+            .style('height', '100%');
+        var legendsSvg = null;
+        if (legendsElement) {
+            // Legends SVG: viewBox 宽度 = 容器实际宽度，确保文字截断基于真实宽度
+            legendsSvg = select(legendsElement)
+                .append('svg')
+                .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
+                .attr('preserveAspectRatio', 'xMinYMin meet')
+                .style('display', 'block')
+                .style('width', '100%')
+                .style('height', '100%');
+        }
         // 创建图表组
         this.svg = mainSvg
             .append('g')
             .attr('class', 'chart-group')
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
-        // 创建注解组
-        this.labelGroup = legendsSvg
-            .append('g')
-            .attr('class', 'label-group');
+        // 创建注解组（仅在存在 legends 容器时）
+        if (legendsSvg) {
+            this.labelGroup = legendsSvg
+                .append('g')
+                .attr('class', 'label-group');
+        }
         // 配置x轴比例尺
         this.xAxisScale = scaleBand()
             .domain(this.displayData.map(function (d) { return d.label; }))
@@ -965,9 +1101,24 @@ var MoBarChart = /** @class */ (function (_super) {
             return "rotate(-90, " + textX + ", " + textY + ")";
         });
     };
+    MoBarChart.prototype.getLegendsCount = function () {
+        if (this.categories.length > 0) {
+            return this.categories.length;
+        }
+        if (!this.hasLineChart && this.aggregates.length > 1) {
+            return this.aggregates.length;
+        }
+        return this.aggregates.length > 0 ? 1 : 0;
+    };
     MoBarChart.prototype.renderLabel = function () {
         var _this = this;
         var _a;
+        if (!this.labelGroup) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         // 添加标题
         var currentY = 0;
         if ((_a = this.groupings[1]) === null || _a === void 0 ? void 0 : _a.label) {
@@ -1004,13 +1155,13 @@ var MoBarChart = /** @class */ (function (_super) {
             .attr('width', 15)
             .attr('height', 15)
             .attr('x', 10)
-            .attr('y', function (d, i) { return currentY + i * 25; })
+            .attr('y', function (d, i) { return currentY + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         // 图例文本
         if (this.categories.length > 0) {
             legends.append('text')
                 .attr('x', 35)
-                .attr('y', function (d, i) { return currentY + 12 + i * 25; })
+                .attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
                 .attr('class', 'mo-legend-text')
                 .text(function (d) { return ChartService
                 .formatDomainValue(d, _this.legendSvgWidth - 35, false); });
@@ -1018,11 +1169,22 @@ var MoBarChart = /** @class */ (function (_super) {
         else if (!this.hasLineChart && this.aggregates.length > 1) {
             legends.append('text')
                 .attr('x', 35)
-                .attr('y', function (d, i) { return currentY + 12 + i * 25; })
+                .attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
                 .attr('class', 'mo-legend-text')
                 .text(function (d) { return ChartService
                 .formatDomainValue(d.label, _this.legendSvgWidth, false); });
         }
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        var legendsCount = legendsData.length;
+        var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
+        }
     };
     var _a;
     __decorate([
@@ -1213,20 +1375,34 @@ var __vue_render__ = function () {
     _vm.groupType === "stacked" ||
     _vm.groupType === "stacked100" ||
     (!_vm.hasLineChart && _vm.aggregates.length > 1)
-    ? _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _vm._m(0),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
-    : _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _c("div", { staticClass: "main-chart" }),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
+    ? _c(
+        "div",
+        {
+          staticClass: "chart-container chart-having-tips bar-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _vm._m(0),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
+    : _c(
+        "div",
+        {
+          staticClass: "chart-container chart-having-tips bar-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _c("div", { staticClass: "main-chart" }),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
 };
 var __vue_staticRenderFns__ = [
   function () {
@@ -1243,7 +1419,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-04b7eb40_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -1296,6 +1472,17 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         _this.barOffsetY = 7;
         _this.displayData = [];
         _this.maxDisplayCount = 20;
+        // 常量定义
+        _this.TITLE_HEIGHT = 15;
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        // 布局切换阈值: 容器高宽比 >= 1.8 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.8;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     Object.defineProperty(MoBarChartHorizontal.prototype, "actualMargin", {
@@ -1314,7 +1501,74 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         this.redraw();
     };
     MoBarChartHorizontal.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    MoBarChartHorizontal.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    MoBarChartHorizontal.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    MoBarChartHorizontal.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     MoBarChartHorizontal.prototype.redraw = function () {
         this.init();
@@ -1331,9 +1585,11 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             && this.aggregates.length <= 1) {
             this.renderData(data);
         }
-        // 清除现有的标签
-        this.labelGroup.selectAll('*').remove();
-        this.labelGroup.attr('transform', 'translate(0, 0)');
+        // 清除现有的标签（仅在有 legends 容器时）
+        if (this.labelGroup) {
+            this.labelGroup.selectAll('*').remove();
+            this.labelGroup.attr('transform', 'translate(0, 0)');
+        }
         if (this.categories.length > 0) {
             this.renderLabel();
         }
@@ -1364,27 +1620,81 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度 - 仅在存在 legends 容器时计算
+        if (legendsElement) {
+            var legendsRect = legendsElement.getBoundingClientRect();
+            if (legendsRect.width > 0) {
+                this.legendSvgWidth = legendsRect.width;
+            }
+            else if (legendsElement.clientWidth > 0) {
+                this.legendSvgWidth = legendsElement.clientWidth;
+            }
+            else {
+                // 根据布局模式估算宽度
+                var containerWidth = this.$el.getBoundingClientRect().width;
+                if (isNarrowLayout) {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+                }
+                else {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.25 : 150;
+                }
+            }
+        }
+        // Legends 高度 - 始终基于图例数量计算
+        var legendsCount = this.categories.length;
+        var itemHeight = isNarrowLayout ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        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;
-        // 创建新的SVG
+        // 创建新的SVG - 使用 viewBox + width:100% 确保 SVG 正确填满容器
         this.mainSvg = select(mainChartElement)
             .append('svg')
-            .attr('width', this.svgWidth)
-            .attr('height', this.svgHeight);
-        this.legendsSvg = select(legendsElement)
-            .append('svg')
-            .attr('width', this.legendSvgWidth)
-            .attr('height', this.legendSvgHeight);
+            .attr('viewBox', "0 0 " + this.svgWidth + " " + this.svgHeight)
+            .attr('preserveAspectRatio', 'xMinYMin meet')
+            .style('display', 'block')
+            .style('width', '100%')
+            .style('height', '100%');
+        if (legendsElement) {
+            this.legendsSvg = select(legendsElement)
+                .append('svg')
+                .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
+                .attr('preserveAspectRatio', 'xMinYMin meet')
+                .style('display', 'block')
+                .style('width', '100%')
+                .style('height', '100%');
+        }
         if (this.groupType === 'stacked100' && this.categories.length > 0) {
             this.xAxisScale = scaleLinear()
                 .domain([0, 1])
@@ -1429,7 +1739,13 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .formatDomainValue(domain, _this.actualMargin.left - 20, false); });
         this.mainChart = this.mainSvg.append('g')
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
-        this.labelGroup = this.legendsSvg.append('g').attr('transform', 'translate(0, 0)');
+        // 创建注解组（仅在存在 legends 容器时）
+        if (this.legendsSvg) {
+            this.labelGroup = this.legendsSvg.append('g').attr('transform', 'translate(0, 0)');
+        }
+        else {
+            this.labelGroup = null;
+        }
     };
     MoBarChartHorizontal.prototype.renderAxis = function () {
         var chartXAxis = this.mainSvg.append('g')
@@ -1654,10 +1970,15 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
     };
     MoBarChartHorizontal.prototype.renderLabel = function () {
         var _this = this;
-        var titleHeight = 15;
+        if (!this.labelGroup) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         this.labelGroup.append('text')
             .attr('x', 10)
-            .attr('y', titleHeight)
+            .attr('y', this.TITLE_HEIGHT)
             .attr('class', 'mo-label-title')
             .text(ChartService.formatDomainValue(this.groupings[1].label, this.legendSvgWidth, false));
         var legends = this.labelGroup.selectAll('.mo-label')
@@ -1665,19 +1986,30 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
             .enter()
             .append('g')
             .attr('class', 'mo-label');
-        var currentY = titleHeight + 15;
+        var currentY = this.TITLE_HEIGHT + 15;
         legends.append('rect')
             .attr('width', '15')
             .attr('height', '15')
             .attr('x', 10)
-            .attr('y', function (d, i) { return currentY + i * 25; })
+            .attr('y', function (d, i) { return currentY + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         legends.append('text')
             .attr('x', 35)
-            .attr('y', function (d, i) { return currentY + 12 + i * 25; })
+            .attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
             .attr('class', 'mo-legend-text')
             .text(function (d) { return ChartService
             .formatDomainValue(d, _this.legendSvgWidth, false); });
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        var legendsCount = this.categories.length;
+        var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
+        }
     };
     var _a;
     __decorate([
@@ -1747,20 +2079,36 @@ var __vue_render__$1 = function () {
   return _vm.groupType === "grouped" ||
     _vm.groupType === "stacked" ||
     _vm.groupType === "stacked100"
-    ? _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _vm._m(0),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
-    : _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _c("div", { staticClass: "main-chart" }),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
+    ? _c(
+        "div",
+        {
+          staticClass:
+            "chart-container chart-having-tips bar-chart-horizontal-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _vm._m(0),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
+    : _c(
+        "div",
+        {
+          staticClass:
+            "chart-container chart-having-tips bar-chart-horizontal-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _c("div", { staticClass: "main-chart" }),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
 };
 var __vue_staticRenderFns__$1 = [
   function () {
@@ -1777,7 +2125,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   var __vue_inject_styles__$1 = function (inject) {
     if (!inject) { return }
-    inject("data-v-1762f448_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -1836,6 +2184,17 @@ var PieChart = /** @class */ (function (_super) {
             startAngle: 0,
             originalAngle: 0,
         };
+        // 常量定义
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        _this.LEGEND_TITLE_OFFSET = 65; // 有标题时图例起始 Y 偏移
+        // 布局切换阈值: 容器高宽比 >= 1.6 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.6;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     PieChart.prototype.onDataChanged = function () {
@@ -1843,7 +2202,74 @@ var PieChart = /** @class */ (function (_super) {
         this.redraw();
     };
     PieChart.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    PieChart.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    PieChart.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    PieChart.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.6 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     PieChart.prototype.redraw = function () {
         this.init();
@@ -1890,27 +2316,77 @@ var PieChart = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement || !legendsElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
         select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度
+        var legendsRect = legendsElement.getBoundingClientRect();
+        if (legendsRect.width > 0) {
+            this.legendSvgWidth = legendsRect.width;
+        }
+        else if (legendsElement.clientWidth > 0) {
+            this.legendSvgWidth = legendsElement.clientWidth;
+        }
+        else {
+            var containerWidth = this.$el.getBoundingClientRect().width;
+            if (isNarrowLayout) {
+                this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+            }
+            else {
+                this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.25 : 150;
+            }
+        }
+        // Legends 高度 - 基于图例数量计算
+        var hasTitle = !!(this.groupBy && this.aggregate);
+        var legendStartY = hasTitle ? this.LEGEND_TITLE_OFFSET : 0;
+        var legendsCount = this.chartDataForLegend.length;
+        var legendItemHeight = isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        this.legendSvgHeight = legendStartY + legendsCount * legendItemHeight + 20;
         this.width = Math.min(this.svgWidth, this.svgHeight);
         this.height = this.svgHeight;
-        // 创建新的SVG
+        // 创建新的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%');
         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%');
         this.radius = Math.max(0, this.width / 2 - Math.min(30, this.width * 0.1));
         this.innerRadius = this.donut ? this.radius * 0.43 : 0;
         this.rotation = {
@@ -1985,6 +2461,12 @@ var PieChart = /** @class */ (function (_super) {
         var _this = this;
         if (this.chartDataForLegend.length === 0)
             { return; }
+        if (!this.legendsSvg) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         // 添加标题
         var currentY = 0;
         if (this.groupBy && this.aggregate) {
@@ -1993,7 +2475,7 @@ var PieChart = /** @class */ (function (_super) {
                 .attr('y', 40)
                 .attr('class', 'mo-label-title')
                 .text(ChartService.formatDomainValue(this.groupBy.label, this.legendSvgWidth, false));
-            currentY = 65;
+            currentY = this.LEGEND_TITLE_OFFSET;
         }
         // 添加图例
         var legends = this.legendsSvg.selectAll('.mo-legend')
@@ -2006,15 +2488,26 @@ var PieChart = /** @class */ (function (_super) {
             .attr('width', 15)
             .attr('height', 15)
             .attr('x', 10)
-            .attr('y', function (d, i) { return currentY + i * 25; })
+            .attr('y', function (d, i) { return currentY + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         // 图例文本
         legends.append('text')
             .attr('x', 35)
-            .attr('y', function (d, i) { return currentY + 12 + i * 25; })
+            .attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
             .attr('class', 'mo-legend-text')
             .text(function (d) { return ChartService
             .formatDomainValue(d.label, _this.legendSvgWidth - 5, false); });
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        var legendsCount = this.chartDataForLegend.length;
+        var newHeight = currentY + legendsCount * itemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
+        }
     };
     PieChart.prototype.addDonut = function () {
         var _this = this;
@@ -2195,24 +2688,25 @@ var __vue_render__$2 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm._m(0)
-};
-var __vue_staticRenderFns__$2 = [
-  function () {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", { staticClass: "chart-container" }, [
+  return _c(
+    "div",
+    {
+      staticClass: "chart-container pie-chart-container",
+      class: { "narrow-layout": _vm.isNarrowLayout },
+    },
+    [
       _c("div", { staticClass: "main-chart" }),
       _vm._v(" "),
-      _c("div", { staticClass: "chart-legends" }) ])
-  } ];
+      _c("div", { staticClass: "chart-legends" }) ]
+  )
+};
+var __vue_staticRenderFns__$2 = [];
 __vue_render__$2._withStripped = true;
 
   /* style */
   var __vue_inject_styles__$2 = function (inject) {
     if (!inject) { return }
-    inject("data-v-08807cf6_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-a09720c8_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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -2263,6 +2757,17 @@ var LineChart = /** @class */ (function (_super) {
         _this.refactoredData = [];
         _this.displayData = [];
         _this.maxDisplayCount = 20;
+        // 常量定义
+        _this.TITLE_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        // 布局切换阈值: 容器高宽比 >= 1.8 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.8;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     Object.defineProperty(LineChart.prototype, "actualMargin", {
@@ -2284,7 +2789,74 @@ var LineChart = /** @class */ (function (_super) {
         this.redraw();
     };
     LineChart.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    LineChart.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    LineChart.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    LineChart.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     LineChart.prototype.redraw = function () {
         this.init();
@@ -2311,29 +2883,87 @@ var LineChart = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度 - 仅在存在 legends 容器时计算
+        if (legendsElement) {
+            var legendsRect = legendsElement.getBoundingClientRect();
+            if (legendsRect.width > 0) {
+                this.legendSvgWidth = legendsRect.width;
+            }
+            else if (legendsElement.clientWidth > 0) {
+                this.legendSvgWidth = legendsElement.clientWidth;
+            }
+            else {
+                var containerWidth = this.$el.getBoundingClientRect().width;
+                if (isNarrowLayout) {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+                }
+                else {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.20 : 150;
+                }
+            }
+        }
+        // Legends 高度 - 基于图例数量计算（使用上一轮的 categories/aggregates 作为估算）
+        var legendsCount = this.aggregates.length > 1
+            ? this.aggregates.length
+            : this.categories.length;
+        var itemHeight = isNarrowLayout ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        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;
-        // 创建新的SVG
+        // 创建新的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%')
             .append('g')
             .attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
-        this.legendsSvg = select(legendsElement)
-            .append('svg')
-            .attr('width', this.legendSvgWidth)
-            .attr('height', this.legendSvgHeight);
+        if (legendsElement) {
+            this.legendsSvg = select(legendsElement)
+                .append('svg')
+                .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
+                .attr('preserveAspectRatio', 'xMinYMin meet')
+                .style('display', 'block')
+                .style('width', '100%')
+                .style('height', '100%');
+        }
+        else {
+            this.legendsSvg = null;
+        }
         this.categories = [];
         var limitedData = this.displayData.slice(0, 20);
         this.maxValue = max(limitedData, function (d) { return max(d.values); });
@@ -2588,6 +3218,12 @@ var LineChart = /** @class */ (function (_super) {
     };
     LineChart.prototype.renderMeasure = function () {
         var _this = this;
+        if (!this.legendsSvg) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         var labelGroup = this.legendsSvg.append('g');
         labelGroup.append('text')
             .attr('x', 0)
@@ -2603,18 +3239,26 @@ var LineChart = /** @class */ (function (_super) {
             .attr('width', '15')
             .attr('height', '15')
             .attr('x', 0)
-            .attr('y', function (d, i) { return 25 + i * 25; })
+            .attr('y', function (d, i) { return 25 + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         legends.append('text')
             .attr('x', 20)
-            .attr('y', function (d, i) { return 37 + i * 25; })
+            .attr('y', function (d, i) { return 37 + i * itemHeight; })
             .attr('class', 'mo-legend-text')
             .style('fill', this.labelColor || '')
             .text(function (d) { return ChartService
             .formatDomainValue(d.label, _this.legendSvgWidth, false); });
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        this.updateLegendsSvgSize(this.aggregates.length, itemHeight);
     };
     LineChart.prototype.renderLabel = function () {
         var _this = this;
+        if (!this.legendsSvg) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         var labelGroup = this.legendsSvg.append('g');
         labelGroup.append('text')
             .attr('x', 0)
@@ -2630,15 +3274,29 @@ var LineChart = /** @class */ (function (_super) {
             .attr('width', '15')
             .attr('height', '15')
             .attr('x', 0)
-            .attr('y', function (d, i) { return 25 + i * 25; })
+            .attr('y', function (d, i) { return 25 + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         legends.append('text')
             .attr('x', 20)
-            .attr('y', function (d, i) { return 37 + i * 25; })
+            .attr('y', function (d, i) { return 37 + i * itemHeight; })
             .attr('class', 'mo-legend-text')
             .style('fill', this.labelColor || '')
             .text(function (d) { return ChartService
             .formatDomainValue(d.key, _this.legendSvgWidth, false); });
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        this.updateLegendsSvgSize(this.categories.length, itemHeight);
+    };
+    /** 根据图例数量更新 legends SVG 的 viewBox 和高度 */
+    LineChart.prototype.updateLegendsSvgSize = function (legendsCount, itemHeight) {
+        var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
+        }
     };
     LineChart.prototype.renderData = function () {
         var _this = this;
@@ -2748,20 +3406,34 @@ var __vue_render__$3 = function () {
     _vm.groupType === "cumulativeGrouped" ||
     _vm.aggregates.length > 1 ||
     _vm.categories.length > 0
-    ? _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _vm._m(0),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
-    : _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _c("div", { staticClass: "main-chart" }),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
+    ? _c(
+        "div",
+        {
+          staticClass: "chart-container chart-having-tips line-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _vm._m(0),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
+    : _c(
+        "div",
+        {
+          staticClass: "chart-container chart-having-tips line-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _c("div", { staticClass: "main-chart" }),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
 };
 var __vue_staticRenderFns__$3 = [
   function () {
@@ -2771,17 +3443,14 @@ var __vue_staticRenderFns__$3 = [
     return _c("div", { staticClass: "chart-and-legends" }, [
       _c("div", { staticClass: "main-chart" }),
       _vm._v(" "),
-      _c("div", {
-        staticClass: "chart-legends",
-        staticStyle: { width: "20%" },
-      }) ])
+      _c("div", { staticClass: "chart-legends" }) ])
   } ];
 __vue_render__$3._withStripped = true;
 
   /* style */
   var __vue_inject_styles__$3 = function (inject) {
     if (!inject) { return }
-    inject("data-v-9b29bf16_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -2825,6 +3494,17 @@ var FunnelChart = /** @class */ (function (_super) {
         _this.total = 0;
         _this.refactoredData = [];
         _this.colorMap = new Map();
+        // 常量定义
+        _this.TITLE_HEIGHT = 30;
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        // 布局切换阈值: 容器高宽比 >= 1.6 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.6;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     FunnelChart.prototype.onDataChanged = function () {
@@ -2832,7 +3512,74 @@ var FunnelChart = /** @class */ (function (_super) {
         this.redraw();
     };
     FunnelChart.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    FunnelChart.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    FunnelChart.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    FunnelChart.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     FunnelChart.prototype.redraw = function () {
         this.init();
@@ -2861,21 +3608,63 @@ var FunnelChart = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement || !legendsElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
         select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度
+        var legendsRect = legendsElement.getBoundingClientRect();
+        if (legendsRect.width > 0) {
+            this.legendSvgWidth = legendsRect.width;
+        }
+        else if (legendsElement.clientWidth > 0) {
+            this.legendSvgWidth = legendsElement.clientWidth;
+        }
+        else {
+            var containerWidth = this.$el.getBoundingClientRect().width;
+            if (isNarrowLayout) {
+                this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+            }
+            else {
+                this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.25 : 150;
+            }
+        }
+        // Legends 高度 - 基于图例数量计算
+        var legendsCount = chartDataForLegend.length;
+        var legendItemHeight = isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        this.legendSvgHeight = this.TITLE_HEIGHT + 20 + legendsCount * legendItemHeight + 20;
         this.funnelWidth = this.svgWidth;
         this.funnelHeight = this.svgHeight;
         // 计算顶部和底部的宽度
         var minHeight = 15; // 最小高度
-        var funnelBottomOffset = 50;
+        var funnelBottomOffset = 15;
         var accumulatedY = 50;
         var availableHeight = this.funnelHeight - accumulatedY - funnelBottomOffset;
         var topWidth = this.funnelWidth / 1.5;
@@ -2915,15 +3704,21 @@ var FunnelChart = /** @class */ (function (_super) {
                 _this.refactoredData.push(temp);
             }
         });
-        // 创建新的SVG
+        // 创建新的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%');
         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%');
         this.total = totalValue;
         this.chartDataForLegend = chartDataForLegend;
     };
@@ -3019,12 +3814,29 @@ var FunnelChart = /** @class */ (function (_super) {
                 .attr('y', 23);
         }
         else {
+            var itemHeight_1 = this.isNarrowLayout
+                ? this.LEGEND_ITEM_HEIGHT_NARROW
+                : this.LEGEND_ITEM_HEIGHT;
             legendRect
                 .attr('x', 0)
-                .attr('y', function (d, i) { return i * 25; });
+                .attr('y', function (d, i) { return i * itemHeight_1; });
             legendText
                 .attr('x', 25)
-                .attr('y', function (d, i) { return (i * 25) + 13; });
+                .attr('y', function (d, i) { return (i * itemHeight_1) + 13; });
+        }
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
+        var legendItemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
+        var legendsCount = legendData.length;
+        var newHeight = this.TITLE_HEIGHT + 20 + 50 + legendsCount * legendItemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
         }
     };
     var _a, _b;
@@ -3092,24 +3904,25 @@ var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm._m(0)
-};
-var __vue_staticRenderFns__$4 = [
-  function () {
-    var _vm = this;
-    var _h = _vm.$createElement;
-    var _c = _vm._self._c || _h;
-    return _c("div", { staticClass: "chart-container" }, [
+  return _c(
+    "div",
+    {
+      staticClass: "chart-container funnel-chart-container",
+      class: { "narrow-layout": _vm.isNarrowLayout },
+    },
+    [
       _c("div", { staticClass: "main-chart" }),
       _vm._v(" "),
-      _c("div", { staticClass: "chart-legends" }) ])
-  } ];
+      _c("div", { staticClass: "chart-legends" }) ]
+  )
+};
+var __vue_staticRenderFns__$4 = [];
 __vue_render__$4._withStripped = true;
 
   /* style */
   var __vue_inject_styles__$4 = function (inject) {
     if (!inject) { return }
-    inject("data-v-46dee47e_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-20d706a7_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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -3145,10 +3958,16 @@ var GaugeChart = /** @class */ (function (_super) {
         _this.width = 0;
         _this.height = 0;
         _this.radius = 0;
+        _this.centerX = 0;
         _this.backgroundArc = null;
         _this.arc = null;
         _this.centerArc = null;
         _this.scale = null;
+        _this.resizeObserver = null;
+        _this.resizeTimer = null;
+        _this.isFirstCheck = true;
+        _this.lastRenderedWidth = 0;
+        _this.lastRenderedHeight = 0;
         return _this;
     }
     Object.defineProperty(GaugeChart.prototype, "minValue", {
@@ -3207,27 +4026,80 @@ var GaugeChart = /** @class */ (function (_super) {
         this.redraw();
     };
     GaugeChart.prototype.mounted = function () {
+        var _this = this;
         this.redraw();
+        // 监听容器尺寸变化，重新渲染仪表盘
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(function () {
+                // observe 时会立即触发一次，跳过首次触发
+                if (_this.isFirstCheck) {
+                    _this.isFirstCheck = false;
+                    return;
+                }
+                // 拖动过程中 SVG 通过 viewBox 自动缩放，无需逐帧重绘；
+                // 每次通知都重置尾部防抖，resize 结束后按最终尺寸重绘一次
+                if (_this.resizeTimer) {
+                    clearTimeout(_this.resizeTimer);
+                }
+                _this.resizeTimer = setTimeout(function () {
+                    _this.resizeTimer = null;
+                    _this.redrawIfResized();
+                }, 120);
+            });
+            this.resizeObserver.observe(this.$el);
+        }
     };
-    GaugeChart.prototype.redraw = function () {
+    /** 容器尺寸相对上次渲染有变化时才重绘，且 resize 重绘不播放入场动画 */
+    GaugeChart.prototype.redrawIfResized = function () {
+        var el = this.$el;
+        var rect = el ? el.getBoundingClientRect() : null;
+        if (!rect) {
+            return;
+        }
+        if (Math.abs(rect.width - this.lastRenderedWidth) <= 1
+            && Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
+            return;
+        }
+        this.beforeRedraw();
+        this.redraw(false);
+    };
+    GaugeChart.prototype.beforeDestroy = function () {
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    GaugeChart.prototype.redraw = function (animate) {
+        if (animate === void 0) { animate = true; }
         this.init();
-        this.renderGauge();
+        this.renderGauge(animate);
         this.renderData();
-        this.renderPointer();
+        this.renderPointer(animate);
     };
     GaugeChart.prototype.init = function () {
         var moChartElement = this.$el;
-        var svgWidth = moChartElement && moChartElement.clientWidth > 0
-            ? moChartElement.clientWidth : 300;
-        var svgHeight = moChartElement && moChartElement.clientHeight > 0
-            ? moChartElement.clientHeight : 300;
+        // 使用 getBoundingClientRect 获取真实尺寸（clientWidth 在频繁重绘时可能读到过期的整数值）
+        var rect = moChartElement ? moChartElement.getBoundingClientRect() : null;
+        var svgWidth = rect && rect.width > 0 ? rect.width : 300;
+        var svgHeight = rect && rect.height > 0 ? rect.height : 300;
         this.width = Math.min(svgWidth, svgHeight);
         this.height = svgHeight;
-        this.radius = this.width / 2 - 5;
+        this.radius = Math.max(0, this.width / 2 - 5);
+        // 表盘圆心取容器水平中心，半径仍按宽高较小值计算
+        this.centerX = svgWidth / 2;
+        this.lastRenderedWidth = svgWidth;
+        this.lastRenderedHeight = svgHeight;
         this.svg = select(this.$el)
             .append('svg')
-            .attr('width', this.width)
-            .attr('height', this.height);
+            .attr('viewBox', "0 0 " + svgWidth + " " + svgHeight)
+            .attr('preserveAspectRatio', 'xMidYMid meet')
+            .style('display', 'block')
+            .style('width', '100%')
+            .style('height', '100%');
         this.defineGradient();
         this.backgroundArc = arc()
             .innerRadius(this.radius)
@@ -3246,26 +4118,35 @@ var GaugeChart = /** @class */ (function (_super) {
             .range([this.minAngle, this.maxAngle])
             .domain([this.minValue, this.maxValue]);
     };
-    GaugeChart.prototype.renderGauge = function () {
+    GaugeChart.prototype.renderGauge = function (animate) {
         var _this = this;
         // background arc
         this.svg.append('path')
             .attr('class', 'mo-gauge-back-arc')
-            .attr('transform', "translate(" + this.width / 2 + ", " + this.height / 2 + ")")
+            .attr('transform', "translate(" + this.centerX + ", " + this.height / 2 + ")")
             .attr('d', this.backgroundArc);
         // arc
-        this.svg.append('path')
+        var valueArcPath = this.svg.append('path')
             .attr('class', 'mo-gauge-value-arc')
-            .attr('transform', "translate(" + this.width / 2 + ", " + this.height / 2 + ")")
-            .transition()
-            .duration(1000)
-            .attrTween('d', function () {
-            var start = _this.angleToRadian(_this.minAngle);
-            var end = _this.angleToRadian(_this.scale(_this.data.value));
-            var arc1 = { startAngle: start, endAngle: start };
-            var arc2 = { startAngle: start, endAngle: end };
-            return function (d) { return _this.arc(interpolateObject(arc1, arc2)(d)); };
-        });
+            .attr('transform', "translate(" + this.centerX + ", " + this.height / 2 + ")");
+        if (animate) {
+            valueArcPath
+                .transition()
+                .duration(1000)
+                .attrTween('d', function () {
+                var start = _this.angleToRadian(_this.minAngle);
+                var end = _this.angleToRadian(_this.scale(_this.data.value));
+                var arc1 = { startAngle: start, endAngle: start };
+                var arc2 = { startAngle: start, endAngle: end };
+                return function (d) { return _this.arc(interpolateObject(arc1, arc2)(d)); };
+            });
+        }
+        else {
+            // resize 重绘时直接渲染最终状态，不重播入场动画
+            var start = this.angleToRadian(this.minAngle);
+            var end = this.angleToRadian(this.scale(this.data.value));
+            valueArcPath.attr('d', this.arc({ startAngle: start, endAngle: end }));
+        }
         // ticks
         var pathTick = this.tickCalc();
         var ticksAngles = this.getTicksAngles();
@@ -3279,12 +4160,12 @@ var GaugeChart = /** @class */ (function (_super) {
         // center arc
         this.svg.append('path')
             .attr('class', 'mo-gauge-inner-arc')
-            .attr('transform', "translate(" + this.width / 2 + ", " + this.height / 2 + ")")
+            .attr('transform', "translate(" + this.centerX + ", " + this.height / 2 + ")")
             .attr('d', this.centerArc);
     };
     GaugeChart.prototype.renderData = function () {
         var textElement = this.svg.append('g')
-            .attr('transform', "translate(" + this.width / 2 + ", " + ((this.height / 2) + 80) + ")");
+            .attr('transform', "translate(" + this.centerX + ", " + ((this.height / 2) + 80) + ")");
         textElement.append('text')
             .text([
             ChartService.formatValue(this.data.value, '', this.decimal),
@@ -3311,8 +4192,7 @@ var GaugeChart = /** @class */ (function (_super) {
                 .style('font-size', Math.min(16, this.width * 0.05) + "px");
         }
     };
-    GaugeChart.prototype.renderPointer = function () {
-        var _this = this;
+    GaugeChart.prototype.renderPointer = function (animate) {
         var pointerHeight = this.radius - 10;
         var pointerRadius = 2.5;
         var lineData = [
@@ -3325,20 +4205,26 @@ var GaugeChart = /** @class */ (function (_super) {
         var pointerg = this.svg.append('g')
             .data([lineData])
             .attr('class', 'mo-gauge-pointer')
-            .attr('transform', "translate(" + this.width / 2 + ", " + this.height / 2 + ")");
-        pointerg.append('path')
-            .attr('d', pointerLine)
-            .attr('transform', "rotate(" + this.scale(this.minValue) + ")")
-            .transition()
-            .duration(1000)
-            .attrTween('transform', function () {
-            var start = _this.scale(_this.minValue);
-            var end = _this.scale(_this.data.value);
-            return interpolateString("rotate(" + start + ")", "rotate(" + end + ")");
-        });
+            .attr('transform', "translate(" + this.centerX + ", " + this.height / 2 + ")");
+        var startRotate = this.scale(this.minValue);
+        var endRotate = this.scale(this.data.value);
+        var pointerPath = pointerg
+            .append('path')
+            .attr('d', pointerLine);
+        if (animate) {
+            pointerPath
+                .attr('transform', "rotate(" + startRotate + ")")
+                .transition()
+                .duration(1000)
+                .attrTween('transform', function () { return interpolateString("rotate(" + startRotate + ")", "rotate(" + endRotate + ")"); });
+        }
+        else {
+            // resize 重绘时直接渲染最终角度，不重播动画
+            pointerPath.attr('transform', "rotate(" + endRotate + ")");
+        }
         this.svg.append('circle')
             .attr('class', 'mo-gauge-inner-bg-arc')
-            .attr('cx', this.width / 2)
+            .attr('cx', this.centerX)
             .attr('cy', this.height / 2)
             .attr('r', 10);
     };
@@ -3379,8 +4265,8 @@ var GaugeChart = /** @class */ (function (_super) {
             var ticksStart = _this.radius - 15;
             var y1 = _this.height / 2 + (ticksStart * Math.sin(tickAngleRad));
             var y2 = _this.height / 2 + ((ticksStart + 5) * Math.sin(tickAngleRad));
-            var x1 = _this.width / 2 + (ticksStart * Math.cos(tickAngleRad));
-            var x2 = _this.width / 2 + ((ticksStart + 5) * Math.cos(tickAngleRad));
+            var x1 = _this.centerX + (ticksStart * Math.cos(tickAngleRad));
+            var x2 = _this.centerX + ((ticksStart + 5) * Math.cos(tickAngleRad));
             var lineData = [{ x: x1, y: y1 }, { x: x2, y: y2 }];
             return line(function (d1) { return d1.x; }, function (d1) { return d1.y; })(lineData);
         };
@@ -3466,7 +4352,7 @@ __vue_render__$5._withStripped = true;
   /* style */
   var __vue_inject_styles__$5 = function (inject) {
     if (!inject) { return }
-    inject("data-v-b66fee0c_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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}\n.mo-gauge-chart {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}", map: undefined, media: undefined });
+    inject("data-v-77580b6c_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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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}\n.mo-gauge-chart {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -3548,7 +4434,7 @@ __vue_render__$6._withStripped = true;
   /* style */
   var __vue_inject_styles__$6 = function (inject) {
     if (!inject) { return }
-    inject("data-v-87bb7704_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-87bb7704_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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -3597,6 +4483,17 @@ var ScatterChart = /** @class */ (function (_super) {
         _this.additionalHeight = 0;
         _this.displayData = [];
         _this.maxDisplayCount = 20;
+        // 常量定义
+        _this.TITLE_HEIGHT = 20;
+        _this.LEGEND_ITEM_HEIGHT = 25;
+        _this.LEGEND_ITEM_HEIGHT_NARROW = 20;
+        // 布局切换阈值: 容器高宽比 >= 1.8 时使用上下布局，否则左右布局
+        _this.NARROW_ASPECT_RATIO = 1.8;
+        _this.isNarrowLayout = false;
+        _this.resizeTimer = null;
+        _this.resizeObserver = null;
+        _this.isFirstCheck = true;
+        _this.isLayoutChecking = false;
         return _this;
     }
     ScatterChart.prototype.onDataChanged = function () {
@@ -3604,7 +4501,74 @@ var ScatterChart = /** @class */ (function (_super) {
         this.redraw();
     };
     ScatterChart.prototype.mounted = function () {
-        this.redraw();
+        var _this = this;
+        window.addEventListener('resize', this.handleResize);
+        // 使用 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();
+                    });
+                }
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+        // 首次渲染
+        requestAnimationFrame(function () {
+            _this.isFirstCheck = false;
+            _this.checkLayoutAndRedraw();
+        });
+    };
+    ScatterChart.prototype.beforeDestroy = function () {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    };
+    ScatterChart.prototype.handleResize = function () {
+        var _this = this;
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(function () {
+            _this.checkLayoutAndRedraw();
+            _this.resizeTimer = null;
+        }, 200);
+    };
+    /** 检查容器高宽比，切换布局模式并重新渲染 */
+    ScatterChart.prototype.checkLayoutAndRedraw = function () {
+        var _this = this;
+        var rect = this.$el.getBoundingClientRect();
+        // 高宽比 >= 1.8 时使用上下布局（竖屏/瘦高容器）
+        var isNarrow = rect.width > 0 && rect.height > 0
+            && (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
+        var layoutChanged = isNarrow !== this.isNarrowLayout;
+        this.isNarrowLayout = isNarrow;
+        if (layoutChanged) {
+            // 布局模式切换后，等 CSS 生效再重新渲染
+            this.$nextTick(function () {
+                _this.beforeRedraw();
+                _this.redraw();
+            });
+        }
+        else {
+            this.beforeRedraw();
+            this.redraw();
+        }
     };
     ScatterChart.prototype.redraw = function () {
         this.init();
@@ -3625,29 +4589,85 @@ var ScatterChart = /** @class */ (function (_super) {
         // 清除现有的SVG
         var mainChartElement = this.$el.querySelector('.main-chart');
         var legendsElement = this.$el.querySelector('.chart-legends');
+        if (!mainChartElement) {
+            return; // 模板还未就绪，跳过渲染
+        }
         select(mainChartElement).selectAll('*').remove();
-        select(legendsElement).selectAll('*').remove();
-        this.svgWidth = mainChartElement && mainChartElement.clientWidth > 0
-            ? mainChartElement.clientWidth : 300;
-        this.svgHeight = mainChartElement && mainChartElement.clientHeight > 0
-            ? mainChartElement.clientHeight : 300;
-        this.legendSvgWidth = legendsElement && legendsElement.clientWidth > 0
-            ? legendsElement.clientWidth : 150;
-        this.legendSvgHeight = legendsElement && legendsElement.clientHeight > 0
-            ? legendsElement.clientHeight : this.svgHeight;
+        if (legendsElement) {
+            select(legendsElement).selectAll('*').remove();
+        }
+        // 使用容器布局状态
+        var isNarrowLayout = this.isNarrowLayout;
+        // 主图尺寸 - 优先使用 getBoundingClientRect 获取真实尺寸
+        var mainRect = mainChartElement.getBoundingClientRect();
+        if (mainRect.width > 0) {
+            this.svgWidth = mainRect.width;
+        }
+        else if (mainChartElement.clientWidth > 0) {
+            this.svgWidth = mainChartElement.clientWidth;
+        }
+        else {
+            this.svgWidth = 300;
+        }
+        if (mainRect.height > 0) {
+            this.svgHeight = mainRect.height;
+        }
+        else if (isNarrowLayout) {
+            this.svgHeight = 280;
+        }
+        else if (mainChartElement.clientHeight > 0) {
+            this.svgHeight = mainChartElement.clientHeight;
+        }
+        else {
+            this.svgHeight = 300;
+        }
+        // Legends 宽度 - 仅在存在 legends 容器时计算
+        if (legendsElement) {
+            var legendsRect = legendsElement.getBoundingClientRect();
+            if (legendsRect.width > 0) {
+                this.legendSvgWidth = legendsRect.width;
+            }
+            else if (legendsElement.clientWidth > 0) {
+                this.legendSvgWidth = legendsElement.clientWidth;
+            }
+            else {
+                var containerWidth = this.$el.getBoundingClientRect().width;
+                if (isNarrowLayout) {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth : 300;
+                }
+                else {
+                    this.legendSvgWidth = containerWidth > 0 ? containerWidth * 0.25 : 150;
+                }
+            }
+        }
+        // Legends 高度 - 基于图例数量计算
+        var legendsCount = this.categories.length;
+        var itemHeight = isNarrowLayout ? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
+        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;
-        // 创建新的SVG
+        // 创建新的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%')
             .append('g')
             .attr('transform', "translate(" + this.margin.left + ", " + this.margin.top + ")");
-        this.legendsSvg = select(legendsElement)
-            .append('svg')
-            .attr('width', this.legendSvgWidth)
-            .attr('height', this.legendSvgHeight);
+        if (legendsElement) {
+            this.legendsSvg = select(legendsElement)
+                .append('svg')
+                .attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
+                .attr('preserveAspectRatio', 'xMinYMin meet')
+                .style('display', 'block')
+                .style('width', '100%')
+                .style('height', '100%');
+        }
+        else {
+            this.legendsSvg = null;
+        }
         var limitedData = this.displayData.slice(-20);
         var xMaxValue = max(limitedData, function (d) { return d.values[0]; });
         var yMaxValue = max(limitedData, function (d) { return d.values[1]; });
@@ -3813,11 +4833,17 @@ var ScatterChart = /** @class */ (function (_super) {
     };
     ScatterChart.prototype.renderLabel = function () {
         var _this = this;
+        if (!this.legendsSvg) {
+            return; // 没有 legends 容器，跳过渲染
+        }
+        var itemHeight = this.isNarrowLayout
+            ? this.LEGEND_ITEM_HEIGHT_NARROW
+            : this.LEGEND_ITEM_HEIGHT;
         var labelGroup = this.legendsSvg.append('g');
         labelGroup.attr('transform', 'translate(0, 0)');
         labelGroup.append('text')
             .attr('x', 0)
-            .attr('y', 20)
+            .attr('y', this.TITLE_HEIGHT)
             .attr('class', 'mo-label-title')
             .text(ChartService.formatDomainValue(this.groupings[1].label, this.legendSvgWidth, false));
         var legends = labelGroup.selectAll('.mo-label')
@@ -3825,19 +4851,31 @@ var ScatterChart = /** @class */ (function (_super) {
             .enter()
             .append('g')
             .attr('class', 'mo-label');
+        var currentY = this.TITLE_HEIGHT + 15;
         legends.append('rect')
             .attr('width', '15')
             .attr('height', '15')
             .attr('x', 0)
-            .attr('y', function (d, i) { return 35 + i * 25; })
+            .attr('y', function (d, i) { return currentY + i * itemHeight; })
             .attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
         legends.append('text')
             .attr('x', 25)
-            .attr('y', function (d, i) { return 47 + i * 25; })
+            .attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
             .attr('class', 'mo-legend-text')
             .style('fill', this.labelColor || '')
             .text(function (d) { return ChartService
             .formatDomainValue(d.key, _this.legendSvgWidth, false); });
+        // 渲染完成后，根据实际图例数量调整 SVG viewBox
+        var legendsCount = this.categories.length;
+        var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
+        this.legendSvgHeight = newHeight;
+        var legendsElement = this.$el.querySelector('.chart-legends');
+        if (legendsElement) {
+            var legendsSvg = legendsElement.querySelector('svg');
+            if (legendsSvg) {
+                legendsSvg.setAttribute('viewBox', "0 0 " + this.legendSvgWidth + " " + newHeight);
+            }
+        }
     };
     ScatterChart.prototype.refactorGroupedData = function () {
         var pieces = [];
@@ -3915,20 +4953,36 @@ var __vue_render__$7 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _vm.groupType === "grouped" || _vm.categories.length > 0
-    ? _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _vm._m(0),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
-    : _c("div", { staticClass: "chart-container chart-having-tips" }, [
-        _c("div", { staticClass: "main-chart" }),
-        _vm._v(" "),
-        _vm.data.length > 20
-          ? _c("div", { staticClass: "chart-limit-tips" }, [
-              _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
-          : _vm._e() ])
+    ? _c(
+        "div",
+        {
+          staticClass:
+            "chart-container chart-having-tips scatter-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _vm._m(0),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
+    : _c(
+        "div",
+        {
+          staticClass:
+            "chart-container chart-having-tips scatter-chart-container",
+          class: { "narrow-layout": _vm.isNarrowLayout },
+        },
+        [
+          _c("div", { staticClass: "main-chart" }),
+          _vm._v(" "),
+          _vm.data.length > 20
+            ? _c("div", { staticClass: "chart-limit-tips" }, [
+                _vm._v("\n    " + _vm._s(_vm.CHART_LIMIT_TIPS_TEXT) + "\n  ") ])
+            : _vm._e() ]
+      )
 };
 var __vue_staticRenderFns__$7 = [
   function () {
@@ -3945,7 +4999,7 @@ __vue_render__$7._withStripped = true;
   /* style */
   var __vue_inject_styles__$7 = function (inject) {
     if (!inject) { return }
-    inject("data-v-6ee0dd74_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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-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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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 */
@@ -3985,10 +5039,58 @@ var TableChart = /** @class */ (function (_super) {
         _this.checkedImage = img$1;
         _this.uncheckedImage = img$2;
         _this.maxDisplayCount = 20;
+        _this.containerWidth = 0;
+        _this.resizeObserver = null;
+        _this.resizeFrame = 0;
+        _this.resizeTimer = null;
+        _this.isFirstCheck = true;
         return _this;
     }
     TableChart.prototype.mounted = function () {
+        var _this = this;
         this.ready = true;
+        this.containerWidth = this.getWidth();
+        // 监听容器尺寸变化，重新计算单元格宽度
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(function () {
+                // observe 时会立即触发一次，跳过首次触发
+                if (_this.isFirstCheck) {
+                    _this.isFirstCheck = false;
+                    return;
+                }
+                // rAF 合帧立即更新，拖动过程中列宽实时跟随
+                if (!_this.resizeFrame) {
+                    _this.resizeFrame = requestAnimationFrame(function () {
+                        _this.resizeFrame = 0;
+                        _this.containerWidth = _this.getWidth();
+                    });
+                }
+                // 尾部防抖兜底：快速 resize 时浏览器可能丢弃 ResizeObserver 通知，
+                // 停止后强制按最终宽度刷新一次
+                if (_this.resizeTimer) {
+                    clearTimeout(_this.resizeTimer);
+                }
+                _this.resizeTimer = setTimeout(function () {
+                    _this.resizeTimer = null;
+                    _this.containerWidth = _this.getWidth();
+                }, 150);
+            });
+            this.resizeObserver.observe(this.$el);
+        }
+    };
+    TableChart.prototype.beforeDestroy = function () {
+        if (this.resizeFrame) {
+            cancelAnimationFrame(this.resizeFrame);
+            this.resizeFrame = 0;
+        }
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     };
     TableChart.prototype.isNumber = function (index) {
         var header = this.data.headers[index];
@@ -4005,7 +5107,7 @@ var TableChart = /** @class */ (function (_super) {
         return header && header.dataType === 'boolean';
     };
     TableChart.prototype.getCellWidth = function (index) {
-        var width = this.getWidth();
+        var width = this.containerWidth > 0 ? this.containerWidth : this.getWidth();
         var cellSize = this.data.headers.length;
         var cellWidth = width / cellSize;
         if (cellWidth.toString().indexOf('.') > 0
@@ -4204,7 +5306,7 @@ __vue_render__$8._withStripped = true;
   /* style */
   var __vue_inject_styles__$8 = function (inject) {
     if (!inject) { return }
-    inject("data-v-63fba983_0", { source: "/* 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  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.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}\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}\n.chart-container .main-chart {\n  flex: 1;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.chart-container .chart-legends {\n  width: 33%;\n  height: 100%;\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}\n.no-data {\n  width: 100%;\n  height: 100%;\n  min-height: 35rem;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n}\n@media (prefers-color-scheme: dark) {\n.no-data {\n    background-color: #1c1c1e;\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
+    inject("data-v-7eaa36cd_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  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.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}\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/* 窄屏布局: 容器高宽比 >= 1.8 时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\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  flex-direction: column;\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: 1;\n  height: auto;\n  min-height: 200px;\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  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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  flex-direction: column;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n  flex: 1;\n  height: auto;\n  min-height: 200px;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n  margin-top: 15px;\n  margin-left: 30px;\n  padding-bottom: 40px;\n  width: 100%;\n  flex: 1;\n  height: auto;\n  min-height: 100px;\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}\n.no-data {\n  width: 100%;\n  height: 100%;\n  min-height: 35rem;\n  font-size: 1.4rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #fff;\n}\n@media (prefers-color-scheme: dark) {\n.no-data {\n    background-color: #1c1c1e;\n    color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */