moblor-vue 0.1.85 → 0.1.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/dist/charts.js +1 -1
- package/dist/moblor-components.esm.js +216 -160
- package/dist/moblor-components.js +1 -1
- package/dist/moblor-vue.esm.js +216 -160
- package/dist/moblor-vue.js +1 -1
- package/package.json +1 -1
|
@@ -426,6 +426,10 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
426
426
|
if (this.$el.parentElement) {
|
|
427
427
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
428
428
|
}
|
|
429
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
430
|
+
if (mainChartElement) {
|
|
431
|
+
this.resizeObserver.observe(mainChartElement);
|
|
432
|
+
}
|
|
429
433
|
}
|
|
430
434
|
// 首次渲染
|
|
431
435
|
requestAnimationFrame(function () {
|
|
@@ -462,11 +466,15 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
462
466
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
463
467
|
MoBarChart.prototype.checkLayoutAndRedraw = function () {
|
|
464
468
|
var _this = this;
|
|
469
|
+
var _a;
|
|
465
470
|
var rect = this.getLayoutSize();
|
|
466
471
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
467
472
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
468
473
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
469
|
-
|
|
474
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
475
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
476
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
477
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
470
478
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
471
479
|
return;
|
|
472
480
|
}
|
|
@@ -474,7 +482,9 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
474
482
|
if (layoutChanged) {
|
|
475
483
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
476
484
|
this.$nextTick(function () {
|
|
477
|
-
|
|
485
|
+
requestAnimationFrame(function () {
|
|
486
|
+
_this.redraw();
|
|
487
|
+
});
|
|
478
488
|
});
|
|
479
489
|
}
|
|
480
490
|
else {
|
|
@@ -551,11 +561,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
551
561
|
}
|
|
552
562
|
// Legends 宽度 - 仅在存在 legends 容器时计算
|
|
553
563
|
if (legendsElement) {
|
|
554
|
-
|
|
555
|
-
if (legendsRect.width > 0) {
|
|
556
|
-
this.legendSvgWidth = legendsRect.width;
|
|
557
|
-
}
|
|
558
|
-
else if (legendsElement.clientWidth > 0) {
|
|
564
|
+
if (legendsElement.clientWidth > 0) {
|
|
559
565
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
560
566
|
}
|
|
561
567
|
else {
|
|
@@ -575,6 +581,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
575
581
|
this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
576
582
|
this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
|
|
577
583
|
this.height = this.svgHeight - this.actualMargin.top - this.actualMargin.bottom;
|
|
584
|
+
var yTickCount = Math.max(2, Math.min(8, Math.floor(this.height / 30)));
|
|
578
585
|
select(mainChartElement).selectAll('*').remove();
|
|
579
586
|
if (legendsElement) {
|
|
580
587
|
select(legendsElement).selectAll('*').remove();
|
|
@@ -588,19 +595,16 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
588
595
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
589
596
|
.style('display', 'block')
|
|
590
597
|
.style('width', '100%')
|
|
591
|
-
.style('height',
|
|
598
|
+
.style('height', '100%');
|
|
592
599
|
var legendsSvg = null;
|
|
593
600
|
if (legendsElement) {
|
|
594
|
-
// Legends SVG: viewBox 宽度 = 容器实际宽度，确保文字截断基于真实宽度
|
|
595
601
|
legendsSvg = select(legendsElement)
|
|
596
602
|
.append('svg')
|
|
597
|
-
.attr('width',
|
|
603
|
+
.attr('width', '100%')
|
|
598
604
|
.attr('height', this.legendSvgHeight)
|
|
599
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
600
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
601
605
|
.style('display', 'block')
|
|
602
606
|
.style('width', '100%')
|
|
603
|
-
.style('height',
|
|
607
|
+
.style('height', this.legendSvgHeight + "px");
|
|
604
608
|
}
|
|
605
609
|
// 创建图表组
|
|
606
610
|
this.svg = mainSvg
|
|
@@ -624,7 +628,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
624
628
|
.range([this.height, 0])
|
|
625
629
|
.nice();
|
|
626
630
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
627
|
-
.ticks(
|
|
631
|
+
.ticks(yTickCount)
|
|
628
632
|
.tickSize(0)
|
|
629
633
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
630
634
|
// 处理分组数据
|
|
@@ -686,6 +690,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
686
690
|
.range([this.height, 0])
|
|
687
691
|
.domain([0, 1]);
|
|
688
692
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
693
|
+
.ticks(yTickCount)
|
|
689
694
|
.tickSize(0)
|
|
690
695
|
.tickFormat(function (domain) { return format('.0%')(Number(domain)); });
|
|
691
696
|
}
|
|
@@ -696,6 +701,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
696
701
|
.range([this.height, 0])
|
|
697
702
|
.nice();
|
|
698
703
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
704
|
+
.ticks(yTickCount)
|
|
699
705
|
.tickSize(0)
|
|
700
706
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
701
707
|
this.secondYAxisScale = scaleLinear()
|
|
@@ -703,6 +709,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
703
709
|
.range([this.height, 0])
|
|
704
710
|
.nice();
|
|
705
711
|
this.secondYAxis = axisRight(this.secondYAxisScale)
|
|
712
|
+
.ticks(yTickCount)
|
|
706
713
|
.tickSize(0)
|
|
707
714
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
708
715
|
this.line = line()
|
|
@@ -716,6 +723,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
716
723
|
.range([this.height, 0])
|
|
717
724
|
.nice();
|
|
718
725
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
726
|
+
.ticks(yTickCount)
|
|
719
727
|
.tickSize(0)
|
|
720
728
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
721
729
|
this.line = line()
|
|
@@ -730,6 +738,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
730
738
|
.range([this.height, 0])
|
|
731
739
|
.nice();
|
|
732
740
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
741
|
+
.ticks(yTickCount)
|
|
733
742
|
.tickSize(0)
|
|
734
743
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
735
744
|
}
|
|
@@ -850,7 +859,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
850
859
|
};
|
|
851
860
|
MoBarChart.prototype.renderSpaceLine = function () {
|
|
852
861
|
this.svg.selectAll('.mo-space-line')
|
|
853
|
-
.data(this.yAxisScale.ticks())
|
|
862
|
+
.data(this.yAxisScale.ticks(this.yAxis.tickArguments()[0]))
|
|
854
863
|
.enter()
|
|
855
864
|
.append('line')
|
|
856
865
|
.attr('class', 'mo-space-line')
|
|
@@ -1148,7 +1157,7 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
1148
1157
|
}
|
|
1149
1158
|
else {
|
|
1150
1159
|
this.labelGroup.append('text')
|
|
1151
|
-
.attr('x',
|
|
1160
|
+
.attr('x', 0)
|
|
1152
1161
|
.attr('y', this.TITLE_HEIGHT)
|
|
1153
1162
|
.attr('class', 'mo-label-title')
|
|
1154
1163
|
.text('Measure');
|
|
@@ -1171,27 +1180,26 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
1171
1180
|
legends.append('rect')
|
|
1172
1181
|
.attr('width', 15)
|
|
1173
1182
|
.attr('height', 15)
|
|
1174
|
-
.attr('x',
|
|
1183
|
+
.attr('x', 0)
|
|
1175
1184
|
.attr('y', function (d, i) { return currentY + i * itemHeight; })
|
|
1176
1185
|
.attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
|
|
1177
1186
|
// 图例文本
|
|
1178
1187
|
if (this.categories.length > 0) {
|
|
1179
1188
|
legends.append('text')
|
|
1180
|
-
.attr('x',
|
|
1189
|
+
.attr('x', 25)
|
|
1181
1190
|
.attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
|
|
1182
1191
|
.attr('class', 'mo-legend-text')
|
|
1183
1192
|
.text(function (d) { return ChartService
|
|
1184
|
-
.formatDomainValue(d, _this.legendSvgWidth
|
|
1193
|
+
.formatDomainValue(d, _this.legendSvgWidth, false); });
|
|
1185
1194
|
}
|
|
1186
1195
|
else if (!this.hasLineChart && this.aggregates.length > 1) {
|
|
1187
1196
|
legends.append('text')
|
|
1188
|
-
.attr('x',
|
|
1197
|
+
.attr('x', 25)
|
|
1189
1198
|
.attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
|
|
1190
1199
|
.attr('class', 'mo-legend-text')
|
|
1191
1200
|
.text(function (d) { return ChartService
|
|
1192
1201
|
.formatDomainValue(d.label, _this.legendSvgWidth, false); });
|
|
1193
1202
|
}
|
|
1194
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
1195
1203
|
var legendsCount = legendsData.length;
|
|
1196
1204
|
var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
1197
1205
|
this.legendSvgHeight = newHeight;
|
|
@@ -1199,7 +1207,8 @@ var MoBarChart = /** @class */ (function (_super) {
|
|
|
1199
1207
|
if (legendsElement) {
|
|
1200
1208
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
1201
1209
|
if (legendsSvg) {
|
|
1202
|
-
legendsSvg.setAttribute('
|
|
1210
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
1211
|
+
legendsSvg.style.height = newHeight + "px";
|
|
1203
1212
|
}
|
|
1204
1213
|
}
|
|
1205
1214
|
};
|
|
@@ -1436,7 +1445,7 @@ __vue_render__._withStripped = true;
|
|
|
1436
1445
|
/* style */
|
|
1437
1446
|
var __vue_inject_styles__ = function (inject) {
|
|
1438
1447
|
if (!inject) { return }
|
|
1439
|
-
inject("data-v-0e9b3dcc_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
1448
|
+
inject("data-v-34232919_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
1440
1449
|
|
|
1441
1450
|
};
|
|
1442
1451
|
/* scoped */
|
|
@@ -1542,6 +1551,10 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1542
1551
|
if (this.$el.parentElement) {
|
|
1543
1552
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
1544
1553
|
}
|
|
1554
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
1555
|
+
if (mainChartElement) {
|
|
1556
|
+
this.resizeObserver.observe(mainChartElement);
|
|
1557
|
+
}
|
|
1545
1558
|
}
|
|
1546
1559
|
// 首次渲染
|
|
1547
1560
|
requestAnimationFrame(function () {
|
|
@@ -1578,12 +1591,16 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1578
1591
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
1579
1592
|
MoBarChartHorizontal.prototype.checkLayoutAndRedraw = function () {
|
|
1580
1593
|
var _this = this;
|
|
1594
|
+
var _a;
|
|
1581
1595
|
var rect = this.getLayoutSize();
|
|
1582
1596
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
1583
1597
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
1584
1598
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
1599
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
1600
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
1601
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
1585
1602
|
// 尺寸没变化则跳过重绘，避免 ResizeObserver 死循环
|
|
1586
|
-
if (!layoutChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
1603
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
1587
1604
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
1588
1605
|
return;
|
|
1589
1606
|
}
|
|
@@ -1591,7 +1608,9 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1591
1608
|
if (layoutChanged) {
|
|
1592
1609
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
1593
1610
|
this.$nextTick(function () {
|
|
1594
|
-
|
|
1611
|
+
requestAnimationFrame(function () {
|
|
1612
|
+
_this.redraw();
|
|
1613
|
+
});
|
|
1595
1614
|
});
|
|
1596
1615
|
}
|
|
1597
1616
|
else {
|
|
@@ -1681,11 +1700,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1681
1700
|
}
|
|
1682
1701
|
// Legends 宽度 - 仅在存在 legends 容器时计算
|
|
1683
1702
|
if (legendsElement) {
|
|
1684
|
-
|
|
1685
|
-
if (legendsRect.width > 0) {
|
|
1686
|
-
this.legendSvgWidth = legendsRect.width;
|
|
1687
|
-
}
|
|
1688
|
-
else if (legendsElement.clientWidth > 0) {
|
|
1703
|
+
if (legendsElement.clientWidth > 0) {
|
|
1689
1704
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
1690
1705
|
}
|
|
1691
1706
|
else {
|
|
@@ -1705,6 +1720,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1705
1720
|
this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
1706
1721
|
this.width = this.svgWidth - this.actualMargin.left - this.actualMargin.right;
|
|
1707
1722
|
this.height = this.svgHeight - this.actualMargin.top - this.actualMargin.bottom;
|
|
1723
|
+
var xTickCount = Math.max(2, Math.min(8, Math.floor(this.width / 60)));
|
|
1708
1724
|
select(mainChartElement).selectAll('*').remove();
|
|
1709
1725
|
if (legendsElement) {
|
|
1710
1726
|
select(legendsElement).selectAll('*').remove();
|
|
@@ -1718,17 +1734,15 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1718
1734
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
1719
1735
|
.style('display', 'block')
|
|
1720
1736
|
.style('width', '100%')
|
|
1721
|
-
.style('height',
|
|
1737
|
+
.style('height', '100%');
|
|
1722
1738
|
if (legendsElement) {
|
|
1723
1739
|
this.legendsSvg = select(legendsElement)
|
|
1724
1740
|
.append('svg')
|
|
1725
|
-
.attr('width',
|
|
1741
|
+
.attr('width', '100%')
|
|
1726
1742
|
.attr('height', this.legendSvgHeight)
|
|
1727
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
1728
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
1729
1743
|
.style('display', 'block')
|
|
1730
1744
|
.style('width', '100%')
|
|
1731
|
-
.style('height',
|
|
1745
|
+
.style('height', this.legendSvgHeight + "px");
|
|
1732
1746
|
}
|
|
1733
1747
|
if (this.groupType === 'stacked100' && this.categories.length > 0) {
|
|
1734
1748
|
this.xAxisScale = scaleLinear()
|
|
@@ -1736,7 +1750,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1736
1750
|
.range([0, this.width])
|
|
1737
1751
|
.nice();
|
|
1738
1752
|
this.xAxis = axisTop(this.xAxisScale)
|
|
1739
|
-
.ticks(
|
|
1753
|
+
.ticks(xTickCount)
|
|
1740
1754
|
.tickSize(0)
|
|
1741
1755
|
.tickFormat(function (domain) { return format('.0%')(Number(domain)); });
|
|
1742
1756
|
}
|
|
@@ -1746,7 +1760,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1746
1760
|
.range([0, this.width])
|
|
1747
1761
|
.nice();
|
|
1748
1762
|
this.xAxis = axisTop(this.xAxisScale)
|
|
1749
|
-
.ticks(
|
|
1763
|
+
.ticks(xTickCount)
|
|
1750
1764
|
.tickSize(0)
|
|
1751
1765
|
.tickFormat(function (domain) { return ChartService.formatValue(domain, '', _this.decimal); });
|
|
1752
1766
|
}
|
|
@@ -1825,7 +1839,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
1825
1839
|
};
|
|
1826
1840
|
MoBarChartHorizontal.prototype.renderSpaceLine = function () {
|
|
1827
1841
|
var spaceLine = this.mainChart.selectAll('.mo-space-line')
|
|
1828
|
-
.data(this.xAxisScale.ticks());
|
|
1842
|
+
.data(this.xAxisScale.ticks(this.xAxis.tickArguments()[0]));
|
|
1829
1843
|
spaceLine.enter()
|
|
1830
1844
|
.append('line')
|
|
1831
1845
|
.attr('class', 'mo-space-line')
|
|
@@ -2012,7 +2026,7 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
2012
2026
|
? this.LEGEND_ITEM_HEIGHT_NARROW
|
|
2013
2027
|
: this.LEGEND_ITEM_HEIGHT;
|
|
2014
2028
|
this.labelGroup.append('text')
|
|
2015
|
-
.attr('x',
|
|
2029
|
+
.attr('x', 0)
|
|
2016
2030
|
.attr('y', this.TITLE_HEIGHT)
|
|
2017
2031
|
.attr('class', 'mo-label-title')
|
|
2018
2032
|
.text(ChartService.formatDomainValue(this.groupings[1].label, this.legendSvgWidth, false));
|
|
@@ -2025,16 +2039,15 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
2025
2039
|
legends.append('rect')
|
|
2026
2040
|
.attr('width', '15')
|
|
2027
2041
|
.attr('height', '15')
|
|
2028
|
-
.attr('x',
|
|
2042
|
+
.attr('x', 0)
|
|
2029
2043
|
.attr('y', function (d, i) { return currentY + i * itemHeight; })
|
|
2030
2044
|
.attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
|
|
2031
2045
|
legends.append('text')
|
|
2032
|
-
.attr('x',
|
|
2046
|
+
.attr('x', 25)
|
|
2033
2047
|
.attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
|
|
2034
2048
|
.attr('class', 'mo-legend-text')
|
|
2035
2049
|
.text(function (d) { return ChartService
|
|
2036
2050
|
.formatDomainValue(d, _this.legendSvgWidth, false); });
|
|
2037
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
2038
2051
|
var legendsCount = this.categories.length;
|
|
2039
2052
|
var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
2040
2053
|
this.legendSvgHeight = newHeight;
|
|
@@ -2042,7 +2055,8 @@ var MoBarChartHorizontal = /** @class */ (function (_super) {
|
|
|
2042
2055
|
if (legendsElement) {
|
|
2043
2056
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
2044
2057
|
if (legendsSvg) {
|
|
2045
|
-
legendsSvg.setAttribute('
|
|
2058
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
2059
|
+
legendsSvg.style.height = newHeight + "px";
|
|
2046
2060
|
}
|
|
2047
2061
|
}
|
|
2048
2062
|
};
|
|
@@ -2160,7 +2174,7 @@ __vue_render__$1._withStripped = true;
|
|
|
2160
2174
|
/* style */
|
|
2161
2175
|
var __vue_inject_styles__$1 = function (inject) {
|
|
2162
2176
|
if (!inject) { return }
|
|
2163
|
-
inject("data-v-0d5c8f23_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
2177
|
+
inject("data-v-6ce915e0_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
2164
2178
|
|
|
2165
2179
|
};
|
|
2166
2180
|
/* scoped */
|
|
@@ -2261,6 +2275,10 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2261
2275
|
if (this.$el.parentElement) {
|
|
2262
2276
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
2263
2277
|
}
|
|
2278
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
2279
|
+
if (mainChartElement) {
|
|
2280
|
+
this.resizeObserver.observe(mainChartElement);
|
|
2281
|
+
}
|
|
2264
2282
|
}
|
|
2265
2283
|
// 首次渲染
|
|
2266
2284
|
requestAnimationFrame(function () {
|
|
@@ -2297,11 +2315,15 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2297
2315
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
2298
2316
|
PieChart.prototype.checkLayoutAndRedraw = function () {
|
|
2299
2317
|
var _this = this;
|
|
2318
|
+
var _a;
|
|
2300
2319
|
var rect = this.getLayoutSize();
|
|
2301
2320
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
2302
2321
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
2303
2322
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
2304
|
-
|
|
2323
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
2324
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
2325
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
2326
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
2305
2327
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
2306
2328
|
return;
|
|
2307
2329
|
}
|
|
@@ -2309,7 +2331,9 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2309
2331
|
if (layoutChanged) {
|
|
2310
2332
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
2311
2333
|
this.$nextTick(function () {
|
|
2312
|
-
|
|
2334
|
+
requestAnimationFrame(function () {
|
|
2335
|
+
_this.redraw();
|
|
2336
|
+
});
|
|
2313
2337
|
});
|
|
2314
2338
|
}
|
|
2315
2339
|
else {
|
|
@@ -2393,11 +2417,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2393
2417
|
this.svgHeight = 300;
|
|
2394
2418
|
}
|
|
2395
2419
|
// Legends 宽度
|
|
2396
|
-
|
|
2397
|
-
if (legendsRect.width > 0) {
|
|
2398
|
-
this.legendSvgWidth = legendsRect.width;
|
|
2399
|
-
}
|
|
2400
|
-
else if (legendsElement.clientWidth > 0) {
|
|
2420
|
+
if (legendsElement.clientWidth > 0) {
|
|
2401
2421
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
2402
2422
|
}
|
|
2403
2423
|
else {
|
|
@@ -2416,7 +2436,9 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2416
2436
|
var legendItemHeight = isNarrowLayout
|
|
2417
2437
|
? this.LEGEND_ITEM_HEIGHT_NARROW : this.LEGEND_ITEM_HEIGHT;
|
|
2418
2438
|
this.legendSvgHeight = legendStartY + legendsCount * legendItemHeight + 20;
|
|
2419
|
-
|
|
2439
|
+
var titleHeight = this.aggregate ? 40 : 0;
|
|
2440
|
+
var centerY = (this.svgHeight + titleHeight) / 2;
|
|
2441
|
+
this.width = Math.min(this.svgWidth, Math.max(0, this.svgHeight - titleHeight));
|
|
2420
2442
|
this.height = this.svgHeight;
|
|
2421
2443
|
select(mainChartElement).selectAll('*').remove();
|
|
2422
2444
|
select(legendsElement).selectAll('*').remove();
|
|
@@ -2429,17 +2451,15 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2429
2451
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
2430
2452
|
.style('display', 'block')
|
|
2431
2453
|
.style('width', '100%')
|
|
2432
|
-
.style('height',
|
|
2454
|
+
.style('height', '100%');
|
|
2433
2455
|
if (legendsElement) {
|
|
2434
2456
|
this.legendsSvg = select(legendsElement)
|
|
2435
2457
|
.append('svg')
|
|
2436
|
-
.attr('width',
|
|
2458
|
+
.attr('width', '100%')
|
|
2437
2459
|
.attr('height', this.legendSvgHeight)
|
|
2438
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
2439
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
2440
2460
|
.style('display', 'block')
|
|
2441
2461
|
.style('width', '100%')
|
|
2442
|
-
.style('height',
|
|
2462
|
+
.style('height', this.legendSvgHeight + "px");
|
|
2443
2463
|
}
|
|
2444
2464
|
else {
|
|
2445
2465
|
this.legendsSvg = null;
|
|
@@ -2461,7 +2481,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2461
2481
|
var axisLabel = mainSvg.append('text')
|
|
2462
2482
|
.attr('class', 'mo-axis-label')
|
|
2463
2483
|
.attr('x', this.svgWidth / 2)
|
|
2464
|
-
.attr('y',
|
|
2484
|
+
.attr('y', centerY - this.radius - 20);
|
|
2465
2485
|
if (currency) {
|
|
2466
2486
|
axisLabel.text(ChartService
|
|
2467
2487
|
.formatDomainValue("(" + currency + ") " + this.aggregate.label, this.svgWidth, false));
|
|
@@ -2484,10 +2504,8 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2484
2504
|
this.pieLayout = pie().value(function (p) { return p.values[0]; });
|
|
2485
2505
|
var d = this.pieLayout(this.chartDataForLegend)[this.rotation.index];
|
|
2486
2506
|
this.rotation.angle = 180 - (((d.startAngle + d.endAngle) / 2) / Math.PI) * 180;
|
|
2487
|
-
// 计算向下偏移的距离
|
|
2488
|
-
var offsetY = this.aggregate ? 20 : 0;
|
|
2489
2507
|
this.arcGroup = mainSvg.append('svg:g')
|
|
2490
|
-
.attr('transform', "translate(" + this.svgWidth / 2 + ", " +
|
|
2508
|
+
.attr('transform', "translate(" + this.svgWidth / 2 + ", " + centerY + ")\n rotate(" + this.rotation.angle + ")");
|
|
2491
2509
|
this.arc = this.arcGroup
|
|
2492
2510
|
.selectAll('.arc')
|
|
2493
2511
|
.data(this.pieLayout(this.chartDataForLegend))
|
|
@@ -2495,7 +2513,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2495
2513
|
.append('g')
|
|
2496
2514
|
.attr('class', 'arc');
|
|
2497
2515
|
this.centerGroup = mainSvg.append('svg:g')
|
|
2498
|
-
.attr('transform', "translate(" + this.svgWidth / 2 + ", " +
|
|
2516
|
+
.attr('transform', "translate(" + this.svgWidth / 2 + ", " + centerY + ")");
|
|
2499
2517
|
this.labelGroup = mainSvg.append('svg:g');
|
|
2500
2518
|
this.chartDataForLegend = this.chartDataForLegend;
|
|
2501
2519
|
};
|
|
@@ -2528,7 +2546,7 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2528
2546
|
var currentY = 0;
|
|
2529
2547
|
if (this.groupBy && this.aggregate) {
|
|
2530
2548
|
this.legendsSvg.append('text')
|
|
2531
|
-
.attr('x',
|
|
2549
|
+
.attr('x', 0)
|
|
2532
2550
|
.attr('y', 40)
|
|
2533
2551
|
.attr('class', 'mo-label-title')
|
|
2534
2552
|
.text(ChartService.formatDomainValue(this.groupBy.label, this.legendSvgWidth, false));
|
|
@@ -2544,17 +2562,16 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2544
2562
|
legends.append('rect')
|
|
2545
2563
|
.attr('width', 15)
|
|
2546
2564
|
.attr('height', 15)
|
|
2547
|
-
.attr('x',
|
|
2565
|
+
.attr('x', 0)
|
|
2548
2566
|
.attr('y', function (d, i) { return currentY + i * itemHeight; })
|
|
2549
2567
|
.attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
|
|
2550
2568
|
// 图例文本
|
|
2551
2569
|
legends.append('text')
|
|
2552
|
-
.attr('x',
|
|
2570
|
+
.attr('x', 25)
|
|
2553
2571
|
.attr('y', function (d, i) { return currentY + 12 + i * itemHeight; })
|
|
2554
2572
|
.attr('class', 'mo-legend-text')
|
|
2555
2573
|
.text(function (d) { return ChartService
|
|
2556
2574
|
.formatDomainValue(d.label, _this.legendSvgWidth - 5, false); });
|
|
2557
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
2558
2575
|
var legendsCount = this.chartDataForLegend.length;
|
|
2559
2576
|
var newHeight = currentY + legendsCount * itemHeight + 20;
|
|
2560
2577
|
this.legendSvgHeight = newHeight;
|
|
@@ -2562,7 +2579,8 @@ var PieChart = /** @class */ (function (_super) {
|
|
|
2562
2579
|
if (legendsElement) {
|
|
2563
2580
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
2564
2581
|
if (legendsSvg) {
|
|
2565
|
-
legendsSvg.setAttribute('
|
|
2582
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
2583
|
+
legendsSvg.style.height = newHeight + "px";
|
|
2566
2584
|
}
|
|
2567
2585
|
}
|
|
2568
2586
|
};
|
|
@@ -2763,7 +2781,7 @@ __vue_render__$2._withStripped = true;
|
|
|
2763
2781
|
/* style */
|
|
2764
2782
|
var __vue_inject_styles__$2 = function (inject) {
|
|
2765
2783
|
if (!inject) { return }
|
|
2766
|
-
inject("data-v-47043ace_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
2784
|
+
inject("data-v-78ade326_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
2767
2785
|
|
|
2768
2786
|
};
|
|
2769
2787
|
/* scoped */
|
|
@@ -2870,6 +2888,10 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2870
2888
|
if (this.$el.parentElement) {
|
|
2871
2889
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
2872
2890
|
}
|
|
2891
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
2892
|
+
if (mainChartElement) {
|
|
2893
|
+
this.resizeObserver.observe(mainChartElement);
|
|
2894
|
+
}
|
|
2873
2895
|
}
|
|
2874
2896
|
// 首次渲染
|
|
2875
2897
|
requestAnimationFrame(function () {
|
|
@@ -2906,11 +2928,15 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2906
2928
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
2907
2929
|
LineChart.prototype.checkLayoutAndRedraw = function () {
|
|
2908
2930
|
var _this = this;
|
|
2931
|
+
var _a;
|
|
2909
2932
|
var rect = this.getLayoutSize();
|
|
2910
2933
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
2911
2934
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
2912
2935
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
2913
|
-
|
|
2936
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
2937
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
2938
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
2939
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
2914
2940
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
2915
2941
|
return;
|
|
2916
2942
|
}
|
|
@@ -2918,7 +2944,9 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2918
2944
|
if (layoutChanged) {
|
|
2919
2945
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
2920
2946
|
this.$nextTick(function () {
|
|
2921
|
-
|
|
2947
|
+
requestAnimationFrame(function () {
|
|
2948
|
+
_this.redraw();
|
|
2949
|
+
});
|
|
2922
2950
|
});
|
|
2923
2951
|
}
|
|
2924
2952
|
else {
|
|
@@ -2983,11 +3011,7 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
2983
3011
|
}
|
|
2984
3012
|
// Legends 宽度 - 仅在存在 legends 容器时计算
|
|
2985
3013
|
if (legendsElement) {
|
|
2986
|
-
|
|
2987
|
-
if (legendsRect.width > 0) {
|
|
2988
|
-
this.legendSvgWidth = legendsRect.width;
|
|
2989
|
-
}
|
|
2990
|
-
else if (legendsElement.clientWidth > 0) {
|
|
3014
|
+
if (legendsElement.clientWidth > 0) {
|
|
2991
3015
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
2992
3016
|
}
|
|
2993
3017
|
else {
|
|
@@ -3021,19 +3045,17 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3021
3045
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
3022
3046
|
.style('display', 'block')
|
|
3023
3047
|
.style('width', '100%')
|
|
3024
|
-
.style('height',
|
|
3048
|
+
.style('height', '100%')
|
|
3025
3049
|
.append('g')
|
|
3026
3050
|
.attr('transform', "translate(" + this.actualMargin.left + ", " + this.actualMargin.top + ")");
|
|
3027
3051
|
if (legendsElement) {
|
|
3028
3052
|
this.legendsSvg = select(legendsElement)
|
|
3029
3053
|
.append('svg')
|
|
3030
|
-
.attr('width',
|
|
3054
|
+
.attr('width', '100%')
|
|
3031
3055
|
.attr('height', this.legendSvgHeight)
|
|
3032
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
3033
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
3034
3056
|
.style('display', 'block')
|
|
3035
3057
|
.style('width', '100%')
|
|
3036
|
-
.style('height',
|
|
3058
|
+
.style('height', this.legendSvgHeight + "px");
|
|
3037
3059
|
}
|
|
3038
3060
|
else {
|
|
3039
3061
|
this.legendsSvg = null;
|
|
@@ -3067,6 +3089,7 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3067
3089
|
.range([this.height, 0])
|
|
3068
3090
|
.nice();
|
|
3069
3091
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
3092
|
+
.ticks(Math.max(2, Math.min(8, Math.floor(this.height / 24))))
|
|
3070
3093
|
.tickSize(0)
|
|
3071
3094
|
.tickPadding(6)
|
|
3072
3095
|
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
@@ -3192,7 +3215,7 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3192
3215
|
var _this = this;
|
|
3193
3216
|
// horizontal space line
|
|
3194
3217
|
this.mainSvg.selectAll('.mo-space-line')
|
|
3195
|
-
.data(this.yAxisScale.ticks())
|
|
3218
|
+
.data(this.yAxisScale.ticks(this.yAxis.tickArguments()[0]))
|
|
3196
3219
|
.enter()
|
|
3197
3220
|
.append('line')
|
|
3198
3221
|
.attr('class', 'mo-space-line')
|
|
@@ -3322,7 +3345,6 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3322
3345
|
.style('fill', this.labelColor || '')
|
|
3323
3346
|
.text(function (d) { return ChartService
|
|
3324
3347
|
.formatDomainValue(d.label, _this.legendSvgWidth, false); });
|
|
3325
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
3326
3348
|
this.updateLegendsSvgSize(this.aggregates.length, itemHeight);
|
|
3327
3349
|
};
|
|
3328
3350
|
LineChart.prototype.renderLabel = function () {
|
|
@@ -3351,16 +3373,14 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3351
3373
|
.attr('y', function (d, i) { return 25 + i * itemHeight; })
|
|
3352
3374
|
.attr('fill', function (d, i) { return ChartService.getColor(i, _this.colors); });
|
|
3353
3375
|
legends.append('text')
|
|
3354
|
-
.attr('x',
|
|
3376
|
+
.attr('x', 25)
|
|
3355
3377
|
.attr('y', function (d, i) { return 37 + i * itemHeight; })
|
|
3356
3378
|
.attr('class', 'mo-legend-text')
|
|
3357
3379
|
.style('fill', this.labelColor || '')
|
|
3358
3380
|
.text(function (d) { return ChartService
|
|
3359
3381
|
.formatDomainValue(d.key, _this.legendSvgWidth, false); });
|
|
3360
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
3361
3382
|
this.updateLegendsSvgSize(this.categories.length, itemHeight);
|
|
3362
3383
|
};
|
|
3363
|
-
/** 根据图例数量更新 legends SVG 的 viewBox 和高度 */
|
|
3364
3384
|
LineChart.prototype.updateLegendsSvgSize = function (legendsCount, itemHeight) {
|
|
3365
3385
|
var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
3366
3386
|
this.legendSvgHeight = newHeight;
|
|
@@ -3368,7 +3388,8 @@ var LineChart = /** @class */ (function (_super) {
|
|
|
3368
3388
|
if (legendsElement) {
|
|
3369
3389
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
3370
3390
|
if (legendsSvg) {
|
|
3371
|
-
legendsSvg.setAttribute('
|
|
3391
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
3392
|
+
legendsSvg.style.height = newHeight + "px";
|
|
3372
3393
|
}
|
|
3373
3394
|
}
|
|
3374
3395
|
};
|
|
@@ -3524,7 +3545,7 @@ __vue_render__$3._withStripped = true;
|
|
|
3524
3545
|
/* style */
|
|
3525
3546
|
var __vue_inject_styles__$3 = function (inject) {
|
|
3526
3547
|
if (!inject) { return }
|
|
3527
|
-
inject("data-v-35425756_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
3548
|
+
inject("data-v-c26c9004_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
3528
3549
|
|
|
3529
3550
|
};
|
|
3530
3551
|
/* scoped */
|
|
@@ -3610,6 +3631,10 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3610
3631
|
if (this.$el.parentElement) {
|
|
3611
3632
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
3612
3633
|
}
|
|
3634
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
3635
|
+
if (mainChartElement) {
|
|
3636
|
+
this.resizeObserver.observe(mainChartElement);
|
|
3637
|
+
}
|
|
3613
3638
|
}
|
|
3614
3639
|
// 首次渲染
|
|
3615
3640
|
requestAnimationFrame(function () {
|
|
@@ -3646,11 +3671,15 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3646
3671
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
3647
3672
|
FunnelChart.prototype.checkLayoutAndRedraw = function () {
|
|
3648
3673
|
var _this = this;
|
|
3674
|
+
var _a;
|
|
3649
3675
|
var rect = this.getLayoutSize();
|
|
3650
3676
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
3651
3677
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
3652
3678
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
3653
|
-
|
|
3679
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
3680
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
3681
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
3682
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
3654
3683
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
3655
3684
|
return;
|
|
3656
3685
|
}
|
|
@@ -3658,7 +3687,9 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3658
3687
|
if (layoutChanged) {
|
|
3659
3688
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
3660
3689
|
this.$nextTick(function () {
|
|
3661
|
-
|
|
3690
|
+
requestAnimationFrame(function () {
|
|
3691
|
+
_this.redraw();
|
|
3692
|
+
});
|
|
3662
3693
|
});
|
|
3663
3694
|
}
|
|
3664
3695
|
else {
|
|
@@ -3724,11 +3755,7 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3724
3755
|
this.svgHeight = 300;
|
|
3725
3756
|
}
|
|
3726
3757
|
// Legends 宽度
|
|
3727
|
-
|
|
3728
|
-
if (legendsRect.width > 0) {
|
|
3729
|
-
this.legendSvgWidth = legendsRect.width;
|
|
3730
|
-
}
|
|
3731
|
-
else if (legendsElement.clientWidth > 0) {
|
|
3758
|
+
if (legendsElement.clientWidth > 0) {
|
|
3732
3759
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
3733
3760
|
}
|
|
3734
3761
|
else {
|
|
@@ -3750,14 +3777,20 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3750
3777
|
// 计算顶部和底部的宽度
|
|
3751
3778
|
var minHeight = 15; // 最小高度
|
|
3752
3779
|
var funnelBottomOffset = 15;
|
|
3753
|
-
var
|
|
3754
|
-
var
|
|
3755
|
-
var
|
|
3756
|
-
var
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3780
|
+
var funnelTopOffset = 50;
|
|
3781
|
+
var accumulatedY = funnelTopOffset;
|
|
3782
|
+
var availableHeight = Math.max(0, this.funnelHeight - funnelTopOffset - funnelBottomOffset);
|
|
3783
|
+
var topWidth = Math.min(this.funnelWidth / 1.5, availableHeight * 1.2);
|
|
3784
|
+
var bottomWidth = topWidth * 0.45;
|
|
3785
|
+
var layerHeights = sortedData.map(function (d) { return Math.max((d.values[0] / totalValue) * availableHeight, minHeight); });
|
|
3786
|
+
var totalLayerHeight = layerHeights.reduce(function (sum, height) { return sum + height; }, 0);
|
|
3787
|
+
var heightScale = totalLayerHeight > 0 ? availableHeight / totalLayerHeight : 0;
|
|
3788
|
+
sortedData.forEach(function (d, index) {
|
|
3789
|
+
var currentRatio = availableHeight > 0
|
|
3790
|
+
? (accumulatedY - funnelTopOffset) / availableHeight : 0;
|
|
3791
|
+
var itemHeight = layerHeights[index] * heightScale;
|
|
3792
|
+
var nextRatio = availableHeight > 0
|
|
3793
|
+
? (accumulatedY - funnelTopOffset + itemHeight) / availableHeight : 0;
|
|
3761
3794
|
// 计算当前层的上下宽度
|
|
3762
3795
|
var currentTopWidth = topWidth - (topWidth - bottomWidth) * currentRatio;
|
|
3763
3796
|
var currentBottomWidth = topWidth - (topWidth - bottomWidth) * nextRatio;
|
|
@@ -3800,17 +3833,15 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3800
3833
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
3801
3834
|
.style('display', 'block')
|
|
3802
3835
|
.style('width', '100%')
|
|
3803
|
-
.style('height',
|
|
3836
|
+
.style('height', '100%');
|
|
3804
3837
|
if (legendsElement) {
|
|
3805
3838
|
this.legendsSvg = select(legendsElement)
|
|
3806
3839
|
.append('svg')
|
|
3807
|
-
.attr('width',
|
|
3840
|
+
.attr('width', '100%')
|
|
3808
3841
|
.attr('height', this.legendSvgHeight)
|
|
3809
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
3810
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
3811
3842
|
.style('display', 'block')
|
|
3812
3843
|
.style('width', '100%')
|
|
3813
|
-
.style('height',
|
|
3844
|
+
.style('height', this.legendSvgHeight + "px");
|
|
3814
3845
|
}
|
|
3815
3846
|
else {
|
|
3816
3847
|
this.legendsSvg = null;
|
|
@@ -3920,7 +3951,6 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3920
3951
|
.attr('x', 25)
|
|
3921
3952
|
.attr('y', function (d, i) { return (i * itemHeight_1) + 13; });
|
|
3922
3953
|
}
|
|
3923
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox 和高度
|
|
3924
3954
|
var legendItemHeight = this.isNarrowLayout
|
|
3925
3955
|
? this.LEGEND_ITEM_HEIGHT_NARROW
|
|
3926
3956
|
: this.LEGEND_ITEM_HEIGHT;
|
|
@@ -3931,7 +3961,8 @@ var FunnelChart = /** @class */ (function (_super) {
|
|
|
3931
3961
|
if (legendsElement) {
|
|
3932
3962
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
3933
3963
|
if (legendsSvg) {
|
|
3934
|
-
legendsSvg.setAttribute('
|
|
3964
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
3965
|
+
legendsSvg.style.height = newHeight + "px";
|
|
3935
3966
|
}
|
|
3936
3967
|
}
|
|
3937
3968
|
};
|
|
@@ -4018,7 +4049,7 @@ __vue_render__$4._withStripped = true;
|
|
|
4018
4049
|
/* style */
|
|
4019
4050
|
var __vue_inject_styles__$4 = function (inject) {
|
|
4020
4051
|
if (!inject) { return }
|
|
4021
|
-
inject("data-v-6a42ee76_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
4052
|
+
inject("data-v-2d8dbf2b_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
4022
4053
|
|
|
4023
4054
|
};
|
|
4024
4055
|
/* scoped */
|
|
@@ -4180,32 +4211,26 @@ var GaugeChart = /** @class */ (function (_super) {
|
|
|
4180
4211
|
var moChartElement = this.$el;
|
|
4181
4212
|
// 使用 getBoundingClientRect 获取真实尺寸（clientWidth 在频繁重绘时可能读到过期的整数值）
|
|
4182
4213
|
var rect = moChartElement ? moChartElement.getBoundingClientRect() : null;
|
|
4183
|
-
var svgWidth =
|
|
4184
|
-
var svgHeight =
|
|
4185
|
-
this.width =
|
|
4186
|
-
this.radius = Math.max(0, this.width / 2 -
|
|
4214
|
+
var svgWidth = 300;
|
|
4215
|
+
var svgHeight = 320;
|
|
4216
|
+
this.width = svgWidth;
|
|
4217
|
+
this.radius = Math.max(0, this.width / 2 - 15);
|
|
4187
4218
|
// height 取仪表盘直径，使 height/2 = 半径 + 顶部边距 = 仪表盘圆心 y
|
|
4188
4219
|
this.height = 2 * (this.radius + 5);
|
|
4189
|
-
//
|
|
4220
|
+
// 固定内部画布，表盘与文字一起按容器等比缩放
|
|
4190
4221
|
this.centerX = svgWidth / 2;
|
|
4191
|
-
this.lastRenderedWidth =
|
|
4192
|
-
this.lastRenderedHeight =
|
|
4193
|
-
// SVG viewBox 高度取实际内容高度（弧 + 文字），而非容器高度
|
|
4194
|
-
// 配合 max-height:100% 让 flex 居中在容器有多余空间时生效
|
|
4195
|
-
var maxTextY = 25;
|
|
4196
|
-
if (this.showRange) {
|
|
4197
|
-
maxTextY = this.aggregate ? 65 : 45;
|
|
4198
|
-
}
|
|
4199
|
-
else if (this.aggregate) {
|
|
4200
|
-
maxTextY = 45;
|
|
4201
|
-
}
|
|
4202
|
-
var contentHeight = Math.round(this.radius + 5 + 80 + maxTextY + 25);
|
|
4222
|
+
this.lastRenderedWidth = rect ? rect.width : 0;
|
|
4223
|
+
this.lastRenderedHeight = rect ? rect.height : 0;
|
|
4203
4224
|
this.svg = select(this.$el)
|
|
4204
4225
|
.append('svg')
|
|
4205
|
-
.attr('viewBox', "0 0 " + svgWidth + " " +
|
|
4226
|
+
.attr('viewBox', "0 0 " + svgWidth + " " + svgHeight)
|
|
4206
4227
|
.attr('preserveAspectRatio', 'xMidYMid meet')
|
|
4207
4228
|
.style('display', 'block')
|
|
4229
|
+
.style('position', 'absolute')
|
|
4230
|
+
.style('top', '0')
|
|
4231
|
+
.style('left', '0')
|
|
4208
4232
|
.style('width', '100%')
|
|
4233
|
+
.style('height', '100%')
|
|
4209
4234
|
.style('max-height', '100%');
|
|
4210
4235
|
this.defineGradient();
|
|
4211
4236
|
this.backgroundArc = arc()
|
|
@@ -4280,7 +4305,7 @@ var GaugeChart = /** @class */ (function (_super) {
|
|
|
4280
4305
|
? this.percentLabel
|
|
4281
4306
|
: '' ].join(''))
|
|
4282
4307
|
.attr('class', 'mo-gauge-value')
|
|
4283
|
-
.style('font-size', Math.min(
|
|
4308
|
+
.style('font-size', Math.min(32, this.width * 0.08) + "px");
|
|
4284
4309
|
textElement.append('text')
|
|
4285
4310
|
.attr('y', 25)
|
|
4286
4311
|
.text(this.showRange ? this.data.breakRange : '')
|
|
@@ -4296,7 +4321,7 @@ var GaugeChart = /** @class */ (function (_super) {
|
|
|
4296
4321
|
.attr('y', this.showRange ? 65 : 45)
|
|
4297
4322
|
.text(this.labelWithCurrency)
|
|
4298
4323
|
.attr('class', 'mo-axis-div-label')
|
|
4299
|
-
.style('font-size', Math.min(
|
|
4324
|
+
.style('font-size', Math.min(12, this.width * 0.04) + "px");
|
|
4300
4325
|
}
|
|
4301
4326
|
};
|
|
4302
4327
|
GaugeChart.prototype.renderPointer = function (animate) {
|
|
@@ -4459,7 +4484,7 @@ __vue_render__$5._withStripped = true;
|
|
|
4459
4484
|
/* style */
|
|
4460
4485
|
var __vue_inject_styles__$5 = function (inject) {
|
|
4461
4486
|
if (!inject) { return }
|
|
4462
|
-
inject("data-v-5af675e4_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}\n.mo-gauge-chart {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}", map: undefined, media: undefined });
|
|
4487
|
+
inject("data-v-1a92e5c1_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
4463
4488
|
|
|
4464
4489
|
};
|
|
4465
4490
|
/* scoped */
|
|
@@ -4541,7 +4566,7 @@ __vue_render__$6._withStripped = true;
|
|
|
4541
4566
|
/* style */
|
|
4542
4567
|
var __vue_inject_styles__$6 = function (inject) {
|
|
4543
4568
|
if (!inject) { return }
|
|
4544
|
-
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 box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
4569
|
+
inject("data-v-42a11a91_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
4545
4570
|
|
|
4546
4571
|
};
|
|
4547
4572
|
/* scoped */
|
|
@@ -4632,6 +4657,10 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4632
4657
|
if (this.$el.parentElement) {
|
|
4633
4658
|
this.resizeObserver.observe(this.$el.parentElement);
|
|
4634
4659
|
}
|
|
4660
|
+
var mainChartElement = this.$el.querySelector('.main-chart');
|
|
4661
|
+
if (mainChartElement) {
|
|
4662
|
+
this.resizeObserver.observe(mainChartElement);
|
|
4663
|
+
}
|
|
4635
4664
|
}
|
|
4636
4665
|
// 首次渲染
|
|
4637
4666
|
requestAnimationFrame(function () {
|
|
@@ -4668,11 +4697,15 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4668
4697
|
/** 检查容器高宽比，切换布局模式并重新渲染 */
|
|
4669
4698
|
ScatterChart.prototype.checkLayoutAndRedraw = function () {
|
|
4670
4699
|
var _this = this;
|
|
4700
|
+
var _a;
|
|
4671
4701
|
var rect = this.getLayoutSize();
|
|
4672
4702
|
var isNarrow = rect.width > 0 && rect.height > 0
|
|
4673
4703
|
&& (rect.height / rect.width) >= this.NARROW_ASPECT_RATIO;
|
|
4674
4704
|
var layoutChanged = isNarrow !== this.isNarrowLayout;
|
|
4675
|
-
|
|
4705
|
+
var mainRect = (_a = this.$el.querySelector('.main-chart')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
4706
|
+
var mainSizeChanged = mainRect && (Math.abs(mainRect.width - this.svgWidth) > 1
|
|
4707
|
+
|| Math.abs(mainRect.height - this.svgHeight) > 1);
|
|
4708
|
+
if (!layoutChanged && !mainSizeChanged && Math.abs(rect.width - this.lastRenderedWidth) <= 1
|
|
4676
4709
|
&& Math.abs(rect.height - this.lastRenderedHeight) <= 1) {
|
|
4677
4710
|
return;
|
|
4678
4711
|
}
|
|
@@ -4680,7 +4713,9 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4680
4713
|
if (layoutChanged) {
|
|
4681
4714
|
// 布局模式切换后，等 CSS 生效再重新渲染
|
|
4682
4715
|
this.$nextTick(function () {
|
|
4683
|
-
|
|
4716
|
+
requestAnimationFrame(function () {
|
|
4717
|
+
_this.redraw();
|
|
4718
|
+
});
|
|
4684
4719
|
});
|
|
4685
4720
|
}
|
|
4686
4721
|
else {
|
|
@@ -4739,11 +4774,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4739
4774
|
}
|
|
4740
4775
|
// Legends 宽度 - 仅在存在 legends 容器时计算
|
|
4741
4776
|
if (legendsElement) {
|
|
4742
|
-
|
|
4743
|
-
if (legendsRect.width > 0) {
|
|
4744
|
-
this.legendSvgWidth = legendsRect.width;
|
|
4745
|
-
}
|
|
4746
|
-
else if (legendsElement.clientWidth > 0) {
|
|
4777
|
+
if (legendsElement.clientWidth > 0) {
|
|
4747
4778
|
this.legendSvgWidth = legendsElement.clientWidth;
|
|
4748
4779
|
}
|
|
4749
4780
|
else {
|
|
@@ -4762,6 +4793,8 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4762
4793
|
this.legendSvgHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
4763
4794
|
this.width = this.svgWidth - this.margin.left - this.margin.right;
|
|
4764
4795
|
this.height = this.svgHeight - this.margin.top - this.margin.bottom;
|
|
4796
|
+
var xTickCount = Math.max(2, Math.min(8, Math.floor(this.width / 60)));
|
|
4797
|
+
var yTickCount = Math.max(2, Math.min(8, Math.floor(this.height / 30)));
|
|
4765
4798
|
select(mainChartElement).selectAll('*').remove();
|
|
4766
4799
|
if (legendsElement) {
|
|
4767
4800
|
select(legendsElement).selectAll('*').remove();
|
|
@@ -4775,19 +4808,17 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4775
4808
|
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
4776
4809
|
.style('display', 'block')
|
|
4777
4810
|
.style('width', '100%')
|
|
4778
|
-
.style('height',
|
|
4811
|
+
.style('height', '100%')
|
|
4779
4812
|
.append('g')
|
|
4780
4813
|
.attr('transform', "translate(" + this.margin.left + ", " + this.margin.top + ")");
|
|
4781
4814
|
if (legendsElement) {
|
|
4782
4815
|
this.legendsSvg = select(legendsElement)
|
|
4783
4816
|
.append('svg')
|
|
4784
|
-
.attr('width',
|
|
4817
|
+
.attr('width', '100%')
|
|
4785
4818
|
.attr('height', this.legendSvgHeight)
|
|
4786
|
-
.attr('viewBox', "0 0 " + this.legendSvgWidth + " " + this.legendSvgHeight)
|
|
4787
|
-
.attr('preserveAspectRatio', 'xMinYMin meet')
|
|
4788
4819
|
.style('display', 'block')
|
|
4789
4820
|
.style('width', '100%')
|
|
4790
|
-
.style('height',
|
|
4821
|
+
.style('height', this.legendSvgHeight + "px");
|
|
4791
4822
|
}
|
|
4792
4823
|
else {
|
|
4793
4824
|
this.legendsSvg = null;
|
|
@@ -4803,6 +4834,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4803
4834
|
.range([0, this.width])
|
|
4804
4835
|
.nice();
|
|
4805
4836
|
this.xAxis = axisBottom(this.xAxisScale)
|
|
4837
|
+
.ticks(xTickCount)
|
|
4806
4838
|
.tickSize(0)
|
|
4807
4839
|
.tickPadding(6)
|
|
4808
4840
|
.tickFormat(function (d) { return ChartService
|
|
@@ -4812,14 +4844,10 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4812
4844
|
.range([this.height, 0])
|
|
4813
4845
|
.nice();
|
|
4814
4846
|
this.yAxis = axisLeft(this.yAxisScale)
|
|
4847
|
+
.ticks(yTickCount)
|
|
4815
4848
|
.tickSize(0)
|
|
4816
4849
|
.tickPadding(6)
|
|
4817
|
-
.tickFormat(function (d,
|
|
4818
|
-
if (i % 2 === 0) {
|
|
4819
|
-
return ChartService.formatValue(d, '', _this.decimal);
|
|
4820
|
-
}
|
|
4821
|
-
return '';
|
|
4822
|
-
});
|
|
4850
|
+
.tickFormat(function (d) { return ChartService.formatValue(d, '', _this.decimal); });
|
|
4823
4851
|
this.line = line(function (d) { return _this.xAxisScale(d.values[0]); }, function (d) { return _this.yAxisScale(d.values[1]); });
|
|
4824
4852
|
};
|
|
4825
4853
|
ScatterChart.prototype.renderAxis = function () {
|
|
@@ -4887,7 +4915,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4887
4915
|
ScatterChart.prototype.renderSpaceLine = function () {
|
|
4888
4916
|
// horizontal
|
|
4889
4917
|
this.mainSvg.selectAll('.mo-space-line')
|
|
4890
|
-
.data(this.yAxisScale.ticks())
|
|
4918
|
+
.data(this.yAxisScale.ticks(this.yAxis.tickArguments()[0]))
|
|
4891
4919
|
.enter()
|
|
4892
4920
|
.append('line')
|
|
4893
4921
|
.attr('stroke', '')
|
|
@@ -4903,7 +4931,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4903
4931
|
.attr('y2', this.yAxisScale);
|
|
4904
4932
|
// vertical space line
|
|
4905
4933
|
this.mainSvg.selectAll('.mo-vertical-line')
|
|
4906
|
-
.data(this.xAxisScale.ticks())
|
|
4934
|
+
.data(this.xAxisScale.ticks(this.xAxis.tickArguments()[0]))
|
|
4907
4935
|
.enter()
|
|
4908
4936
|
.append('line')
|
|
4909
4937
|
.attr('class', function (d, i) {
|
|
@@ -4917,7 +4945,7 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4917
4945
|
.attr('y1', this.height)
|
|
4918
4946
|
.attr('y2', 0);
|
|
4919
4947
|
this.mainSvg.selectAll('.mo-axis-point')
|
|
4920
|
-
.data(this.xAxisScale.ticks())
|
|
4948
|
+
.data(this.xAxisScale.ticks(this.xAxis.tickArguments()[0]))
|
|
4921
4949
|
.enter()
|
|
4922
4950
|
.append('circle')
|
|
4923
4951
|
.attr('class', 'mo-axis-point')
|
|
@@ -4989,7 +5017,6 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4989
5017
|
.style('fill', this.labelColor || '')
|
|
4990
5018
|
.text(function (d) { return ChartService
|
|
4991
5019
|
.formatDomainValue(d.key, _this.legendSvgWidth, false); });
|
|
4992
|
-
// 渲染完成后，根据实际图例数量调整 SVG viewBox
|
|
4993
5020
|
var legendsCount = this.categories.length;
|
|
4994
5021
|
var newHeight = this.TITLE_HEIGHT + 15 + legendsCount * itemHeight + 20;
|
|
4995
5022
|
this.legendSvgHeight = newHeight;
|
|
@@ -4997,7 +5024,8 @@ var ScatterChart = /** @class */ (function (_super) {
|
|
|
4997
5024
|
if (legendsElement) {
|
|
4998
5025
|
var legendsSvg = legendsElement.querySelector('svg');
|
|
4999
5026
|
if (legendsSvg) {
|
|
5000
|
-
legendsSvg.setAttribute('
|
|
5027
|
+
legendsSvg.setAttribute('height', "" + newHeight);
|
|
5028
|
+
legendsSvg.style.height = newHeight + "px";
|
|
5001
5029
|
}
|
|
5002
5030
|
}
|
|
5003
5031
|
};
|
|
@@ -5123,7 +5151,7 @@ __vue_render__$7._withStripped = true;
|
|
|
5123
5151
|
/* style */
|
|
5124
5152
|
var __vue_inject_styles__$7 = function (inject) {
|
|
5125
5153
|
if (!inject) { return }
|
|
5126
|
-
inject("data-v-429fd9e9_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}", map: undefined, media: undefined });
|
|
5154
|
+
inject("data-v-0ee70048_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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 });
|
|
5127
5155
|
|
|
5128
5156
|
};
|
|
5129
5157
|
/* scoped */
|
|
@@ -5410,7 +5438,7 @@ __vue_render__$8._withStripped = true;
|
|
|
5410
5438
|
/* style */
|
|
5411
5439
|
var __vue_inject_styles__$8 = function (inject) {
|
|
5412
5440
|
if (!inject) { return }
|
|
5413
|
-
inject("data-v-3944c23d_0", { source: "@charset \"UTF-8\";\n/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.mo-chart {\n position: relative;\n width: 100%;\n height: 100%;\n font: 1rem sans-serif;\n text-align: center;\n}\n.mo-chart.x-scroll {\n overflow-x: scroll;\n}\n.mo-piece-active:active {\n opacity: 0.8;\n}\n.mo-inner-arc {\n fill: #000;\n opacity: 0.28;\n}\n.mo-inner-text {\n font-size: clamp(8px, 1vmin, 1.6rem);\n fill-opacity: 1;\n}\n.mo-summary-label {\n fill: #323233;\n}\n.mo-summary-value {\n fill: #00A383;\n}\n.mo-axis path {\n fill: none;\n stroke-width: 0;\n}\n.mo-space-line {\n stroke: #e4e7ed;\n stroke-width: 0.5px;\n}\n.mo-space-bold-line {\n stroke: #e4e5e9;\n stroke-width: 1px;\n}\n.mo-axis-point {\n fill: #abb4c7;\n}\n.mo-data-line {\n fill: none;\n stroke: #b8b8b8;\n stroke-width: 1.5px;\n}\n.mo-data-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #3e3f41;\n}\n.mo-axis-text {\n font-size: clamp(1rem, 1vmin, 1.2rem);\n fill: #323233;\n}\n.mo-axis-label {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-axis-div-label {\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-legend-text {\n font-size: clamp(1.2rem, 1vmin, 1.6rem);\n fill: #3e4759;\n}\n.mo-legend-percentage {\n font-size: 1.6rem;\n}\n.mo-label-inner {\n text-anchor: middle;\n font-size: clamp(1rem, 1vmin, 1.6rem);\n fill: #000;\n}\n.mo-gauge-back-arc {\n stroke-width: 6;\n stroke-linejoin: round;\n stroke: #f9f9f9;\n}\n.mo-gauge-value {\n text-anchor: middle;\n fill: #323233;\n}\n.mo-gauge-range {\n font-size: 1.6rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.4rem;\n fill: #3e4759;\n text-anchor: middle;\n}\n.mo-gauge-value-arc {\n stroke-width: 6;\n stroke: url(#MoGaugeGradient);\n stroke-linejoin: round;\n}\n.mo-gauge-inner-arc {\n fill: #6e71ca;\n}\n.mo-gauge-tick {\n stroke: #323233;\n stroke-width: 0.5;\n}\n.mo-gauge-pointer {\n fill: #323233;\n}\n\n/* line */\n.mo-line-area {\n fill: url(#MoLineAreaGradient);\n stroke-width: 0;\n opacity: 0.6;\n}\n.mo-line-point {\n fill: #00A383;\n stroke: #fff;\n stroke-width: 1px;\n}\n\n/* rotate */\n.mo-tip-container {\n width: 100%;\n height: 40px;\n line-height: 40px;\n border-radius: 18px;\n border: 1px solid #c5c7c9;\n margin: -5px 0 10px 0;\n}\n.mo-tip-pointer {\n position: relative;\n top: -40px;\n width: 100%;\n}\n.mo-triangle-mark {\n position: relative;\n top: 22px;\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid white;\n}\n.mo-triangle {\n margin-right: auto;\n margin-left: auto;\n height: 20px;\n width: 20px;\n border: 10px solid transparent;\n border-bottom: 10px solid #c5c7c9;\n}\n.mo-tip-content {\n position: relative;\n text-align: center;\n font-size: 1.4rem;\n color: #3e4759;\n}\n.mo-tip-content:before {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #c5c7c9;\n position: absolute;\n top: -20px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content:after {\n width: 0px;\n height: 0px;\n border: 10px transparent solid;\n border-bottom-color: #fff;\n position: absolute;\n top: -18px;\n left: calc(50% - 10px);\n content: \"\";\n}\n.mo-tip-content .left-nav {\n width: 15%;\n float: left;\n}\n.mo-tip-content .left-nav img {\n -webkit-transform: rotate(180deg);\n -moz-transform: rotate(180deg);\n transform: rotate(180deg);\n margin-top: 10px;\n}\n.mo-tip-content .right-nav {\n width: 15%;\n float: right;\n}\n.mo-tip-content .right-nav img {\n margin-top: 10px;\n}\n.mo-tip-content .tip {\n width: 70%;\n max-width: 70%;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n float: left;\n}\n.mo-tip-content .tip .label {\n margin-left: 10px;\n}\n.mo-metric {\n width: 100%;\n height: 100%;\n color: #323233;\n}\n.mo-metric .mo-metric-inner {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 2.4rem;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(4rem, 4rem + 2vw, 6rem);\n font-weight: 500;\n word-break: break-word;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n height: auto !important;\n margin: auto 0;\n}\n.table-chart-container .mo-table {\n height: auto;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* 适用于使用 .chart-and-legends 包裹层的图表：BarChart / BarChartHorizontal / LineChart / ScatterChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.bar-chart-container.narrow-layout .chart-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-legends,\n.line-chart-container.narrow-layout .chart-legends,\n.scatter-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* FunnelChart / PieChart 没有 .chart-and-legends 包裹层，main-chart 与 chart-legends 为直接子元素 */\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: none;\n height: auto;\n min-height: 0;\n max-height: none;\n margin: 0;\n width: 100%;\n}\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: auto;\n}\n.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.chart-limit-tips {\n padding: 0.5rem;\n width: 100%;\n min-height: 3rem;\n color: #eda762;\n font-size: clamp(1.4rem, 1vmin, 1.6rem);\n text-align: left;\n display: flex;\n align-items: center;\n}\n@media (prefers-color-scheme: dark) {\n.mo-axis-label,\n .mo-axis-text,\n .mo-axis-number,\n .mo-axis-div-label,\n .mo-summary-label,\n .mo-legend-text,\n .mo-label-title {\n fill: #f2f2f7;\n}\n.mo-table .mo-table-row {\n color: #f2f2f7;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #646466;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #2c2c2e;\n color: #f2f2f7;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #444447;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-tip-content .tip .label {\n color: #f2f2f7;\n}\n.mo-metric .mo-metric-label {\n color: #6e6e6e;\n}\n.mo-metric .mo-metric-value {\n color: #f2f2f7;\n}\n.mo-axis-div-label {\n fill: #f2f2f7;\n}\n.mo-gauge-value {\n fill: #f2f2f7;\n}\n.mo-gauge-max-value {\n fill: #f2f2f7;\n}\n.mo-gauge-tick {\n stroke: #fff;\n}\n.mo-gauge-pointer {\n fill: #fff;\n}\n.mo-gauge-inner-bg-arc {\n fill: #1c1c1e;\n}\n.mo-gauge-back-arc {\n stroke: #2c2c2e;\n}\n}\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 });
|
|
5441
|
+
inject("data-v-2958027f_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.2rem;\n fill: #323233;\n text-anchor: middle;\n}\n.mo-gauge-max-value {\n font-size: 1.2rem;\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 gap: 0.4rem;\n}\n.mo-metric .mo-metric-label, .mo-metric .mo-metric-value {\n width: 100%;\n flex-shrink: 0;\n}\n.mo-metric .mo-metric-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: clamp(2rem, 1vmin, 4rem);\n line-height: 1.4;\n}\n.mo-metric .mo-metric-value {\n padding-right: 5px;\n font-size: clamp(5rem, 1vmin, 8rem);\n line-height: 1.2;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.mo-table {\n width: 100%;\n height: 100%;\n}\n.mo-table .mo-table-row {\n color: #323233;\n position: relative;\n}\n.mo-table .mo-table-row:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 50% 100%;\n left: 0;\n bottom: 0;\n height: 1px;\n width: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:after {\n transform: scaleY(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform: scaleY(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:after {\n transform-origin: 33% 66%;\n}\n.mo-table .mo-table-row:before {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 0% 50%;\n left: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row:before {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row:before {\n transform-origin: 0% 33%;\n}\n.mo-table .mo-table-row.header-row {\n background-color: #00A383;\n color: #fff;\n font-weight: 700;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell {\n position: relative;\n}\n.mo-table .mo-table-row.header-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #39a393;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row.header-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row.total-row {\n background-color: #c8cacc;\n font-weight: 700;\n}\n.mo-table .mo-table-row .mo-table-cell {\n display: inline-block;\n box-sizing: border-box;\n font-size: 1.6rem;\n height: 30px;\n line-height: 30px;\n text-align: left;\n padding: 0 5px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n}\n.mo-table .mo-table-row .mo-table-cell:after {\n content: \"\";\n position: absolute;\n bottom: auto;\n right: auto;\n background-color: #e3e5e8;\n display: block;\n z-index: 15;\n transform-origin: 100% 50%;\n right: 0;\n top: 0;\n width: 1px;\n height: 100%;\n}\n.pixel-ratio-2 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.5);\n}\n.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform: scaleX(0.33);\n}\n.android.pixel-ratio-3 .mo-table .mo-table-row .mo-table-cell:after {\n transform-origin: 66% 33%;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.mo-table .mo-table-row .mo-table-cell .header-label.have-sort {\n padding-right: 16px;\n}\n.mo-table .mo-table-row .mo-table-cell .sort-icon {\n position: absolute;\n right: 0;\n bottom: 0;\n display: flex;\n height: 100%;\n justify-content: flex-end;\n align-items: center;\n}\n.mo-table .mo-table-row .mo-table-cell .mo-table-cell-check, .mo-table .mo-table-row .mo-table-cell .mo-table-cell-uncheck {\n font-size: 2.2rem;\n position: relative;\n top: 10px;\n}\n.mo-table .mo-table-row .mo-table-right-cell {\n text-align: right;\n}\n.mo-table .mo-table-row .mo-table-checkbox-cell {\n width: 18px;\n margin-top: 7.5px;\n}\n\n/* TableChart */\n.table-chart-container {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n overflow: hidden;\n}\n.table-chart-container .mo-table {\n height: auto;\n min-height: 0;\n max-height: 100%;\n overflow-y: auto;\n}\n.mo-label-line {\n stroke: #c8cacc;\n stroke-width: 0.5px;\n}\n.mo-label-title {\n font-size: clamp(1.4rem, 1vmin, 1.8rem);\n fill: #3e4759;\n text-anchor: start;\n}\n.mo-cover {\n width: calc(100% + 20px);\n}\n.mo-gauge-inner-bg-arc {\n fill: #fff;\n}\n.chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n}\n.chart-container.chart-having-tips {\n flex-direction: column;\n}\n.chart-container .chart-and-legends {\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n min-height: 0;\n}\n.chart-container .main-chart {\n flex: 1;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 0;\n max-height: 600px;\n margin: auto 0;\n}\n.chart-container .chart-legends {\n width: 20%;\n height: 100%;\n overflow-y: auto;\n min-height: 0;\n}\n\n/* LineChart 左右布局下图例默认占 20% 宽度（窄屏布局下由 narrow-layout 覆盖为 100%） */\n.line-chart-container .chart-legends {\n width: 20%;\n}\n.bar-chart-container .main-chart,\n.bar-chart-horizontal-container .main-chart,\n.line-chart-container .main-chart,\n.scatter-chart-container .main-chart {\n max-height: 800px;\n}\n\n/* 窄屏布局: 容器高宽比 >= 阈值时，图表与图例从左右布局变为上下布局 */\n/* BarChart / BarChartHorizontal / LineChart / ScatterChart / FunnelChart / PieChart */\n.bar-chart-container.narrow-layout,\n.bar-chart-horizontal-container.narrow-layout,\n.line-chart-container.narrow-layout,\n.scatter-chart-container.narrow-layout,\n.funnel-chart-container.narrow-layout,\n.pie-chart-container.narrow-layout {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.bar-chart-container.narrow-layout .chart-and-legends,\n.bar-chart-horizontal-container.narrow-layout .chart-and-legends,\n.line-chart-container.narrow-layout .chart-and-legends,\n.scatter-chart-container.narrow-layout .chart-and-legends,\n.funnel-chart-container.narrow-layout .chart-and-legends,\n.pie-chart-container.narrow-layout .chart-and-legends {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart,\n.bar-chart-horizontal-container.narrow-layout .main-chart,\n.line-chart-container.narrow-layout .main-chart,\n.scatter-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart,\n.pie-chart-container.narrow-layout .main-chart {\n flex: 0 1 clamp(320px, 58%, 100%);\n height: clamp(320px, 58%, 100%);\n min-height: 0;\n max-height: 800px;\n margin: 0;\n width: 100%;\n}\n.bar-chart-container.narrow-layout .main-chart > svg,\n.bar-chart-horizontal-container.narrow-layout .main-chart > svg,\n.line-chart-container.narrow-layout .main-chart > svg,\n.scatter-chart-container.narrow-layout .main-chart > svg,\n.funnel-chart-container.narrow-layout .main-chart > svg,\n.pie-chart-container.narrow-layout .main-chart > svg {\n height: 100%;\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.funnel-chart-container.narrow-layout .chart-legends,\n.pie-chart-container.narrow-layout .chart-legends {\n flex: none;\n height: auto;\n width: 100%;\n min-height: 0;\n max-height: 200px;\n overflow-y: auto;\n}\n.pie-chart-container.narrow-layout .main-chart,\n.funnel-chart-container.narrow-layout .main-chart {\n flex: 0 1 auto;\n height: auto;\n aspect-ratio: 1;\n max-height: 800px;\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:after {\n border-bottom-color: #1c1c1e;\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: 15rem;\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 });
|
|
5414
5442
|
|
|
5415
5443
|
};
|
|
5416
5444
|
/* scoped */
|
|
@@ -8096,6 +8124,16 @@ var SFDashboardChart = /** @class */ (function (_super) {
|
|
|
8096
8124
|
enumerable: false,
|
|
8097
8125
|
configurable: true
|
|
8098
8126
|
});
|
|
8127
|
+
Object.defineProperty(SFDashboardChart.prototype, "isEmptyTable", {
|
|
8128
|
+
get: function () {
|
|
8129
|
+
return ((this.chartType === 'Table' || this.chartType === 'FlexTable')
|
|
8130
|
+
&& this.refactoredData
|
|
8131
|
+
&& Array.isArray(this.refactoredData.rows)
|
|
8132
|
+
&& this.refactoredData.rows.length === 0);
|
|
8133
|
+
},
|
|
8134
|
+
enumerable: false,
|
|
8135
|
+
configurable: true
|
|
8136
|
+
});
|
|
8099
8137
|
Object.defineProperty(SFDashboardChart.prototype, "isNegative", {
|
|
8100
8138
|
get: function () {
|
|
8101
8139
|
return (this.chartType === 'Pie'
|
|
@@ -8134,7 +8172,13 @@ var SFDashboardChart = /** @class */ (function (_super) {
|
|
|
8134
8172
|
}
|
|
8135
8173
|
return createElement('div', {
|
|
8136
8174
|
staticClass: 'sf-analytics-chart',
|
|
8137
|
-
class:
|
|
8175
|
+
class: [
|
|
8176
|
+
'sf-dashboard-chart',
|
|
8177
|
+
"sf-dashboard-chart-" + (this.height || this.isEmptyTable ? 'fill' : this.sizing),
|
|
8178
|
+
"sf-" + this.chartType.toLowerCase().replace(/\s/g, '-') + "-chart" ],
|
|
8179
|
+
style: this.height ? {
|
|
8180
|
+
height: typeof this.height === 'number' ? this.height + "px" : this.height,
|
|
8181
|
+
} : undefined,
|
|
8138
8182
|
}, children);
|
|
8139
8183
|
};
|
|
8140
8184
|
SFDashboardChart.prototype.renderChart = function (createElement) {
|
|
@@ -8222,6 +8266,18 @@ var SFDashboardChart = /** @class */ (function (_super) {
|
|
|
8222
8266
|
Prop({ type: Object }),
|
|
8223
8267
|
__metadata("design:type", Object)
|
|
8224
8268
|
], SFDashboardChart.prototype, "metadata", void 0);
|
|
8269
|
+
__decorate([
|
|
8270
|
+
Prop({
|
|
8271
|
+
type: String,
|
|
8272
|
+
default: function () { return 'auto'; },
|
|
8273
|
+
validator: function (value) { return ['auto', 'fill'].includes(value); },
|
|
8274
|
+
}),
|
|
8275
|
+
__metadata("design:type", String)
|
|
8276
|
+
], SFDashboardChart.prototype, "sizing", void 0);
|
|
8277
|
+
__decorate([
|
|
8278
|
+
Prop({ type: [Number, String], default: function () { return ''; } }),
|
|
8279
|
+
__metadata("design:type", Object)
|
|
8280
|
+
], SFDashboardChart.prototype, "height", void 0);
|
|
8225
8281
|
SFDashboardChart = __decorate([
|
|
8226
8282
|
Component({
|
|
8227
8283
|
components: {
|
|
@@ -8249,7 +8305,7 @@ var __vue_script__$k = SFDashboardChart;
|
|
|
8249
8305
|
/* style */
|
|
8250
8306
|
var __vue_inject_styles__$k = function (inject) {
|
|
8251
8307
|
if (!inject) { return }
|
|
8252
|
-
inject("data-v-
|
|
8308
|
+
inject("data-v-2a592ee0_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n width: 100%;\n padding: 10px;\n background-color: #fff;\n transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart.sf-table-chart, .sf-analytics-chart.sf-flextable-chart {\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n.sf-analytics-chart .sf-analytics-text {\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}\n.sf-analytics-chart .sf-analytics-error {\n width: 100%;\n height: 100%;\n min-height: 35rem;\n font-size: 1.4rem;\n color: #d74c3b;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sf-dashboard-chart {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n min-height: 0;\n height: 35rem;\n}\n.sf-dashboard-chart.sf-metric-chart {\n height: 10rem;\n}\n.sf-dashboard-chart.sf-table-chart, .sf-dashboard-chart.sf-flextable-chart {\n height: auto;\n min-height: 15rem;\n}\n.sf-dashboard-chart.sf-dashboard-chart-fill {\n height: 100%;\n min-height: 0;\n}\n.sf-dashboard-chart.sf-dashboard-chart-auto > .table-chart-container {\n flex: none;\n height: auto;\n max-height: none;\n}\n.sf-dashboard-chart.sf-dashboard-chart-auto > .table-chart-container .mo-table {\n max-height: none;\n overflow-y: visible;\n}\n.sf-dashboard-chart.sf-richtext-chart {\n height: auto;\n}\n.sf-dashboard-chart > .mo-chart,\n.sf-dashboard-chart > .sf-analytics-text,\n.sf-dashboard-chart > .sf-analytics-error {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n.sf-dashboard-chart .no-data {\n width: 100%;\n height: 100%;\n}\n.sf-dashboard-chart.sf-dashboard-chart-fill .no-data {\n min-height: 0;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
|
|
8253
8309
|
|
|
8254
8310
|
};
|
|
8255
8311
|
/* scoped */
|
|
@@ -8449,7 +8505,7 @@ var __vue_script__$l = SFReportChart;
|
|
|
8449
8505
|
/* style */
|
|
8450
8506
|
var __vue_inject_styles__$l = function (inject) {
|
|
8451
8507
|
if (!inject) { return }
|
|
8452
|
-
inject("data-v-488a1915_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n width: 100%;\n padding: 10px;\n background-color: #fff;\n transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart .sf-analytics-text {\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}\n.sf-analytics-chart .sf-analytics-error {\n width: 100%;\n height: 100%;\n min-height: 35rem;\n font-size: 1.4rem;\n color: #d74c3b;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
|
|
8508
|
+
inject("data-v-488a1915_0", { source: "/* Colors\n========================================================================== */\n/* Typography\n========================================================================== */\n/* Border Radius\n========================================================================== */\n/* Table */\n/* Safe Area */\n.sf-analytics-chart {\n width: 100%;\n padding: 10px;\n background-color: #fff;\n transform: translate3d(0, 0, 0);\n}\n.sf-analytics-chart.sf-table-chart, .sf-analytics-chart.sf-flextable-chart {\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n.sf-analytics-chart .sf-analytics-text {\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}\n.sf-analytics-chart .sf-analytics-error {\n width: 100%;\n height: 100%;\n min-height: 35rem;\n font-size: 1.4rem;\n color: #d74c3b;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sf-dashboard-chart {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n min-height: 0;\n height: 35rem;\n}\n.sf-dashboard-chart.sf-metric-chart {\n height: 10rem;\n}\n.sf-dashboard-chart.sf-table-chart, .sf-dashboard-chart.sf-flextable-chart {\n height: auto;\n min-height: 15rem;\n}\n.sf-dashboard-chart.sf-dashboard-chart-fill {\n height: 100%;\n min-height: 0;\n}\n.sf-dashboard-chart.sf-dashboard-chart-auto > .table-chart-container {\n flex: none;\n height: auto;\n max-height: none;\n}\n.sf-dashboard-chart.sf-dashboard-chart-auto > .table-chart-container .mo-table {\n max-height: none;\n overflow-y: visible;\n}\n.sf-dashboard-chart.sf-richtext-chart {\n height: auto;\n}\n.sf-dashboard-chart > .mo-chart,\n.sf-dashboard-chart > .sf-analytics-text,\n.sf-dashboard-chart > .sf-analytics-error {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n.sf-dashboard-chart .no-data {\n width: 100%;\n height: 100%;\n}\n.sf-dashboard-chart.sf-dashboard-chart-fill .no-data {\n min-height: 0;\n}\n@media (prefers-color-scheme: dark) {\n.sf-analytics-chart {\n background-color: #1c1c1e;\n}\n.sf-analytics-chart .sf-analytics-text {\n color: #6e6e6e;\n}\n}", map: undefined, media: undefined });
|
|
8453
8509
|
|
|
8454
8510
|
};
|
|
8455
8511
|
/* scoped */
|