@cloudbase/weda-ui 2.0.10 → 2.0.26
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 +1 -0
- package/package.json +47 -36
- package/src/configs/components/button.json +60 -13
- package/src/configs/components/calendar.json +3 -3
- package/src/configs/components/carousel.json +57 -47
- package/src/configs/components/chart/bar.json +4 -13
- package/src/configs/components/chart/line.json +4 -13
- package/src/configs/components/chart/pie.json +3 -10
- package/src/configs/components/chart/statisticsCard.json +1 -4
- package/src/configs/components/container.json +1 -3
- package/src/configs/components/dataView.json +7 -15
- package/src/configs/components/drawer.json +24 -6
- package/src/configs/components/form/form.json +19 -0
- package/src/configs/components/form/input.json +20 -5
- package/src/configs/components/form/location.json +51 -48
- package/src/configs/components/form/radio.json +1 -3
- package/src/configs/components/form/richText.json +14 -14
- package/src/configs/components/form/select.json +62 -82
- package/src/configs/components/form/textarea.json +14 -1
- package/src/configs/components/form/uploader.json +64 -64
- package/src/configs/components/form/uploaderFile.json +1 -2
- package/src/configs/components/graphicCard.json +44 -45
- package/src/configs/components/image.json +44 -40
- package/src/configs/components/link.json +5 -10
- package/src/configs/components/listView.json +2 -8
- package/src/configs/components/lottery.json +7 -3
- package/src/configs/components/modal.json +26 -21
- package/src/configs/components/navLayout.json +68 -68
- package/src/configs/components/navigationBar.json +4 -1
- package/src/configs/components/richtextview.json +1 -1
- package/src/configs/components/scrollVeiw.json +14 -42
- package/src/configs/components/swiper.json +9 -9
- package/src/configs/components/wedaVideo.json +89 -0
- package/src/configs/components/wxOpenApi/phone.json +7 -21
- package/src/configs/components/wxOpenApi/phoneCode.json +7 -19
- package/src/configs/components/wxOpenApi/share.json +14 -24
- package/src/configs/components/wxOpenApi/userInfo.json +9 -27
- package/src/configs/index.js +2 -0
- package/src/mp/components/button/index.js +1 -1
- package/src/mp/components/button/index.wxml +19 -19
- package/src/mp/components/calendar/index.js +68 -38
- package/src/mp/components/calendar/index.json +3 -2
- package/src/mp/components/calendar/index.wxml +5 -7
- package/src/mp/components/calendar/index.wxss +17 -16
- package/src/mp/components/carousel/index.json +1 -1
- package/src/mp/components/carousel/index.wxml +2 -2
- package/src/mp/components/chart/bar/index.js +1 -2
- package/src/mp/components/chart/bar/index.wxml +1 -1
- package/src/mp/components/chart/common/config/bar.js +1 -1
- package/src/mp/components/chart/common/core/eChartBar.js +29 -34
- package/src/mp/components/chart/common/core/eChartBase.js +46 -32
- package/src/mp/components/chart/common/core/eChartLine.js +34 -40
- package/src/mp/components/chart/common/core/eChartPie.js +12 -9
- package/src/mp/components/chart/ec-canvas/ec-canvas.json +1 -1
- package/src/mp/components/chart/ec-canvas/wx-canvas.js +24 -22
- package/src/mp/components/chart/line/index.js +2 -2
- package/src/mp/components/chart/line/index.wxml +1 -1
- package/src/mp/components/chart/pie/index.js +1 -1
- package/src/mp/components/chart/pie/index.wxml +1 -2
- package/src/mp/components/chart/statisticsCard/index.wxss +7 -10
- package/src/mp/components/dataView/index.wxml +2 -14
- package/src/mp/components/form/checkbox/index.js +15 -7
- package/src/mp/components/form/checkbox/index.wxml +13 -25
- package/src/mp/components/form/form/index.wxml +3 -3
- package/src/mp/components/form/formcell/index.wxml +9 -9
- package/src/mp/components/form/formcell/index.wxss +6 -1
- package/src/mp/components/form/input/index.js +4 -4
- package/src/mp/components/form/input/index.wxml +24 -31
- package/src/mp/components/form/input/index.wxss +9 -3
- package/src/mp/components/form/location/components/mapChoose/index.json +1 -1
- package/src/mp/components/form/location/components/mapChoose/index.wxml +6 -6
- package/src/mp/components/form/location/index.js +7 -1
- package/src/mp/components/form/location/index.json +1 -1
- package/src/mp/components/form/location/index.wxml +6 -10
- package/src/mp/components/form/radio/index.js +14 -6
- package/src/mp/components/form/radio/index.wxml +12 -24
- package/src/mp/components/form/select/index.js +157 -98
- package/src/mp/components/form/select/index.wxml +11 -39
- package/src/mp/components/form/select/index.wxss +10 -1
- package/src/mp/components/form/select/region/index.js +18 -12
- package/src/mp/components/form/switch/index.wxml +11 -18
- package/src/mp/components/form/textarea/index.js +6 -0
- package/src/mp/components/form/textarea/index.wxml +2 -17
- package/src/mp/components/form/textarea/index.wxss +5 -0
- package/src/mp/components/form/tips/index.wxml +1 -3
- package/src/mp/components/form/uploader/index.js +1 -1
- package/src/mp/components/form/uploader/index.wxml +3 -20
- package/src/mp/components/form/uploader/weui-uploader.js +210 -200
- package/src/mp/components/form/uploader/weui-uploader.json +6 -6
- package/src/mp/components/form/uploader/weui-uploader.wxml +38 -38
- package/src/mp/components/form/uploaderFile/index.js +5 -4
- package/src/mp/components/form/uploaderFile/index.wxml +40 -41
- package/src/mp/components/graphicCard/index.js +35 -35
- package/src/mp/components/graphicCard/index.wxml +2 -6
- package/src/mp/components/graphicCard/index.wxss +6 -6
- package/src/mp/components/image/index.wxml +9 -20
- package/src/mp/components/image/index.wxss +3 -1
- package/src/mp/components/listView/index.wxml +5 -7
- package/src/mp/components/listView/index.wxss +2 -2
- package/src/mp/components/lottery/index.wxml +1 -3
- package/src/mp/components/lottery/index.wxss +31 -25
- package/src/mp/components/navLayout/index.js +9 -12
- package/src/mp/components/navLayout/index.wxml +2 -4
- package/src/mp/components/navLayout/index.wxss +10 -10
- package/src/mp/components/navigationBar/index.json +1 -2
- package/src/mp/components/navigationBar/index.wxml +43 -51
- package/src/mp/components/navigationBar/index.wxss +10 -10
- package/src/mp/components/richText/index.wxml +1 -1
- package/src/mp/components/richText/index.wxss +7 -5
- package/src/mp/components/swiper/index.wxml +1 -9
- package/src/mp/components/tabs/index.js +14 -10
- package/src/mp/components/tabs/index.json +1 -1
- package/src/mp/components/tabs/index.wxml +3 -21
- package/src/mp/components/tabs/index.wxss +1 -2
- package/src/mp/components/text/index.wxml +1 -6
- package/src/mp/components/text/index.wxss +1 -1
- package/src/mp/components/wedaVideo/index.js +86 -0
- package/src/mp/components/wedaVideo/index.json +4 -0
- package/src/mp/components/wedaVideo/index.wxml +4 -0
- package/src/mp/components/wedaVideo/index.wxss +20 -0
- package/src/mp/components/wxOpenApi/phone/index.js +1 -9
- package/src/mp/components/wxOpenApi/phone/index.wxml +3 -14
- package/src/mp/components/wxOpenApi/phoneCode/index.json +1 -1
- package/src/mp/components/wxOpenApi/phoneCode/index.wxml +3 -14
- package/src/mp/components/wxOpenApi/share/index.wxml +3 -14
- package/src/mp/components/wxOpenApi/userInfo/index.wxml +3 -13
- package/src/mp/index.json +1 -0
- package/src/mp/style/weda-ui.wxss +24 -9
- package/src/mp/utils/deepEqual.js +37 -37
- package/src/mp/utils/destr.js +41 -40
- package/src/mp/utils/dr_square_point.js +10 -6
- package/src/setupTests.js +13 -13
- package/src/web/actions/showModal/index.tsx +5 -4
- package/src/web/components/button/index.tsx +44 -40
- package/src/web/components/calendar/index.css +99 -65
- package/src/web/components/carousel/index.tsx +1 -1
- package/src/web/components/chart/common/config/bar.js +1 -1
- package/src/web/components/chart/common/core/eChartBar.js +28 -34
- package/src/web/components/chart/common/core/eChartBase.ts +55 -42
- package/src/web/components/chart/common/core/eChartLine.js +34 -40
- package/src/web/components/chart/common/core/eChartPie.js +12 -9
- package/src/web/components/chart/common/core/type.ts +23 -23
- package/src/web/components/chart/common/echart.css +12 -12
- package/src/web/components/chart/common/echarts.ts +3 -5
- package/src/web/components/chart/common/useChart.tsx +34 -16
- package/src/web/components/chart/statisticsCard/index.css +9 -8
- package/src/web/components/container/index.tsx +3 -4
- package/src/web/components/drawer/index.tsx +15 -4
- package/src/web/components/form/checkbox/index.tsx +32 -31
- package/src/web/components/form/enumSelect/NormalSelect.tsx +0 -2
- package/src/web/components/form/form/index.css +3 -6
- package/src/web/components/form/form/index.tsx +7 -6
- package/src/web/components/form/formcell/index.css +11 -18
- package/src/web/components/form/formcell/index.tsx +3 -7
- package/src/web/components/form/input/index.css +8 -4
- package/src/web/components/form/input/index.tsx +61 -53
- package/src/web/components/form/location/common/mapChoose.css +13 -11
- package/src/web/components/form/location/common/selectModal.jsx +2 -11
- package/src/web/components/form/location/common/useLocationInfo.js +4 -0
- package/src/web/components/form/location/components/LocationH5/index.css +19 -20
- package/src/web/components/form/location/components/LocationH5/location.h5.jsx +11 -1
- package/src/web/components/form/location/components/LocationPC/Header.jsx +0 -13
- package/src/web/components/form/location/components/LocationPC/location.PC.jsx +14 -5
- package/src/web/components/form/radio/index.tsx +32 -26
- package/src/web/components/form/renderDecorator.tsx +23 -26
- package/src/web/components/form/select/h5.tsx +155 -104
- package/src/web/components/form/select/index.css +9 -3
- package/src/web/components/form/select/index.tsx +76 -49
- package/src/web/components/form/select/region/index.ts +101 -80
- package/src/web/components/form/select/year.tsx +2 -0
- package/src/web/components/form/switch/index.tsx +40 -40
- package/src/web/components/form/textarea/index.css +4 -0
- package/src/web/components/form/textarea/index.tsx +39 -26
- package/src/web/components/form/types.d.ts +10 -10
- package/src/web/components/form/uploader/index.css +10 -0
- package/src/web/components/form/uploader/uploader.h5.tsx +29 -26
- package/src/web/components/form/uploader/uploader.pc.tsx +3 -6
- package/src/web/components/form/uploaderFile/index.css +24 -23
- package/src/web/components/form/uploaderFile/index.jsx +0 -5
- package/src/web/components/form/uploaderFile/uploadFile.h5.tsx +24 -15
- package/src/web/components/form/uploaderFile/uploadFile.pc.tsx +21 -13
- package/src/web/components/graphicCard/index.css +6 -6
- package/src/web/components/image/image.tsx +2 -2
- package/src/web/components/image/index.css +9 -7
- package/src/web/components/image/index.tsx +29 -12
- package/src/web/components/index.js +1 -0
- package/src/web/components/link/index.tsx +13 -13
- package/src/web/components/listView/index.css +8 -8
- package/src/web/components/lottery/index.css +43 -37
- package/src/web/components/lottery/index.tsx +3 -3
- package/src/web/components/modal/index.tsx +34 -34
- package/src/web/components/navLayout/index.css +25 -25
- package/src/web/components/navLayout/index.tsx +1 -1
- package/src/web/components/navigationBar/index.css +26 -26
- package/src/web/components/navigationBar/index.tsx +2 -2
- package/src/web/components/picker/datePicker.tsx +3 -3
- package/src/web/components/picker/picker.tsx +3 -3
- package/src/web/components/picker/timePicker.tsx +1 -1
- package/src/web/components/richText/index.jsx +41 -46
- package/src/web/components/richTextView/index.css +7 -3
- package/src/web/components/richTextView/index.tsx +4 -6
- package/src/web/components/scrollView/index.tsx +2 -2
- package/src/web/components/slot/index.tsx +3 -4
- package/src/web/components/swiper/index.css +1 -1
- package/src/web/components/swiper/index.tsx +33 -15
- package/src/web/components/tabs/index.css +2 -3
- package/src/web/components/tabs/index.tsx +6 -6
- package/src/web/components/tabs/tabs.h5.tsx +17 -12
- package/src/web/components/tabs/tabs.pc.tsx +45 -34
- package/src/web/components/text/index.css +1 -1
- package/src/web/components/text/index.tsx +13 -14
- package/src/web/components/wedaVideo/index.css +42 -0
- package/src/web/components/wedaVideo/index.tsx +208 -0
- package/src/web/utils/constant.ts +2 -1
- package/src/web/utils/isObjectEqual.js +2 -1
- package/src/web/utils/loading-fallback.tsx +2 -2
- package/src/web/utils/lodash.ts +1 -1
- package/src/web/utils/platform.js +13 -0
- package/src/web/utils/useSetState.ts +6 -2
- package/src/web/weda-ui.css +23 -8
- package/src/docs/common/format.tsx +0 -112
- package/src/docs/common/tableView.css +0 -164
- package/src/docs/common/tableView.tsx +0 -273
- package/src/docs/compsdocs/chart/Bar.mdx +0 -159
- package/src/docs/compsdocs/chart/Line.mdx +0 -100
- package/src/docs/compsdocs/chart/Pie.mdx +0 -83
- package/src/docs/compsdocs/chart/_category_.json +0 -1
- package/src/docs/compsdocs/chart/statisticsCard.mdx +0 -51
- package/src/docs/compsdocs/database/DataView.mdx +0 -33
- package/src/docs/compsdocs/database/ListView.mdx +0 -33
- package/src/docs/compsdocs/database/_category_.json +0 -1
- package/src/docs/compsdocs/form/Form.mdx +0 -35
- package/src/docs/compsdocs/form/FormCheckbox.mdx +0 -35
- package/src/docs/compsdocs/form/FormDate.mdx +0 -30
- package/src/docs/compsdocs/form/FormEmail.mdx +0 -30
- package/src/docs/compsdocs/form/FormImageUploader.mdx +0 -31
- package/src/docs/compsdocs/form/FormInput.mdx +0 -30
- package/src/docs/compsdocs/form/FormLocation.mdx +0 -64
- package/src/docs/compsdocs/form/FormPhone.mdx +0 -30
- package/src/docs/compsdocs/form/FormRadio.mdx +0 -35
- package/src/docs/compsdocs/form/FormRegion.mdx +0 -30
- package/src/docs/compsdocs/form/FormSelect.mdx +0 -36
- package/src/docs/compsdocs/form/FormSwitch.mdx +0 -30
- package/src/docs/compsdocs/form/FormTextarea.mdx +0 -30
- package/src/docs/compsdocs/form/FormTime.mdx +0 -30
- package/src/docs/compsdocs/form/FormUploadFile.mdx +0 -30
- package/src/docs/compsdocs/form/FormUrl.mdx +0 -30
- package/src/docs/compsdocs/form/_category_.json +0 -1
- package/src/docs/compsdocs/grid/Card.mdx +0 -32
- package/src/docs/compsdocs/grid/Container.mdx +0 -42
- package/src/docs/compsdocs/grid/Footer.mdx +0 -31
- package/src/docs/compsdocs/grid/GridLayout.mdx +0 -32
- package/src/docs/compsdocs/grid/Header.mdx +0 -31
- package/src/docs/compsdocs/grid/Layout.mdx +0 -25
- package/src/docs/compsdocs/grid/List.mdx +0 -31
- package/src/docs/compsdocs/grid/ScrollView.mdx +0 -37
- package/src/docs/compsdocs/grid/Swiper.mdx +0 -58
- package/src/docs/compsdocs/grid/_category_.json +0 -1
- package/src/docs/compsdocs/media/Icon.mdx +0 -31
- package/src/docs/compsdocs/media/Image.mdx +0 -55
- package/src/docs/compsdocs/media/_category_.json +0 -1
- package/src/docs/compsdocs/model/ModelCreate.mdx +0 -20
- package/src/docs/compsdocs/model/ModelDetail.mdx +0 -20
- package/src/docs/compsdocs/model/ModelTable.mdx +0 -24
- package/src/docs/compsdocs/model/ModelUpdate.mdx +0 -21
- package/src/docs/compsdocs/model/PageLayout.mdx +0 -21
- package/src/docs/compsdocs/model/_category_.json +0 -1
- package/src/docs/compsdocs/navmenu/Classification.mdx +0 -38
- package/src/docs/compsdocs/navmenu/NavBar.mdx +0 -43
- package/src/docs/compsdocs/navmenu/NavLayout.mdx +0 -30
- package/src/docs/compsdocs/navmenu/TabBar.mdx +0 -43
- package/src/docs/compsdocs/navmenu/TabBarItem.mdx +0 -29
- package/src/docs/compsdocs/navmenu/_category_.json +0 -1
- package/src/docs/compsdocs/senior/Lottery.mdx +0 -48
- package/src/docs/compsdocs/senior/Modal.mdx +0 -58
- package/src/docs/compsdocs/senior/SlotMachine.mdx +0 -52
- package/src/docs/compsdocs/senior/_category_.json +0 -1
- package/src/docs/compsdocs/show/Calendar.mdx +0 -29
- package/src/docs/compsdocs/show/Divider.mdx +0 -31
- package/src/docs/compsdocs/show/GraphicCard.mdx +0 -30
- package/src/docs/compsdocs/show/Item.mdx +0 -32
- package/src/docs/compsdocs/show/ItemList.mdx +0 -47
- package/src/docs/compsdocs/show/Media.mdx +0 -25
- package/src/docs/compsdocs/show/StatusTip.mdx +0 -25
- package/src/docs/compsdocs/show/Swiper.mdx +0 -33
- package/src/docs/compsdocs/show/Tabs.mdx +0 -38
- package/src/docs/compsdocs/show/_category_.json +0 -1
- package/src/docs/compsdocs/show/button.mdx +0 -25
- package/src/docs/compsdocs/text/Link.mdx +0 -43
- package/src/docs/compsdocs/text/RichTextView.mdx +0 -36
- package/src/docs/compsdocs/text/Text.mdx +0 -31
- package/src/docs/compsdocs/text/Title.mdx +0 -32
- package/src/docs/compsdocs/text/_category_.json +0 -1
- package/src/docs/compsdocs/wxOpen/Phone.mdx +0 -60
- package/src/docs/compsdocs/wxOpen/Share.mdx +0 -46
- package/src/docs/compsdocs/wxOpen/UserInfo.mdx +0 -60
- package/src/docs/compsdocs/wxOpen/_category_.json +0 -4
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
.tableview {
|
|
2
|
-
width: 700px;
|
|
3
|
-
table-layout: fixed;
|
|
4
|
-
}
|
|
5
|
-
.tr-width-1 {
|
|
6
|
-
width: 100px;
|
|
7
|
-
}
|
|
8
|
-
.tr-width-2 {
|
|
9
|
-
width: 200px;
|
|
10
|
-
}
|
|
11
|
-
.tr-width-3 {
|
|
12
|
-
width: 300px;
|
|
13
|
-
}
|
|
14
|
-
.tr-width-4 {
|
|
15
|
-
width: 400px;
|
|
16
|
-
}
|
|
17
|
-
.tr-width-6 {
|
|
18
|
-
width: 600px;
|
|
19
|
-
}
|
|
20
|
-
.tr-width-7 {
|
|
21
|
-
width: 700px;
|
|
22
|
-
}
|
|
23
|
-
.custom-table--body-wrapper.is-fixed {
|
|
24
|
-
overflow-y: hidden;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.custom-table--fixed-wrapper {
|
|
28
|
-
box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.1);
|
|
29
|
-
|
|
30
|
-
left: 0;
|
|
31
|
-
top: 0;
|
|
32
|
-
bottom: 0;
|
|
33
|
-
width: 800px;
|
|
34
|
-
background-color: #fff;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.custom-table td,
|
|
38
|
-
.custom-table th {
|
|
39
|
-
white-space: nowrap;
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
height: 42px;
|
|
42
|
-
padding: 2px !important;
|
|
43
|
-
}
|
|
44
|
-
.custom-table .table {
|
|
45
|
-
table-layout: fixed;
|
|
46
|
-
margin-bottom: 0;
|
|
47
|
-
}
|
|
48
|
-
/** 底部边框 */
|
|
49
|
-
.custom-table::after {
|
|
50
|
-
content: '';
|
|
51
|
-
display: block;
|
|
52
|
-
height: 0px;
|
|
53
|
-
position: relative;
|
|
54
|
-
top: -1px;
|
|
55
|
-
border-bottom: 1px solid #ddd;
|
|
56
|
-
}
|
|
57
|
-
/** 右侧边框 */
|
|
58
|
-
.custom-table::before {
|
|
59
|
-
content: '';
|
|
60
|
-
display: block;
|
|
61
|
-
position: absolute;
|
|
62
|
-
top: 0;
|
|
63
|
-
bottom: 0;
|
|
64
|
-
right: 0;
|
|
65
|
-
border-right: 1px solid #ddd;
|
|
66
|
-
}
|
|
67
|
-
.custom-table th.gutter {
|
|
68
|
-
width: 15px;
|
|
69
|
-
padding: 0;
|
|
70
|
-
}
|
|
71
|
-
.tea-table__header {
|
|
72
|
-
overflow: hidden;
|
|
73
|
-
margin-bottom: -18px;
|
|
74
|
-
}
|
|
75
|
-
.tea-table__box {
|
|
76
|
-
border-collapse: collapse;
|
|
77
|
-
table-layout: fixed;
|
|
78
|
-
width: 100%;
|
|
79
|
-
position: relative;
|
|
80
|
-
border-spacing: 0px;
|
|
81
|
-
}
|
|
82
|
-
.tea-text-overflow,
|
|
83
|
-
.tea-text-truncate {
|
|
84
|
-
display: flex;
|
|
85
|
-
vertical-align: middle;
|
|
86
|
-
white-space: nowrap;
|
|
87
|
-
text-overflow: ellipsis;
|
|
88
|
-
max-width: 100%;
|
|
89
|
-
overflow: hidden;
|
|
90
|
-
}
|
|
91
|
-
.tea-table__header thead {
|
|
92
|
-
background-color: transparent;
|
|
93
|
-
border-width: 0px;
|
|
94
|
-
border-style: initial;
|
|
95
|
-
border-color: initial;
|
|
96
|
-
border-image: initial;
|
|
97
|
-
}
|
|
98
|
-
colgroup {
|
|
99
|
-
display: table-column-group;
|
|
100
|
-
}
|
|
101
|
-
.tea-table__box tr {
|
|
102
|
-
outline: none 0px;
|
|
103
|
-
transition: background-color 0.1s linear 0s;
|
|
104
|
-
}
|
|
105
|
-
.tea-table__box th {
|
|
106
|
-
position: relative;
|
|
107
|
-
padding: 10px;
|
|
108
|
-
border-bottom: 1px solid rgb(231, 234, 239);
|
|
109
|
-
}
|
|
110
|
-
.tea-table__box th > div {
|
|
111
|
-
position: relative;
|
|
112
|
-
color: rgb(0 0 0 / 77%);
|
|
113
|
-
padding: 0px;
|
|
114
|
-
display: inline-block;
|
|
115
|
-
vertical-align: middle;
|
|
116
|
-
font-size: 16px;
|
|
117
|
-
width: 100%;
|
|
118
|
-
overflow-wrap: break-word;
|
|
119
|
-
word-break: break-word;
|
|
120
|
-
}
|
|
121
|
-
.tea-table__box tr > td {
|
|
122
|
-
color: rgb(0 0 0);
|
|
123
|
-
padding: 10px;
|
|
124
|
-
vertical-align: middle;
|
|
125
|
-
font-size: 16px;
|
|
126
|
-
vertical-align: top;
|
|
127
|
-
}
|
|
128
|
-
.tea-table__box tr > td > code {
|
|
129
|
-
color: #c7254e;
|
|
130
|
-
font-size: 85%;
|
|
131
|
-
border: none;
|
|
132
|
-
}
|
|
133
|
-
.tea-text-overflow,
|
|
134
|
-
.tea-text-truncate {
|
|
135
|
-
display: flex;
|
|
136
|
-
vertical-align: middle;
|
|
137
|
-
white-space: nowrap;
|
|
138
|
-
text-overflow: ellipsis;
|
|
139
|
-
max-width: 100%;
|
|
140
|
-
overflow: hidden;
|
|
141
|
-
}
|
|
142
|
-
table {
|
|
143
|
-
display: table;
|
|
144
|
-
border-collapse: separate;
|
|
145
|
-
box-sizing: border-box;
|
|
146
|
-
text-indent: initial;
|
|
147
|
-
border-spacing: 2px;
|
|
148
|
-
border-color: grey;
|
|
149
|
-
}
|
|
150
|
-
.tea-table__body {
|
|
151
|
-
border-bottom: 1px solid rgb(207, 213, 222);
|
|
152
|
-
overflow: auto;
|
|
153
|
-
}
|
|
154
|
-
colgroup {
|
|
155
|
-
display: table-column-group;
|
|
156
|
-
}
|
|
157
|
-
col {
|
|
158
|
-
display: table-column;
|
|
159
|
-
}
|
|
160
|
-
.hash-link{
|
|
161
|
-
opacity: 0;
|
|
162
|
-
padding-left: 0.5rem;
|
|
163
|
-
transition: opacity var(--ifm-transition-fast);
|
|
164
|
-
}
|
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useContext } from 'react';
|
|
2
|
-
import { components } from '../../configs/index';
|
|
3
|
-
import { objFormat, ICompsConfig } from './format';
|
|
4
|
-
import './tableView.css';
|
|
5
|
-
export interface ComponentDocument {
|
|
6
|
-
exampleMap?: {
|
|
7
|
-
[key: string]: {
|
|
8
|
-
component: React.ComponentType;
|
|
9
|
-
code: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
codeMap?: {
|
|
13
|
-
[key: string]: {
|
|
14
|
-
code: string;
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
data?: {
|
|
18
|
-
[key: string]: {
|
|
19
|
-
code: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
function createFragment(nodes: React.ReactNodeArray) {
|
|
24
|
-
return React.createElement(React.Fragment, {}, ...nodes);
|
|
25
|
-
}
|
|
26
|
-
export interface TableLayoutViewProps {
|
|
27
|
-
componentKey?: string;
|
|
28
|
-
document: ComponentDocument;
|
|
29
|
-
variables?: object;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function getCompsMeta(key, type, origin) {
|
|
33
|
-
var compsMeta: ICompsConfig;
|
|
34
|
-
try {
|
|
35
|
-
switch (origin) {
|
|
36
|
-
case 'lowCode':
|
|
37
|
-
var metaLowcode = require('/docs/lowcode/components/wedaUI/lowcode-comps/weda_standard/comps/' +
|
|
38
|
-
key +
|
|
39
|
-
'.comp.json');
|
|
40
|
-
if (type && type == 'event') {
|
|
41
|
-
compsMeta = metaLowcode['emitEvents'];
|
|
42
|
-
} else if (type && (type == 'attribute' || type == 'slot')) {
|
|
43
|
-
compsMeta = metaLowcode['dataForm'];
|
|
44
|
-
} else if (type && type == 'description') {
|
|
45
|
-
compsMeta = metaLowcode['meta'];
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return compsMeta;
|
|
49
|
-
case 'sourceCode':
|
|
50
|
-
if (type && type == 'event') {
|
|
51
|
-
compsMeta = components[key]['events']||{};
|
|
52
|
-
} else if (type && (type == 'attribute' || type == 'slot')) {
|
|
53
|
-
compsMeta = components[key]['data']['properties']||{};
|
|
54
|
-
} else if (type && type == 'description') {
|
|
55
|
-
compsMeta = components[key]['meta']||{};
|
|
56
|
-
}
|
|
57
|
-
return compsMeta;
|
|
58
|
-
}
|
|
59
|
-
} catch (e) {
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
export default function TableLayoutView({ componentKey, type, origin }) {
|
|
64
|
-
var compsMeta = getCompsMeta(componentKey, type, origin);
|
|
65
|
-
var tableView = [];
|
|
66
|
-
if (compsMeta && type != 'description') {
|
|
67
|
-
tableView = objFormat(compsMeta, type, origin);
|
|
68
|
-
} else {
|
|
69
|
-
tableView.push(compsMeta);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
return (
|
|
73
|
-
<>
|
|
74
|
-
{type == 'attribute' && tableView.length > 0 && (
|
|
75
|
-
<>
|
|
76
|
-
<div className="tea-table__header">
|
|
77
|
-
<table className="tea-table__box">
|
|
78
|
-
<colgroup>
|
|
79
|
-
<col style={{ width: '18%' }}></col>
|
|
80
|
-
<col style={{ width: '10%' }}></col>
|
|
81
|
-
<col style={{ width: '15%' }}></col>
|
|
82
|
-
<col style={{ width: '25%' }}></col>
|
|
83
|
-
<col style={{ width: 'auto' }}></col>
|
|
84
|
-
</colgroup>
|
|
85
|
-
<thead>
|
|
86
|
-
<tr>
|
|
87
|
-
<th className="">
|
|
88
|
-
<div>
|
|
89
|
-
<span className="tea-text-overflow" title="属性名">
|
|
90
|
-
属性名
|
|
91
|
-
</span>
|
|
92
|
-
</div>
|
|
93
|
-
</th>
|
|
94
|
-
<th className="">
|
|
95
|
-
<div>
|
|
96
|
-
<span className="tea-text-overflow" title="类型">
|
|
97
|
-
类型
|
|
98
|
-
</span>
|
|
99
|
-
</div>
|
|
100
|
-
</th>
|
|
101
|
-
<th className="">
|
|
102
|
-
<div>
|
|
103
|
-
<span className="tea-text-overflow" title="属性分组">
|
|
104
|
-
属性分组
|
|
105
|
-
</span>
|
|
106
|
-
</div>
|
|
107
|
-
</th>
|
|
108
|
-
<th className="">
|
|
109
|
-
<div>
|
|
110
|
-
<span className="tea-text-overflow" title="默认值">
|
|
111
|
-
默认值
|
|
112
|
-
</span>
|
|
113
|
-
</div>
|
|
114
|
-
</th>
|
|
115
|
-
<th className="">
|
|
116
|
-
<div>
|
|
117
|
-
<span className="tea-text-overflow" title="说明">
|
|
118
|
-
说明
|
|
119
|
-
</span>
|
|
120
|
-
</div>
|
|
121
|
-
</th>
|
|
122
|
-
</tr>
|
|
123
|
-
</thead>
|
|
124
|
-
</table>
|
|
125
|
-
</div>
|
|
126
|
-
<table className="tea-table__box">
|
|
127
|
-
<colgroup>
|
|
128
|
-
<col style={{ width: '18%' }}></col>
|
|
129
|
-
<col style={{ width: '10%' }}></col>
|
|
130
|
-
<col style={{ width: '15%' }}></col>
|
|
131
|
-
<col style={{ width: '25%' }}></col>
|
|
132
|
-
<col style={{ width: 'auto' }}></col>
|
|
133
|
-
</colgroup>
|
|
134
|
-
<tbody>
|
|
135
|
-
{tableView.map((row, index) => (
|
|
136
|
-
<tr key={index}>
|
|
137
|
-
<td>{row.title}</td>
|
|
138
|
-
<td>
|
|
139
|
-
<code>{row.type}</code>
|
|
140
|
-
</td>
|
|
141
|
-
<td>{row['x-category']}</td>
|
|
142
|
-
<td>{row.default}</td>
|
|
143
|
-
<td>{row.description}</td>
|
|
144
|
-
</tr>
|
|
145
|
-
))}
|
|
146
|
-
</tbody>
|
|
147
|
-
</table>
|
|
148
|
-
</>
|
|
149
|
-
)}
|
|
150
|
-
{type == 'slot' && tableView.length > 0 && (
|
|
151
|
-
<>
|
|
152
|
-
<div className="tea-table__header">
|
|
153
|
-
<table className="tea-table__box">
|
|
154
|
-
<colgroup>
|
|
155
|
-
<col style={{ width: '18%' }}></col>
|
|
156
|
-
<col style={{ width: 'auto' }}></col>
|
|
157
|
-
</colgroup>
|
|
158
|
-
<thead>
|
|
159
|
-
<tr>
|
|
160
|
-
<th className="">
|
|
161
|
-
<div>
|
|
162
|
-
<span className="tea-text-overflow" title="属性名">
|
|
163
|
-
名称
|
|
164
|
-
</span>
|
|
165
|
-
</div>
|
|
166
|
-
</th>
|
|
167
|
-
<th className="">
|
|
168
|
-
<div>
|
|
169
|
-
<span className="tea-text-overflow" title="类型">
|
|
170
|
-
说明
|
|
171
|
-
</span>
|
|
172
|
-
</div>
|
|
173
|
-
</th>
|
|
174
|
-
</tr>
|
|
175
|
-
</thead>
|
|
176
|
-
</table>
|
|
177
|
-
</div>
|
|
178
|
-
<table className="tea-table__box">
|
|
179
|
-
<colgroup>
|
|
180
|
-
<col style={{ width: '18%' }}></col>
|
|
181
|
-
<col style={{ width: 'auto' }}></col>
|
|
182
|
-
</colgroup>
|
|
183
|
-
<tbody>
|
|
184
|
-
{tableView.map((row, index) => (
|
|
185
|
-
<tr key={index}>
|
|
186
|
-
<td>{row.code}</td>
|
|
187
|
-
<td>{row.description}</td>
|
|
188
|
-
</tr>
|
|
189
|
-
))}
|
|
190
|
-
</tbody>
|
|
191
|
-
</table>
|
|
192
|
-
</>
|
|
193
|
-
)}
|
|
194
|
-
{type == 'event' && tableView.length > 0 && (
|
|
195
|
-
<>
|
|
196
|
-
<div className="tea-table__header">
|
|
197
|
-
<table className="tea-table__box">
|
|
198
|
-
<colgroup>
|
|
199
|
-
<col style={{ width: '18%' }}></col>
|
|
200
|
-
<col style={{ width: '25%' }}></col>
|
|
201
|
-
<col style={{ width: '16%' }}></col>
|
|
202
|
-
<col style={{ width: 'auto' }}></col>
|
|
203
|
-
</colgroup>
|
|
204
|
-
<thead>
|
|
205
|
-
<tr>
|
|
206
|
-
<th className="">
|
|
207
|
-
<div>
|
|
208
|
-
<span className="tea-text-overflow" title="事件名">
|
|
209
|
-
事件名
|
|
210
|
-
</span>
|
|
211
|
-
</div>
|
|
212
|
-
</th>
|
|
213
|
-
<th className="">
|
|
214
|
-
<div>
|
|
215
|
-
<span className="tea-text-overflow" title="事件code">
|
|
216
|
-
事件code
|
|
217
|
-
</span>
|
|
218
|
-
</div>
|
|
219
|
-
</th>
|
|
220
|
-
<th className="">
|
|
221
|
-
<div>
|
|
222
|
-
<span className="tea-text-overflow" title="适用情况">
|
|
223
|
-
适用情况
|
|
224
|
-
</span>
|
|
225
|
-
</div>
|
|
226
|
-
</th>
|
|
227
|
-
<th className="">
|
|
228
|
-
<div>
|
|
229
|
-
<span className="tea-text-overflow" title="说明">
|
|
230
|
-
说明
|
|
231
|
-
</span>
|
|
232
|
-
</div>
|
|
233
|
-
</th>
|
|
234
|
-
</tr>
|
|
235
|
-
</thead>
|
|
236
|
-
</table>
|
|
237
|
-
</div>
|
|
238
|
-
<table className="tea-table__box">
|
|
239
|
-
<colgroup>
|
|
240
|
-
<col style={{ width: '18%' }}></col>
|
|
241
|
-
<col style={{ width: '25%' }}></col>
|
|
242
|
-
<col style={{ width: '16%' }}></col>
|
|
243
|
-
<col style={{ width: 'auto' }}></col>
|
|
244
|
-
</colgroup>
|
|
245
|
-
<tbody>
|
|
246
|
-
{tableView.map((row, index) => (
|
|
247
|
-
<tr key={index}>
|
|
248
|
-
<td>{row.name}</td>
|
|
249
|
-
<td>
|
|
250
|
-
<code>{row.title}</code>
|
|
251
|
-
</td>
|
|
252
|
-
<td>{row.platforms}</td>
|
|
253
|
-
<td>{row.description}</td>
|
|
254
|
-
</tr>
|
|
255
|
-
))}
|
|
256
|
-
</tbody>
|
|
257
|
-
</table>
|
|
258
|
-
</>
|
|
259
|
-
)}
|
|
260
|
-
{type == 'description' && tableView.length > 0 && (
|
|
261
|
-
<>
|
|
262
|
-
<h2>
|
|
263
|
-
<a aria-hidden="true" className="anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module" id="适用场景"></a>
|
|
264
|
-
适用场景
|
|
265
|
-
<a className="hash-link" href="#适用场景" title="标题的直接链接">#</a>
|
|
266
|
-
</h2>
|
|
267
|
-
<p>{tableView[0]?.description?tableView[0]?.description:tableView[0]?.desc}</p>
|
|
268
|
-
</>
|
|
269
|
-
)}
|
|
270
|
-
{tableView.length == 0 && <p>无</p>}
|
|
271
|
-
</>
|
|
272
|
-
);
|
|
273
|
-
}
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
# 柱状图
|
|
2
|
-
|
|
3
|
-
<TableLayoutView
|
|
4
|
-
componentKey="Bar"
|
|
5
|
-
type="description"
|
|
6
|
-
origin="sourceCode"
|
|
7
|
-
></TableLayoutView>
|
|
8
|
-
|
|
9
|
-
<img
|
|
10
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/bb95e133b8b4aa28acc22917116e76c2.png"
|
|
11
|
-
width="40%"
|
|
12
|
-
></img>
|
|
13
|
-
|
|
14
|
-
## 使用说明
|
|
15
|
-
|
|
16
|
-
进入**应用编辑器**页面,将**图表组件** > **柱状图**组件拖进相应容器即可。
|
|
17
|
-
|
|
18
|
-
## 属性
|
|
19
|
-
|
|
20
|
-
import TableLayoutView from '../../common/tableView';
|
|
21
|
-
|
|
22
|
-
<TableLayoutView
|
|
23
|
-
componentKey="Bar"
|
|
24
|
-
type="attribute"
|
|
25
|
-
origin="sourceCode"
|
|
26
|
-
></TableLayoutView>
|
|
27
|
-
|
|
28
|
-
## 事件
|
|
29
|
-
|
|
30
|
-
<TableLayoutView
|
|
31
|
-
componentKey="Bar"
|
|
32
|
-
type="event"
|
|
33
|
-
origin="sourceCode"
|
|
34
|
-
></TableLayoutView>
|
|
35
|
-
|
|
36
|
-
### 进阶属性
|
|
37
|
-
|
|
38
|
-
支持配置坐标轴样式、数据标签和显示单位等属性。
|
|
39
|
-
|
|
40
|
-
- 显示单位:数值量级支持 `个/十/百/千/万/十万/百万/千万/亿`。
|
|
41
|
-
- 小数位数:支持设置 `0-10` 位小数。
|
|
42
|
-
- 后缀:支持自定义。默认根据数量级生成 `-/十/百/千/万/十万/百万/千万/亿`。
|
|
43
|
-
|
|
44
|
-
### 自定义连接器使用场景
|
|
45
|
-
|
|
46
|
-
当数据源配置时选择 [自定义连接器](https://cloud.tencent.com/document/product/1301/68457),需用户自行在自定义连接器内按照参数结构定义数据,才可正常在统计卡片组件内渲染,详情请参见 [图表组件参数定义](https://cloud.tencent.com/document/product/1301/71197)。
|
|
47
|
-
|
|
48
|
-
> ?当使用自定义连接器时,数据筛选、字段选择、统计方式、统计空值属性均需用户在所建自定义连接器内自行定义,其他属性与数据模型使用场景配置保持一致。
|
|
49
|
-
|
|
50
|
-
## 使用示例
|
|
51
|
-
|
|
52
|
-
下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 [数据模型](https://cloud.tencent.com/document/product/1301/68452)。
|
|
53
|
-
|
|
54
|
-
| 销售姓名 | 客户地区 | 销售总额 | 销售单数 | 性别 |
|
|
55
|
-
| -------- | -------- | -------- | -------- | ---- |
|
|
56
|
-
| 张三 | 北京 | 1000000 | 3 | 男 |
|
|
57
|
-
| 赵四 | 北京 | 2000000 | 2 | 男 |
|
|
58
|
-
| 赵四 | 上海 | 100000 | 1 | 男 |
|
|
59
|
-
| 王五 | 上海 | 200000 | 1 | 男 |
|
|
60
|
-
| 王五 | 深圳 | 500000 | 1 | 男 |
|
|
61
|
-
| 李六 | 北京 | 5000000 | 6 | 女 |
|
|
62
|
-
| 李六 | 深圳 | 200000 | 1 | 女 |
|
|
63
|
-
|
|
64
|
-
### 示例 1:各销售人员的销售总业绩对比(纵向)
|
|
65
|
-
|
|
66
|
-
1. 新建**柱状图**组件,进入右侧**属性** > **基础属性**页面,单击**数据源**下拉菜单,选择**销售业绩表**并选择**统计**方法。
|
|
67
|
-
<img
|
|
68
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/246dfdeed6b8173d2ec4d5124e4e7412.png"
|
|
69
|
-
width="50%"
|
|
70
|
-
></img>
|
|
71
|
-
2. 在**维度(X 轴)**单击**字段选择**下拉菜单,选择**销售姓名**。
|
|
72
|
-
<img
|
|
73
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/3286b7330f0d13703c347a4def16cea0.png"
|
|
74
|
-
width="50%"
|
|
75
|
-
></img>
|
|
76
|
-
3. 在**数值(Y 轴)**下,单击**添加 Y 轴字段**。**字段**类型选择**销售总额**,**关系**类型选择**求和**。
|
|
77
|
-
<img
|
|
78
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/34429ad0bb7df362b77b8d9f25df2534.png"
|
|
79
|
-
width="50%"
|
|
80
|
-
></img>
|
|
81
|
-
4. 下拉右侧属性,进入**进阶属性**内单击开启**显示单位**。单击**数量值级**下拉菜单设置为**万**,**后缀**项设置为万。
|
|
82
|
-
<img
|
|
83
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/1ee81e2f0863fb12754d9d3a1b671bcf.png"
|
|
84
|
-
width="50%"
|
|
85
|
-
></img>
|
|
86
|
-
5. 根据需要修改标题、坐标轴样式、图例样式等属性,最终效果如下图展示:
|
|
87
|
-
|
|
88
|
-
<img
|
|
89
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/59e7f5e7d7dd1ab170b5a983c08643bf.png"
|
|
90
|
-
width="50%"
|
|
91
|
-
></img>
|
|
92
|
-
|
|
93
|
-
### 示例 2:各销售人员的销售总业绩对比(纵向)- 按照地区对比
|
|
94
|
-
|
|
95
|
-
在 [示例 1]的配置基础上,增加分组字段,单击**分组**下拉菜单,选择**客户地区**。
|
|
96
|
-
|
|
97
|
-
<img
|
|
98
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/f06d382dbbbe971dd8ddc2aba8e6630f.png"
|
|
99
|
-
width="50%"
|
|
100
|
-
></img>
|
|
101
|
-
|
|
102
|
-
最终效果展示:
|
|
103
|
-
|
|
104
|
-
<img
|
|
105
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/2228adb1cbbc6df66787b41496e516ac.png"
|
|
106
|
-
width="50%"
|
|
107
|
-
></img>
|
|
108
|
-
|
|
109
|
-
单击开启**是否堆叠**功能,可查看堆叠效果:
|
|
110
|
-
|
|
111
|
-
<img
|
|
112
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/3cc42d66be3fc18adaee450f9f85d691.png"
|
|
113
|
-
width="50%"
|
|
114
|
-
></img>
|
|
115
|
-
|
|
116
|
-
### 示例 3:各销售人员的销售总业绩对比(纵向)- 仅查看性别为男的数据
|
|
117
|
-
|
|
118
|
-
1. 在 [示例 1]的配置基础上,单击**数据筛选**。
|
|
119
|
-
<img
|
|
120
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/a5f691429af099b6598f864b8b069a7d.png"
|
|
121
|
-
width="50%"
|
|
122
|
-
></img>
|
|
123
|
-
2. 设置相应数据筛选参数,单击**确定**增加筛选条件。
|
|
124
|
-
|
|
125
|
-
<img
|
|
126
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/2e8899bf24ce2f249cfad4b25c8cb2f2.png"
|
|
127
|
-
width="50%"
|
|
128
|
-
></img>
|
|
129
|
-
|
|
130
|
-
### 示例 4:各销售人员的"客户覆盖地区数"对比和"总销售单数"对比(横向)
|
|
131
|
-
|
|
132
|
-
1. **柱形图方向**单击选择**横向**。
|
|
133
|
-
|
|
134
|
-
<img
|
|
135
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/1b5eaad5033960447387d0dead4148af.png"
|
|
136
|
-
width="50%"
|
|
137
|
-
></img>
|
|
138
|
-
|
|
139
|
-
2. 在**维度(Y 轴)**单击**字段选择**下拉菜单,选择**销售姓名**。
|
|
140
|
-
3. 在**数值(X 轴)**下,单击**添加字段**。添加以下两个字段:
|
|
141
|
-
|
|
142
|
-
- 字段 1:客户地区;统计方式:计数
|
|
143
|
-
- 字段 2:销售单数;统计方式:求和
|
|
144
|
-
|
|
145
|
-
<img
|
|
146
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/fee0ff35a0a8181fc1687ac8eaeabd63.png"
|
|
147
|
-
width="50%"
|
|
148
|
-
></img>
|
|
149
|
-
|
|
150
|
-
3. 最终效果展示:
|
|
151
|
-
|
|
152
|
-
<img
|
|
153
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/6b3f96ce483e40da66e4866caa2c6f29.png"
|
|
154
|
-
width="50%"
|
|
155
|
-
></img>
|
|
156
|
-
|
|
157
|
-
## 限制说明
|
|
158
|
-
|
|
159
|
-
维度轴不支持设置时间类型,可设置日期类型和日期时间类型。
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
# 折线图
|
|
2
|
-
|
|
3
|
-
<TableLayoutView
|
|
4
|
-
componentKey="Line"
|
|
5
|
-
type="description"
|
|
6
|
-
origin="sourceCode"
|
|
7
|
-
></TableLayoutView>
|
|
8
|
-
|
|
9
|
-
<img
|
|
10
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/8a53bc16ae84ef05d6dac6fa037718cb.png"
|
|
11
|
-
width="50%"
|
|
12
|
-
></img>
|
|
13
|
-
|
|
14
|
-
## 使用说明
|
|
15
|
-
|
|
16
|
-
进入**应用编辑器**页面,将**图表组件** > **折线图**组件拖进相应容器即可。
|
|
17
|
-
|
|
18
|
-
## 属性
|
|
19
|
-
|
|
20
|
-
import TableLayoutView from '../../common/tableView';
|
|
21
|
-
|
|
22
|
-
<TableLayoutView
|
|
23
|
-
componentKey="Line"
|
|
24
|
-
type="attribute"
|
|
25
|
-
origin="sourceCode"
|
|
26
|
-
></TableLayoutView>
|
|
27
|
-
|
|
28
|
-
## 事件
|
|
29
|
-
|
|
30
|
-
<TableLayoutView
|
|
31
|
-
componentKey="Line"
|
|
32
|
-
type="event"
|
|
33
|
-
origin="sourceCode"
|
|
34
|
-
></TableLayoutView>
|
|
35
|
-
|
|
36
|
-
### 高级属性
|
|
37
|
-
|
|
38
|
-
支持配置坐标轴样式、数据标签和显示单位等属性。
|
|
39
|
-
|
|
40
|
-
- 显示单位:数值量级支持 `个/十/百/千/万/十万/百万/千万/亿`。
|
|
41
|
-
- 小数位数:支持设置 `0-10` 位小数。
|
|
42
|
-
- 后缀:支持自定义。默认根据数量级生成 `-/十/百/千/万/十万/百万/千万/亿`。
|
|
43
|
-
|
|
44
|
-
### 自定义连接器使用场景
|
|
45
|
-
|
|
46
|
-
当数据源配置时选择 [自定义连接器](https://cloud.tencent.com/document/product/1301/68457),需用户自行在自定义连接器内按照参数结构定义数据,才可正常在统计卡片组件内渲染,详情请参见 [图表组件参数定义](https://cloud.tencent.com/document/product/1301/71197)。
|
|
47
|
-
|
|
48
|
-
> ?当使用自定义连接器时,数据筛选、字段选择、统计方式、统计空值属性均需用户在所建自定义连接器内自行定义,其他属性与数据模型使用场景配置保持一致。
|
|
49
|
-
|
|
50
|
-
## 使用示例
|
|
51
|
-
|
|
52
|
-
下列示例数据源为销售业绩表。示例数据配置如下表所示。更多数据配置操作请参见 [数据模型](https://cloud.tencent.com/document/product/1301/68452)。
|
|
53
|
-
|
|
54
|
-
| 销售姓名 | 客户地区 | 销售总额 | 销售单数 | 性别 | 成单日期 |
|
|
55
|
-
| -------- | -------- | -------- | -------- | ---- | ---------- |
|
|
56
|
-
| 张三 | 北京 | 1000000 | 3 | 男 | 2022-01-01 |
|
|
57
|
-
| 赵四 | 北京 | 2000000 | 2 | 男 | 2022-02-02 |
|
|
58
|
-
| 赵四 | 上海 | 100000 | 1 | 男 | 2022-03-03 |
|
|
59
|
-
| 王五 | 上海 | 200000 | 1 | 男 | 2021-04-04 |
|
|
60
|
-
| 王五 | 深圳 | 500000 | 1 | 男 | 2021-05-05 |
|
|
61
|
-
| 李六 | 北京 | 5000000 | 6 | 女 | 2021-06-06 |
|
|
62
|
-
| 李六 | 深圳 | 200000 | 1 | 女 | 2021-07-07 |
|
|
63
|
-
|
|
64
|
-
#### 示例:月度销售总额变化趋势
|
|
65
|
-
|
|
66
|
-
1. 新建**折线图**组件,进入右侧**属性** > **基础属性**页面,单击**数据源**下拉菜单,选择**销售业绩表**并选择**统计**方法。
|
|
67
|
-
|
|
68
|
-
<img
|
|
69
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/246dfdeed6b8173d2ec4d5124e4e7412.png"
|
|
70
|
-
width="50%"
|
|
71
|
-
></img>
|
|
72
|
-
|
|
73
|
-
2. 在**维度(X 轴)**单击**字段选择**下拉菜单,选择**成单日期**。
|
|
74
|
-
|
|
75
|
-
<img
|
|
76
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/32e0dd58a2e63e26128c1c109648d468.png"
|
|
77
|
-
width="50%"
|
|
78
|
-
></img>
|
|
79
|
-
|
|
80
|
-
3. 在**数值(Y 轴)**下,单击**添加 Y 轴字段**。**字段**类型选择**销售总额**,**关系**类型选择**求和**。
|
|
81
|
-
|
|
82
|
-
<img
|
|
83
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/34429ad0bb7df362b77b8d9f25df2534.png"
|
|
84
|
-
width="50%"
|
|
85
|
-
></img>
|
|
86
|
-
|
|
87
|
-
4. 下拉右侧属性,进入**进阶属性**内单击开启**显示单位**。单击**数量值级**下拉菜单设置为**万**,**后缀**项设置为万。
|
|
88
|
-
|
|
89
|
-
<img
|
|
90
|
-
src="https://qcloudimg.tencent-cloud.cn/raw/1ee81e2f0863fb12754d9d3a1b671bcf.png"
|
|
91
|
-
width="50%"
|
|
92
|
-
></img>
|
|
93
|
-
|
|
94
|
-
5. 根据需要修改标题、坐标轴样式或图例样式等属性。
|
|
95
|
-
|
|
96
|
-
> ?更多示例配置可参见 [柱状图](https://cloud.tencent.com/document/product/1301/71404)。
|
|
97
|
-
|
|
98
|
-
## 限制说明
|
|
99
|
-
|
|
100
|
-
维度轴不支持设置时间类型,可设置日期类型和日期时间类型。
|