bi-sdk-react 0.0.77 → 0.0.78
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/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { createFromIconfontCN } from "@ant-design/icons";
|
|
3
3
|
|
|
4
4
|
const IconFontCN = createFromIconfontCN({
|
|
5
|
-
scriptUrl: "https://at.alicdn.com/t/c/
|
|
5
|
+
scriptUrl: "https://at.alicdn.com/t/c/font_5072483_uqvajkxw0rf.js",
|
|
6
6
|
});
|
|
7
7
|
|
|
8
8
|
export type IconFontProps = {
|
|
@@ -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,
|
|
@@ -41,6 +46,33 @@ import * as ts from "typescript";
|
|
|
41
46
|
import { PageContext } from "../../../context/PageContext";
|
|
42
47
|
import { IconFont } from "../../../icon/IconFont";
|
|
43
48
|
import type { PropEditorProps } from "./types";
|
|
49
|
+
import styled from "styled-components";
|
|
50
|
+
|
|
51
|
+
const ChartTypeRadio = styled(Radio.Group)`
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-wrap: wrap;
|
|
54
|
+
gap: 8px;
|
|
55
|
+
|
|
56
|
+
.ant-radio-button-wrapper {
|
|
57
|
+
height: unset;
|
|
58
|
+
width: 68px;
|
|
59
|
+
height: 68px;
|
|
60
|
+
border-radius: 4px;
|
|
61
|
+
|
|
62
|
+
.ant-radio-button-label > .ant-flex {
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
padding: 8px;
|
|
67
|
+
gap: 4px;
|
|
68
|
+
font-size: 12px;
|
|
69
|
+
|
|
70
|
+
.anticon {
|
|
71
|
+
font-size: 28px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
`
|
|
44
76
|
|
|
45
77
|
export type EchartsModel = { script: string; height?: number };
|
|
46
78
|
|
|
@@ -219,6 +251,8 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
219
251
|
const fullRef = useRef<any>(null);
|
|
220
252
|
const [fullScreen, setFullScreen] = useState(false);
|
|
221
253
|
|
|
254
|
+
const [selectSeries, setSelectSeries] = useState<number>(0);
|
|
255
|
+
|
|
222
256
|
const setScript = (v?: string) =>
|
|
223
257
|
onChange && onChange({ ...model, script: v || "" });
|
|
224
258
|
const triggerModel = (key: keyof EchartsModel, value: any) =>
|
|
@@ -321,6 +355,34 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
321
355
|
existingProp.name,
|
|
322
356
|
mergedObj,
|
|
323
357
|
);
|
|
358
|
+
} else if (
|
|
359
|
+
key === "series" &&
|
|
360
|
+
typeof value === "object" &&
|
|
361
|
+
value !== null &&
|
|
362
|
+
!Array.isArray(value) &&
|
|
363
|
+
ts.isArrayLiteralExpression(existingProp.initializer)
|
|
364
|
+
) {
|
|
365
|
+
// 特殊处理 series：如果现有节点是数组，且补丁是对象，则更新 selectSeries 指定的项
|
|
366
|
+
const elements = [...existingProp.initializer.elements];
|
|
367
|
+
if (selectSeries < elements.length) {
|
|
368
|
+
const existingElement = elements[selectSeries];
|
|
369
|
+
if (ts.isObjectLiteralExpression(existingElement)) {
|
|
370
|
+
elements[selectSeries] = mergeObjectAST(
|
|
371
|
+
existingElement,
|
|
372
|
+
value as any,
|
|
373
|
+
);
|
|
374
|
+
} else {
|
|
375
|
+
elements[selectSeries] = convertToAST(value);
|
|
376
|
+
}
|
|
377
|
+
} else {
|
|
378
|
+
// 如果索引超出范围，添加新元素
|
|
379
|
+
elements[selectSeries] = convertToAST(value);
|
|
380
|
+
}
|
|
381
|
+
properties[existingIndex] = ts.factory.updatePropertyAssignment(
|
|
382
|
+
existingProp,
|
|
383
|
+
existingProp.name,
|
|
384
|
+
ts.factory.createArrayLiteralExpression(elements, true),
|
|
385
|
+
);
|
|
324
386
|
} else {
|
|
325
387
|
// 否则直接替换
|
|
326
388
|
properties[existingIndex] = ts.factory.createPropertyAssignment(
|
|
@@ -808,7 +870,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
808
870
|
optionType="button"
|
|
809
871
|
buttonStyle="solid"
|
|
810
872
|
value={parseConfig?.legend?.orient || "horizontal"}
|
|
811
|
-
onChange={(e) =>
|
|
873
|
+
onChange={(e) =>
|
|
874
|
+
transformReturn({ legend: { orient: e.target.value } })
|
|
875
|
+
}
|
|
812
876
|
options={[
|
|
813
877
|
{ label: "水平", value: "horizontal" },
|
|
814
878
|
{ label: "垂直", value: "vertical" },
|
|
@@ -825,7 +889,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
825
889
|
optionType="button"
|
|
826
890
|
buttonStyle="solid"
|
|
827
891
|
value={parseConfig?.legend?.align || "auto"}
|
|
828
|
-
onChange={(e) =>
|
|
892
|
+
onChange={(e) =>
|
|
893
|
+
transformReturn({ legend: { align: e.target.value } })
|
|
894
|
+
}
|
|
829
895
|
options={[
|
|
830
896
|
{ label: "自动", value: "auto" },
|
|
831
897
|
{ label: "左侧", value: "left" },
|
|
@@ -843,7 +909,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
843
909
|
value={parseConfig?.legend?.itemGap}
|
|
844
910
|
min={0}
|
|
845
911
|
suffix="px"
|
|
846
|
-
onChange={(v) =>
|
|
912
|
+
onChange={(v) =>
|
|
913
|
+
transformReturn({ legend: { itemGap: v } })
|
|
914
|
+
}
|
|
847
915
|
/>
|
|
848
916
|
</Form.Item>
|
|
849
917
|
<Form.Item
|
|
@@ -856,7 +924,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
856
924
|
value={parseConfig?.legend?.itemWidth}
|
|
857
925
|
min={0}
|
|
858
926
|
suffix="px"
|
|
859
|
-
onChange={(v) =>
|
|
927
|
+
onChange={(v) =>
|
|
928
|
+
transformReturn({ legend: { itemWidth: v } })
|
|
929
|
+
}
|
|
860
930
|
/>
|
|
861
931
|
</Form.Item>
|
|
862
932
|
<Form.Item
|
|
@@ -869,7 +939,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
869
939
|
value={parseConfig?.legend?.itemHeight}
|
|
870
940
|
min={0}
|
|
871
941
|
suffix="px"
|
|
872
|
-
onChange={(v) =>
|
|
942
|
+
onChange={(v) =>
|
|
943
|
+
transformReturn({ legend: { itemHeight: v } })
|
|
944
|
+
}
|
|
873
945
|
/>
|
|
874
946
|
</Form.Item>
|
|
875
947
|
<Form.Item
|
|
@@ -879,7 +951,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
879
951
|
>
|
|
880
952
|
<Input.TextArea
|
|
881
953
|
value={parseConfig?.legend?.formatter}
|
|
882
|
-
onChange={(e) =>
|
|
954
|
+
onChange={(e) =>
|
|
955
|
+
transformReturn({ legend: { formatter: e.target.value } })
|
|
956
|
+
}
|
|
883
957
|
/>
|
|
884
958
|
</Form.Item>
|
|
885
959
|
{positionRender("legend")}
|
|
@@ -893,7 +967,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
893
967
|
extra: (
|
|
894
968
|
<Switch
|
|
895
969
|
size="small"
|
|
896
|
-
value={!!parseConfig
|
|
970
|
+
value={!!parseConfig?.grid?.show}
|
|
897
971
|
onChange={(v) => transformReturn({ grid: { show: v } })}
|
|
898
972
|
/>
|
|
899
973
|
),
|
|
@@ -909,7 +983,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
909
983
|
optionType="button"
|
|
910
984
|
buttonStyle="solid"
|
|
911
985
|
value={parseConfig?.grid?.outerBoundsMode || "auto"}
|
|
912
|
-
onChange={(e) =>
|
|
986
|
+
onChange={(e) =>
|
|
987
|
+
transformReturn({
|
|
988
|
+
grid: { outerBoundsMode: e.target.value },
|
|
989
|
+
})
|
|
990
|
+
}
|
|
913
991
|
options={[
|
|
914
992
|
{ label: "auto", value: "auto" },
|
|
915
993
|
{ label: "none", value: "none" },
|
|
@@ -925,7 +1003,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
925
1003
|
<ColorPicker
|
|
926
1004
|
size="small"
|
|
927
1005
|
value={parseConfig?.grid?.backgroundColor || "auto"}
|
|
928
|
-
onChange={(e) =>
|
|
1006
|
+
onChange={(e) =>
|
|
1007
|
+
transformReturn({
|
|
1008
|
+
grid: { backgroundColor: e.toHexString() },
|
|
1009
|
+
})
|
|
1010
|
+
}
|
|
929
1011
|
/>
|
|
930
1012
|
</Form.Item>
|
|
931
1013
|
<Form.Item
|
|
@@ -936,7 +1018,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
936
1018
|
<ColorPicker
|
|
937
1019
|
size="small"
|
|
938
1020
|
value={parseConfig?.grid?.borderColor || "auto"}
|
|
939
|
-
onChange={(e) =>
|
|
1021
|
+
onChange={(e) =>
|
|
1022
|
+
transformReturn({
|
|
1023
|
+
grid: { borderColor: e.toHexString() },
|
|
1024
|
+
})
|
|
1025
|
+
}
|
|
940
1026
|
/>
|
|
941
1027
|
</Form.Item>
|
|
942
1028
|
<Form.Item
|
|
@@ -949,7 +1035,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
949
1035
|
value={parseConfig?.grid?.borderWidth}
|
|
950
1036
|
min={0}
|
|
951
1037
|
suffix="px"
|
|
952
|
-
onChange={(v) =>
|
|
1038
|
+
onChange={(v) =>
|
|
1039
|
+
transformReturn({ grid: { borderWidth: v } })
|
|
1040
|
+
}
|
|
953
1041
|
/>
|
|
954
1042
|
</Form.Item>
|
|
955
1043
|
{positionRender("grid")}
|
|
@@ -972,7 +1060,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
972
1060
|
/>
|
|
973
1061
|
),
|
|
974
1062
|
children: (
|
|
975
|
-
<Space vertical style={{width: "100%"}}>
|
|
1063
|
+
<Space vertical style={{ width: "100%" }}>
|
|
976
1064
|
<Form.Item
|
|
977
1065
|
label="坐标轴名称"
|
|
978
1066
|
labelCol={{ span: 12 }}
|
|
@@ -981,7 +1069,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
981
1069
|
<Input
|
|
982
1070
|
size="small"
|
|
983
1071
|
value={parseConfig?.xAxis?.name || ""}
|
|
984
|
-
onChange={(e) =>
|
|
1072
|
+
onChange={(e) =>
|
|
1073
|
+
transformReturn({ xAxis: { name: e.target.value } })
|
|
1074
|
+
}
|
|
985
1075
|
/>
|
|
986
1076
|
</Form.Item>
|
|
987
1077
|
<Form.Item
|
|
@@ -994,7 +1084,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
994
1084
|
optionType="button"
|
|
995
1085
|
buttonStyle="solid"
|
|
996
1086
|
value={parseConfig?.xAxis?.position || "auto"}
|
|
997
|
-
onChange={(e) =>
|
|
1087
|
+
onChange={(e) =>
|
|
1088
|
+
transformReturn({ xAxis: { position: e.target.value } })
|
|
1089
|
+
}
|
|
998
1090
|
options={[
|
|
999
1091
|
{ label: "top", value: "top" },
|
|
1000
1092
|
{ label: "bottom", value: "bottom" },
|
|
@@ -1011,7 +1103,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1011
1103
|
optionType="button"
|
|
1012
1104
|
buttonStyle="solid"
|
|
1013
1105
|
value={parseConfig?.xAxis?.type || "category"}
|
|
1014
|
-
onChange={(e) =>
|
|
1106
|
+
onChange={(e) =>
|
|
1107
|
+
transformReturn({ xAxis: { type: e.target.value } })
|
|
1108
|
+
}
|
|
1015
1109
|
options={[
|
|
1016
1110
|
{ label: "类目轴", value: "category" },
|
|
1017
1111
|
{ label: "数值轴", value: "value" },
|
|
@@ -1055,7 +1149,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1055
1149
|
size="small"
|
|
1056
1150
|
value={parseConfig?.xAxis?.nameRotate || 0}
|
|
1057
1151
|
min={0}
|
|
1058
|
-
onChange={(v) =>
|
|
1152
|
+
onChange={(v) =>
|
|
1153
|
+
transformReturn({ xAxis: { nameRotate: v } })
|
|
1154
|
+
}
|
|
1059
1155
|
/>
|
|
1060
1156
|
</Form.Item>
|
|
1061
1157
|
<Form.Item
|
|
@@ -1091,7 +1187,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1091
1187
|
size="small"
|
|
1092
1188
|
value={parseConfig?.xAxis?.splitNumber || 5}
|
|
1093
1189
|
min={0}
|
|
1094
|
-
onChange={(v) =>
|
|
1190
|
+
onChange={(v) =>
|
|
1191
|
+
transformReturn({ xAxis: { splitNumber: v } })
|
|
1192
|
+
}
|
|
1095
1193
|
/>
|
|
1096
1194
|
</Form.Item>
|
|
1097
1195
|
<Form.Item
|
|
@@ -1103,7 +1201,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1103
1201
|
size="small"
|
|
1104
1202
|
value={parseConfig?.xAxis?.startValue}
|
|
1105
1203
|
min={0}
|
|
1106
|
-
onChange={(v) =>
|
|
1204
|
+
onChange={(v) =>
|
|
1205
|
+
transformReturn({ xAxis: { startValue: v } })
|
|
1206
|
+
}
|
|
1107
1207
|
/>
|
|
1108
1208
|
</Form.Item>
|
|
1109
1209
|
</Space>
|
|
@@ -1125,7 +1225,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1125
1225
|
/>
|
|
1126
1226
|
),
|
|
1127
1227
|
children: (
|
|
1128
|
-
<Space vertical style={{width: "100%"}}>
|
|
1228
|
+
<Space vertical style={{ width: "100%" }}>
|
|
1129
1229
|
<Form.Item
|
|
1130
1230
|
label="坐标轴名称"
|
|
1131
1231
|
labelCol={{ span: 12 }}
|
|
@@ -1134,7 +1234,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1134
1234
|
<Input
|
|
1135
1235
|
size="small"
|
|
1136
1236
|
value={parseConfig?.yAxis?.name || ""}
|
|
1137
|
-
onChange={(e) =>
|
|
1237
|
+
onChange={(e) =>
|
|
1238
|
+
transformReturn({ yAxis: { name: e.target.value } })
|
|
1239
|
+
}
|
|
1138
1240
|
/>
|
|
1139
1241
|
</Form.Item>
|
|
1140
1242
|
<Form.Item
|
|
@@ -1147,7 +1249,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1147
1249
|
optionType="button"
|
|
1148
1250
|
buttonStyle="solid"
|
|
1149
1251
|
value={parseConfig?.yAxis?.position || "auto"}
|
|
1150
|
-
onChange={(e) =>
|
|
1252
|
+
onChange={(e) =>
|
|
1253
|
+
transformReturn({ yAxis: { position: e.target.value } })
|
|
1254
|
+
}
|
|
1151
1255
|
options={[
|
|
1152
1256
|
{ label: "left", value: "left" },
|
|
1153
1257
|
{ label: "right", value: "right" },
|
|
@@ -1164,7 +1268,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1164
1268
|
optionType="button"
|
|
1165
1269
|
buttonStyle="solid"
|
|
1166
1270
|
value={parseConfig?.yAxis?.type || "category"}
|
|
1167
|
-
onChange={(e) =>
|
|
1271
|
+
onChange={(e) =>
|
|
1272
|
+
transformReturn({ yAxis: { type: e.target.value } })
|
|
1273
|
+
}
|
|
1168
1274
|
options={[
|
|
1169
1275
|
{ label: "类目轴", value: "category" },
|
|
1170
1276
|
{ label: "数值轴", value: "value" },
|
|
@@ -1208,7 +1314,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1208
1314
|
size="small"
|
|
1209
1315
|
value={parseConfig?.yAxis?.nameRotate || 0}
|
|
1210
1316
|
min={0}
|
|
1211
|
-
onChange={(v) =>
|
|
1317
|
+
onChange={(v) =>
|
|
1318
|
+
transformReturn({ yAxis: { nameRotate: v } })
|
|
1319
|
+
}
|
|
1212
1320
|
/>
|
|
1213
1321
|
</Form.Item>
|
|
1214
1322
|
<Form.Item
|
|
@@ -1244,7 +1352,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1244
1352
|
size="small"
|
|
1245
1353
|
value={parseConfig?.yAxis?.splitNumber || 5}
|
|
1246
1354
|
min={0}
|
|
1247
|
-
onChange={(v) =>
|
|
1355
|
+
onChange={(v) =>
|
|
1356
|
+
transformReturn({ yAxis: { splitNumber: v } })
|
|
1357
|
+
}
|
|
1248
1358
|
/>
|
|
1249
1359
|
</Form.Item>
|
|
1250
1360
|
<Form.Item
|
|
@@ -1256,7 +1366,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1256
1366
|
size="small"
|
|
1257
1367
|
value={parseConfig?.yAxis?.startValue}
|
|
1258
1368
|
min={0}
|
|
1259
|
-
onChange={(v) =>
|
|
1369
|
+
onChange={(v) =>
|
|
1370
|
+
transformReturn({ yAxis: { startValue: v } })
|
|
1371
|
+
}
|
|
1260
1372
|
/>
|
|
1261
1373
|
</Form.Item>
|
|
1262
1374
|
</Space>
|
|
@@ -1278,7 +1390,7 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1278
1390
|
/>
|
|
1279
1391
|
),
|
|
1280
1392
|
children: (
|
|
1281
|
-
<Space vertical style={{width: "100%"}}>
|
|
1393
|
+
<Space vertical style={{ width: "100%" }}>
|
|
1282
1394
|
<Form.Item
|
|
1283
1395
|
label="触发类型"
|
|
1284
1396
|
labelCol={{ span: 6 }}
|
|
@@ -1289,7 +1401,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1289
1401
|
optionType="button"
|
|
1290
1402
|
buttonStyle="solid"
|
|
1291
1403
|
value={parseConfig?.tooltip?.trigger || "item"}
|
|
1292
|
-
onChange={(e) =>
|
|
1404
|
+
onChange={(e) =>
|
|
1405
|
+
transformReturn({ tooltip: { trigger: e.target.value } })
|
|
1406
|
+
}
|
|
1293
1407
|
options={[
|
|
1294
1408
|
{ label: "item", value: "item" },
|
|
1295
1409
|
{ label: "axis", value: "axis" },
|
|
@@ -1307,7 +1421,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1307
1421
|
optionType="button"
|
|
1308
1422
|
buttonStyle="solid"
|
|
1309
1423
|
value={parseConfig?.tooltip?.triggerOn || "item"}
|
|
1310
|
-
onChange={(e) =>
|
|
1424
|
+
onChange={(e) =>
|
|
1425
|
+
transformReturn({
|
|
1426
|
+
tooltip: { triggerOn: e.target.value },
|
|
1427
|
+
})
|
|
1428
|
+
}
|
|
1311
1429
|
options={[
|
|
1312
1430
|
{ label: "移动", value: "mousemove" },
|
|
1313
1431
|
{ label: "点击", value: "click" },
|
|
@@ -1324,7 +1442,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1324
1442
|
<ColorPicker
|
|
1325
1443
|
size="small"
|
|
1326
1444
|
value={parseConfig?.tooltip?.backgroundColor}
|
|
1327
|
-
onChange={(v) =>
|
|
1445
|
+
onChange={(v) =>
|
|
1446
|
+
transformReturn({
|
|
1447
|
+
tooltip: { backgroundColor: v.toHexString() },
|
|
1448
|
+
})
|
|
1449
|
+
}
|
|
1328
1450
|
/>
|
|
1329
1451
|
</Form.Item>
|
|
1330
1452
|
<Form.Item
|
|
@@ -1335,7 +1457,11 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1335
1457
|
<ColorPicker
|
|
1336
1458
|
size="small"
|
|
1337
1459
|
value={parseConfig?.tooltip?.borderColor}
|
|
1338
|
-
onChange={(v) =>
|
|
1460
|
+
onChange={(v) =>
|
|
1461
|
+
transformReturn({
|
|
1462
|
+
tooltip: { borderColor: v.toHexString() },
|
|
1463
|
+
})
|
|
1464
|
+
}
|
|
1339
1465
|
/>
|
|
1340
1466
|
</Form.Item>
|
|
1341
1467
|
<Form.Item
|
|
@@ -1348,7 +1474,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1348
1474
|
value={parseConfig?.tooltip?.borderWidth || 0}
|
|
1349
1475
|
min={0}
|
|
1350
1476
|
suffix="px"
|
|
1351
|
-
onChange={(v) =>
|
|
1477
|
+
onChange={(v) =>
|
|
1478
|
+
transformReturn({ tooltip: { borderWidth: v } })
|
|
1479
|
+
}
|
|
1352
1480
|
/>
|
|
1353
1481
|
</Form.Item>
|
|
1354
1482
|
<Form.Item
|
|
@@ -1361,7 +1489,9 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1361
1489
|
value={parseConfig?.tooltip?.padding || 5}
|
|
1362
1490
|
min={0}
|
|
1363
1491
|
suffix="px"
|
|
1364
|
-
onChange={(v) =>
|
|
1492
|
+
onChange={(v) =>
|
|
1493
|
+
transformReturn({ tooltip: { padding: v } })
|
|
1494
|
+
}
|
|
1365
1495
|
/>
|
|
1366
1496
|
</Form.Item>
|
|
1367
1497
|
<Form.Item
|
|
@@ -1381,12 +1511,186 @@ export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
|
|
|
1381
1511
|
>
|
|
1382
1512
|
<Input.TextArea
|
|
1383
1513
|
value={parseConfig?.tooltip?.formatter}
|
|
1384
|
-
onChange={(e) =>
|
|
1514
|
+
onChange={(e) =>
|
|
1515
|
+
transformReturn({
|
|
1516
|
+
tooltip: { formatter: e.target.value },
|
|
1517
|
+
})
|
|
1518
|
+
}
|
|
1385
1519
|
/>
|
|
1386
1520
|
</Form.Item>
|
|
1387
1521
|
</Space>
|
|
1388
1522
|
),
|
|
1389
1523
|
},
|
|
1524
|
+
// {
|
|
1525
|
+
// key: "series",
|
|
1526
|
+
// label: "系列",
|
|
1527
|
+
// collapsible: "icon",
|
|
1528
|
+
// extra: (
|
|
1529
|
+
// <Select
|
|
1530
|
+
// size="small"
|
|
1531
|
+
// options={(parseConfig?.series || []).map(
|
|
1532
|
+
// (item: any, index: number) => ({
|
|
1533
|
+
// label: item.name || `系列 ${index + 1}`,
|
|
1534
|
+
// value: index,
|
|
1535
|
+
// }),
|
|
1536
|
+
// )}
|
|
1537
|
+
// value={selectSeries}
|
|
1538
|
+
// onChange={(v) => setSelectSeries(v)}
|
|
1539
|
+
// style={{ width: 120 }}
|
|
1540
|
+
// />
|
|
1541
|
+
// ),
|
|
1542
|
+
// children: (
|
|
1543
|
+
// <Space vertical style={{ width: "100%" }}>
|
|
1544
|
+
// <ChartTypeRadio
|
|
1545
|
+
// size="small"
|
|
1546
|
+
// optionType="button"
|
|
1547
|
+
// buttonStyle="solid"
|
|
1548
|
+
// value={parseConfig?.series[selectSeries]?.type || "line"}
|
|
1549
|
+
// onChange={(e) =>
|
|
1550
|
+
// transformReturn({ series: { type: e.target.value } })
|
|
1551
|
+
// }
|
|
1552
|
+
// options={[
|
|
1553
|
+
// { label: <Flex><IconFont type="icon-chart-line" />折线图</Flex>, value: "line" },
|
|
1554
|
+
// { label: <Flex><IconFont type="icon-chart-bar" />柱状图</Flex>, value: "bar" },
|
|
1555
|
+
// { label: <Flex><IconFont type="icon-chart-candlestick" />K线图</Flex>, value: "candlestick" },
|
|
1556
|
+
// { label: <Flex><IconFont type="icon-chart-scatter" />散点图</Flex>, value: "scatter" },
|
|
1557
|
+
// { label: <Flex><IconFont type="icon-map" />地图</Flex>, value: "map" },
|
|
1558
|
+
// { label: <Flex><IconFont type="icon-chart-pie" />饼图</Flex>, value: "pie" },
|
|
1559
|
+
// { label: <Flex><IconFont type="icon-chart-gauge" />仪表盘</Flex>, value: "gauge" },
|
|
1560
|
+
// { label: <Flex><IconFont type="icon-chart-funnel" />漏斗图</Flex>, value: "funnel" },
|
|
1561
|
+
// { label: <Flex><IconFont type="icon-chart-radar" />雷达图</Flex>, value: "radar" },
|
|
1562
|
+
// ]}
|
|
1563
|
+
// />
|
|
1564
|
+
// <Form.Item
|
|
1565
|
+
// label="触发类型"
|
|
1566
|
+
// labelCol={{ span: 6 }}
|
|
1567
|
+
// wrapperCol={{ span: 18 }}
|
|
1568
|
+
// >
|
|
1569
|
+
// <Radio.Group
|
|
1570
|
+
// size="small"
|
|
1571
|
+
// optionType="button"
|
|
1572
|
+
// buttonStyle="solid"
|
|
1573
|
+
// value={parseConfig?.tooltip?.trigger || "item"}
|
|
1574
|
+
// onChange={(e) =>
|
|
1575
|
+
// transformReturn({ tooltip: { trigger: e.target.value } })
|
|
1576
|
+
// }
|
|
1577
|
+
// options={[
|
|
1578
|
+
// { label: "item", value: "item" },
|
|
1579
|
+
// { label: "axis", value: "axis" },
|
|
1580
|
+
// { label: "none", value: "none" },
|
|
1581
|
+
// ]}
|
|
1582
|
+
// />
|
|
1583
|
+
// </Form.Item>
|
|
1584
|
+
// <Form.Item
|
|
1585
|
+
// label="触发条件"
|
|
1586
|
+
// labelCol={{ span: 6 }}
|
|
1587
|
+
// wrapperCol={{ span: 18 }}
|
|
1588
|
+
// >
|
|
1589
|
+
// <Radio.Group
|
|
1590
|
+
// size="small"
|
|
1591
|
+
// optionType="button"
|
|
1592
|
+
// buttonStyle="solid"
|
|
1593
|
+
// value={parseConfig?.tooltip?.triggerOn || "item"}
|
|
1594
|
+
// onChange={(e) =>
|
|
1595
|
+
// transformReturn({
|
|
1596
|
+
// tooltip: { triggerOn: e.target.value },
|
|
1597
|
+
// })
|
|
1598
|
+
// }
|
|
1599
|
+
// options={[
|
|
1600
|
+
// { label: "移动", value: "mousemove" },
|
|
1601
|
+
// { label: "点击", value: "click" },
|
|
1602
|
+
// { label: "移动或点击", value: "mousemove|click" },
|
|
1603
|
+
// { label: "无", value: "none" },
|
|
1604
|
+
// ]}
|
|
1605
|
+
// />
|
|
1606
|
+
// </Form.Item>
|
|
1607
|
+
// <Form.Item
|
|
1608
|
+
// label="背景颜色"
|
|
1609
|
+
// labelCol={{ span: 12 }}
|
|
1610
|
+
// wrapperCol={{ span: 12 }}
|
|
1611
|
+
// >
|
|
1612
|
+
// <ColorPicker
|
|
1613
|
+
// size="small"
|
|
1614
|
+
// value={parseConfig?.tooltip?.backgroundColor}
|
|
1615
|
+
// onChange={(v) =>
|
|
1616
|
+
// transformReturn({
|
|
1617
|
+
// tooltip: { backgroundColor: v.toHexString() },
|
|
1618
|
+
// })
|
|
1619
|
+
// }
|
|
1620
|
+
// />
|
|
1621
|
+
// </Form.Item>
|
|
1622
|
+
// <Form.Item
|
|
1623
|
+
// label="边框颜色"
|
|
1624
|
+
// labelCol={{ span: 12 }}
|
|
1625
|
+
// wrapperCol={{ span: 12 }}
|
|
1626
|
+
// >
|
|
1627
|
+
// <ColorPicker
|
|
1628
|
+
// size="small"
|
|
1629
|
+
// value={parseConfig?.tooltip?.borderColor}
|
|
1630
|
+
// onChange={(v) =>
|
|
1631
|
+
// transformReturn({
|
|
1632
|
+
// tooltip: { borderColor: v.toHexString() },
|
|
1633
|
+
// })
|
|
1634
|
+
// }
|
|
1635
|
+
// />
|
|
1636
|
+
// </Form.Item>
|
|
1637
|
+
// <Form.Item
|
|
1638
|
+
// label="边框宽度"
|
|
1639
|
+
// labelCol={{ span: 12 }}
|
|
1640
|
+
// wrapperCol={{ span: 12 }}
|
|
1641
|
+
// >
|
|
1642
|
+
// <InputNumber
|
|
1643
|
+
// size="small"
|
|
1644
|
+
// value={parseConfig?.tooltip?.borderWidth || 0}
|
|
1645
|
+
// min={0}
|
|
1646
|
+
// suffix="px"
|
|
1647
|
+
// onChange={(v) =>
|
|
1648
|
+
// transformReturn({ tooltip: { borderWidth: v } })
|
|
1649
|
+
// }
|
|
1650
|
+
// />
|
|
1651
|
+
// </Form.Item>
|
|
1652
|
+
// <Form.Item
|
|
1653
|
+
// label="浮层内边距"
|
|
1654
|
+
// labelCol={{ span: 12 }}
|
|
1655
|
+
// wrapperCol={{ span: 12 }}
|
|
1656
|
+
// >
|
|
1657
|
+
// <InputNumber
|
|
1658
|
+
// size="small"
|
|
1659
|
+
// value={parseConfig?.tooltip?.padding || 5}
|
|
1660
|
+
// min={0}
|
|
1661
|
+
// suffix="px"
|
|
1662
|
+
// onChange={(v) =>
|
|
1663
|
+
// transformReturn({ tooltip: { padding: v } })
|
|
1664
|
+
// }
|
|
1665
|
+
// />
|
|
1666
|
+
// </Form.Item>
|
|
1667
|
+
// <Form.Item
|
|
1668
|
+
// label="内容格式器"
|
|
1669
|
+
// layout="vertical"
|
|
1670
|
+
// tooltip={
|
|
1671
|
+
// <div>
|
|
1672
|
+
// {`模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：`}
|
|
1673
|
+
// <ul>
|
|
1674
|
+
// <li>{`折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）`}</li>
|
|
1675
|
+
// <li>{`散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）`}</li>
|
|
1676
|
+
// <li>{`地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）`}</li>
|
|
1677
|
+
// <li>{`饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）`}</li>
|
|
1678
|
+
// </ul>
|
|
1679
|
+
// </div>
|
|
1680
|
+
// }
|
|
1681
|
+
// >
|
|
1682
|
+
// <Input.TextArea
|
|
1683
|
+
// value={parseConfig?.tooltip?.formatter}
|
|
1684
|
+
// onChange={(e) =>
|
|
1685
|
+
// transformReturn({
|
|
1686
|
+
// tooltip: { formatter: e.target.value },
|
|
1687
|
+
// })
|
|
1688
|
+
// }
|
|
1689
|
+
// />
|
|
1690
|
+
// </Form.Item>
|
|
1691
|
+
// </Space>
|
|
1692
|
+
// ),
|
|
1693
|
+
// },
|
|
1390
1694
|
{
|
|
1391
1695
|
key: "custom",
|
|
1392
1696
|
label: "自定义配置",
|