vue2-client 1.18.66 → 1.18.67

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.
@@ -1,960 +0,0 @@
1
- # HChart 组件配置文档
2
-
3
- ## 目录
4
-
5
- 1. [概述](#概述)
6
- 2. [基础配置结构](#基础配置结构)
7
- 3. [图表类型配置](#图表类型配置)
8
- - [柱状图 (bar)](#柱状图-bar)
9
- - [折线图 (line)](#折线图-line)
10
- - [饼图 (pie)](#饼图-pie)
11
- - [区间折线图 (range-line)](#区间折线图-range-line)
12
- 4. [筛选模式配置](#筛选模式配置)
13
- - [单选过滤 (radioFilter)](#单选过滤-radiofilter)
14
- - [侧边列表 (sideList)](#侧边列表-sidelist)
15
- - [级联筛选 (sideList.cascade)](#级联筛选-sidelistcascade)
16
- 5. [数据模式配置](#数据模式配置)
17
- - [静态数据 (dataset)](#静态数据-dataset)
18
- - [逻辑数据 (data)](#逻辑数据-data)
19
- 6. [完整配置示例](#完整配置示例)
20
- 7. [高级配置](#高级配置)
21
-
22
- ---
23
-
24
- ## 概述
25
-
26
- `HChart` 是一个配置驱动的通用图表组件,支持多种图表类型、筛选模式和数据源。
27
-
28
- ### 核心特性
29
-
30
- - **4种图表类型**:柱状图、折线图、饼图、区间折线图
31
- - **3种筛选模式**:单选过滤、侧边列表、级联筛选
32
- - **2种数据模式**:静态数据、逻辑数据
33
- - **自动颜色渐变**:单色自动生成渐变色数组
34
- - **深度配置合并**:支持与 ECharts 原生配置深度合并
35
-
36
- ---
37
-
38
- ## 基础配置结构
39
-
40
- 所有配置都遵循以下基础结构:
41
-
42
- ```json
43
- {
44
- "type": "bar|line|pie|range-line",
45
- "xtitle": "图表标题",
46
- "xtitleAttrs": {},
47
- "style": {},
48
-
49
- // 数据来源(二选一)
50
- "dataset": [...], // 静态数据
51
- "data": "logicName", // 逻辑数据
52
-
53
- // 筛选配置(可选)
54
- "radioFilter": {...},
55
- "sideList": {...},
56
-
57
- // 图表类型专属配置
58
- // ... 见各图表类型章节
59
-
60
- // ECharts 原生配置(可选)
61
- "options": {...},
62
- "legend": {...},
63
- "grid": {...}
64
- }
65
- ```
66
-
67
- ### 字段说明
68
-
69
- | 字段 | 类型 | 必填 | 说明 |
70
- |------|------|------|------|
71
- | `type` | `string` | ✅ | 图表类型:`bar`、`line`、`pie`、`range-line` |
72
- | `xtitle` | `string` | ❌ | 图表标题(注意:不是 `title`) |
73
- | `xtitleAttrs` | `object` | ❌ | 透传给 XTitle 组件的属性 |
74
- | `style` | `object` | ❌ | 图表容器的样式对象 |
75
- | `dataset` | `array\|object` | ⚠️ | 静态数据(与 `data` 二选一) |
76
- | `data` | `string` | ⚠️ | 逻辑名称(与 `dataset` 二选一) |
77
- | `dataMapping` | `object` | ❌ | 数据字段映射(仅逻辑数据模式) |
78
- | `radioFilter` | `object` | ❌ | 单选过滤配置 |
79
- | `sideList` | `object` | ❌ | 侧边列表/级联筛选配置 |
80
- | `options` | `object` | ❌ | ECharts 原生配置(会与预设合并) |
81
-
82
- ---
83
-
84
- ## 图表类型配置
85
-
86
- ### 柱状图 (bar)
87
-
88
- #### 专用配置字段
89
-
90
- | 字段 | 类型 | 默认值 | 说明 |
91
- |------|------|--------|------|
92
- | `barColor` | `string` | `#3362DA` | 柱子颜色 |
93
- | `barHighlightColor` | `string` | `#4C7CFF` | 高亮颜色(点击/悬停) |
94
- | `valueSuffix` | `string` | `''` | 数值后缀(如 `%`、`人次`) |
95
- | `yMax` | `number` | `100` | Y轴最大值 |
96
-
97
- #### 基础配置示例
98
-
99
- ```json
100
- {
101
- "type": "bar",
102
- "xtitle": "满意度统计",
103
- "barColor": "#3E7BFA",
104
- "barHighlightColor": "#6898FF",
105
- "valueSuffix": "%",
106
- "yMax": 100,
107
- "dataset": [
108
- { "label": "一月", "value": 90 },
109
- { "label": "二月", "value": 95 },
110
- { "label": "三月", "value": 88 }
111
- ]
112
- }
113
- ```
114
-
115
- #### 数据格式要求
116
-
117
- ```json
118
- [
119
- { "label": "标签", "value": 数值 }
120
- ]
121
- ```
122
-
123
- ---
124
-
125
- ### 折线图 (line)
126
-
127
- #### 专用配置字段
128
-
129
- | 字段 | 类型 | 默认值 | 说明 |
130
- |------|------|--------|------|
131
- | `highlightColor` | `string` | `#1F5BFF` | 高亮节点/文本颜色 |
132
- | `lineColor` | `string` | `#1F66FF` | 折线颜色 |
133
- | `areaStartColor` | `string` | `rgba(31, 91, 255, 0.25)` | 面积渐变起始色 |
134
- | `areaEndColor` | `string` | `rgba(31, 91, 255, 0.02)` | 面积渐变结束色 |
135
- | `valueSuffix` | `string` | `''` | 数值后缀 |
136
- | `smooth` | `boolean` | `false` | 是否平滑曲线 |
137
- | `symbolSize` | `number` | `12` | 基准点大小 |
138
- | `activeSymbolSize` | `number` | `symbolSize + 4` | 选中点大小 |
139
- | `inactivePointFill` | `string` | `#fff` | 非激活点填充色 |
140
- | `pointBorderWidth` | `number` | `4` | 点边框宽度 |
141
-
142
- #### 基础配置示例
143
-
144
- ```json
145
- {
146
- "type": "line",
147
- "xtitle": "门急诊量趋势",
148
- "smooth": true,
149
- "valueSuffix": "人次",
150
- "highlightColor": "#FF6A00",
151
- "lineColor": "#FF9240",
152
- "areaStartColor": "rgba(255, 146, 64, 0.35)",
153
- "areaEndColor": "rgba(255, 146, 64, 0.02)",
154
- "dataset": [
155
- { "label": "周一", "value": 1200 },
156
- { "label": "周二", "value": 1350 },
157
- { "label": "周三", "value": 1100 }
158
- ]
159
- }
160
- ```
161
-
162
- #### 数据格式要求
163
-
164
- ```json
165
- [
166
- { "label": "标签", "value": 数值 }
167
- ]
168
- ```
169
-
170
- ---
171
-
172
- ### 饼图 (pie)
173
-
174
- #### 专用配置字段
175
-
176
- 饼图没有专用配置字段,主要使用通用配置和 `options`。
177
-
178
- #### 基础配置示例
179
-
180
- ```json
181
- {
182
- "type": "pie",
183
- "xtitle": "患者来源占比",
184
- "dataset": [
185
- { "label": "门诊", "value": 60 },
186
- { "label": "住院", "value": 30 },
187
- { "label": "急诊", "value": 10 }
188
- ],
189
- "options": {
190
- "legend": {
191
- "orient": "vertical",
192
- "right": 10,
193
- "top": "center"
194
- }
195
- }
196
- }
197
- ```
198
-
199
- #### 数据格式要求
200
-
201
- ```json
202
- [
203
- { "label": "标签", "value": 数值 }
204
- ]
205
- ```
206
-
207
- ---
208
-
209
- ### 区间折线图 (range-line)
210
-
211
- #### 专用配置字段
212
-
213
- | 字段 | 类型 | 默认值 | 说明 |
214
- |------|------|--------|------|
215
- | `highField` | `string` | `high` | 高值字段名 |
216
- | `lowField` | `string` | `low` | 低值字段名 |
217
- | `highName` | `string` | `流入` | 高值折线名称(图例/tooltip) |
218
- | `lowName` | `string` | `流出` | 低值折线名称(图例/tooltip) |
219
- | `highColor` | `string` | `#1F66FF` | 高值折线颜色 |
220
- | `lowColor` | `string` | `#A8C4FF` | 低值折线颜色 |
221
- | `rangeLineColor` | `string` | `#1F66FF` | 差值连线颜色 |
222
- | `rangeLineType` | `string` | `solid` | 差值连线类型:`solid` / `dashed` |
223
- | `valueSuffix` | `string` | `''` | 数值后缀 |
224
- | `showRangeLines` | `boolean` | `true` | 是否显示差值连线 |
225
- | `smooth` | `boolean` | `false` | 是否平滑曲线 |
226
- | `symbolSize` | `number` | `10` | 点大小 |
227
- | `pointBorderWidth` | `number` | `3` | 点边框宽度 |
228
-
229
- #### 基础配置示例
230
-
231
- ```json
232
- {
233
- "type": "range-line",
234
- "xtitle": "现金出入",
235
- "highField": "inflow",
236
- "lowField": "outflow",
237
- "highName": "经营现金流入",
238
- "lowName": "经营现金流出",
239
- "highColor": "#3362DA",
240
- "lowColor": "#A8C4FF",
241
- "rangeLineColor": "#3362DA",
242
- "rangeLineType": "solid",
243
- "valueSuffix": "万",
244
- "showRangeLines": true,
245
- "smooth": false,
246
- "symbolSize": 10,
247
- "dataset": [
248
- { "label": "01月", "inflow": 900, "outflow": 700 },
249
- { "label": "02月", "inflow": 1500, "outflow": 920 }
250
- ]
251
- }
252
- ```
253
-
254
- #### 数据格式要求
255
-
256
- ```json
257
- [
258
- {
259
- "label": "标签",
260
- "highField值": 数值, // 如 "inflow": 900
261
- "lowField值": 数值 // 如 "outflow": 700
262
- }
263
- ]
264
- ```
265
-
266
- ---
267
-
268
- ## 筛选模式配置
269
-
270
- ### 单选过滤 (radioFilter)
271
-
272
- 在图表顶部显示一排单选按钮(pill 样式),用于切换维度。
273
-
274
- #### 配置结构
275
-
276
- ```json
277
- {
278
- "radioFilter": {
279
- "label": "时间维度",
280
- "field": "dateType",
281
- "defaultValue": "month",
282
- "options": [
283
- { "label": "年", "value": "year" },
284
- { "label": "季", "value": "quarter" },
285
- { "label": "月", "value": "month" }
286
- ]
287
- }
288
- }
289
- ```
290
-
291
- #### 字段说明
292
-
293
- | 字段 | 类型 | 必填 | 说明 |
294
- |------|------|------|------|
295
- | `label` | `string` | ❌ | 筛选器标签 |
296
- | `field` | `string` | ❌ | 查询参数 key(逻辑数据模式)或 `prop` |
297
- | `defaultValue` | `string` | ❌ | 默认选中的 value |
298
- | `options` | `array` | ✅ | 选项数组,每项包含 `label` 和 `value` |
299
-
300
- #### 与静态数据联动
301
-
302
- 当使用静态 `dataset` 时,`radioFilter` 的当前选中值会作为 key 去 `dataset` 对象中取对应的数组:
303
-
304
- ```json
305
- {
306
- "type": "bar",
307
- "radioFilter": {
308
- "field": "dateType",
309
- "defaultValue": "month",
310
- "options": [
311
- { "label": "月", "value": "month" },
312
- { "label": "年", "value": "year" }
313
- ]
314
- },
315
- "dataset": {
316
- "month": [
317
- { "label": "01月", "value": 100 },
318
- { "label": "02月", "value": 120 }
319
- ],
320
- "year": [
321
- { "label": "2022", "value": 1200 },
322
- { "label": "2023", "value": 1500 }
323
- ]
324
- }
325
- }
326
- ```
327
-
328
- ---
329
-
330
- ### 侧边列表 (sideList)
331
-
332
- 在图表左侧显示一列按钮,用于切换分类。
333
-
334
- #### 配置结构(非级联模式)
335
-
336
- ```json
337
- {
338
- "sideList": {
339
- "label": "科室",
340
- "title": "科室", // 与 label 等价
341
- "field": "deptCode",
342
- "prop": "deptCode", // 与 field 等价
343
- "defaultValue": "dept01",
344
- "options": [
345
- { "label": "心内科", "value": "dept01", "badge": "热门" },
346
- { "label": "呼吸科", "value": "dept02" }
347
- ]
348
- }
349
- }
350
- ```
351
-
352
- #### 字段说明
353
-
354
- | 字段 | 类型 | 必填 | 说明 |
355
- |------|------|------|------|
356
- | `label` | `title` | `string` | ❌ | 列表标题 |
357
- | `field` | `prop` | `string` | ❌ | 查询参数 key(逻辑数据模式),默认 `category` |
358
- | `defaultValue` | `string` | ❌ | 默认选中的 value |
359
- | `options` | `array` | ✅ | 选项数组,每项包含 `label`、`value`、`badge`(可选) |
360
- | `mode` | `string` | ❌ | 不设置或非 `cascade` 时为侧边列表模式 |
361
-
362
- #### 与静态数据联动
363
-
364
- ```json
365
- {
366
- "type": "line",
367
- "sideList": {
368
- "label": "科室",
369
- "defaultValue": "dept01",
370
- "options": [
371
- { "label": "心内科", "value": "dept01" },
372
- { "label": "呼吸科", "value": "dept02" }
373
- ]
374
- },
375
- "dataset": {
376
- "dept01": [
377
- { "label": "周一", "value": 100 },
378
- { "label": "周二", "value": 120 }
379
- ],
380
- "dept02": [
381
- { "label": "周一", "value": 80 },
382
- { "label": "周二", "value": 90 }
383
- ]
384
- }
385
- }
386
- ```
387
-
388
- ---
389
-
390
- ### 级联筛选 (sideList.cascade)
391
-
392
- 在图表顶部显示多列级联选择(如:院区 → 楼栋 → 科室)。
393
-
394
- #### 配置结构
395
-
396
- ```json
397
- {
398
- "sideList": {
399
- "mode": "cascade",
400
- "label": "筛选条件",
401
- "levels": [
402
- {
403
- "label": "院区",
404
- "title": "院区", // 与 label 等价
405
- "field": "areaCode",
406
- "defaultValue": "A",
407
- "subtitle": "可选",
408
- "options": [
409
- { "label": "一院区", "value": "A" },
410
- { "label": "二院区", "value": "B" }
411
- ]
412
- },
413
- {
414
- "label": "楼栋",
415
- "field": "buildingCode",
416
- "options": {
417
- "A": [
418
- { "label": "1号楼", "value": "A1" },
419
- { "label": "2号楼", "value": "A2" }
420
- ],
421
- "B": [
422
- { "label": "3号楼", "value": "B3" }
423
- ],
424
- "default": []
425
- }
426
- }
427
- ]
428
- }
429
- }
430
- ```
431
-
432
- #### 字段说明
433
-
434
- | 字段 | 类型 | 必填 | 说明 |
435
- |------|------|------|------|
436
- | `mode` | `string` | ✅ | 必须为 `"cascade"` |
437
- | `label` / `title` | `string` | ❌ | 级联面板标题 |
438
- | `levels` | `array` | ✅ | 级联层级数组 |
439
-
440
- **levels 每项字段:**
441
-
442
- | 字段 | 类型 | 必填 | 说明 |
443
- |------|------|------|------|
444
- | `label` / `title` | `string` | ❌ | 列标题 |
445
- | `subtitle` | `string` | ❌ | 列副标题 |
446
- | `field` / `prop` | `string` | ❌ | 查询参数 key,默认 `cascade-field-{index}` |
447
- | `defaultValue` | `string` | ❌ | 默认选中的 value |
448
- | `options` | `array\|object` | ✅ | 选项数组或对象(见下方说明) |
449
-
450
- **options 的两种写法:**
451
-
452
- 1. **直接数组**(第一级常用):
453
- ```json
454
- "options": [
455
- { "label": "一院区", "value": "A" }
456
- ]
457
- ```
458
-
459
- 2. **对象映射**(子级根据父级值动态切换):
460
- ```json
461
- "options": {
462
- "A": [
463
- { "label": "1号楼", "value": "A1" }
464
- ],
465
- "B": [
466
- { "label": "3号楼", "value": "B3" }
467
- ],
468
- "default": [] // 兜底数组
469
- }
470
- ```
471
-
472
- #### 与静态数据联动
473
-
474
- 级联筛选会按选中的层级值(如 `["A", "A1"]`)去 `dataset` 对象中嵌套取值:
475
-
476
- ```json
477
- {
478
- "type": "bar",
479
- "sideList": {
480
- "mode": "cascade",
481
- "levels": [
482
- {
483
- "label": "院区",
484
- "field": "areaCode",
485
- "defaultValue": "A",
486
- "options": [
487
- { "label": "一院区", "value": "A" }
488
- ]
489
- },
490
- {
491
- "label": "楼栋",
492
- "field": "buildingCode",
493
- "options": {
494
- "A": [
495
- { "label": "1号楼", "value": "A1" }
496
- ]
497
- }
498
- }
499
- ]
500
- },
501
- "dataset": {
502
- "A": {
503
- "A1": [
504
- { "label": "一月", "value": 100 }
505
- ]
506
- }
507
- }
508
- }
509
- ```
510
-
511
- #### 与逻辑数据联动(SQL 示例)
512
-
513
- 后端 `runLogic` 会收到级联各层的 `field` 作为查询参数(如 `provinceCode`、`cityCode`、`districtCode`、`streetCode`),SQL 可按需拼接:
514
-
515
- ```sql
516
- -- 例:按省/市/区/街道筛选患者常住地,并按周/月/年汇总
517
- WITH base AS (
518
- SELECT
519
- p.province_code,
520
- p.city_code,
521
- p.district_code,
522
- p.street_code,
523
- p.resident_date
524
- FROM patient_residence p
525
- WHERE (:provinceCode IS NULL OR p.province_code = :provinceCode)
526
- AND (:cityCode IS NULL OR p.city_code = :cityCode)
527
- AND (:districtCode IS NULL OR p.district_code = :districtCode)
528
- AND (:streetCode IS NULL OR p.street_code = :streetCode)
529
- )
530
- SELECT
531
- CASE
532
- WHEN :periodType = 'week' THEN TO_CHAR(resident_date, 'IYYY-IW')
533
- WHEN :periodType = 'month' THEN TO_CHAR(resident_date, 'YYYY-MM')
534
- ELSE TO_CHAR(resident_date, 'YYYY')
535
- END AS label,
536
- COUNT(*) AS value
537
- FROM base
538
- GROUP BY
539
- CASE
540
- WHEN :periodType = 'week' THEN TO_CHAR(resident_date, 'IYYY-IW')
541
- WHEN :periodType = 'month' THEN TO_CHAR(resident_date, 'YYYY-MM')
542
- ELSE TO_CHAR(resident_date, 'YYYY')
543
- END
544
- ORDER BY label;
545
- ```
546
-
547
- `field` 名即为参数名;未选中时参数为空,条件自动放行。`periodType` 可由单选过滤(周/月/年)传入。
548
-
549
- ---
550
-
551
- ## 数据模式配置
552
-
553
- ### 静态数据 (dataset)
554
-
555
- 直接在配置中提供数据,支持简单数组或嵌套对象。
556
-
557
- #### 简单数组
558
-
559
- ```json
560
- {
561
- "type": "bar",
562
- "dataset": [
563
- { "label": "一月", "value": 120 },
564
- { "label": "二月", "value": 80 }
565
- ]
566
- }
567
- ```
568
-
569
- #### 嵌套对象(与筛选联动)
570
-
571
- ```json
572
- {
573
- "type": "line",
574
- "radioFilter": {
575
- "defaultValue": "month",
576
- "options": [
577
- { "label": "月", "value": "month" },
578
- { "label": "年", "value": "year" }
579
- ]
580
- },
581
- "dataset": {
582
- "month": [
583
- { "label": "01月", "value": 100 }
584
- ],
585
- "year": [
586
- { "label": "2022", "value": 1200 }
587
- ]
588
- }
589
- }
590
- ```
591
-
592
- #### 数据提取规则
593
-
594
- 组件会按以下顺序尝试提取数组:
595
-
596
- 1. 如果 `dataset` 是数组,直接使用
597
- 2. 如果是对象:
598
- - 有筛选时,用当前选中值作为 key 取子数组
599
- - 无筛选时,尝试 `dataset.data`、`dataset.result`、`dataset.list` 等字段
600
- - 如果仍找不到,取对象中第一个数组类型的值
601
-
602
- ---
603
-
604
- ### 逻辑数据 (data)
605
-
606
- 通过后端逻辑获取数据,使用 `runLogic` 调用。
607
-
608
- #### 配置结构
609
-
610
- ```json
611
- {
612
- "type": "bar",
613
- "data": "logicName_getBarData",
614
- "dataMapping": {
615
- "labelField": "xName",
616
- "valueField": "totalCount"
617
- }
618
- }
619
- ```
620
-
621
- #### 字段说明
622
-
623
- | 字段 | 类型 | 必填 | 说明 |
624
- |------|------|------|------|
625
- | `data` | `string` | ✅ | 逻辑名称 |
626
- | `dataMapping` | `object` | ❌ | 字段映射(见下方) |
627
-
628
- **dataMapping 字段:**
629
-
630
- | 字段 | 类型 | 默认值 | 说明 |
631
- |------|------|--------|------|
632
- | `labelField` | `string` | `label` | 标签字段名 |
633
- | `valueField` | `string` | `value` | 数值字段名 |
634
-
635
- #### 查询参数构建
636
-
637
- 逻辑数据模式会自动合并以下参数:
638
-
639
- 1. `fixedQueryForm`(组件 props)
640
- 2. `listQueryParams`(侧边列表/级联筛选的选中值)
641
- 3. `filterQueryParams`(单选过滤的选中值)
642
-
643
- 最终调用:`runLogic(config.data, queryPayload, serviceName)`
644
-
645
- #### 数据转换
646
-
647
- 后端返回的数据会被 `transformData` 转换:
648
-
649
- 1. 尝试从 `data`、`result`、`list`、`items`、`records` 字段提取数组
650
- 2. 如果仍找不到,取对象中第一个数组类型的值
651
- 3. 使用 `dataMapping` 映射字段,或自动识别 `label/name/text` + `value/count`
652
-
653
- ---
654
-
655
- ## 完整配置示例
656
-
657
- ### 示例 1:区间折线图 + 单选过滤 + 静态数据
658
-
659
- ```json
660
- {
661
- "type": "range-line",
662
- "xtitle": "现金出入",
663
- "highColor": "#3362DA",
664
- "lowColor": "#A8C4FF",
665
- "rangeLineColor": "#3362DA",
666
- "rangeLineType": "solid",
667
- "highName": "经营现金流入",
668
- "lowName": "经营现金流出",
669
- "highField": "inflow",
670
- "lowField": "outflow",
671
- "valueSuffix": "万",
672
- "showRangeLines": true,
673
- "smooth": false,
674
- "symbolSize": 10,
675
- "radioFilter": {
676
- "field": "dateType",
677
- "defaultValue": "month",
678
- "options": [
679
- { "label": "年", "value": "year" },
680
- { "label": "季", "value": "quarter" },
681
- { "label": "月", "value": "month" }
682
- ]
683
- },
684
- "dataset": {
685
- "month": [
686
- { "label": "01月", "inflow": 900, "outflow": 700 },
687
- { "label": "02月", "inflow": 1500, "outflow": 920 }
688
- ],
689
- "quarter": [
690
- { "label": "Q1", "inflow": 3450, "outflow": 2370 }
691
- ],
692
- "year": [
693
- { "label": "2022", "inflow": 14200, "outflow": 10500 }
694
- ]
695
- }
696
- }
697
- ```
698
-
699
- ### 示例 2:柱状图 + 侧边列表 + 逻辑数据
700
-
701
- ```json
702
- {
703
- "type": "bar",
704
- "xtitle": "科室就诊量",
705
- "barColor": "#3E7BFA",
706
- "valueSuffix": "人次",
707
- "yMax": 200,
708
- "sideList": {
709
- "label": "科室",
710
- "field": "deptCode",
711
- "defaultValue": "dept01",
712
- "options": [
713
- { "label": "心内科", "value": "dept01" },
714
- { "label": "呼吸科", "value": "dept02" }
715
- ]
716
- },
717
- "data": "logic_getDeptVisits",
718
- "dataMapping": {
719
- "labelField": "date",
720
- "valueField": "visitCount"
721
- }
722
- }
723
- ```
724
-
725
- ### 示例 3:折线图 + 级联筛选 + 静态数据
726
-
727
- ```json
728
- {
729
- "type": "line",
730
- "xtitle": "床位使用率趋势",
731
- "smooth": true,
732
- "valueSuffix": "%",
733
- "highlightColor": "#1F5BFF",
734
- "sideList": {
735
- "mode": "cascade",
736
- "label": "筛选条件",
737
- "levels": [
738
- {
739
- "label": "院区",
740
- "field": "areaCode",
741
- "defaultValue": "A",
742
- "options": [
743
- { "label": "一院区", "value": "A" },
744
- { "label": "二院区", "value": "B" }
745
- ]
746
- },
747
- {
748
- "label": "楼栋",
749
- "field": "buildingCode",
750
- "options": {
751
- "A": [
752
- { "label": "1号楼", "value": "A1" }
753
- ],
754
- "B": [
755
- { "label": "3号楼", "value": "B3" }
756
- ]
757
- }
758
- }
759
- ]
760
- },
761
- "dataset": {
762
- "A": {
763
- "A1": [
764
- { "label": "周一", "value": 85 },
765
- { "label": "周二", "value": 90 }
766
- ]
767
- },
768
- "B": {
769
- "B3": [
770
- { "label": "周一", "value": 75 },
771
- { "label": "周二", "value": 80 }
772
- ]
773
- }
774
- }
775
- }
776
- ```
777
-
778
- ### 示例 4:饼图 + 单选过滤 + 逻辑数据
779
-
780
- ```json
781
- {
782
- "type": "pie",
783
- "xtitle": "患者来源占比",
784
- "radioFilter": {
785
- "field": "timeType",
786
- "defaultValue": "month",
787
- "options": [
788
- { "label": "本月", "value": "month" },
789
- { "label": "本年", "value": "year" }
790
- ]
791
- },
792
- "data": "logic_getPatientSource",
793
- "dataMapping": {
794
- "labelField": "sourceName",
795
- "valueField": "count"
796
- },
797
- "options": {
798
- "legend": {
799
- "orient": "vertical",
800
- "right": 10,
801
- "top": "center"
802
- }
803
- }
804
- }
805
- ```
806
-
807
- ### 示例 5:折线图 + 级联筛选 + 时间粒度筛选 + 静态数据(患者常住地数据)
808
-
809
- ```json
810
- ```
811
-
812
- **说明:**
813
- - 此配置包含4级级联筛选:省份 → 城市 → 区县 → 街道
814
- - 时间粒度筛选支持:周、月、年三种维度
815
- - 数据覆盖了江苏、浙江两个省份,每个省份2个城市,每个城市3个区县,每个区县4个街道,共48个街道的数据
816
- - 周数据:显示周一到周日的患者数量
817
- - 月数据:显示1-6月的患者数量
818
- - 年数据:显示2020-2024年的患者数量
819
- - 折线图配置了面积填充效果,符合图片中的视觉效果
820
-
821
- ---
822
-
823
- ## 高级配置
824
-
825
- ### 颜色渐变
826
-
827
- 当 `options.color` 为单个颜色字符串或长度为 1 的数组时,组件会自动生成渐变色数组:
828
-
829
- ```json
830
- {
831
- "type": "bar",
832
- "options": {
833
- "color": "#3362DA" // 自动生成渐变数组
834
- }
835
- }
836
- ```
837
-
838
- 如果已提供多色数组,则直接使用:
839
-
840
- ```json
841
- {
842
- "type": "bar",
843
- "options": {
844
- "color": ["#3362DA", "#4C7CFF", "#6898FF"]
845
- }
846
- }
847
- ```
848
-
849
- ### ECharts 原生配置合并
850
-
851
- `options` 中的配置会与预设配置深度合并:
852
-
853
- ```json
854
- {
855
- "type": "line",
856
- "options": {
857
- "color": "#FF6A00",
858
- "legend": {
859
- "show": true,
860
- "top": 10
861
- },
862
- "grid": {
863
- "top": 60,
864
- "left": 80
865
- },
866
- "xAxis": {
867
- "axisLabel": {
868
- "rotate": 45
869
- }
870
- },
871
- "series": [
872
- {
873
- "name": "自定义系列",
874
- "type": "line"
875
- }
876
- ]
877
- }
878
- }
879
- ```
880
-
881
- **合并规则:**
882
-
883
- - `xAxis.data`:如果用户配置为空数组或未定义,使用预设的 data
884
- - `series`:会与预设 series 按索引深度合并
885
- - 其他配置:直接覆盖预设
886
-
887
- ### 样式配置
888
-
889
- ```json
890
- {
891
- "xtitle": "图表标题",
892
- "xtitleAttrs": {
893
- "size": "small"
894
- },
895
- "style": {
896
- "height": "400px",
897
- "width": "100%"
898
- }
899
- }
900
- ```
901
-
902
- ---
903
-
904
- ## 注意事项
905
-
906
- 1. **标题字段**:使用 `xtitle`,不是 `title`
907
- 2. **数据格式**:所有图表类型的数据都必须是 `{ label, value }` 格式(`range-line` 还需要 `highField` 和 `lowField` 对应的字段)
908
- 3. **筛选联动**:静态 `dataset` 的 key 必须与筛选器的 `value` 匹配
909
- 4. **级联选项**:子级的 `options` 如果是对象,key 必须与父级选中值匹配
910
- 5. **逻辑数据**:确保后端返回的数据能被 `transformData` 正确提取和转换
911
-
912
- ---
913
-
914
- ## 使用方式
915
-
916
- ### 方式 1:直接传入 config
917
-
918
- ```vue
919
- <template>
920
- <h-chart :config="chartConfig" />
921
- </template>
922
-
923
- <script setup>
924
- const chartConfig = {
925
- type: 'bar',
926
- xtitle: '示例图表',
927
- dataset: [
928
- { label: '一月', value: 100 }
929
- ]
930
- }
931
- </script>
932
- ```
933
-
934
- ### 方式 2:通过 queryParamsName 从后端获取
935
-
936
- ```vue
937
- <template>
938
- <h-chart
939
- query-params-name="his.bar.chart.config.001"
940
- service-name="af-his"
941
- :fixed-query-form="{ condition: '1=1', orgId: currentOrgId }"
942
- />
943
- </template>
944
- ```
945
-
946
- 后端返回的配置结构即为本文档描述的 JSON 格式。
947
-
948
- ---
949
-
950
- ## 总结
951
-
952
- `HChart` 组件通过灵活的配置组合,可以满足大部分图表展示需求:
953
-
954
- - **图表类型**:4 种预设类型,支持自定义扩展
955
- - **筛选模式**:3 种筛选方式,可组合使用
956
- - **数据模式**:静态数据或逻辑数据,自动适配
957
- - **配置合并**:支持与 ECharts 原生配置深度合并
958
-
959
- 如有疑问,请参考组件源码或联系开发团队。
960
-