当前位置:   article > 正文

数据可视化词云图的实现_数据大屏实现词云

数据大屏实现词云

词云图的实现

生成词云图的过程通常包括以下几个步骤:

1、文本预处理:去除停用词、标点符号等无关信息。
2、统计词频或计算TF-IDF值。
3、根据词频或TF-IDF值生成词云图。

为了去实现有图案的词云,可以在iconfont中下载(最好是填充的)图案,转为base64,就可以用来生成有图案的词云了。

  1. // 人像的base64编码
  2. image1="data:image/png;base64,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"
  3. var maskResource = new Image()
  4. maskResource.src=image1;

实现代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>词云图</title>
  6. <script type="text/javascript" src="js/echarts.js"></script>
  7. <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="main" style="width: 600px;height: 500px; "></div>
  11. <script >
  12. var mycharts = echarts.init(document.getElementById("main"));
  13. //用来存储数据
  14. var jsonlist = [];
  15. jsonlist.push(
  16. {
  17. "name": "花鸟市场",
  18. "value": 1446
  19. },
  20. {
  21. "name": "汽车",
  22. "value": 928
  23. },
  24. {
  25. "name": "视频",
  26. "value": 906
  27. },
  28. {
  29. "name": "电视",
  30. "value": 825
  31. },
  32. {
  33. "name": "Lover Boy 88",
  34. "value": 399
  35. },
  36. {
  37. "name": "动漫",
  38. "value": 486
  39. },
  40. {
  41. "name": "啦啦",
  42. "value": 50032
  43. },
  44. {
  45. "name": "直播",
  46. "value": 163
  47. },
  48. {
  49. "name": "广播电台",
  50. "value": 86
  51. },
  52. {
  53. "name": "戏曲曲艺",
  54. "value": 17
  55. },
  56. {
  57. "name": "演出票务",
  58. "value": 6
  59. },
  60. {
  61. "name": "给陌生的你听",
  62. "value": 1
  63. },
  64. {
  65. "name": "资讯",
  66. "value": 1437
  67. },
  68. {
  69. "name": "商业财经",
  70. "value": 422
  71. },
  72. {
  73. "name": "娱乐八卦",
  74. "value": 353
  75. },
  76. {
  77. "name": "军事",
  78. "value": 331
  79. },
  80. {
  81. "name": "科技资讯",
  82. "value": 313
  83. },
  84. {
  85. "name": "社会时政",
  86. "value": 307
  87. },
  88. {
  89. "name": "时尚",
  90. "value": 43
  91. },
  92. {
  93. "name": "网络奇闻",
  94. "value": 15
  95. },
  96. {
  97. "name": "旅游出行",
  98. "value": 438
  99. },
  100. {
  101. "name": "景点类型",
  102. "value": 957
  103. },
  104. {
  105. "name": "国内游",
  106. "value": 927
  107. },
  108. {
  109. "name": "远途出行方式",
  110. "value": 908
  111. },
  112. {
  113. "name": "酒店",
  114. "value": 693
  115. },
  116. {
  117. "name": "关注景点",
  118. "value": 611
  119. },
  120. {
  121. "name": "旅游网站偏好",
  122. "value": 512
  123. },
  124. {
  125. "name": "出国游",
  126. "value": 382
  127. },
  128. {
  129. "name": "交通票务",
  130. "value": 312
  131. },
  132. {
  133. "name": "旅游方式",
  134. "value": 187
  135. },
  136. {
  137. "name": "旅游主题",
  138. "value": 163
  139. },
  140. {
  141. "name": "港澳台",
  142. "value": 104
  143. },
  144. {
  145. "name": "本地周边游",
  146. "value": 3
  147. },
  148. {
  149. "name": "小卖家",
  150. "value": 1331
  151. },
  152. {
  153. "name": "全日制学校",
  154. "value": 941
  155. },
  156. {
  157. "name": "基础教育科目",
  158. "value": 585
  159. },
  160. {
  161. "name": "考试培训",
  162. "value": 473
  163. },
  164. {
  165. "name": "语言学习",
  166. "value": 358
  167. },
  168. {
  169. "name": "留学",
  170. "value": 246
  171. },
  172. {
  173. "name": "K12课程培训",
  174. "value": 207
  175. },
  176. {
  177. "name": "艺术培训",
  178. "value": 194
  179. },
  180. {
  181. "name": "技能培训",
  182. "value": 104
  183. },
  184. {
  185. "name": "IT培训",
  186. "value": 87
  187. },
  188. {
  189. "name": "高等教育专业",
  190. "value": 63
  191. },
  192. {
  193. "name": "家教",
  194. "value": 48
  195. },
  196. {
  197. "name": "体育培训",
  198. "value": 23
  199. },
  200. {
  201. "name": "职场培训",
  202. "value": 5
  203. },
  204. {
  205. "name": "金融财经",
  206. "value": 1328
  207. },
  208. {
  209. "name": "银行",
  210. "value": 765
  211. },
  212. {
  213. "name": "股票",
  214. "value": 452
  215. },
  216. {
  217. "name": "保险",
  218. "value": 415
  219. },
  220. {
  221. "name": "贷款",
  222. "value": 253
  223. },
  224. {
  225. "name": "基金",
  226. "value": 211
  227. },
  228. {
  229. "name": "信用卡",
  230. "value": 180
  231. },
  232. {
  233. "name": "外汇",
  234. "value": 138
  235. },
  236. {
  237. "name": "P2P",
  238. "value": 116
  239. },
  240. {
  241. "name": "贵金属",
  242. "value": 98
  243. },
  244. {
  245. "name": "债券",
  246. "value": 93
  247. },
  248. {
  249. "name": "网络理财",
  250. "value": 92
  251. },
  252. {
  253. "name": "信托",
  254. "value": 90
  255. },
  256. {
  257. "name": "征信",
  258. "value": 76
  259. },
  260. {
  261. "name": "期货",
  262. "value": 76
  263. },
  264. {
  265. "name": "公积金",
  266. "value": 40
  267. },
  268. {
  269. "name": "银行理财",
  270. "value": 36
  271. },
  272. {
  273. "name": "银行业务",
  274. "value": 30
  275. },
  276. {
  277. "name": "典当",
  278. "value": 7
  279. },
  280. {
  281. "name": "海外置业",
  282. "value": 1
  283. },
  284. {
  285. "name": "汽车",
  286. "value": 1309
  287. },
  288. {
  289. "name": "汽车档次",
  290. "value": 965
  291. },
  292. {
  293. "name": "汽车品牌",
  294. "value": 900
  295. },
  296. {
  297. "name": "汽车车型",
  298. "value": 727
  299. },
  300. {
  301. "name": "购车阶段",
  302. "value": 461
  303. },
  304. {
  305. "name": "二手车",
  306. "value": 309
  307. },
  308. {
  309. "name": "汽车美容",
  310. "value": 260
  311. },
  312. {
  313. "name": "新能源汽车",
  314. "value": 173
  315. },
  316. {
  317. "name": "汽车维修",
  318. "value": 155
  319. },
  320. {
  321. "name": "租车服务",
  322. "value": 136
  323. },
  324. {
  325. "name": "车展",
  326. "value": 121
  327. },
  328. {
  329. "name": "违章查询",
  330. "value": 76
  331. },
  332. {
  333. "name": "汽车改装",
  334. "value": 62
  335. },
  336. {
  337. "name": "汽车用品",
  338. "value": 37
  339. },
  340. {
  341. "name": "路况查询",
  342. "value": 32
  343. },
  344. {
  345. "name": "汽车保险",
  346. "value": 28
  347. },
  348. {
  349. "name": "陪驾代驾",
  350. "value": 4
  351. },
  352. {
  353. "name": "网络购物",
  354. "value": 1275
  355. },
  356. {
  357. "name": "做我的猫",
  358. "value": 1088
  359. },
  360. {
  361. "name": "只想要你知道",
  362. "value": 907
  363. },
  364. {
  365. "name": "团购",
  366. "value": 837
  367. },
  368. {
  369. "name": "比价",
  370. "value": 201
  371. },
  372. {
  373. "name": "海淘",
  374. "value": 195
  375. },
  376. {
  377. "name": "移动APP购物",
  378. "value": 179
  379. },
  380. {
  381. "name": "支付方式",
  382. "value": 119
  383. },
  384. {
  385. "name": "代购",
  386. "value": 43
  387. },
  388. {
  389. "name": "体育健身",
  390. "value": 1234
  391. },
  392. {
  393. "name": "体育赛事项目",
  394. "value": 802
  395. },
  396. {
  397. "name": "运动项目",
  398. "value": 405
  399. },
  400. {
  401. "name": "体育类赛事",
  402. "value": 337
  403. },
  404. {
  405. "name": "健身项目",
  406. "value": 199
  407. },
  408. {
  409. "name": "健身房健身",
  410. "value": 78
  411. },
  412. {
  413. "name": "运动健身",
  414. "value": 77
  415. },
  416. {
  417. "name": "家庭健身",
  418. "value": 36
  419. },
  420. {
  421. "name": "健身器械",
  422. "value": 29
  423. },
  424. {
  425. "name": "办公室健身",
  426. "value": 3
  427. },
  428. {
  429. "name": "商务服务",
  430. "value": 1201
  431. },
  432. {
  433. "name": "法律咨询",
  434. "value": 508
  435. },
  436. {
  437. "name": "化工材料",
  438. "value": 147
  439. },
  440. {
  441. "name": "广告服务",
  442. "value": 125
  443. },
  444. {
  445. "name": "会计审计",
  446. "value": 115
  447. },
  448. {
  449. "name": "人员招聘",
  450. "value": 101
  451. },
  452. {
  453. "name": "印刷打印",
  454. "value": 66
  455. },
  456. {
  457. "name": "知识产权",
  458. "value": 32
  459. },
  460. {
  461. "name": "翻译",
  462. "value": 22
  463. },
  464. {
  465. "name": "安全安保",
  466. "value": 9
  467. },
  468. {
  469. "name": "公关服务",
  470. "value": 8
  471. },
  472. {
  473. "name": "商旅服务",
  474. "value": 2
  475. },
  476. {
  477. "name": "展会服务",
  478. "value": 2
  479. },
  480. {
  481. "name": "特许经营",
  482. "value": 1
  483. },
  484. {
  485. "name": "休闲爱好",
  486. "value": 1169
  487. },
  488. {
  489. "name": "收藏",
  490. "value": 412
  491. },
  492. {
  493. "name": "摄影",
  494. "value": 393
  495. },
  496. {
  497. "name": "温泉",
  498. "value": 230
  499. },
  500. {
  501. "name": "博彩彩票",
  502. "value": 211
  503. },
  504. {
  505. "name": "美术",
  506. "value": 207
  507. },
  508. {
  509. "name": "书法",
  510. "value": 139
  511. },
  512. {
  513. "name": "DIY手工",
  514. "value": 75
  515. },
  516. {
  517. "name": "舞蹈",
  518. "value": 23
  519. },
  520. {
  521. "name": "钓鱼",
  522. "value": 21
  523. },
  524. {
  525. "name": "棋牌桌游",
  526. "value": 17
  527. },
  528. {
  529. "name": "KTV",
  530. "value": 6
  531. },
  532. {
  533. "name": "密室",
  534. "value": 5
  535. },
  536. {
  537. "name": "采摘",
  538. "value": 4
  539. },
  540. {
  541. "name": "电玩",
  542. "value": 1
  543. },
  544. {
  545. "name": "真人CS",
  546. "value": 1
  547. },
  548. {
  549. "name": "轰趴",
  550. "value": 1
  551. },
  552. {
  553. "name": "家电数码",
  554. "value": 1111
  555. },
  556. {
  557. "name": "手机",
  558. "value": 885
  559. },
  560. {
  561. "name": "电脑",
  562. "value": 543
  563. },
  564. {
  565. "name": "大家电",
  566. "value": 321
  567. },
  568. {
  569. "name": "家电关注品牌",
  570. "value": 253
  571. },
  572. {
  573. "name": "网络设备",
  574. "value": 162
  575. },
  576. {
  577. "name": "摄影器材",
  578. "value": 149
  579. },
  580. {
  581. "name": "影音设备",
  582. "value": 133
  583. },
  584. {
  585. "name": "办公数码设备",
  586. "value": 113
  587. },
  588. {
  589. "name": "生活电器",
  590. "value": 67
  591. },
  592. {
  593. "name": "厨房电器",
  594. "value": 54
  595. },
  596. {
  597. "name": "智能设备",
  598. "value": 45
  599. },
  600. {
  601. "name": "个人护理电器",
  602. "value": 22
  603. },
  604. {
  605. "name": "服饰鞋包",
  606. "value": 1047
  607. },
  608. {
  609. "name": "服装",
  610. "value": 566
  611. },
  612. {
  613. "name": "饰品",
  614. "value": 289
  615. },
  616. {
  617. "name": "鞋",
  618. "value": 184
  619. },
  620. {
  621. "name": "箱包",
  622. "value": 168
  623. },
  624. {
  625. "name": "奢侈品",
  626. "value": 137
  627. },
  628. {
  629. "name": "母婴亲子",
  630. "value": 1041
  631. },
  632. {
  633. "name": "孕婴保健",
  634. "value": 505
  635. },
  636. {
  637. "name": "母婴社区",
  638. "value": 299
  639. },
  640. {
  641. "name": "早教",
  642. "value": 103
  643. },
  644. {
  645. "name": "奶粉辅食",
  646. "value": 66
  647. },
  648. {
  649. "name": "童车童床",
  650. "value": 41
  651. },
  652. {
  653. "name": "关注品牌",
  654. "value": 271
  655. },
  656. {
  657. "name": "宝宝玩乐",
  658. "value": 30
  659. },
  660. {
  661. "name": "母婴护理服务",
  662. "value": 25
  663. },
  664. {
  665. "name": "纸尿裤湿巾",
  666. "value": 16
  667. },
  668. {
  669. "name": "妈妈用品",
  670. "value": 15
  671. },
  672. {
  673. "name": "宝宝起名",
  674. "value": 12
  675. },
  676. {
  677. "name": "童装童鞋",
  678. "value": 9
  679. },
  680. {
  681. "name": "胎教",
  682. "value": 8
  683. },
  684. {
  685. "name": "宝宝安全",
  686. "value": 1
  687. },
  688. {
  689. "name": "宝宝洗护用品",
  690. "value": 1
  691. },
  692. {
  693. "name": "软件应用",
  694. "value": 1018
  695. },
  696. {
  697. "name": "系统工具",
  698. "value": 896
  699. },
  700. {
  701. "name": "理财购物",
  702. "value": 440
  703. },
  704. {
  705. "name": "生活实用",
  706. "value": 365
  707. },
  708. {
  709. "name": "影音图像",
  710. "value": 256
  711. },
  712. {
  713. "name": "社交通讯",
  714. "value": 214
  715. },
  716. {
  717. "name": "手机美化",
  718. "value": 39
  719. },
  720. {
  721. "name": "办公学习",
  722. "value": 28
  723. },
  724. {
  725. "name": "应用市场",
  726. "value": 23
  727. },
  728. {
  729. "name": "母婴育儿",
  730. "value": 14
  731. },
  732. {
  733. "name": "游戏",
  734. "value": 946
  735. },
  736. {
  737. "name": "手机游戏",
  738. "value": 565
  739. },
  740. {
  741. "name": "PC游戏",
  742. "value": 353
  743. },
  744. {
  745. "name": "网页游戏",
  746. "value": 254
  747. },
  748. {
  749. "name": "游戏机",
  750. "value": 188
  751. },
  752. {
  753. "name": "模拟辅助",
  754. "value": 166
  755. },
  756. {
  757. "name": "个护美容",
  758. "value": 942
  759. },
  760. {
  761. "name": "护肤品",
  762. "value": 177
  763. },
  764. {
  765. "name": "彩妆",
  766. "value": 133
  767. },
  768. {
  769. "name": "美发",
  770. "value": 80
  771. },
  772. {
  773. "name": "香水",
  774. "value": 50
  775. },
  776. {
  777. "name": "个人护理",
  778. "value": 46
  779. },
  780. {
  781. "name": "美甲",
  782. "value": 26
  783. },
  784. {
  785. "name": "SPA美体",
  786. "value": 21
  787. },
  788. {
  789. "name": "花鸟萌宠",
  790. "value": 914
  791. },
  792. {
  793. "name": "绿植花卉",
  794. "value": 311
  795. },
  796. {
  797. "name": "狗",
  798. "value": 257
  799. },
  800. {
  801. "name": "其他宠物",
  802. "value": 131
  803. },
  804. {
  805. "name": "水族",
  806. "value": 125
  807. },
  808. {
  809. "name": "猫",
  810. "value": 122
  811. },
  812. {
  813. "name": "动物",
  814. "value": 81
  815. },
  816. {
  817. "name": "鸟",
  818. "value": 67
  819. },
  820. {
  821. "name": "宠物用品",
  822. "value": 41
  823. },
  824. {
  825. "name": "宠物服务",
  826. "value": 26
  827. },
  828. {
  829. "name": "书籍阅读",
  830. "value": 913
  831. },
  832. {
  833. "name": "网络小说",
  834. "value": 483
  835. },
  836. {
  837. "name": "关注书籍",
  838. "value": 128
  839. },
  840. {
  841. "name": "文学",
  842. "value": 105
  843. },
  844. {
  845. "name": "报刊杂志",
  846. "value": 77
  847. },
  848. {
  849. "name": "人文社科",
  850. "value": 22
  851. },
  852. {
  853. "name": "建材家居",
  854. "value": 907
  855. },
  856. {
  857. "name": "装修建材",
  858. "value": 644
  859. },
  860. {
  861. "name": "家具",
  862. "value": 273
  863. },
  864. {
  865. "name": "家居风格",
  866. "value": 187
  867. },
  868. {
  869. "name": "家居家装关注品牌",
  870. "value": 140
  871. },
  872. {
  873. "name": "家纺",
  874. "value": 107
  875. },
  876. {
  877. "name": "厨具",
  878. "value": 47
  879. },
  880. {
  881. "name": "灯具",
  882. "value": 43
  883. },
  884. {
  885. "name": "家居饰品",
  886. "value": 29
  887. },
  888. {
  889. "name": "家居日常用品",
  890. "value": 10
  891. },
  892. {
  893. "name": "生活服务",
  894. "value": 883
  895. },
  896. {
  897. "name": "物流配送",
  898. "value": 536
  899. },
  900. {
  901. "name": "家政服务",
  902. "value": 108
  903. },
  904. {
  905. "name": "摄影服务",
  906. "value": 49
  907. },
  908. {
  909. "name": "搬家服务",
  910. "value": 38
  911. },
  912. {
  913. "name": "物业维修",
  914. "value": 37
  915. },
  916. {
  917. "name": "婚庆服务",
  918. "value": 24
  919. },
  920. {
  921. "name": "二手回收",
  922. "value": 24
  923. },
  924. {
  925. "name": "鲜花配送",
  926. "value": 3
  927. },
  928. {
  929. "name": "维修服务",
  930. "value": 3
  931. },
  932. {
  933. "name": "殡葬服务",
  934. "value": 1
  935. },
  936. {
  937. "name": "求职创业",
  938. "value": 874
  939. },
  940. {
  941. "name": "创业",
  942. "value": 363
  943. },
  944. {
  945. "name": "目标职位",
  946. "value": 162
  947. },
  948. {
  949. "name": "目标行业",
  950. "value": 50
  951. },
  952. {
  953. "name": "兼职",
  954. "value": 21
  955. },
  956. {
  957. "name": "期望年薪",
  958. "value": 20
  959. },
  960. {
  961. "name": "实习",
  962. "value": 16
  963. },
  964. {
  965. "name": "雇主类型",
  966. "value": 10
  967. },
  968. {
  969. "name": "星座运势",
  970. "value": 789
  971. },
  972. {
  973. "name": "星座",
  974. "value": 316
  975. },
  976. {
  977. "name": "算命",
  978. "value": 303
  979. },
  980. {
  981. "name": "解梦",
  982. "value": 196
  983. },
  984. {
  985. "name": "风水",
  986. "value": 93
  987. },
  988. {
  989. "name": "面相分析",
  990. "value": 47
  991. },
  992. {
  993. "name": "手相",
  994. "value": 32
  995. },
  996. {
  997. "name": "公益",
  998. "value": 90
  999. }
  1000. );
  1001. // 人像的base64编码
  1002. image1="data:image/png;base64,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"
  1003. var maskResource = new Image()
  1004. maskResource.src=image1;
  1005. var option ={
  1006. //设置标题,居中显示
  1007. title:{
  1008. text: '词云图爱心',
  1009. left:'center',
  1010. },
  1011. //数据可以点击
  1012. tooltip:{
  1013. },
  1014. series:[
  1015. {
  1016. maskImage:maskResource,
  1017. //词的类型
  1018. type: 'wordCloud',
  1019. //设置字符大小范围
  1020. sizeRange:[6,78],
  1021. rotationRange:[-45,90],
  1022. textStyle: {
  1023. normal:{
  1024. //生成随机的字体颜色
  1025. color:function () {
  1026. return 'rgb(' + [
  1027. Math.round(Math.random() * 160),
  1028. Math.round(Math.random() * 160),
  1029. Math.round(Math.random() * 160)
  1030. ].join(',')+')';
  1031. }
  1032. }
  1033. },
  1034. //不要忘记调用数据
  1035. data:jsonlist
  1036. }
  1037. ]
  1038. };
  1039. //加载图像,将数据放在图像中
  1040. maskResource.onload = function(){
  1041. mycharts.setOption(option)
  1042. };
  1043. </script>
  1044. </body>
  1045. </html>

我这里是插入了一个爱心的图案,则显示出来的效果如下:

里面数据可以任意改动,图形也可以改变 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/725545
推荐阅读
相关标签
  

闽ICP备14008679号