bi-sdk-react 0.0.77 → 0.0.79
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.
|
@@ -2,9 +2,14 @@ import {
|
|
|
2
2
|
AlignCenterOutlined,
|
|
3
3
|
AlignLeftOutlined,
|
|
4
4
|
AlignRightOutlined,
|
|
5
|
+
BarChartOutlined,
|
|
6
|
+
DashboardOutlined,
|
|
7
|
+
DotChartOutlined,
|
|
5
8
|
FontSizeOutlined,
|
|
6
9
|
FullscreenOutlined,
|
|
7
10
|
InfoCircleOutlined,
|
|
11
|
+
LineChartOutlined,
|
|
12
|
+
PieChartOutlined,
|
|
8
13
|
VerticalAlignBottomOutlined,
|
|
9
14
|
VerticalAlignMiddleOutlined,
|
|
10
15
|
VerticalAlignTopOutlined,
|
|
@@ -22,6 +27,7 @@ import {
|
|
|
22
27
|
Radio,
|
|
23
28
|
Row,
|
|
24
29
|
Select,
|
|
30
|
+
Slider,
|
|
25
31
|
Space,
|
|
26
32
|
Switch,
|
|
27
33
|
Tooltip,
|
|
@@ -41,6 +47,38 @@ import * as ts from "typescript";
|
|
|
41
47
|
import { PageContext } from "../../../context/PageContext";
|
|
42
48
|
import { IconFont } from "../../../icon/IconFont";
|
|
43
49
|
import type { PropEditorProps } from "./types";
|
|
50
|
+
import styled from "styled-components";
|
|
51
|
+
|
|
52
|
+
const ChartTypeRadio = styled(Radio.Group)`
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-wrap: wrap;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
|
|
57
|
+
.ant-radio-button-wrapper {
|
|
58
|
+
height: unset;
|
|
59
|
+
width: 68px;
|
|
60
|
+
height: 68px;
|
|
61
|
+
border-radius: 4px;
|
|
62
|
+
|
|
63
|
+
.ant-radio-button-label > .ant-flex {
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
padding: 8px;
|
|
68
|
+
gap: 4px;
|
|
69
|
+
font-size: 12px;
|
|
70
|
+
|
|
71
|
+
.anticon {
|
|
72
|
+
font-size: 28px;
|
|
73
|
+
color: var(--ant-color-primary);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&-checked .anticon {
|
|
78
|
+
color: #ffffff!important;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
`;
|
|
44
82
|
|
|
45
83
|
export type EchartsModel = { script: string; height?: number };
|
|
46
84
|
|
|
@@ -219,6 +257,8 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
219
257
|
const fullRef = useRef<any>(null);
|
|
220
258
|
const [fullScreen, setFullScreen] = useState(false);
|
|
221
259
|
|
|
260
|
+
const [selectSeries, setSelectSeries] = useState<number>(0);
|
|
261
|
+
|
|
222
262
|
const setScript = (v?: string) =>
|
|
223
263
|
onChange && onChange({ ...model, script: v || "" });
|
|
224
264
|
const triggerModel = (key: keyof EchartsModel, value: any) =>
|
|
@@ -321,6 +361,34 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
321
361
|
existingProp.name,
|
|
322
362
|
mergedObj,
|
|
323
363
|
);
|
|
364
|
+
} else if (
|
|
365
|
+
key === "series" &&
|
|
366
|
+
typeof value === "object" &&
|
|
367
|
+
value !== null &&
|
|
368
|
+
!Array.isArray(value) &&
|
|
369
|
+
ts.isArrayLiteralExpression(existingProp.initializer)
|
|
370
|
+
) {
|
|
371
|
+
// 特殊处理 series：如果现有节点是数组，且补丁是对象，则更新 selectSeries 指定的项
|
|
372
|
+
const elements = [...existingProp.initializer.elements];
|
|
373
|
+
if (selectSeries < elements.length) {
|
|
374
|
+
const existingElement = elements[selectSeries];
|
|
375
|
+
if (ts.isObjectLiteralExpression(existingElement)) {
|
|
376
|
+
elements[selectSeries] = mergeObjectAST(
|
|
377
|
+
existingElement,
|
|
378
|
+
value as any,
|
|
379
|
+
);
|
|
380
|
+
} else {
|
|
381
|
+
elements[selectSeries] = convertToAST(value);
|
|
382
|
+
}
|
|
383
|
+
} else {
|
|
384
|
+
// 如果索引超出范围，添加新元素
|
|
385
|
+
elements[selectSeries] = convertToAST(value);
|
|
386
|
+
}
|
|
387
|
+
properties[existingIndex] = ts.factory.updatePropertyAssignment(
|
|
388
|
+
existingProp,
|
|
389
|
+
existingProp.name,
|
|
390
|
+
ts.factory.createArrayLiteralExpression(elements, true),
|
|
391
|
+
);
|
|
324
392
|
} else {
|
|
325
393
|
// 否则直接替换
|
|
326
394
|
properties[existingIndex] = ts.factory.createPropertyAssignment(
|
|
@@ -727,6 +795,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
727
795
|
title: { textStyle: { color: v.toHexString() } },
|
|
728
796
|
})
|
|
729
797
|
}
|
|
798
|
+
allowClear={true}
|
|
730
799
|
/>
|
|
731
800
|
</Space.Compact>
|
|
732
801
|
<Space.Compact size="small" style={{ width: "100%" }}>
|
|
@@ -775,6 +844,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
775
844
|
title: { subtextStyle: { color: v.toHexString() } },
|
|
776
845
|
})
|
|
777
846
|
}
|
|
847
|
+
allowClear={true}
|
|
778
848
|
/>
|
|
779
849
|
</Space.Compact>
|
|
780
850
|
{positionRender("title")}
|
|
@@ -808,7 +878,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
808
878
|
optionType="button"
|
|
809
879
|
buttonStyle="solid"
|
|
810
880
|
value={parseConfig?.legend?.orient || "horizontal"}
|
|
811
|
-
onChange={(e) =>
|
|
881
|
+
onChange={(e) =>
|
|
882
|
+
transformReturn({ legend: { orient: e.target.value } })
|
|
883
|
+
}
|
|
812
884
|
options={[
|
|
813
885
|
{ label: "水平", value: "horizontal" },
|
|
814
886
|
{ label: "垂直", value: "vertical" },
|
|
@@ -825,7 +897,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
825
897
|
optionType="button"
|
|
826
898
|
buttonStyle="solid"
|
|
827
899
|
value={parseConfig?.legend?.align || "auto"}
|
|
828
|
-
onChange={(e) =>
|
|
900
|
+
onChange={(e) =>
|
|
901
|
+
transformReturn({ legend: { align: e.target.value } })
|
|
902
|
+
}
|
|
829
903
|
options={[
|
|
830
904
|
{ label: "自动", value: "auto" },
|
|
831
905
|
{ label: "左侧", value: "left" },
|
|
@@ -843,7 +917,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
843
917
|
value={parseConfig?.legend?.itemGap}
|
|
844
918
|
min={0}
|
|
845
919
|
suffix="px"
|
|
846
|
-
onChange={(v) =>
|
|
920
|
+
onChange={(v) =>
|
|
921
|
+
transformReturn({ legend: { itemGap: v } })
|
|
922
|
+
}
|
|
847
923
|
/>
|
|
848
924
|
</Form.Item>
|
|
849
925
|
<Form.Item
|
|
@@ -856,7 +932,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
856
932
|
value={parseConfig?.legend?.itemWidth}
|
|
857
933
|
min={0}
|
|
858
934
|
suffix="px"
|
|
859
|
-
onChange={(v) =>
|
|
935
|
+
onChange={(v) =>
|
|
936
|
+
transformReturn({ legend: { itemWidth: v } })
|
|
937
|
+
}
|
|
860
938
|
/>
|
|
861
939
|
</Form.Item>
|
|
862
940
|
<Form.Item
|
|
@@ -869,7 +947,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
869
947
|
value={parseConfig?.legend?.itemHeight}
|
|
870
948
|
min={0}
|
|
871
949
|
suffix="px"
|
|
872
|
-
onChange={(v) =>
|
|
950
|
+
onChange={(v) =>
|
|
951
|
+
transformReturn({ legend: { itemHeight: v } })
|
|
952
|
+
}
|
|
873
953
|
/>
|
|
874
954
|
</Form.Item>
|
|
875
955
|
<Form.Item
|
|
@@ -879,7 +959,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
879
959
|
>
|
|
880
960
|
<Input.TextArea
|
|
881
961
|
value={parseConfig?.legend?.formatter}
|
|
882
|
-
onChange={(e) =>
|
|
962
|
+
onChange={(e) =>
|
|
963
|
+
transformReturn({ legend: { formatter: e.target.value } })
|
|
964
|
+
}
|
|
883
965
|
/>
|
|
884
966
|
</Form.Item>
|
|
885
967
|
{positionRender("legend")}
|
|
@@ -893,7 +975,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
893
975
|
extra: (
|
|
894
976
|
<Switch
|
|
895
977
|
size="small"
|
|
896
|
-
value={!!parseConfig
|
|
978
|
+
value={!!parseConfig?.grid?.show}
|
|
897
979
|
onChange={(v) => transformReturn({ grid: { show: v } })}
|
|
898
980
|
/>
|
|
899
981
|
),
|
|
@@ -909,7 +991,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
909
991
|
optionType="button"
|
|
910
992
|
buttonStyle="solid"
|
|
911
993
|
value={parseConfig?.grid?.outerBoundsMode || "auto"}
|
|
912
|
-
onChange={(e) =>
|
|
994
|
+
onChange={(e) =>
|
|
995
|
+
transformReturn({
|
|
996
|
+
grid: { outerBoundsMode: e.target.value },
|
|
997
|
+
})
|
|
998
|
+
}
|
|
913
999
|
options={[
|
|
914
1000
|
{ label: "auto", value: "auto" },
|
|
915
1001
|
{ label: "none", value: "none" },
|
|
@@ -925,7 +1011,12 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
925
1011
|
<ColorPicker
|
|
926
1012
|
size="small"
|
|
927
1013
|
value={parseConfig?.grid?.backgroundColor || "auto"}
|
|
928
|
-
onChange={(e) =>
|
|
1014
|
+
onChange={(e) =>
|
|
1015
|
+
transformReturn({
|
|
1016
|
+
grid: { backgroundColor: e.toHexString() },
|
|
1017
|
+
})
|
|
1018
|
+
}
|
|
1019
|
+
allowClear={true}
|
|
929
1020
|
/>
|
|
930
1021
|
</Form.Item>
|
|
931
1022
|
<Form.Item
|
|
@@ -936,7 +1027,12 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
936
1027
|
<ColorPicker
|
|
937
1028
|
size="small"
|
|
938
1029
|
value={parseConfig?.grid?.borderColor || "auto"}
|
|
939
|
-
onChange={(e) =>
|
|
1030
|
+
onChange={(e) =>
|
|
1031
|
+
transformReturn({
|
|
1032
|
+
grid: { borderColor: e.toHexString() },
|
|
1033
|
+
})
|
|
1034
|
+
}
|
|
1035
|
+
allowClear={true}
|
|
940
1036
|
/>
|
|
941
1037
|
</Form.Item>
|
|
942
1038
|
<Form.Item
|
|
@@ -949,7 +1045,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
949
1045
|
value={parseConfig?.grid?.borderWidth}
|
|
950
1046
|
min={0}
|
|
951
1047
|
suffix="px"
|
|
952
|
-
onChange={(v) =>
|
|
1048
|
+
onChange={(v) =>
|
|
1049
|
+
transformReturn({ grid: { borderWidth: v } })
|
|
1050
|
+
}
|
|
953
1051
|
/>
|
|
954
1052
|
</Form.Item>
|
|
955
1053
|
{positionRender("grid")}
|
|
@@ -972,7 +1070,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
972
1070
|
/>
|
|
973
1071
|
),
|
|
974
1072
|
children: (
|
|
975
|
-
<Space vertical style={{width: "100%"}}>
|
|
1073
|
+
<Space vertical style={{ width: "100%" }}>
|
|
976
1074
|
<Form.Item
|
|
977
1075
|
label="坐标轴名称"
|
|
978
1076
|
labelCol={{ span: 12 }}
|
|
@@ -981,7 +1079,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
981
1079
|
<Input
|
|
982
1080
|
size="small"
|
|
983
1081
|
value={parseConfig?.xAxis?.name || ""}
|
|
984
|
-
onChange={(e) =>
|
|
1082
|
+
onChange={(e) =>
|
|
1083
|
+
transformReturn({ xAxis: { name: e.target.value } })
|
|
1084
|
+
}
|
|
985
1085
|
/>
|
|
986
1086
|
</Form.Item>
|
|
987
1087
|
<Form.Item
|
|
@@ -994,7 +1094,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
994
1094
|
optionType="button"
|
|
995
1095
|
buttonStyle="solid"
|
|
996
1096
|
value={parseConfig?.xAxis?.position || "auto"}
|
|
997
|
-
onChange={(e) =>
|
|
1097
|
+
onChange={(e) =>
|
|
1098
|
+
transformReturn({ xAxis: { position: e.target.value } })
|
|
1099
|
+
}
|
|
998
1100
|
options={[
|
|
999
1101
|
{ label: "top", value: "top" },
|
|
1000
1102
|
{ label: "bottom", value: "bottom" },
|
|
@@ -1011,7 +1113,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1011
1113
|
optionType="button"
|
|
1012
1114
|
buttonStyle="solid"
|
|
1013
1115
|
value={parseConfig?.xAxis?.type || "category"}
|
|
1014
|
-
onChange={(e) =>
|
|
1116
|
+
onChange={(e) =>
|
|
1117
|
+
transformReturn({ xAxis: { type: e.target.value } })
|
|
1118
|
+
}
|
|
1015
1119
|
options={[
|
|
1016
1120
|
{ label: "类目轴", value: "category" },
|
|
1017
1121
|
{ label: "数值轴", value: "value" },
|
|
@@ -1055,7 +1159,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1055
1159
|
size="small"
|
|
1056
1160
|
value={parseConfig?.xAxis?.nameRotate || 0}
|
|
1057
1161
|
min={0}
|
|
1058
|
-
onChange={(v) =>
|
|
1162
|
+
onChange={(v) =>
|
|
1163
|
+
transformReturn({ xAxis: { nameRotate: v } })
|
|
1164
|
+
}
|
|
1059
1165
|
/>
|
|
1060
1166
|
</Form.Item>
|
|
1061
1167
|
<Form.Item
|
|
@@ -1091,7 +1197,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1091
1197
|
size="small"
|
|
1092
1198
|
value={parseConfig?.xAxis?.splitNumber || 5}
|
|
1093
1199
|
min={0}
|
|
1094
|
-
onChange={(v) =>
|
|
1200
|
+
onChange={(v) =>
|
|
1201
|
+
transformReturn({ xAxis: { splitNumber: v } })
|
|
1202
|
+
}
|
|
1095
1203
|
/>
|
|
1096
1204
|
</Form.Item>
|
|
1097
1205
|
<Form.Item
|
|
@@ -1103,7 +1211,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1103
1211
|
size="small"
|
|
1104
1212
|
value={parseConfig?.xAxis?.startValue}
|
|
1105
1213
|
min={0}
|
|
1106
|
-
onChange={(v) =>
|
|
1214
|
+
onChange={(v) =>
|
|
1215
|
+
transformReturn({ xAxis: { startValue: v } })
|
|
1216
|
+
}
|
|
1107
1217
|
/>
|
|
1108
1218
|
</Form.Item>
|
|
1109
1219
|
</Space>
|
|
@@ -1125,7 +1235,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1125
1235
|
/>
|
|
1126
1236
|
),
|
|
1127
1237
|
children: (
|
|
1128
|
-
<Space vertical style={{width: "100%"}}>
|
|
1238
|
+
<Space vertical style={{ width: "100%" }}>
|
|
1129
1239
|
<Form.Item
|
|
1130
1240
|
label="坐标轴名称"
|
|
1131
1241
|
labelCol={{ span: 12 }}
|
|
@@ -1134,7 +1244,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1134
1244
|
<Input
|
|
1135
1245
|
size="small"
|
|
1136
1246
|
value={parseConfig?.yAxis?.name || ""}
|
|
1137
|
-
onChange={(e) =>
|
|
1247
|
+
onChange={(e) =>
|
|
1248
|
+
transformReturn({ yAxis: { name: e.target.value } })
|
|
1249
|
+
}
|
|
1138
1250
|
/>
|
|
1139
1251
|
</Form.Item>
|
|
1140
1252
|
<Form.Item
|
|
@@ -1147,7 +1259,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1147
1259
|
optionType="button"
|
|
1148
1260
|
buttonStyle="solid"
|
|
1149
1261
|
value={parseConfig?.yAxis?.position || "auto"}
|
|
1150
|
-
onChange={(e) =>
|
|
1262
|
+
onChange={(e) =>
|
|
1263
|
+
transformReturn({ yAxis: { position: e.target.value } })
|
|
1264
|
+
}
|
|
1151
1265
|
options={[
|
|
1152
1266
|
{ label: "left", value: "left" },
|
|
1153
1267
|
{ label: "right", value: "right" },
|
|
@@ -1164,7 +1278,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1164
1278
|
optionType="button"
|
|
1165
1279
|
buttonStyle="solid"
|
|
1166
1280
|
value={parseConfig?.yAxis?.type || "category"}
|
|
1167
|
-
onChange={(e) =>
|
|
1281
|
+
onChange={(e) =>
|
|
1282
|
+
transformReturn({ yAxis: { type: e.target.value } })
|
|
1283
|
+
}
|
|
1168
1284
|
options={[
|
|
1169
1285
|
{ label: "类目轴", value: "category" },
|
|
1170
1286
|
{ label: "数值轴", value: "value" },
|
|
@@ -1208,7 +1324,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1208
1324
|
size="small"
|
|
1209
1325
|
value={parseConfig?.yAxis?.nameRotate || 0}
|
|
1210
1326
|
min={0}
|
|
1211
|
-
onChange={(v) =>
|
|
1327
|
+
onChange={(v) =>
|
|
1328
|
+
transformReturn({ yAxis: { nameRotate: v } })
|
|
1329
|
+
}
|
|
1212
1330
|
/>
|
|
1213
1331
|
</Form.Item>
|
|
1214
1332
|
<Form.Item
|
|
@@ -1244,7 +1362,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1244
1362
|
size="small"
|
|
1245
1363
|
value={parseConfig?.yAxis?.splitNumber || 5}
|
|
1246
1364
|
min={0}
|
|
1247
|
-
onChange={(v) =>
|
|
1365
|
+
onChange={(v) =>
|
|
1366
|
+
transformReturn({ yAxis: { splitNumber: v } })
|
|
1367
|
+
}
|
|
1248
1368
|
/>
|
|
1249
1369
|
</Form.Item>
|
|
1250
1370
|
<Form.Item
|
|
@@ -1256,7 +1376,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1256
1376
|
size="small"
|
|
1257
1377
|
value={parseConfig?.yAxis?.startValue}
|
|
1258
1378
|
min={0}
|
|
1259
|
-
onChange={(v) =>
|
|
1379
|
+
onChange={(v) =>
|
|
1380
|
+
transformReturn({ yAxis: { startValue: v } })
|
|
1381
|
+
}
|
|
1260
1382
|
/>
|
|
1261
1383
|
</Form.Item>
|
|
1262
1384
|
</Space>
|
|
@@ -1278,7 +1400,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1278
1400
|
/>
|
|
1279
1401
|
),
|
|
1280
1402
|
children: (
|
|
1281
|
-
<Space vertical style={{width: "100%"}}>
|
|
1403
|
+
<Space vertical style={{ width: "100%" }}>
|
|
1282
1404
|
<Form.Item
|
|
1283
1405
|
label="触发类型"
|
|
1284
1406
|
labelCol={{ span: 6 }}
|
|
@@ -1289,7 +1411,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1289
1411
|
optionType="button"
|
|
1290
1412
|
buttonStyle="solid"
|
|
1291
1413
|
value={parseConfig?.tooltip?.trigger || "item"}
|
|
1292
|
-
onChange={(e) =>
|
|
1414
|
+
onChange={(e) =>
|
|
1415
|
+
transformReturn({ tooltip: { trigger: e.target.value } })
|
|
1416
|
+
}
|
|
1293
1417
|
options={[
|
|
1294
1418
|
{ label: "item", value: "item" },
|
|
1295
1419
|
{ label: "axis", value: "axis" },
|
|
@@ -1307,7 +1431,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1307
1431
|
optionType="button"
|
|
1308
1432
|
buttonStyle="solid"
|
|
1309
1433
|
value={parseConfig?.tooltip?.triggerOn || "item"}
|
|
1310
|
-
onChange={(e) =>
|
|
1434
|
+
onChange={(e) =>
|
|
1435
|
+
transformReturn({
|
|
1436
|
+
tooltip: { triggerOn: e.target.value },
|
|
1437
|
+
})
|
|
1438
|
+
}
|
|
1311
1439
|
options={[
|
|
1312
1440
|
{ label: "移动", value: "mousemove" },
|
|
1313
1441
|
{ label: "点击", value: "click" },
|
|
@@ -1324,7 +1452,12 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1324
1452
|
<ColorPicker
|
|
1325
1453
|
size="small"
|
|
1326
1454
|
value={parseConfig?.tooltip?.backgroundColor}
|
|
1327
|
-
onChange={(v) =>
|
|
1455
|
+
onChange={(v) =>
|
|
1456
|
+
transformReturn({
|
|
1457
|
+
tooltip: { backgroundColor: v.toHexString() },
|
|
1458
|
+
})
|
|
1459
|
+
}
|
|
1460
|
+
allowClear={true}
|
|
1328
1461
|
/>
|
|
1329
1462
|
</Form.Item>
|
|
1330
1463
|
<Form.Item
|
|
@@ -1335,7 +1468,12 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1335
1468
|
<ColorPicker
|
|
1336
1469
|
size="small"
|
|
1337
1470
|
value={parseConfig?.tooltip?.borderColor}
|
|
1338
|
-
onChange={(v) =>
|
|
1471
|
+
onChange={(v) =>
|
|
1472
|
+
transformReturn({
|
|
1473
|
+
tooltip: { borderColor: v.toHexString() },
|
|
1474
|
+
})
|
|
1475
|
+
}
|
|
1476
|
+
allowClear={true}
|
|
1339
1477
|
/>
|
|
1340
1478
|
</Form.Item>
|
|
1341
1479
|
<Form.Item
|
|
@@ -1348,7 +1486,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1348
1486
|
value={parseConfig?.tooltip?.borderWidth || 0}
|
|
1349
1487
|
min={0}
|
|
1350
1488
|
suffix="px"
|
|
1351
|
-
onChange={(v) =>
|
|
1489
|
+
onChange={(v) =>
|
|
1490
|
+
transformReturn({ tooltip: { borderWidth: v } })
|
|
1491
|
+
}
|
|
1352
1492
|
/>
|
|
1353
1493
|
</Form.Item>
|
|
1354
1494
|
<Form.Item
|
|
@@ -1361,7 +1501,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1361
1501
|
value={parseConfig?.tooltip?.padding || 5}
|
|
1362
1502
|
min={0}
|
|
1363
1503
|
suffix="px"
|
|
1364
|
-
onChange={(v) =>
|
|
1504
|
+
onChange={(v) =>
|
|
1505
|
+
transformReturn({ tooltip: { padding: v } })
|
|
1506
|
+
}
|
|
1365
1507
|
/>
|
|
1366
1508
|
</Form.Item>
|
|
1367
1509
|
<Form.Item
|
|
@@ -1381,12 +1523,656 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1381
1523
|
>
|
|
1382
1524
|
<Input.TextArea
|
|
1383
1525
|
value={parseConfig?.tooltip?.formatter}
|
|
1384
|
-
onChange={(e) =>
|
|
1526
|
+
onChange={(e) =>
|
|
1527
|
+
transformReturn({
|
|
1528
|
+
tooltip: { formatter: e.target.value },
|
|
1529
|
+
})
|
|
1530
|
+
}
|
|
1385
1531
|
/>
|
|
1386
1532
|
</Form.Item>
|
|
1387
1533
|
</Space>
|
|
1388
1534
|
),
|
|
1389
1535
|
},
|
|
1536
|
+
{
|
|
1537
|
+
key: "series",
|
|
1538
|
+
label: "系列",
|
|
1539
|
+
collapsible: "icon",
|
|
1540
|
+
extra: (
|
|
1541
|
+
<Select
|
|
1542
|
+
size="small"
|
|
1543
|
+
options={(parseConfig?.series || []).map(
|
|
1544
|
+
(item: any, index: number) => ({
|
|
1545
|
+
label: item.name || `系列 ${index + 1}`,
|
|
1546
|
+
value: index,
|
|
1547
|
+
}),
|
|
1548
|
+
)}
|
|
1549
|
+
value={selectSeries}
|
|
1550
|
+
onChange={(v) => setSelectSeries(v)}
|
|
1551
|
+
style={{ width: 120 }}
|
|
1552
|
+
/>
|
|
1553
|
+
),
|
|
1554
|
+
children: (
|
|
1555
|
+
<Space vertical style={{ width: "100%" }}>
|
|
1556
|
+
<ChartTypeRadio
|
|
1557
|
+
size="small"
|
|
1558
|
+
optionType="button"
|
|
1559
|
+
buttonStyle="solid"
|
|
1560
|
+
value={parseConfig?.series?.[selectSeries]?.type || "line"}
|
|
1561
|
+
onChange={(e) =>
|
|
1562
|
+
transformReturn({ series: { type: e.target.value } })
|
|
1563
|
+
}
|
|
1564
|
+
options={[
|
|
1565
|
+
{
|
|
1566
|
+
label: (
|
|
1567
|
+
<Flex>
|
|
1568
|
+
<IconFont type="icon-chart-pie" />
|
|
1569
|
+
饼图
|
|
1570
|
+
</Flex>
|
|
1571
|
+
),
|
|
1572
|
+
value: "pie",
|
|
1573
|
+
},
|
|
1574
|
+
{
|
|
1575
|
+
label: (
|
|
1576
|
+
<Flex>
|
|
1577
|
+
<IconFont type="icon-chart-line" />
|
|
1578
|
+
折线图
|
|
1579
|
+
</Flex>
|
|
1580
|
+
),
|
|
1581
|
+
value: "line",
|
|
1582
|
+
},
|
|
1583
|
+
{
|
|
1584
|
+
label: (
|
|
1585
|
+
<Flex>
|
|
1586
|
+
<IconFont type="icon-chart-bar" />
|
|
1587
|
+
柱状图
|
|
1588
|
+
</Flex>
|
|
1589
|
+
),
|
|
1590
|
+
value: "bar",
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
label: (
|
|
1594
|
+
<Flex>
|
|
1595
|
+
<IconFont type="icon-chart-scatter" />
|
|
1596
|
+
散点图
|
|
1597
|
+
</Flex>
|
|
1598
|
+
),
|
|
1599
|
+
value: "scatter",
|
|
1600
|
+
},
|
|
1601
|
+
{
|
|
1602
|
+
label: (
|
|
1603
|
+
<Flex>
|
|
1604
|
+
<IconFont type="icon-chart-radar" />
|
|
1605
|
+
雷达图
|
|
1606
|
+
</Flex>
|
|
1607
|
+
),
|
|
1608
|
+
value: "radar",
|
|
1609
|
+
},
|
|
1610
|
+
{
|
|
1611
|
+
label: (
|
|
1612
|
+
<Flex>
|
|
1613
|
+
<IconFont type="icon-map" />
|
|
1614
|
+
地图
|
|
1615
|
+
</Flex>
|
|
1616
|
+
),
|
|
1617
|
+
value: "map",
|
|
1618
|
+
},
|
|
1619
|
+
{
|
|
1620
|
+
label: (
|
|
1621
|
+
<Flex>
|
|
1622
|
+
<IconFont type="icon-chart-gauge" />
|
|
1623
|
+
仪表盘
|
|
1624
|
+
</Flex>
|
|
1625
|
+
),
|
|
1626
|
+
value: "gauge",
|
|
1627
|
+
},
|
|
1628
|
+
{
|
|
1629
|
+
label: (
|
|
1630
|
+
<Flex>
|
|
1631
|
+
<IconFont type="icon-chart-funnel" />
|
|
1632
|
+
漏斗图
|
|
1633
|
+
</Flex>
|
|
1634
|
+
),
|
|
1635
|
+
value: "funnel",
|
|
1636
|
+
},
|
|
1637
|
+
{
|
|
1638
|
+
label: (
|
|
1639
|
+
<Flex>
|
|
1640
|
+
<IconFont type="icon-chart-treemap" />
|
|
1641
|
+
treemap
|
|
1642
|
+
</Flex>
|
|
1643
|
+
),
|
|
1644
|
+
value: "treemap",
|
|
1645
|
+
},
|
|
1646
|
+
{
|
|
1647
|
+
label: (
|
|
1648
|
+
<Flex>
|
|
1649
|
+
<IconFont type="icon-chart-sunburst" />
|
|
1650
|
+
旭日图
|
|
1651
|
+
</Flex>
|
|
1652
|
+
),
|
|
1653
|
+
value: "sunburst",
|
|
1654
|
+
},
|
|
1655
|
+
{
|
|
1656
|
+
label: (
|
|
1657
|
+
<Flex>
|
|
1658
|
+
<IconFont type="icon-chart-boxplot" />
|
|
1659
|
+
箱线图
|
|
1660
|
+
</Flex>
|
|
1661
|
+
),
|
|
1662
|
+
value: "boxplot",
|
|
1663
|
+
},
|
|
1664
|
+
{
|
|
1665
|
+
label: (
|
|
1666
|
+
<Flex>
|
|
1667
|
+
<IconFont type="icon-chart-candlestick" />
|
|
1668
|
+
K线图
|
|
1669
|
+
</Flex>
|
|
1670
|
+
),
|
|
1671
|
+
value: "candlestick",
|
|
1672
|
+
},
|
|
1673
|
+
{
|
|
1674
|
+
label: (
|
|
1675
|
+
<Flex>
|
|
1676
|
+
<IconFont type="icon-chart-heatmap" />
|
|
1677
|
+
热力图
|
|
1678
|
+
</Flex>
|
|
1679
|
+
),
|
|
1680
|
+
value: "heatmap",
|
|
1681
|
+
},
|
|
1682
|
+
{
|
|
1683
|
+
label: (
|
|
1684
|
+
<Flex>
|
|
1685
|
+
<IconFont type="icon-chart-sankey" />
|
|
1686
|
+
桑基图
|
|
1687
|
+
</Flex>
|
|
1688
|
+
),
|
|
1689
|
+
value: "sankey",
|
|
1690
|
+
},
|
|
1691
|
+
{
|
|
1692
|
+
label: (
|
|
1693
|
+
<Flex>
|
|
1694
|
+
<IconFont type="icon-chart-theme-river" />
|
|
1695
|
+
河流图
|
|
1696
|
+
</Flex>
|
|
1697
|
+
),
|
|
1698
|
+
value: "themeRiver",
|
|
1699
|
+
},
|
|
1700
|
+
{
|
|
1701
|
+
label: (
|
|
1702
|
+
<Flex>
|
|
1703
|
+
<IconFont type="icon-chart-chord" />
|
|
1704
|
+
和弦图
|
|
1705
|
+
</Flex>
|
|
1706
|
+
),
|
|
1707
|
+
value: "chord",
|
|
1708
|
+
},
|
|
1709
|
+
]}
|
|
1710
|
+
/>
|
|
1711
|
+
<Form.Item
|
|
1712
|
+
label="系列名称"
|
|
1713
|
+
labelCol={{ span: 6 }}
|
|
1714
|
+
wrapperCol={{ span: 18 }}
|
|
1715
|
+
>
|
|
1716
|
+
<Input
|
|
1717
|
+
size="small"
|
|
1718
|
+
placeholder="请输入系列名称"
|
|
1719
|
+
value={parseConfig?.series?.[selectSeries]?.name || ""}
|
|
1720
|
+
onChange={(e) =>
|
|
1721
|
+
transformReturn({ series: { name: e.target.value } })
|
|
1722
|
+
}
|
|
1723
|
+
style={{ width: 120 }}
|
|
1724
|
+
/>
|
|
1725
|
+
</Form.Item>
|
|
1726
|
+
{["line", "bar"].includes(
|
|
1727
|
+
parseConfig?.series?.[selectSeries]?.type || "",
|
|
1728
|
+
) && (
|
|
1729
|
+
<>
|
|
1730
|
+
<Form.Item
|
|
1731
|
+
label="堆叠组名"
|
|
1732
|
+
labelCol={{ span: 6 }}
|
|
1733
|
+
wrapperCol={{ span: 18 }}
|
|
1734
|
+
>
|
|
1735
|
+
<Input
|
|
1736
|
+
size="small"
|
|
1737
|
+
placeholder="请输入堆叠组名"
|
|
1738
|
+
value={parseConfig?.series?.[selectSeries]?.stack || ""}
|
|
1739
|
+
onChange={(e) =>
|
|
1740
|
+
transformReturn({ series: { stack: e.target.value } })
|
|
1741
|
+
}
|
|
1742
|
+
style={{ width: 120 }}
|
|
1743
|
+
/>
|
|
1744
|
+
</Form.Item>
|
|
1745
|
+
<Form.Item
|
|
1746
|
+
label="堆叠计算方式"
|
|
1747
|
+
labelCol={{ span: 8 }}
|
|
1748
|
+
wrapperCol={{ span: 16 }}
|
|
1749
|
+
>
|
|
1750
|
+
<Select
|
|
1751
|
+
size="small"
|
|
1752
|
+
value={
|
|
1753
|
+
parseConfig?.series?.[selectSeries]?.stackStrategy ||
|
|
1754
|
+
"samesign"
|
|
1755
|
+
}
|
|
1756
|
+
onChange={(e) =>
|
|
1757
|
+
transformReturn({
|
|
1758
|
+
series: { stackStrategy: e.target.value },
|
|
1759
|
+
})
|
|
1760
|
+
}
|
|
1761
|
+
options={[
|
|
1762
|
+
{ label: "samesign", value: "samesign" },
|
|
1763
|
+
{ label: "all", value: "all" },
|
|
1764
|
+
{ label: "positive", value: "positive" },
|
|
1765
|
+
{ label: "negative", value: "negative" },
|
|
1766
|
+
]}
|
|
1767
|
+
style={{ width: 120 }}
|
|
1768
|
+
/>
|
|
1769
|
+
</Form.Item>
|
|
1770
|
+
<Form.Item
|
|
1771
|
+
label="堆叠顺序"
|
|
1772
|
+
labelCol={{ span: 8 }}
|
|
1773
|
+
wrapperCol={{ span: 16 }}
|
|
1774
|
+
>
|
|
1775
|
+
<Radio.Group
|
|
1776
|
+
size="small"
|
|
1777
|
+
optionType="button"
|
|
1778
|
+
buttonStyle="solid"
|
|
1779
|
+
value={
|
|
1780
|
+
parseConfig?.series?.[selectSeries]?.stackOrder ||
|
|
1781
|
+
"seriesAsc"
|
|
1782
|
+
}
|
|
1783
|
+
onChange={(e) =>
|
|
1784
|
+
transformReturn({
|
|
1785
|
+
series: { stackOrder: e.target.value },
|
|
1786
|
+
})
|
|
1787
|
+
}
|
|
1788
|
+
options={[
|
|
1789
|
+
{ label: "顺序", value: "seriesAsc" },
|
|
1790
|
+
{ label: "倒序", value: "seriesDesc" },
|
|
1791
|
+
]}
|
|
1792
|
+
style={{ width: 120 }}
|
|
1793
|
+
/>
|
|
1794
|
+
</Form.Item>
|
|
1795
|
+
</>
|
|
1796
|
+
)}
|
|
1797
|
+
{["line", "scatter", "radar"].includes(
|
|
1798
|
+
parseConfig?.series?.[selectSeries]?.type || "",
|
|
1799
|
+
) && (
|
|
1800
|
+
<>
|
|
1801
|
+
<Form.Item
|
|
1802
|
+
label="显示标记"
|
|
1803
|
+
labelCol={{ span: 12 }}
|
|
1804
|
+
wrapperCol={{ span: 12 }}
|
|
1805
|
+
>
|
|
1806
|
+
<Switch
|
|
1807
|
+
size="small"
|
|
1808
|
+
value={
|
|
1809
|
+
typeof parseConfig?.series?.[selectSeries]
|
|
1810
|
+
?.showSymbol === "boolean"
|
|
1811
|
+
? parseConfig?.series?.[selectSeries]?.showSymbol
|
|
1812
|
+
: true
|
|
1813
|
+
}
|
|
1814
|
+
onChange={(v) =>
|
|
1815
|
+
transformReturn({ series: { showSymbol: v } })
|
|
1816
|
+
}
|
|
1817
|
+
/>
|
|
1818
|
+
</Form.Item>
|
|
1819
|
+
<Form.Item
|
|
1820
|
+
label="标记图形"
|
|
1821
|
+
labelCol={{ span: 6 }}
|
|
1822
|
+
wrapperCol={{ span: 18 }}
|
|
1823
|
+
>
|
|
1824
|
+
<Select
|
|
1825
|
+
size="small"
|
|
1826
|
+
value={
|
|
1827
|
+
parseConfig?.series?.[selectSeries]?.symbol ||
|
|
1828
|
+
"emptyCircle"
|
|
1829
|
+
}
|
|
1830
|
+
onChange={(v) =>
|
|
1831
|
+
transformReturn({ series: { symbol: v } })
|
|
1832
|
+
}
|
|
1833
|
+
options={[
|
|
1834
|
+
// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
1835
|
+
{ label: "空心圆", value: "emptyCircle" },
|
|
1836
|
+
{ label: "圆", value: "circle" },
|
|
1837
|
+
{ label: "矩形", value: "rect" },
|
|
1838
|
+
{ label: "圆角矩形", value: "roundRect" },
|
|
1839
|
+
{ label: "三角形", value: "triangle" },
|
|
1840
|
+
{ label: "菱形", value: "diamond" },
|
|
1841
|
+
{ label: "图钉", value: "pin" },
|
|
1842
|
+
{ label: "箭头", value: "arrow" },
|
|
1843
|
+
{ label: "无", value: "none" },
|
|
1844
|
+
]}
|
|
1845
|
+
style={{ width: 120 }}
|
|
1846
|
+
/>
|
|
1847
|
+
</Form.Item>
|
|
1848
|
+
<Form.Item
|
|
1849
|
+
label="标记大小"
|
|
1850
|
+
labelCol={{ span: 12 }}
|
|
1851
|
+
wrapperCol={{ span: 12 }}
|
|
1852
|
+
>
|
|
1853
|
+
<InputNumber
|
|
1854
|
+
size="small"
|
|
1855
|
+
value={
|
|
1856
|
+
parseConfig?.series?.[selectSeries]?.symbolSize || 4
|
|
1857
|
+
}
|
|
1858
|
+
min={0}
|
|
1859
|
+
suffix="px"
|
|
1860
|
+
onChange={(v) =>
|
|
1861
|
+
transformReturn({ series: { symbolSize: v } })
|
|
1862
|
+
}
|
|
1863
|
+
/>
|
|
1864
|
+
</Form.Item>
|
|
1865
|
+
<Form.Item
|
|
1866
|
+
label="标记角度"
|
|
1867
|
+
labelCol={{ span: 12 }}
|
|
1868
|
+
wrapperCol={{ span: 12 }}
|
|
1869
|
+
>
|
|
1870
|
+
<InputNumber
|
|
1871
|
+
size="small"
|
|
1872
|
+
value={parseConfig?.series?.[selectSeries]?.symbolRotate}
|
|
1873
|
+
min={0}
|
|
1874
|
+
suffix="°"
|
|
1875
|
+
onChange={(v) =>
|
|
1876
|
+
transformReturn({ series: { symbolRotate: v } })
|
|
1877
|
+
}
|
|
1878
|
+
/>
|
|
1879
|
+
</Form.Item>
|
|
1880
|
+
</>
|
|
1881
|
+
)}
|
|
1882
|
+
{parseConfig?.series?.[selectSeries]?.type === "line" && (
|
|
1883
|
+
<>
|
|
1884
|
+
<Form.Item
|
|
1885
|
+
label="平滑曲线"
|
|
1886
|
+
labelCol={{ span: 12 }}
|
|
1887
|
+
wrapperCol={{ span: 12 }}
|
|
1888
|
+
>
|
|
1889
|
+
<Switch
|
|
1890
|
+
size="small"
|
|
1891
|
+
value={
|
|
1892
|
+
typeof parseConfig?.series?.[selectSeries]?.smooth ===
|
|
1893
|
+
"boolean"
|
|
1894
|
+
? parseConfig?.series?.[selectSeries]?.smooth
|
|
1895
|
+
: false
|
|
1896
|
+
}
|
|
1897
|
+
onChange={(v) =>
|
|
1898
|
+
transformReturn({ series: { smooth: v } })
|
|
1899
|
+
}
|
|
1900
|
+
/>
|
|
1901
|
+
</Form.Item>
|
|
1902
|
+
<Form.Item
|
|
1903
|
+
label="面积图"
|
|
1904
|
+
labelCol={{ span: 12 }}
|
|
1905
|
+
wrapperCol={{ span: 12 }}
|
|
1906
|
+
>
|
|
1907
|
+
<Switch
|
|
1908
|
+
size="small"
|
|
1909
|
+
value={
|
|
1910
|
+
typeof parseConfig?.series?.[selectSeries]
|
|
1911
|
+
?.areaStyle === "object"
|
|
1912
|
+
}
|
|
1913
|
+
onChange={(v) =>
|
|
1914
|
+
transformReturn({
|
|
1915
|
+
series: { areaStyle: v ? {} : undefined },
|
|
1916
|
+
})
|
|
1917
|
+
}
|
|
1918
|
+
/>
|
|
1919
|
+
</Form.Item>
|
|
1920
|
+
<Form.Item
|
|
1921
|
+
label="面积图填充色"
|
|
1922
|
+
labelCol={{ span: 12 }}
|
|
1923
|
+
wrapperCol={{ span: 12 }}
|
|
1924
|
+
>
|
|
1925
|
+
<ColorPicker
|
|
1926
|
+
size="small"
|
|
1927
|
+
value={
|
|
1928
|
+
parseConfig?.series?.[selectSeries]?.areaStyle?.color ||
|
|
1929
|
+
""
|
|
1930
|
+
}
|
|
1931
|
+
onChange={(v) =>
|
|
1932
|
+
transformReturn({
|
|
1933
|
+
series: { areaStyle: { color: v.toHexString() } },
|
|
1934
|
+
})
|
|
1935
|
+
}
|
|
1936
|
+
allowClear
|
|
1937
|
+
/>
|
|
1938
|
+
</Form.Item>
|
|
1939
|
+
<Form.Item
|
|
1940
|
+
label="面积图透明度"
|
|
1941
|
+
labelCol={{ span: 12 }}
|
|
1942
|
+
wrapperCol={{ span: 12 }}
|
|
1943
|
+
>
|
|
1944
|
+
<Slider
|
|
1945
|
+
min={0}
|
|
1946
|
+
max={1}
|
|
1947
|
+
step={0.1}
|
|
1948
|
+
value={
|
|
1949
|
+
parseConfig?.series?.[selectSeries]?.areaStyle
|
|
1950
|
+
?.opacity || 0.7
|
|
1951
|
+
}
|
|
1952
|
+
onChange={(v) =>
|
|
1953
|
+
transformReturn({
|
|
1954
|
+
series: { areaStyle: { opacity: v } },
|
|
1955
|
+
})
|
|
1956
|
+
}
|
|
1957
|
+
/>
|
|
1958
|
+
</Form.Item>
|
|
1959
|
+
</>
|
|
1960
|
+
)}
|
|
1961
|
+
{parseConfig?.series?.[selectSeries]?.type === "bar" && (
|
|
1962
|
+
<>
|
|
1963
|
+
<Form.Item
|
|
1964
|
+
label="柱条宽度"
|
|
1965
|
+
labelCol={{ span: 12 }}
|
|
1966
|
+
wrapperCol={{ span: 12 }}
|
|
1967
|
+
>
|
|
1968
|
+
<InputNumber
|
|
1969
|
+
size="small"
|
|
1970
|
+
value={parseConfig?.series?.[selectSeries]?.barWidth}
|
|
1971
|
+
min={0}
|
|
1972
|
+
suffix="px"
|
|
1973
|
+
onChange={(v) =>
|
|
1974
|
+
transformReturn({ series: { barWidth: v } })
|
|
1975
|
+
}
|
|
1976
|
+
/>
|
|
1977
|
+
</Form.Item>
|
|
1978
|
+
<Form.Item
|
|
1979
|
+
label="柱条最小宽度"
|
|
1980
|
+
labelCol={{ span: 12 }}
|
|
1981
|
+
wrapperCol={{ span: 12 }}
|
|
1982
|
+
>
|
|
1983
|
+
<InputNumber
|
|
1984
|
+
size="small"
|
|
1985
|
+
value={parseConfig?.series?.[selectSeries]?.barMinWidth}
|
|
1986
|
+
min={0}
|
|
1987
|
+
suffix="px"
|
|
1988
|
+
onChange={(v) =>
|
|
1989
|
+
transformReturn({ series: { barMinWidth: v } })
|
|
1990
|
+
}
|
|
1991
|
+
/>
|
|
1992
|
+
</Form.Item>
|
|
1993
|
+
<Form.Item
|
|
1994
|
+
label="柱条最大宽度"
|
|
1995
|
+
labelCol={{ span: 12 }}
|
|
1996
|
+
wrapperCol={{ span: 12 }}
|
|
1997
|
+
>
|
|
1998
|
+
<InputNumber
|
|
1999
|
+
size="small"
|
|
2000
|
+
value={parseConfig?.series?.[selectSeries]?.barMaxWidth}
|
|
2001
|
+
min={0}
|
|
2002
|
+
suffix="px"
|
|
2003
|
+
onChange={(v) =>
|
|
2004
|
+
transformReturn({ series: { barMaxWidth: v } })
|
|
2005
|
+
}
|
|
2006
|
+
/>
|
|
2007
|
+
</Form.Item>
|
|
2008
|
+
<Form.Item
|
|
2009
|
+
label="柱条最小高度"
|
|
2010
|
+
labelCol={{ span: 12 }}
|
|
2011
|
+
wrapperCol={{ span: 12 }}
|
|
2012
|
+
>
|
|
2013
|
+
<InputNumber
|
|
2014
|
+
size="small"
|
|
2015
|
+
value={parseConfig?.series?.[selectSeries]?.barMinHeight}
|
|
2016
|
+
min={0}
|
|
2017
|
+
suffix="px"
|
|
2018
|
+
onChange={(v) =>
|
|
2019
|
+
transformReturn({ series: { barMinHeight: v } })
|
|
2020
|
+
}
|
|
2021
|
+
/>
|
|
2022
|
+
</Form.Item>
|
|
2023
|
+
<Form.Item
|
|
2024
|
+
label="柱条最小角度"
|
|
2025
|
+
labelCol={{ span: 12 }}
|
|
2026
|
+
wrapperCol={{ span: 12 }}
|
|
2027
|
+
>
|
|
2028
|
+
<InputNumber
|
|
2029
|
+
size="small"
|
|
2030
|
+
value={parseConfig?.series?.[selectSeries]?.barMinAngle}
|
|
2031
|
+
min={0}
|
|
2032
|
+
suffix="°"
|
|
2033
|
+
onChange={(v) =>
|
|
2034
|
+
transformReturn({ series: { barMinAngle: v } })
|
|
2035
|
+
}
|
|
2036
|
+
/>
|
|
2037
|
+
</Form.Item>
|
|
2038
|
+
<Form.Item
|
|
2039
|
+
label="柱间距离"
|
|
2040
|
+
labelCol={{ span: 12 }}
|
|
2041
|
+
wrapperCol={{ span: 12 }}
|
|
2042
|
+
>
|
|
2043
|
+
<InputNumber
|
|
2044
|
+
size="small"
|
|
2045
|
+
value={
|
|
2046
|
+
parseConfig?.series?.[selectSeries]?.barGap?.length
|
|
2047
|
+
? parseInt(
|
|
2048
|
+
parseConfig?.series[
|
|
2049
|
+
selectSeries
|
|
2050
|
+
]?.barGap.replace("%", ""),
|
|
2051
|
+
)
|
|
2052
|
+
: 0
|
|
2053
|
+
}
|
|
2054
|
+
min={0}
|
|
2055
|
+
suffix="%"
|
|
2056
|
+
onChange={(v) =>
|
|
2057
|
+
transformReturn({
|
|
2058
|
+
series: { barGap: v ? v + "%" : "" },
|
|
2059
|
+
})
|
|
2060
|
+
}
|
|
2061
|
+
/>
|
|
2062
|
+
</Form.Item>
|
|
2063
|
+
</>
|
|
2064
|
+
)}
|
|
2065
|
+
{parseConfig?.series?.[selectSeries]?.type === "pie" && (
|
|
2066
|
+
<>
|
|
2067
|
+
<Form.Item
|
|
2068
|
+
label="南丁格尔图"
|
|
2069
|
+
labelCol={{ span: 12 }}
|
|
2070
|
+
wrapperCol={{ span: 12 }}
|
|
2071
|
+
>
|
|
2072
|
+
<Radio.Group
|
|
2073
|
+
size="small"
|
|
2074
|
+
optionType="button"
|
|
2075
|
+
buttonStyle="solid"
|
|
2076
|
+
options={[
|
|
2077
|
+
{
|
|
2078
|
+
label: "无",
|
|
2079
|
+
value: "none",
|
|
2080
|
+
},
|
|
2081
|
+
{
|
|
2082
|
+
label: "radius",
|
|
2083
|
+
value: "radius",
|
|
2084
|
+
},
|
|
2085
|
+
{
|
|
2086
|
+
label: "area",
|
|
2087
|
+
value: "area",
|
|
2088
|
+
},
|
|
2089
|
+
]}
|
|
2090
|
+
value={
|
|
2091
|
+
parseConfig?.series?.[selectSeries]?.roseType || "none"
|
|
2092
|
+
}
|
|
2093
|
+
onChange={(e) =>
|
|
2094
|
+
transformReturn({
|
|
2095
|
+
series: {
|
|
2096
|
+
roseType:
|
|
2097
|
+
e.target.value === "none" ? "" : e.target.value,
|
|
2098
|
+
},
|
|
2099
|
+
})
|
|
2100
|
+
}
|
|
2101
|
+
/>
|
|
2102
|
+
</Form.Item>
|
|
2103
|
+
</>
|
|
2104
|
+
)}
|
|
2105
|
+
{["pie", "sunburst", "chord"].includes(
|
|
2106
|
+
parseConfig?.series?.[selectSeries]?.type || "",
|
|
2107
|
+
) && (
|
|
2108
|
+
<>
|
|
2109
|
+
<Form.Item
|
|
2110
|
+
label="角度"
|
|
2111
|
+
labelCol={{ span: 12 }}
|
|
2112
|
+
wrapperCol={{ span: 12 }}
|
|
2113
|
+
>
|
|
2114
|
+
<Slider
|
|
2115
|
+
value={
|
|
2116
|
+
parseConfig?.series?.[selectSeries]?.startAngle || 90
|
|
2117
|
+
}
|
|
2118
|
+
min={0}
|
|
2119
|
+
max={360}
|
|
2120
|
+
onChange={(v) =>
|
|
2121
|
+
transformReturn({ series: { startAngle: v } })
|
|
2122
|
+
}
|
|
2123
|
+
/>
|
|
2124
|
+
</Form.Item>
|
|
2125
|
+
<Form.Item
|
|
2126
|
+
label="半径"
|
|
2127
|
+
labelCol={{ span: 12 }}
|
|
2128
|
+
wrapperCol={{ span: 12 }}
|
|
2129
|
+
>
|
|
2130
|
+
<Slider
|
|
2131
|
+
value={
|
|
2132
|
+
parseConfig?.series?.[selectSeries]?.radius
|
|
2133
|
+
? parseConfig?.series?.[selectSeries]?.radius.map(
|
|
2134
|
+
(i: string) => parseInt(i.replace("%", "")),
|
|
2135
|
+
)
|
|
2136
|
+
: [0, 100]
|
|
2137
|
+
}
|
|
2138
|
+
min={0}
|
|
2139
|
+
max={100}
|
|
2140
|
+
range={{ draggableTrack: true }}
|
|
2141
|
+
onChange={(v: number[]) =>
|
|
2142
|
+
transformReturn({
|
|
2143
|
+
series: { radius: [v[0] + "%", v[1] + "%"] },
|
|
2144
|
+
})
|
|
2145
|
+
}
|
|
2146
|
+
/>
|
|
2147
|
+
</Form.Item>
|
|
2148
|
+
<Form.Item
|
|
2149
|
+
label="中心坐标"
|
|
2150
|
+
labelCol={{ span: 12 }}
|
|
2151
|
+
wrapperCol={{ span: 12 }}
|
|
2152
|
+
>
|
|
2153
|
+
<Slider
|
|
2154
|
+
value={
|
|
2155
|
+
parseConfig?.series?.[selectSeries]?.center
|
|
2156
|
+
? parseConfig?.series?.[selectSeries]?.center.map(
|
|
2157
|
+
(i: string) => parseInt(i.replace("%", "")),
|
|
2158
|
+
)
|
|
2159
|
+
: [50, 50]
|
|
2160
|
+
}
|
|
2161
|
+
min={0}
|
|
2162
|
+
max={100}
|
|
2163
|
+
range={{ draggableTrack: true }}
|
|
2164
|
+
onChange={(v: number[]) =>
|
|
2165
|
+
transformReturn({
|
|
2166
|
+
series: { center: [v[0] + "%", v[1] + "%"] },
|
|
2167
|
+
})
|
|
2168
|
+
}
|
|
2169
|
+
/>
|
|
2170
|
+
</Form.Item>
|
|
2171
|
+
</>
|
|
2172
|
+
)}
|
|
2173
|
+
</Space>
|
|
2174
|
+
),
|
|
2175
|
+
},
|
|
1390
2176
|
{
|
|
1391
2177
|
key: "custom",
|
|
1392
2178
|
label: "自定义配置",
|