index.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <link href="css/style.css" rel="stylesheet" />
  7. </head>
  8. <body>
  9. <div id="app">
  10. <marquee behavior="scroll" class="play">
  11. <div>
  12. <span class="xmt">谢通门县旅游局</span>
  13. <span>现在播放一天紧急通知:刚刚通报!国内一地发现6例确诊!上海旅游夫妻密接者阳性!</span>
  14. <span class="tq">2021-10-18 14:36 多云转晴</span>
  15. </div>
  16. <div class="clear"></div>
  17. </marquee>
  18. <div class="top">
  19. <div class="flex" style="margin-top: -20px;">
  20. <div class="f tti" :class="{active:now==0}" @click="tab(0)"></div>
  21. <div class="f tti" :class="{active:now==1}" @click="tab(1)"></div>
  22. <div class="f" style="flex: 2.2;">
  23. <div class="logo">
  24. <img class="u4" src="img/u4.svg" />
  25. <div class="uti">谢通门县旅游数据平台</div>
  26. <img class="u5" src="img/u5.svg" />
  27. </div>
  28. </div>
  29. <div class="f tti" :class="{active:now==2}" @click="tab(2)"></div>
  30. <div class="f tti" @click="tab(2)"></div>
  31. </div>
  32. </div>
  33. <div class="cns">
  34. <div id="segmentedControl" class="mui-segmented-control">
  35. <a class="mui-control-item" :class="{'mui-active':now==0}" @click="tab(0)">游客态势</a>
  36. <a class="mui-control-item" :class="{'mui-active':now==1}" @click="tab(1)">旅游经营态势</a>
  37. <a class="mui-control-item" :class="{'mui-active':now==2}" @click="tab(2)">旅游资源态势</a>
  38. </div>
  39. </div>
  40. <div class="content" v-if="now==0">
  41. <div class="flex">
  42. <div class="f1">
  43. <div class="box">
  44. <div class="icon">
  45. <img src="img/u676.svg" class="tb">
  46. <div class="btw">游客实时数据分析</div>
  47. </div>
  48. <div class="cons">
  49. <div id="kll" style="width:105%;height: 260px;"></div>
  50. </div>
  51. </div>
  52. <div class="box">
  53. <div class="icon">
  54. <img src="img/u118.svg" class="tb">
  55. <div class="btw">游客画像分析</div>
  56. </div>
  57. <div class="cons">
  58. <div id="ykhx" style="width:105%;height:260px;"></div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="f1" style="flex: 1.6;">
  63. <div class="box" style="height: 720px;">
  64. <div class="icon">
  65. <img src="img/u110.svg" class="tb">
  66. <div class="btw">景区游客分布情况热力图</div>
  67. </div>
  68. <div class="cons">
  69. <iframe src="rl.html" style="height: 640px;margin-left:15px;"></iframe>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="f1">
  74. <div class="box">
  75. <div class="icon">
  76. <img src="img/u119.svg" class="tb">
  77. <div class="btw">客源交通地分析</div>
  78. </div>
  79. <div class="cons">
  80. <div id="jtxx" style="width:105%;height:260px;"></div>
  81. </div>
  82. </div>
  83. <div class="box">
  84. <div class="icon">
  85. <img src="img/u334.svg" class="tb">
  86. <div class="btw">游客舆情分析</div>
  87. </div>
  88. <div class="cons">
  89. <canvas id="canvas" width="400px" height="260px"></canvas>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="content" v-if="now==1">
  96. <div class="flex">
  97. <div class="f1">
  98. <div class="box">
  99. <div class="icon">
  100. <img src="img/u676.svg" class="tb">
  101. <div class="btw">酒店经营情况</div>
  102. </div>
  103. <div class="cons">
  104. <div id="jd" style="width:105%;height: 260px;"></div>
  105. </div>
  106. </div>
  107. <div class="box">
  108. <div class="icon">
  109. <img src="img/u113.svg" class="tb">
  110. <div class="btw">商户经营情况</div>
  111. </div>
  112. <div class="cons">
  113. <div id="jyzk" style="width:105%;height:260px;"></div>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="f1" style="flex: 1.6;">
  118. <div class="box" style="height: 720px;">
  119. <div class="icon">
  120. <img src="img/u110.svg" class="tb">
  121. <div class="btw">商户分布及经营情况态势</div>
  122. </div>
  123. <div class="cons">
  124. <iframe src="jd.html" style="height: 640px;margin-left:15px;"></iframe>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="f1">
  129. <div class="box">
  130. <div class="icon">
  131. <img src="img/u113.svg" class="tb">
  132. <div class="btw">商户经营分析</div>
  133. </div>
  134. <div class="cons">
  135. <div id="jyfx" style="width:105%;height:260px;"></div>
  136. </div>
  137. </div>
  138. <div class="box">
  139. <div class="icon">
  140. <img src="img/u113.svg" class="tb">
  141. <div class="btw">热销产品分析</div>
  142. </div>
  143. <div class="cons">
  144. <div id="cpfx" style="width:105%;height:260px;"></div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="content" v-if="now==2">
  151. <div class="flex">
  152. <div class="f1">
  153. <div class="box">
  154. <div class="icon">
  155. <img src="img/u675.svg" class="tb">
  156. <div class="btw">停车场运行情况</div>
  157. </div>
  158. <div class="cons">
  159. <div style="text-align: center;margin-top: 20px; ">
  160. <span class="tag">2</span>
  161. <span class="tag">3</span>
  162. <span class="tag">4</span>
  163. <span class="tag">5</span>
  164. <span class="tags">次</span>
  165. <div class="car">
  166. <img src="img/u573.svg" />
  167. <img src="img/u573.svg" />
  168. <img src="img/u573.svg" />
  169. <img src="img/u570.svg" />
  170. <img src="img/u570.svg" />
  171. <img src="img/u570.svg" />
  172. </div>
  173. <div class="flex">
  174. <div class="f num">
  175. <div>123</div>
  176. <div>入场车辆</div>
  177. </div>
  178. <div class="f num ss" style="background-color: #2b2957;">
  179. <div>45</div>
  180. <div>出场车辆</div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. <div class="box">
  187. <div class="icon">
  188. <img src="img/u675.svg" class="tb">
  189. <div class="btw">车辆统计分析</div>
  190. </div>
  191. <div class="cons">
  192. <div id="tcc" style="width:105%;height:260px;"></div>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="f1" style="flex: 1.6;">
  197. <div class="box" style="height: 720px;">
  198. <div class="icon">
  199. <img src="img/u110.svg" class="tb">
  200. <div class="btw">景区监控系统</div>
  201. </div>
  202. <div class="cons">
  203. <div class="video">
  204. <div class="v" style="border: 0px;">
  205. <iframe src="https://stlab.gxqrjf.com:20443/liveplayer/" allowfullscreen="true"
  206. style="width: 100%;"></iframe>
  207. </div>
  208. <div class="v" style="border: 0px;">
  209. <iframe src="https://stlab.gxqrjf.com:20443/liveplayer/" allowfullscreen="true"
  210. style="width: 100%;"></iframe>
  211. </div>
  212. </div>
  213. <div class="video">
  214. <div class="v" style="border: 0px;">
  215. <iframe src="https://stlab.gxqrjf.com:20443/liveplayer/" allowfullscreen="true"
  216. style="width: 100%;"></iframe>
  217. </div>
  218. <div class="v" style="border: 0px;">
  219. <iframe src="https://stlab.gxqrjf.com:20443/liveplayer/" allowfullscreen="true"
  220. style="width: 100%;"></iframe>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="f1">
  227. <div class="box">
  228. <div class="icon">
  229. <img src="img/u674.svg" class="tb">
  230. <div class="btw">气象环境数值</div>
  231. </div>
  232. <div class="cons">
  233. <div class="flex tqt">
  234. <div class="t">
  235. <img class="tqw" src="img/u789.svg" />
  236. <div class="tq1">风向:</div>
  237. <div class="tq2">南风</div>
  238. </div>
  239. <div class="t">
  240. <img class="tqw" src="img/u785.svg" />
  241. <div class="tq1">含氧量:</div>
  242. <div class="tq2 tty">60%</div>
  243. </div>
  244. </div>
  245. <div class="flex tqt">
  246. <div class="t">
  247. <img class="tqw" src="img/u555.svg" />
  248. <div class="tq1">整体:</div>
  249. <div class="tq2">多云转晴</div>
  250. </div>
  251. <div class="t">
  252. <img class="tqw" src="img/u788.svg" />
  253. <div class="tq1">粉尘指标:</div>
  254. <div class="tq2 tty">10%</div>
  255. </div>
  256. </div>
  257. <div class="flex tqt">
  258. <div class="t">
  259. <img class="tqw" src="img/u787.svg" />
  260. <div class="tq1">温度:</div>
  261. <div class="tq2">27℃</div>
  262. </div>
  263. <div class="t">
  264. <img class="tqw" src="img/u786.svg" />
  265. <div class="tq1">PM2.5:</div>
  266. <div class="tq2 tty">55</div>
  267. </div>
  268. </div>
  269. <div class="flex tqt">
  270. <div class="t">
  271. <img class="tqw" src="img/u556.svg" />
  272. <div class="tq1">湿度:</div>
  273. <div class="tq2">40%</div>
  274. </div>
  275. <div class="t">
  276. <img class="tqw" src="img/u784.svg" />
  277. <div class="tq1">当前风速:</div>
  278. <div class="tq2 tty">4级</div>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="box">
  284. <div class="icon">
  285. <img src="img/u110.svg" class="tb">
  286. <div class="btw">旅游线路分析</div>
  287. </div>
  288. <div class="cons">
  289. <div id="lylx" style="width:105%;height:260px;"></div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. <script src="js/vue.min.js"></script>
  297. <script src="js/echarts.min.js"></script>
  298. <script src="js/jquery.min.js"></script>
  299. <script src="js/wordcloud2.js"></script>
  300. <script>
  301. let vm = new Vue({
  302. el: "#app",
  303. data: {
  304. item: {},
  305. now: 0
  306. },
  307. mounted() {
  308. this.tab(0);
  309. },
  310. methods: {
  311. tab(now = 0) {
  312. this.now = now;
  313. if (this.now == 0) {
  314. setTimeout(() => {
  315. this.kll();
  316. this.jtxx();
  317. this.ykhx();
  318. this.yq();
  319. }, 300);
  320. }
  321. if (this.now == 1) {
  322. setTimeout(() => {
  323. this.jyzk();
  324. this.jd();
  325. this.jyfx();
  326. this.cpfx();
  327. }, 300);
  328. }
  329. if (this.now == 2) {
  330. setTimeout(() => {
  331. this.tcc();
  332. this.lylx();
  333. }, 300);
  334. }
  335. },
  336. //客流量
  337. kll() {
  338. let option = {
  339. xAxis: {
  340. type: 'category',
  341. data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  342. axisLabel: {
  343. textStyle: {
  344. color: '#ffffff',
  345. fontSize: 14, //字体大小
  346. }
  347. }
  348. },
  349. yAxis: {
  350. type: 'value',
  351. axisLabel: {
  352. textStyle: {
  353. color: '#ffffff',
  354. fontSize: 14, //字体大小
  355. }
  356. }
  357. },
  358. series: [{
  359. data: [820, 932, 901, 934, 1290, 1330, 1320],
  360. type: 'line',
  361. areaStyle: {}
  362. }]
  363. };
  364. echarts.init(document.getElementById('kll')).setOption(option);
  365. },
  366. //交通信息
  367. jtxx() {
  368. let option = {
  369. tooltip: {},
  370. legend: {
  371. data: ['飞机', '汽车', '火车'],
  372. textStyle: {
  373. color: '#ffffff' //字体颜色
  374. },
  375. },
  376. xAxis: {
  377. data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  378. axisLabel: {
  379. textStyle: {
  380. color: '#ffffff',
  381. fontSize: 14, //字体大小
  382. }
  383. }
  384. },
  385. yAxis: {
  386. axisLabel: {
  387. textStyle: {
  388. color: '#ffffff',
  389. fontSize: 14, //字体大小
  390. }
  391. }
  392. },
  393. series: [{
  394. name: '飞机',
  395. type: 'bar',
  396. data: [5, 20, 36, 10, 10, 20, 13]
  397. }, {
  398. name: '汽车',
  399. type: 'bar',
  400. data: [5, 20, 36, 10, 10, 20, 13]
  401. }, {
  402. name: '火车',
  403. type: 'bar',
  404. data: [5, 30, 36, 10, 10, 20, 13]
  405. }]
  406. };
  407. echarts.init(document.getElementById('jtxx')).setOption(option);
  408. },
  409. //经营状况
  410. jyzk() {
  411. let option = {
  412. tooltip: {},
  413. legend: {
  414. data: ['飞机'],
  415. textStyle: {
  416. color: '#ffffff' //字体颜色
  417. },
  418. },
  419. xAxis: {
  420. data: ['店铺1', '店铺2', '店铺3', '店铺4', '店铺5'],
  421. axisLabel: {
  422. textStyle: {
  423. color: '#ffffff',
  424. fontSize: 14, //字体大小
  425. }
  426. }
  427. },
  428. yAxis: {
  429. axisLabel: {
  430. textStyle: {
  431. color: '#ffffff',
  432. fontSize: 14, //字体大小
  433. }
  434. }
  435. },
  436. series: [{
  437. name: '飞机',
  438. type: 'bar',
  439. data: [5, 20, 36, 10, 10]
  440. }]
  441. };
  442. echarts.init(document.getElementById('jyzk')).setOption(option);
  443. },
  444. //游客画像
  445. ykhx() {
  446. let option = {
  447. tooltip: {
  448. trigger: 'item'
  449. },
  450. series: [{
  451. name: '统计人数',
  452. type: 'pie',
  453. radius: '65%',
  454. data: [{
  455. value: 1048,
  456. name: '老年人数'
  457. },
  458. {
  459. value: 735,
  460. name: '中年人数'
  461. },
  462. {
  463. value: 580,
  464. name: '青年人数'
  465. }
  466. ],
  467. itemStyle: {
  468. normal: {
  469. label: {
  470. textStyle: {
  471. color: '#ffffff',
  472. fontSize: 15,
  473. fontWeight: 'bolder'
  474. }
  475. }
  476. }
  477. }
  478. }]
  479. };
  480. echarts.init(document.getElementById('ykhx')).setOption(option);
  481. },
  482. //酒店预定数据
  483. jd() {
  484. let option = {
  485. tooltip: {
  486. trigger: 'axis',
  487. axisPointer: {
  488. type: 'cross',
  489. label: {
  490. backgroundColor: '#6a7985'
  491. }
  492. }
  493. },
  494. grid: {
  495. top: '-3%',
  496. left: '3%',
  497. right: '7%',
  498. bottom: '3%',
  499. containLabel: true
  500. },
  501. xAxis: [{
  502. type: 'category',
  503. boundaryGap: false,
  504. data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
  505. axisLabel: {
  506. textStyle: {
  507. color: '#ffffff',
  508. fontSize: 14, //字体大小
  509. }
  510. }
  511. }],
  512. yAxis: [{
  513. type: 'value',
  514. axisLabel: {
  515. textStyle: {
  516. color: '#ffffff',
  517. fontSize: 14, //字体大小
  518. }
  519. }
  520. }],
  521. series: [{
  522. name: 'Email',
  523. type: 'line',
  524. stack: 'Total',
  525. areaStyle: {},
  526. data: [120, 132, 101, 134, 90, 230, 210]
  527. },
  528. {
  529. name: 'Union Ads',
  530. type: 'line',
  531. stack: 'Total',
  532. areaStyle: {},
  533. data: [220, 182, 191, 234, 290, 330, 310]
  534. },
  535. {
  536. name: 'Video Ads',
  537. type: 'line',
  538. stack: 'Total',
  539. areaStyle: {},
  540. data: [150, 232, 201, 154, 190, 330, 410]
  541. }
  542. ]
  543. };
  544. echarts.init(document.getElementById('jd')).setOption(option);
  545. },
  546. //停车场数据
  547. tcc() {
  548. let option = {
  549. tooltip: {
  550. trigger: 'item'
  551. },
  552. series: [{
  553. name: '统计车辆',
  554. type: 'pie',
  555. radius: '65%',
  556. data: [{
  557. value: 1048,
  558. name: '外地车辆'
  559. },
  560. {
  561. value: 735,
  562. name: '本地车辆'
  563. }
  564. ],
  565. itemStyle: {
  566. normal: {
  567. label: {
  568. textStyle: {
  569. color: '#ffffff',
  570. fontSize: 17,
  571. fontWeight: 'bolder'
  572. }
  573. }
  574. }
  575. }
  576. }]
  577. };
  578. echarts.init(document.getElementById('tcc')).setOption(option);
  579. },
  580. //商户经营分析
  581. jyfx() {
  582. let option = {
  583. title: {
  584. text: '门店收入TOP5',
  585. textStyle: {
  586. color: '#ffffff',
  587. fontSize: 14, //字体大小
  588. }
  589. },
  590. tooltip: {
  591. trigger: 'axis',
  592. axisPointer: {
  593. type: 'shadow'
  594. }
  595. },
  596. legend: {
  597. data: ['本月', '本年'],
  598. textStyle: {
  599. color: '#ffffff' //字体颜色
  600. },
  601. },
  602. grid: {
  603. left: '3%',
  604. right: '6%',
  605. bottom: '3%',
  606. containLabel: true
  607. },
  608. xAxis: {
  609. type: 'value',
  610. boundaryGap: [0, 0.01],
  611. axisLabel: {
  612. textStyle: {
  613. color: '#ffffff',
  614. fontSize: 14, //字体大小
  615. }
  616. }
  617. },
  618. yAxis: {
  619. type: 'category',
  620. data: ['店铺1', '店铺2', '店铺3', '店铺4'],
  621. axisLabel: {
  622. textStyle: {
  623. color: '#ffffff',
  624. fontSize: 14, //字体大小
  625. }
  626. }
  627. },
  628. series: [{
  629. name: '本月',
  630. type: 'bar',
  631. data: [18203, 23489, 29034, 104970]
  632. }]
  633. };
  634. echarts.init(document.getElementById('jyfx')).setOption(option);
  635. },
  636. //热销产品分析
  637. cpfx() {
  638. let option = {
  639. title: {
  640. text: '单品销售数量TOP10',
  641. textStyle: {
  642. color: '#ffffff',
  643. fontSize: 14, //字体大小
  644. }
  645. },
  646. tooltip: {
  647. trigger: 'axis',
  648. axisPointer: {
  649. type: 'shadow'
  650. }
  651. },
  652. legend: {
  653. data: ['本年'],
  654. textStyle: {
  655. color: '#ffffff' //字体颜色
  656. },
  657. },
  658. grid: {
  659. left: '3%',
  660. right: '6%',
  661. bottom: '3%',
  662. containLabel: true
  663. },
  664. xAxis: {
  665. type: 'value',
  666. boundaryGap: [0, 0.01],
  667. axisLabel: {
  668. textStyle: {
  669. color: '#ffffff',
  670. fontSize: 14, //字体大小
  671. }
  672. }
  673. },
  674. yAxis: {
  675. type: 'category',
  676. data: ['热狗', '茶叶蛋', '红牛250ml', '哇哈哈矿泉水', '玉米', '王老吉', '阿萨姆奶茶'],
  677. axisLabel: {
  678. textStyle: {
  679. color: '#ffffff',
  680. fontSize: 14, //字体大小
  681. }
  682. }
  683. },
  684. series: [{
  685. name: '本年',
  686. type: 'bar',
  687. data: [18203, 23489, 29034, 104970, 34543, 45645, 34521],
  688. itemStyle: {
  689. normal: {
  690. color: '#4CAF50',
  691. lineStyle: {
  692. color: '#FF5722',
  693. width: 3
  694. }
  695. }
  696. },
  697. }]
  698. };
  699. echarts.init(document.getElementById('cpfx')).setOption(option);
  700. },
  701. //旅游路线
  702. lylx() {
  703. let option = {
  704. title: {
  705. text: '单品销售数量TOP10',
  706. textStyle: {
  707. color: '#ffffff',
  708. fontSize: 14, //字体大小
  709. }
  710. },
  711. tooltip: {
  712. trigger: 'axis',
  713. axisPointer: {
  714. type: 'shadow'
  715. }
  716. },
  717. legend: {
  718. data: ['本年'],
  719. textStyle: {
  720. color: '#ffffff' //字体颜色
  721. },
  722. },
  723. grid: {
  724. left: '3%',
  725. right: '6%',
  726. bottom: '3%',
  727. containLabel: true
  728. },
  729. xAxis: {
  730. type: 'value',
  731. boundaryGap: [0, 0.01],
  732. axisLabel: {
  733. textStyle: {
  734. color: '#ffffff',
  735. fontSize: 14, //字体大小
  736. }
  737. }
  738. },
  739. yAxis: {
  740. type: 'category',
  741. data: ['路线1', '路线2', '路线3', '路线4', '路线5', '路线6'],
  742. axisLabel: {
  743. textStyle: {
  744. color: '#ffffff',
  745. fontSize: 14, //字体大小
  746. }
  747. }
  748. },
  749. series: [{
  750. name: '本年',
  751. type: 'bar',
  752. data: [23, 32, 11, 21, 20, 12],
  753. itemStyle: {
  754. normal: {
  755. color: '#4CAF50',
  756. lineStyle: {
  757. color: '#FF5722',
  758. width: 3
  759. }
  760. }
  761. },
  762. }]
  763. };
  764. echarts.init(document.getElementById('lylx')).setOption(option);
  765. },
  766. //舆情评价
  767. yq() {
  768. let options = eval({
  769. "list": [
  770. ['服务好', 15],
  771. ['开心', 9],
  772. ['晴空万里 ', 7],
  773. ['会再来', 6],
  774. ['好玩', 4],
  775. ['热情', 5],
  776. ['山明水秀', 4],
  777. ['喜欢', 3],
  778. ['干净整洁', 3],
  779. ['门票价格低', 3],
  780. ['环境优美', 3]
  781. ],
  782. "gridSize": 13, // size of the grid in pixels
  783. "weightFactor": 10, // number to multiply for size of each word in the list
  784. "fontWeight": 'normal', // 'normal', 'bold' or a callback
  785. "fontFamily": 'Times, serif', // font to use
  786. "color": 'random-light',
  787. "backgroundColor": '#f0f8ff00'
  788. });
  789. var canvas = document.getElementById('canvas');
  790. //调用WordCloud
  791. WordCloud(canvas, options);
  792. }
  793. }
  794. })
  795. </script>
  796. </body>
  797. </html>