1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
| <script lang="ts" setup>
| import type { EchartsUIType } from '@vben/plugins/echarts';
|
| import { onMounted, ref } from 'vue';
|
| import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
| defineOptions({ name: 'ExtendGraphDemoEchartsTree' });
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| const data1 = {
| name: '植物界',
| children: [
| {
| name: '蓝藻门',
| children: [
| {
| name: '蓝藻纲',
| children: [
| { name: '色球藻目', value: 'Chroococcales' },
| { name: '颤藻目', value: 'Oscillatoriales' },
| { name: '念珠藻目', value: 'Nostocales' },
| { name: '真枝藻目', value: 'Stigonematales' },
| ],
| },
| ],
| },
| {
| name: '裸藻门',
| children: [
| {
| name: '裸藻纲',
| children: [
| { name: '裸藻目', value: 'Euglenales' },
| { name: '柄裸藻目', value: 'Colaciales' },
| ],
| },
| ],
| },
| {
| name: '甲藻门',
| children: [
| {
| name: '甲藻纲',
| children: [
| { name: '原甲藻目', value: 'Prorocentrales' },
| { name: '鳍藻目', value: 'Dinophysiales' },
| { name: '裸甲藻目', value: 'Czymnodiniales' },
| { name: '夜光藻目', value: 'Noctilucales' },
| { name: '冠甲藻目', value: 'Lophodiniales' },
| { name: '多甲藻目', value: 'Peridiniales' },
| { name: '钙甲藻目', value: 'Theracosphaerales' },
| { name: '囊沟藻目', value: 'Blastodiniales' },
| { name: '植甲藻目', value: 'Phytodinales' },
| { name: '丝甲藻目', value: 'Dinotrichales' },
| { name: '变甲藻目', value: 'Dinamoebidales' },
| ],
| },
| {
| name: '共甲藻纲',
| children: [{ name: '共甲藻目', value: 'Syndiniales' }],
| },
| ],
| },
| {
| name: '黄藻门',
| children: [
| {
| name: '黄藻纲',
| children: [
| { name: '异鞭藻目', value: 'Heterochloridales' },
| { name: '根黄藻目', value: 'Rhizochloridales' },
| { name: '异囊藻目', value: 'Heteroglocales' },
| { name: '柄球藻目', value: 'Mischococcales' },
| { name: '异丝藻目', value: 'Heterotrichales' },
| { name: '气球藻目', value: 'Botrydiales' },
| ],
| },
| ],
| },
| {
| name: '硅藻门',
| children: [
| {
| name: '中心硅藻纲',
| children: [
| { name: '圆筛藻目', value: 'Coscinodiscales' },
| { name: '根管藻目', value: 'Rhizosoleniales' },
| { name: '盒形藻目', value: 'Biddulphiales' },
| ],
| },
| {
| name: '羽纹硅藻纲',
| children: [
| { name: '舟形藻目', value: 'Naviculales' },
| { name: '等片藻目', value: 'Diatomales' },
| { name: '曲壳藻目', value: 'Achnanthales' },
| { name: '短缝藻目', value: 'Eunotiales' },
| { name: '双菱藻目', value: 'Surirellales' },
| ],
| },
| ],
| },
| {
| name: '绿藻门',
| children: [
| {
| name: '绿藻纲',
| children: [
| { name: '团藻目', value: 'Volvocales' },
| { name: '四孢藻目', value: 'Tetrasporales' },
| { name: '绿球藻目', value: 'Chlorococcales' },
| { name: '丝藻目', value: 'Ulotrichales' },
| { name: '胶毛藻目', value: 'Chaetophorales' },
| { name: '石莼目', value: 'Ulvales' },
| { name: '溪菜目', value: 'Prasiolales' },
| { name: '鞘藻目', value: 'Oedogoniales' },
| { name: '刚毛藻目', value: 'Cladophorales' },
| { name: '管藻目', value: 'Siphonales' },
| { name: '管枝藻目', value: 'Siphonocladales' },
| { name: '绒枝藻目', value: 'Dasycladales' },
| { name: '接合藻目', value: 'Conjugatophyceae' },
| ],
| },
| ],
| },
| {
| name: '褐藻门',
| children: [
| {
| name: '褐藻纲',
| children: [
| { name: '水云目', value: 'Ectocarpales' },
| { name: '黑顶藻目', value: 'Sphace-lariales' },
| { name: '线翼藻目', value: 'Tilopteriales' },
| { name: '索藻目', value: 'Chordariales' },
| { name: '马鞭藻目', value: 'Cutileriales' },
| { name: '毛头藻目', value: 'Sporochnales' },
| { name: '网管藻目', value: 'Dictyosiphonales' },
| { name: '萱藻目', value: 'Scytosiphonales' },
| { name: '网地藻目', value: 'Dictyota-les' },
| { name: '酸藻目', value: 'Desmarestiales' },
| { name: '海带目', value: 'Lamina-riales' },
| { name: '墨角藻目', value: 'Fucales' },
| { name: '德威藻目', value: 'Durvil-laeales' },
| ],
| },
| ],
| },
| {
| name: '红藻门',
| children: [{ name: '红藻纲', value: 'Florideophyceae' }],
| },
| {
| name: '地衣门',
| children: [
| { name: '子囊衣纲', value: 'Ascolichenes' },
| { name: '担子衣纲', value: 'Basidiolichenes' },
| { name: '藻状菌衣纲', value: 'Phycolichenes' },
| ],
| },
| {
| name: '苔藓植物门',
| children: [
| {
| name: '苔纲',
| children: [
| { name: '泥炭藓目', value: 'Sphagnales' },
| { name: '黑藓目', value: 'Andreaeales' },
| ],
| },
| ],
| },
| {
| name: '蕨类植物门',
| children: [
| {
| name: '石松亚门',
| children: [
| { name: '石松目', value: 'Lycopodiales' },
| { name: '卷柏目', value: 'Selaginellales' },
| ],
| },
| {
| name: '水韭亚门',
| children: [{ name: '水韭目', value: 'Isoetales' }],
| },
| {
| name: '楔叶蕨亚门',
| children: [{ name: '木贼目', value: 'Equisetales' }],
| },
| {
| name: '松叶蕨亚门',
| children: [{ name: '松叶蕨目', value: 'Psilotales' }],
| },
| {
| name: '真蕨亚门',
| children: [
| { name: '瓶尔小草目', value: 'Ophioglossales' },
| { name: '莲座蕨目', value: 'Marattiales' },
| { name: '紫萁目', value: 'Osmundales' },
| { name: '水龙骨目(真蕨目)', value: 'Polypodiales(Filicales)' },
| { name: '槐叶苹目', value: 'Salviniales' },
| ],
| },
| ],
| },
| {
| name: '裸子植物门',
| children: [
| {
| name: '银杏纲',
| children: [{ name: '银杏目', value: 'Ginkgoales' }],
| },
| {
| name: '松杉纲',
| children: [{ name: '松杉目', value: 'Pinales' }],
| },
| {
| name: '苏铁纲',
| children: [{ name: '苏铁目', value: 'Cycadales' }],
| },
| {
| name: '买麻藤纲',
| children: [{ name: '买麻藤目', value: 'Gnetales' }],
| },
| {
| name: '红豆杉纲',
| children: [{ name: '红豆衫目', value: 'Taxales' }],
| },
| ],
| },
| {
| name: '被子植物门',
| children: [
| {
| name: '百合亚纲',
| children: [
| {
| name: '百合目',
| children: [
| { name: '田葱科', value: 'Philydraceae' },
| { name: '雨久花科', value: 'Pontederiaceae' },
| { name: '血皮草科', value: 'Haemodoraceae' },
| { name: '蓝星科', value: 'Cyanastraceae' },
| { name: '百合科', value: 'Liliaceae' },
| { name: '鸢尾科', value: 'Iridaceae' },
| { name: '翡若翠科', value: 'Velloziaceae' },
| { name: '芦荟科', value: 'Aloeaceae' },
| { name: '龙舌兰科', value: 'Agavaceae' },
| { name: '刺叶树科', value: 'Xanthorrhoeaceae' },
| { name: '匍茎草科', value: 'Hanguanaceae' },
| { name: '箭根薯科', value: 'Taccaceae' },
| { name: '百部科', value: 'Stemonaceae' },
| { name: '菝葜科', value: 'Smilacaceae' },
| { name: '薯蓣科', value: 'Dioscoreaceae' },
| ],
| },
| {
| name: '兰目',
| children: [
| { name: '地鸢尾科', value: 'Geosiridaceae' },
| { name: '水玉簪科', value: 'Burmanniaceae' },
| { name: '白玉簪科', value: 'Corsiaceae' },
| { name: '兰科', value: 'Orchidaceae' },
| ],
| },
| ],
| },
| {
| name: '泽泻亚纲',
| children: [
| {
| name: '泽泻目',
| children: [
| { name: '花蔺科', value: 'Butomaceae' },
| { name: '沼鳖科', value: 'Limnocharitaceae' },
| { name: '泽泻科', value: 'Alismataceae' },
| ],
| },
| {
| name: '水鳖目',
| children: [{ name: '水鳖科', value: 'Hydrocharitaceae' }],
| },
| {
| name: '茨藻目',
| children: [
| { name: '水蕹科', value: 'Aponogetonaceae' },
| { name: '冰沼草科', value: 'Scheuchzeriaceae' },
| { name: '水麦冬科', value: 'Juncaginaceae' },
| { name: '眼子菜科', value: 'Potamogetonaceae' },
| { name: '流苏菜科', value: 'Ruppiaceae' },
| { name: '茨藻科', value: 'Najadaceae' },
| { name: '角果藻科', value: 'Zannichelliaceae' },
| { name: '海王草科', value: 'Posidoniaceae' },
| { name: '丝粉藻科', value: 'Cymodoceaceae' },
| { name: '大叶藻科', value: 'Zosteraceae' },
| ],
| },
| {
| name: '霉草目',
| children: [
| { name: '无叶科', value: 'Petrosaviaceae' },
| { name: '霉草科', value: 'Triuridaceae' },
| ],
| },
| ],
| },
| {
| name: '槟榔亚纲',
| children: [
| { name: '棕榈目', value: 'Arecales' },
| { name: '环花草目', value: 'Cyclanthales' },
| { name: '露兜树目', value: 'Pandanales' },
| { name: '天南星目', value: 'Arales' },
| ],
| },
| {
| name: '鸭跖草亚纲',
| children: [
| {
| name: '鸭拓草目',
| children: [
| { name: '偏穗草科', value: 'Rapateaceae' },
| { name: '黄眼草科', value: 'Xyridaceae' },
| { name: '鸭跖草科', value: 'Mayacaceae' },
| { name: '鸭跖草科', value: 'Commelinaceae' },
| ],
| },
| {
| name: '谷精草目',
| children: [{ name: '谷精草科', value: 'Eriocaulaceae' }],
| },
| {
| name: '帚灯草目',
| children: [
| { name: '须叶藤科', value: 'Flagellariaceae' },
| { name: '假芦苇科', value: 'Joinvilleaceae' },
| { name: '帚灯草科', value: 'Restionaceae' },
| { name: '刺鳞草科', value: 'Centrolepidaceae' },
| ],
| },
| {
| name: '灯芯草目',
| children: [
| { name: '灯心草科', value: 'Juncaceae' },
| { name: '梭子草科', value: 'Thurniaceae' },
| ],
| },
| {
| name: '莎草目',
| children: [
| { name: '莎草科', value: 'Cyperaceae' },
| { name: '禾本科', value: 'Poaceae' },
| ],
| },
| {
| name: '独芯草目',
| children: [{ name: '独蕊草科', value: 'Hydatellaceae' }],
| },
| {
| name: '香蒲目',
| children: [
| { name: '黑三棱科', value: 'Sparganiaceae' },
| { name: '香蒲科', value: 'Typhaceae' },
| ],
| },
| ],
| },
| {
| name: '姜亚纲',
| children: [
| {
| name: '凤梨目',
| children: [{ name: '凤梨科', value: 'Bromeliaceae' }],
| },
| {
| name: '姜目',
| children: [
| { name: '旅人蕉科', value: 'Strelitziaceae' },
| { name: '赫蕉科', value: 'Heliconiaceae' },
| { name: '芭蕉科', value: 'Musaceae' },
| { name: '兰花蕉科', value: 'Lowiaceae' },
| { name: '姜科', value: 'Zingiberaceae' },
| { name: '闭鞘姜科', value: 'Costaceae' },
| { name: '美人蕉科', value: 'Cannaceae' },
| { name: '竹芋科', value: 'Marantaceae' },
| ],
| },
| ],
| },
| {
| name: '木兰亚纲',
| children: [
| { name: '木兰目', value: 'Magnoliales' },
| { name: '樟目', value: 'Laurales' },
| { name: '胡椒目', value: 'Piperales' },
| { name: '马兜铃目', value: 'Aristolochiales' },
| { name: '八角目', value: 'Illiciales' },
| { name: '睡莲目', value: 'Nymphaeales' },
| { name: '毛茛目', value: 'Ranunculales' },
| { name: '罂粟目', value: 'Papaverales' },
| ],
| },
| {
| name: '金缕梅亚纲',
| children: [
| { name: '昆栏树目', value: 'Trochodendrales' },
| { name: '金缕梅目', value: 'Hamamelidales' },
| { name: '交让木目', value: 'Daphniphyllales' },
| { name: '对药树目', value: 'Didymelales' },
| { name: '杜仲目', value: 'Eucommiales' },
| { name: '荨麻目', value: 'Urticales' },
| { name: '胡桃目', value: 'Juglandales' },
| { name: '杨梅目', value: 'Myricales' },
| { name: '山毛榉目', value: 'Fagales' },
| { name: '木麻黄目', value: 'Casuarinales' },
| ],
| },
| {
| name: '石竹亚纲',
| children: [
| { name: '石竹目', value: 'Caryophyllales' },
| { name: '蓼目', value: 'Polygonales' },
| { name: '蓝雪目', value: 'Plumbaginales' },
| ],
| },
| {
| name: '五桠果亚纲',
| children: [
| { name: '五桠果目', value: 'Dilleniales' },
| { name: '山茶目', value: 'Theales' },
| {
| name: '锦葵目',
| children: [
| { name: '杜英科', value: 'Elaeocarpaceae' },
| { name: '椴树科', value: 'Tiliaceae' },
| { name: '梧桐科', value: 'Sterculiaceae' },
| { name: '木棉科', value: 'Bombacaceae' },
| { name: '锦葵科', value: 'Malvaceae' },
| ],
| },
| { name: '玉蕊目', value: 'Lecythidales' },
| { name: '猪笼草目', value: 'Nepenthales' },
| { name: '堇菜目', value: 'Violales' },
| { name: '杨柳目', value: 'Salicales' },
| { name: '白花菜目', value: 'Capparales' },
| { name: '肉穗果目', value: 'Batales' },
| { name: '杜鹃花目', value: 'Ericales' },
| { name: '岩梅目', value: 'Diapensiales' },
| { name: '柿树目', value: 'Ebenales' },
| { name: '报春花目', value: 'Primulales' },
| ],
| },
| {
| name: '蔷薇亚纲',
| children: [
| {
| name: '蔷薇目',
| children: [
| { name: '瓣裂果科', value: 'Brunelliaceae' },
| { name: '牛栓藤科', value: 'Connaraceae' },
| { name: '船形果科', value: 'Eucryphiaceae' },
| { name: '火把树科', value: 'Cunoniaceae' },
| { name: '澳楸科', value: 'Davidsoniaceae' },
| { name: '毛枝树科', value: 'Dialypetalanthaceae' },
| { name: '海桐花科', value: 'Pittosporaceae' },
| { name: '腺毛草科', value: 'Byblidaceae' },
| { name: '绣球花科', value: 'Hydrangeaceae' },
| { name: '弯药树科', value: 'Columelliaceae' },
| { name: '茶藨子科', value: 'Grossulariaceae' },
| { name: '鳞叶树科', value: 'Bruniaceae' },
| { name: '四柱木科', value: 'Anisophylleaceae' },
| { name: '假海桐科', value: 'Alseuosmiaceae' },
| { name: '景天科', value: 'Crassulaceae' },
| { name: '土瓶草科', value: 'Cephalotaceae' },
| { name: '虎耳草科', value: 'Saxifragaceae' },
| { name: '蔷薇科', value: 'Rosaceae' },
| { name: '沙莓科', value: 'Neuradaceae' },
| { name: '假黄杨科', value: 'Crossosomataceae' },
| { name: '金壳果科', value: 'Chrysobalanaceae' },
| { name: '海人树科', value: 'Surianaceae' },
| { name: '棒木科', value: 'Rhabdodendraceae' },
| ],
| },
| {
| name: '豆目',
| children: [
| { name: '含羞草科', value: 'Mimosaceae' },
| { name: '苏木科', value: 'Caesalpiniaceae' },
| { name: '蝶形花科', value: 'Fabaceae' },
| ],
| },
| {
| name: '山龙眼目',
| children: [
| { name: '胡颓子科', value: 'Elaeagnaceae' },
| { name: '山龙眼科', value: 'Proteaceae' },
| ],
| },
| {
| name: '小二仙草目',
| children: [
| { name: '小二仙草科', value: 'Haloragaceae' },
| { name: '古奴科', value: 'Gunneraceae' },
| ],
| },
| {
| name: '川苔草目',
| children: [{ name: '川苔草科', value: 'Podostemaceae' }],
| },
| {
| name: '桃金娘目',
| children: [
| { name: '海桑科', value: 'Sonneratiaceae' },
| { name: '千屈菜科', value: 'Lythraceae' },
| { name: '管萼科', value: 'Penaeaceae' },
| { name: '隐翼科', value: 'Crypteroniaceae' },
| { name: '瑞香科', value: 'Thymelaeaceae' },
| { name: '菱科', value: 'Trapaceae' },
| { name: '桃金娘科', value: 'Myrtaceae' },
| { name: '石榴汁', value: 'Punicaceae' },
| { name: '柳叶菜科', value: 'Onagraceae' },
| { name: '方枝树科', value: 'Oliniaceae' },
| { name: '野牡丹科', value: 'Melastomataceae' },
| { name: '使君子科', value: 'Combretaceae' },
| { name: '双翼果科', value: 'Alzateaceae' },
| { name: '谷木科', value: 'Memecylaceae' },
| ],
| },
| {
| name: '红树目',
| children: [{ name: '红树科', value: 'Rhizophoraceae' }],
| },
| {
| name: '山茱萸目',
| children: [
| { name: '八角枫科', value: 'Alangiaceae' },
| { name: '紫树科', value: 'Nyssaceae' },
| { name: '山茱萸科', value: 'Cornaceae' },
| { name: '绞木科', value: 'Garryaceae' },
| ],
| },
| {
| name: '檀香目',
| children: [
| { name: '毛丝花科', value: 'Medusandraceae' },
| { name: '十齿花科', value: 'Dipentodontaceae' },
| { name: '铁青树科', value: 'Olacaceae' },
| { name: '山柚子科', value: 'Opiliaceae' },
| { name: '檀香科', value: 'Santalaceae' },
| { name: '羽毛果科', value: 'Misodendraceae' },
| { name: '桑寄生科', value: 'Loranthaceae' },
| { name: '房底珠科', value: 'Eremolepidaceae' },
| { name: '槲寄生科', value: 'Viscaceae' },
| { name: '蛇菰科', value: 'Balanophoraceae' },
| ],
| },
| {
| name: '大花草目',
| children: [
| { name: '菌花科', value: 'Hydnoraceae' },
| { name: '帽蕊草科', value: 'Mitrastemonaceae' },
| { name: '大花草科', value: 'Rafflesiaceae' },
| ],
| },
| {
| name: '卫矛目',
| children: [
| { name: '四棱果科', value: 'Geissolomataceae' },
| { name: '卫矛科', value: 'Celastraceae' },
| { name: '翅子藤科', value: 'Hippocrateaceae' },
| { name: '木根草科', value: 'Stackhousiaceae' },
| { name: '刺茉莉科', value: 'Salvadoraceae' },
| { name: '冬青科', value: 'Aquifoliaceae' },
| { name: '茶茱萸科', value: 'Icacinaceae' },
| { name: '鳞枝树科', value: 'Aextoxicaceae' },
| { name: '心翼果科', value: 'Cardiopteridaceae' },
| { name: '棒果木科', value: 'Corynocarpaceae' },
| { name: '毒鼠子科', value: 'Dichapetalaceae' },
| { name: '苦皮树科', value: 'Tepuianthaceae' },
| ],
| },
| {
| name: '大戟目',
| children: [
| { name: '黄杨科', value: 'Buxaceae' },
| { name: '油蜡树科', value: 'Simmondsiaceae' },
| { name: '攀打科', value: 'Pandaceae' },
| { name: '大戟科', value: 'Euphorbiaceae' },
| ],
| },
| {
| name: '鼠李目',
| children: [
| { name: '鼠李科', value: 'Rhamnaceae' },
| { name: '火筒树科', value: 'Leeaceae' },
| { name: '葡萄科', value: 'Vitaceae' },
| ],
| },
| {
| name: '亚麻目',
| children: [
| { name: '古柯科', value: 'Erythroxylaceae' },
| { name: '香膏科', value: 'Humiriaceae' },
| { name: '粘木科', value: 'Ixonanthaceae' },
| { name: '亚麻藤科', value: 'Hugoniaceae' },
| { name: '亚麻科', value: 'Linaceae' },
| ],
| },
| {
| name: '远志目',
| children: [
| { name: '金虎尾科', value: 'Malpighiaceae' },
| { name: '蜡烛树科', value: 'Vochysiaceae' },
| { name: '三角蛤科', value: 'Trigoniaceae' },
| { name: '孔药花科', value: 'Tremandraceae' },
| { name: '黄叶树科', value: 'Xanthophyllaceae' },
| { name: '刺球果科', value: 'Krameriaceae' },
| ],
| },
| {
| name: '无患子目',
| children: [
| { name: '省沽油科', value: 'Staphyleaceae' },
| { name: '蜜花科', value: 'Melianthaceae' },
| { name: '钟萼木科', value: 'Bretschneideraceae' },
| { name: '叠珠树科', value: 'Akaniaceae' },
| { name: '无患子科', value: 'Sapindaceae' },
| { name: '七叶树科', value: 'Hippocastanaceae' },
| { name: '槭树科', value: 'Aceraceae' },
| { name: '橄榄科', value: 'Burseraceae' },
| { name: '漆树科', value: 'Anacardiaceae' },
| { name: '三柱草科', value: 'Julianiaceae' },
| { name: '苦木科', value: 'Simaroubaceae' },
| { name: '叶柄花科', value: 'Cneoraceae' },
| { name: '楝科', value: 'Meliaceae' },
| { name: '芸香科', value: 'Rutaceae' },
| { name: '蒺藜科', value: 'Zygophyllaceae' },
| ],
| },
| {
| name: '牻牛儿苗目',
| children: [
| { name: '酢浆草科', value: 'Oxalidaceae' },
| { name: '牻牛儿苗科', value: 'Geraniaceae' },
| { name: '池花科', value: 'Limnanthaceae' },
| { name: '旱金莲科', value: 'Tropaeolaceae' },
| { name: '凤仙花科', value: 'Balsaminaceae' },
| ],
| },
| {
| name: '伞形目',
| children: [
| { name: '五加科', value: 'Araliaceae' },
| { name: '伞形科', value: 'Apiaceae' },
| ],
| },
| ],
| },
| {
| name: '菊亚纲',
| children: [
| {
| name: '龙胆目',
| children: [
| { name: '马钱科', value: 'Loganiaceae' },
| { name: '轮叶科', value: 'Retziaceae' },
| { name: '龙胆科', value: 'Gentianaceae' },
| { name: '囊叶木科', value: 'Saccifoliaceae' },
| { name: '夹竹桃科', value: 'Apocynaceae' },
| { name: '萝藦科', value: 'Asclepiadaceae' },
| ],
| },
| {
| name: '茄目',
| children: [
| { name: '核果木科', value: 'Duckeodendraceae' },
| { name: '假茄科', value: 'Nolanaceae' },
| { name: '茄科', value: 'Solanaceae' },
| { name: '旋花科', value: 'Convolvulaceae' },
| { name: '菟丝子科', value: 'Cuscutaceae' },
| { name: '睡菜科', value: 'Menyanthaceae' },
| { name: '花葱科', value: 'Polemoniaceae' },
| { name: '田基麻科', value: 'Hydrophyllaceae' },
| { name: '异轮叶科', value: 'Retziaceae' },
| ],
| },
| {
| name: '唇形目',
| children: [
| { name: '盖裂寄生科', value: 'Lennoaceae' },
| { name: '紫草科', value: 'Boraginaceae' },
| { name: '马鞭草科', value: 'Verbenaceae' },
| { name: '唇形科', value: 'Lamiaceae' },
| ],
| },
| {
| name: '水马齿目',
| children: [
| { name: '杉叶藻科', value: 'Hippuridaceae' },
| { name: '水马齿科', value: 'Callitrichaceae' },
| { name: '水穗草科', value: 'Hydrostachyaceae' },
| ],
| },
| {
| name: '车前目',
| children: [{ name: '车前科', value: 'Plantaginaceae' }],
| },
| {
| name: '玄参目',
| children: [
| { name: '醉鱼草科', value: 'Buddlejaceae' },
| { name: '木犀科', value: 'Oleaceae' },
| { name: '玄参科', value: 'Scrophulariaceae' },
| { name: '球花科', value: 'Globulariaceae' },
| { name: '苦槛蓝科', value: 'Myoporaceae' },
| { name: '列当科', value: 'Orobanchaceae' },
| { name: '苦苣苔科', value: 'Gesneriaceae' },
| { name: '爵床科', value: 'Acanthaceae' },
| { name: '胡麻科', value: 'Pedaliaceae' },
| { name: '紫葳科', value: 'Bignoniaceae' },
| { name: '对叶藤科', value: 'Mendonciaceae' },
| { name: '狸藻科', value: 'Lentibulariaceae' },
| ],
| },
| {
| name: '桔梗目',
| children: [
| { name: '五膜草科', value: 'Pentaphragmataceae' },
| { name: '楔瓣花科', value: 'Sphenocleaceae' },
| { name: '桔梗科', value: 'Campanulaceae' },
| { name: '花柱草科', value: 'Stylidiaceae' },
| { name: '陀螺果科', value: 'Donatiaceae' },
| { name: '蓝针花', value: 'Brunoniaceae' },
| { name: '草海桐科', value: 'Goodeniaceae' },
| ],
| },
| {
| name: '茜草目',
| children: [
| { name: '茜草科', value: 'Rubiaceae' },
| { name: '假牛繁缕科', value: 'Theligonaceae' },
| ],
| },
| {
| name: '川续断目',
| children: [
| { name: '忍冬科', value: 'Caprifoliaceae' },
| { name: '五福花科', value: 'Adoxaceae' },
| { name: '败酱科', value: 'Valerianaceae' },
| { name: '川续断科', value: 'Dipsacaceae' },
| ],
| },
| {
| name: '头花草目',
| children: [{ name: '头花草科', value: 'Calyceraceae' }],
| },
| {
| name: '菊目',
| children: [{ name: '菊科', value: 'Asteraceae' }],
| },
| ],
| },
| ],
| },
| ],
| };
| const data2 = {
| name: '管理系统',
| children: [
| {
| name: '基本信息',
| children: [
| { name: '用户信息', value: 4216 },
| { name: '监控区域', value: 2443 },
| { name: '监控设备', value: 4132 },
| { name: '模具信息', value: 4114 },
| { name: '业务人员信息', value: 4516 },
| ],
| },
| {
| name: '业务履历',
| children: [
| { name: '入库记录', value: 2105 },
| { name: '出库记录', value: 1316 },
| { name: '维修记录', value: 3151 },
| { name: '保养记录', value: 3770 },
| { name: '报废记录', value: 2435 },
| { name: '生产履历', value: 5833 },
| ],
| },
| {
| name: '监控中心',
| children: [
| { name: '监控看板', value: 6563 },
| { name: '异常记录', value: 8878 },
| { name: '日志查询', value: 8873 },
| { name: '提醒通知', value: 8533 },
| ],
| },
| {
| name: '系统配置',
| children: [
| { name: '参数配置', value: 8933 },
| { name: '服务配置', value: 9835 },
| ],
| },
| ],
| };
| const options: any = {
| tooltip: {
| trigger: 'item',
| triggerOn: 'mousemove',
| },
| legend: {
| top: '2%',
| left: '3%',
| orient: 'vertical',
| data: [
| {
| name: '植物界',
| icon: 'rectangle',
| },
| {
| name: '管理系统',
| icon: 'rectangle',
| },
| ],
| borderColor: '#c23531',
| },
| series: [
| {
| type: 'tree',
| name: '植物界',
| data: [data1],
| top: '5%',
| left: '7%',
| bottom: '2%',
| right: '60%',
| symbolSize: 7,
| label: {
| position: 'left',
| verticalAlign: 'middle',
| align: 'right',
| },
| leaves: {
| label: {
| position: 'right',
| verticalAlign: 'middle',
| align: 'left',
| },
| },
| expandAndCollapse: true,
| animationDuration: 550,
| animationDurationUpdate: 750,
| },
| {
| type: 'tree',
| name: '管理系统',
| data: [data2],
| top: '20%',
| left: '60%',
| bottom: '22%',
| right: '18%',
| symbolSize: 7,
| label: {
| position: 'left',
| verticalAlign: 'middle',
| align: 'right',
| },
| leaves: {
| label: {
| position: 'right',
| verticalAlign: 'middle',
| align: 'left',
| },
| },
| expandAndCollapse: true,
| animationDuration: 550,
| animationDurationUpdate: 750,
| },
| ],
| };
|
| onMounted(() => {
| renderEcharts(options);
| });
| </script>
| <template>
| <div class="jnpf-content-wrapper">
| <div class="jnpf-content-wrapper-center bg-white px-[10px] pt-[40px]">
| <EchartsUI ref="chartRef" height="500px" />
| </div>
| </div>
| </template>
|
|
