index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871
  1. <template>
  2. <div class="body">
  3. <div class="header">
  4. <h1 class="header_title">松花湖景区通</h1>
  5. <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
  6. </div>
  7. <div class="container">
  8. <div class="left">
  9. <div class="Visitorsflowrate">
  10. <div class="all_title">
  11. <h3 class="PartTitle">景区人流量排行榜TOP5</h3>
  12. <div class="selectDate" data-objname="ticketType">
  13. <span class="_selectData">2020年04月</span>
  14. <a class="icon_more" @click="moreMeunSmalLeft_1 = !moreMeunSmalLeft_1;"> &gt; </a>
  15. <div class="_moreMenu" v-if="moreMeunSmalLeft_1">
  16. <ul>
  17. <li class="change" data-date="2020-04">2020年04月</li>
  18. <li data-date="2020-03">2020年03月</li>
  19. <li data-date="2020-02">2020年02月</li>
  20. <li data-date="2020-01">2020年01月</li>
  21. <li data-date="2019-12">2019年12月</li>
  22. </ul>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="ticketType">
  27. <div class="ticketLeft">
  28. <h4 class="tableTitle">景区排名</h4>
  29. <ul>
  30. <li>
  31. <em>1</em>
  32. <span>成人票</span>
  33. </li>
  34. <li>
  35. <em>2</em>
  36. <span>儿童票</span>
  37. </li>
  38. <li>
  39. <em>3</em>
  40. <span>大门票+船票</span>
  41. </li>
  42. <li>
  43. <em>4</em>
  44. <span>免费票</span>
  45. </li>
  46. <li>
  47. <em>5</em>
  48. <span>亲子套票</span>
  49. </li>
  50. </ul>
  51. </div>
  52. <div class="ticketRight">
  53. <h4 class="tableTitle">景区排名</h4>
  54. <div class="chart bor">
  55. <div id="chartRankOneMb" style="width: 190px;height:190px;"></div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="TouristData">
  61. <div class="all_title">
  62. <h3 class="PartTitle">景区近一个月游客排行榜TOP5</h3>
  63. <div class="selectDate" data-objname="ticketType">
  64. <span class="_selectData">2020年04月</span>
  65. <a class="icon_more" @click="moreMeunSmalLeft_2 = !moreMeunSmalLeft_2;"> &gt; </a>
  66. <div class="_moreMenu" v-if="moreMeunSmalLeft_2">
  67. <ul>
  68. <li class="change" data-date="2020-04">2020年04月</li>
  69. <li data-date="2020-03">2020年03月</li>
  70. <li data-date="2020-02">2020年02月</li>
  71. <li data-date="2020-01">2020年01月</li>
  72. <li data-date="2019-12">2019年12月</li>
  73. </ul>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="Tourischart bor">
  78. <div id="chartRankOneMonth" style="width: 500px;height:300px;"></div>
  79. </div>
  80. </div>
  81. <div class="SalesTrend">
  82. <div class="all_title">
  83. <h3 class="PartTitle">景区近一年销售趋势排行榜TOP5</h3>
  84. <div class="selectDate" data-objname="ticketType">
  85. <span class="_selectData">2020年04月</span>
  86. <a class="icon_more" @click="moreMeunSmalLeft_3 = !moreMeunSmalLeft_3;"> &gt; </a>
  87. <div class="_moreMenu" v-if="moreMeunSmalLeft_3">
  88. <ul>
  89. <li class="change" data-date="2020-04">2020年04月</li>
  90. <li data-date="2020-03">2020年03月</li>
  91. <li data-date="2020-02">2020年02月</li>
  92. <li data-date="2020-01">2020年01月</li>
  93. <li data-date="2019-12">2019年12月</li>
  94. </ul>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="Saleschart bor">
  99. <div id="chartRankOneSale" style="width: 500px;height:220px;"></div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="center">
  104. <div class="regionData">
  105. <!--通知公告选项卡开始-->
  106. <div class="region_tab2">
  107. <div class="div_tab2">
  108. <a @click="tabClick(1)">游船视图</a>
  109. <a @click="tabClick(2)">游客视图</a>
  110. </div>
  111. <div class="regionIn_tab2 one" v-if="regionInShowOne">
  112. <div class="borp">
  113. <!--游船视图页面-->
  114. <baidu-map style="margin-top: 50px" :mapStyle="{style : 'midnight'}" class="region_tab2"
  115. :center="{lng: 126.91531, lat: 43.610448}" :zoom="11" :scroll-wheel-zoom="true">
  116. <bm-polyline v-for="item in dataSource" :path="item.polylinePath" :stroke-color="item.color"
  117. :stroke-opacity="0.5" :stroke-weight="10"
  118. :editing="false">
  119. </bm-polyline>
  120. <bm-marker v-for="item in dataSource"
  121. :position="item.polylinePath[0]" :dragging="false"
  122. animation="BMAP_ANIMATION_BOUNCE">
  123. <bm-label :content="item.shipName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
  124. </bm-marker>
  125. </baidu-map>
  126. </div>
  127. </div>
  128. <div class="regionIn_tab2 two" v-if="regionInShowTwo">
  129. <div class="wholeCountry">
  130. <h4>当日平台总成交额 </h4>
  131. <div class="money">
  132. <span>{{ getFirstDigit(0) }}</span>
  133. <span>{{ getFirstDigit(1) }}</span>
  134. <span>{{ getFirstDigit(2) }}</span>
  135. <span>{{ getFirstDigit(3) }}</span>
  136. <span>{{ getFirstDigit(4) }}</span>
  137. <span>{{ getFirstDigit(5) }}</span>
  138. <span>{{ getFirstDigit(6) }}</span>
  139. <span>{{ getFirstDigit(7) }}</span>
  140. </div>
  141. <div class="_count">当日累计总游客数
  142. <ins>{{ peopleNum }}</ins>
  143. </div>
  144. </div>
  145. <div class="map bor">
  146. <div id="mapByPerson" style="width: 740px;height: 426px"></div>
  147. </div>
  148. </div>
  149. </div>
  150. <!--通知公告结束-->
  151. </div>
  152. <div class="moddlebot">
  153. <div class="ProvinceData">
  154. <h3 class="PartTitle">客源地省份排名</h3>
  155. <div class="Saleschart bor">
  156. <div id="chartRankOneCity" style="width: 200px;height:200px;"></div>
  157. </div>
  158. </div>
  159. <div class="AgeData">
  160. <h3 class="PartTitle">游客年龄比例</h3>
  161. <div class="Saleschart bor">
  162. <div id="chartRankOneAge" style="width: 200px;height:200px;padding: 0"></div>
  163. </div>
  164. </div>
  165. <div class="GenderData">
  166. <h3 class="PartTitle">游客男女比例</h3>
  167. <div class="GenderChart">
  168. <div class="genderBili">
  169. <div class="man">
  170. <i class="icon_man"></i>
  171. <strong> 男士60%</strong>
  172. </div>
  173. <div class="woman">
  174. <i class="icon_woman"></i>
  175. <strong> 女士40%</strong>
  176. </div>
  177. <div class="_line">
  178. <div class="_line_man" style="width:60%;"></div>
  179. <div class="_line_woman" style="width:40%;"></div>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. <div class="right">
  187. <div class="OTA_ranking">
  188. <ul>
  189. <li>
  190. <img src="@/assets/images/piao.png"/>
  191. <em>今日售票数</em>
  192. <h2>5684</h2>
  193. <i>张</i>
  194. </li>
  195. <li>
  196. <img src="@/assets/images/piao.png"/>
  197. <em>今日退票数</em>
  198. <h2>5684</h2>
  199. <i>张</i>
  200. </li>
  201. <li>
  202. <img src="@/assets/images/people.png"/>
  203. <em>今日入园数</em>
  204. <h2>5684</h2>
  205. <i>张</i>
  206. </li>
  207. <li>
  208. <img src="@/assets/images/people.png"/>
  209. <em>在园人数</em>
  210. <h2>5684</h2>
  211. <i>张</i>
  212. </li>
  213. </ul>
  214. </div>
  215. <div class="Forecast">
  216. <h3 class="PartTitle">停车场概况统计</h3>
  217. <div class="ForecastData">
  218. <div class="Forecastchart bor">
  219. <div id="chartRankOnePark" style="width: 250px;height:250px"></div>
  220. </div>
  221. <ul class="stopList">
  222. <li>
  223. <span>总车位数</span>
  224. <span>1600</span>
  225. </li>
  226. <li>
  227. <span>当日停车费营收</span>
  228. <span>600</span>
  229. </li>
  230. <li>
  231. <span>当月停车费营收</span>
  232. <span>1600</span>
  233. </li>
  234. </ul>
  235. </div>
  236. </div>
  237. <div class="paymentCount">
  238. <h3 class="PartTitle">近一个月平台购票渠道和支付方式统计</h3>
  239. <div class="Saleschart bor">
  240. <div id="chartRankOnePay1" style="width: 250px;height:210px;display: inline-block"></div>
  241. <div id="chartRankOnePay2" style="width: 250px;height:210px;display: inline-block"></div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. </template>
  248. <script>
  249. import * as echarts from 'echarts'
  250. import {getMap, getMapPromise} from "@/api/ship/diqiu";
  251. import {getShipRoute} from "@/api/ship/shipMapping";
  252. export default {
  253. name: "songhuaIndex",
  254. data() {
  255. return {
  256. form: {},
  257. moreMeunSmalLeft_1: false,
  258. moreMeunSmalLeft_2: false,
  259. moreMeunSmalLeft_3: false,
  260. regionInShowOne: false,
  261. regionInShowTwo: true,
  262. show: false,
  263. money: 15389740,
  264. peopleNum: 234856,
  265. dataSource: [],
  266. }
  267. },
  268. mounted() {
  269. //近一个月排行
  270. this.chartRankOneMonthGet();
  271. //近一年销售
  272. this.chartRankOneSaleGet();
  273. //客源地省份
  274. this.chartRankOneCityGet();
  275. //游客年龄
  276. this.chartRankOneAgeGet();
  277. //支付方式与购买渠道
  278. this.chartRankOnePayGet();
  279. //停车场
  280. this.chartRankOneParkGet();
  281. //人流量排行
  282. this.chartRankOneMbsGet();
  283. //地图
  284. this.getMapByPerson();
  285. let _this = this;
  286. setInterval(function () {
  287. _this.money += Math.round(Math.random() * 100);
  288. _this.peopleNum += Math.round(Math.random() * 100);
  289. }, 3000)
  290. },
  291. created() {
  292. this.selectShipRoute()
  293. },
  294. methods: {
  295. selectShipRoute() {
  296. getShipRoute().then(res => {
  297. if (res.code == 200) {
  298. this.dataSource = res.data
  299. } else {
  300. this.$modal.msgError("查询失败");
  301. }
  302. })
  303. },
  304. //https://echarts.apache.org/examples/zh/editor.html?c=line-stack
  305. chartRankOneMonthGet() {
  306. let option = {
  307. legend: {
  308. textStyle: {
  309. color: 'white' // Set legend text color to white
  310. },
  311. right: '0' // Align legend to the right
  312. },
  313. tooltip: {},
  314. dataset: {
  315. source: [
  316. ['product', '本月', '上月'],
  317. ['动物园', 100, 150],
  318. ['五龙潭', 55, 85],
  319. ['三清观', 65, 88],
  320. ['植物园', 88, 15]
  321. ]
  322. },
  323. xAxis: {type: 'category'},
  324. yAxis: {},
  325. // Declare several bar series, each will be mapped
  326. // to a column of dataset.source by default.
  327. series: [{type: 'bar'}, {type: 'bar'}]
  328. };
  329. let myChart = this.$echarts.init(document.getElementById("chartRankOneMonth"));
  330. myChart.setOption(option);
  331. },
  332. chartRankOneAgeGet() {
  333. let option = {
  334. tooltip: {},
  335. series: [
  336. {
  337. name: '人员比例',
  338. type: 'pie',
  339. radius: ['40%', '70%'],
  340. avoidLabelOverlap: true,
  341. label: {
  342. show: false,
  343. position: 'center'
  344. },
  345. emphasis: {
  346. label: {
  347. show: true,
  348. fontSize: 14,
  349. fontWeight: 'bold'
  350. }
  351. },
  352. labelLine: {
  353. show: false
  354. },
  355. data: [
  356. {name: '60岁以上', value: 20},
  357. {name: '40-60岁之间', value: 30},
  358. {name: '18岁之内', value: 30},
  359. {name: '18-40岁之间', value: 20}
  360. ]
  361. }
  362. ]
  363. };
  364. let myChart = this.$echarts.init(document.getElementById("chartRankOneAge"));
  365. myChart.setOption(option);
  366. },
  367. //https://echarts.apache.org/examples/zh/editor.html?c=gauge-multi-title
  368. chartRankOneParkGet() {
  369. const gaugeData = [
  370. {
  371. value: 85,
  372. name: '已占用车位数',
  373. title: {
  374. offsetCenter: ['0%', '70%']
  375. },
  376. detail: {
  377. offsetCenter: ['0%', '105%']
  378. }
  379. }
  380. ];
  381. let option = {
  382. series: [
  383. {
  384. type: 'gauge',
  385. anchor: {
  386. show: true,
  387. showAbove: true,
  388. size: 18,
  389. itemStyle: {
  390. color: '#FAC858'
  391. }
  392. },
  393. axisLine: {
  394. lineStyle: {
  395. width: 6,
  396. color: [
  397. [0.3, '#e3ce67'],
  398. [0.7, '#2a86b6'],
  399. [1, '#42c51d']
  400. ]
  401. }
  402. },
  403. pointer: {
  404. icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
  405. width: 8,
  406. length: '80%',
  407. offsetCenter: [0, '8%']
  408. },
  409. progress: {
  410. show: true,
  411. overlap: true,
  412. roundCap: true
  413. },
  414. data: gaugeData,
  415. title: {
  416. fontSize: 14
  417. },
  418. detail: {
  419. width: 40,
  420. height: 14,
  421. fontSize: 14,
  422. color: '#fff',
  423. backgroundColor: 'inherit',
  424. borderRadius: 3,
  425. formatter: '{value}%'
  426. }
  427. }
  428. ]
  429. };
  430. setInterval(function () {
  431. gaugeData[0].value = +(Math.random() * 100).toFixed(2);
  432. myChart.setOption({
  433. series: [
  434. {
  435. data: gaugeData
  436. }
  437. ]
  438. });
  439. }, 2000);
  440. let myChart = this.$echarts.init(document.getElementById("chartRankOnePark"));
  441. myChart.setOption(option);
  442. },
  443. chartRankOneSaleGet() {
  444. let option = {
  445. tooltip: {
  446. trigger: 'axis'
  447. },
  448. grid: {
  449. left: '3%',
  450. right: '4%',
  451. bottom: '3%',
  452. containLabel: true
  453. },
  454. xAxis: {
  455. type: 'category',
  456. boundaryGap: false,
  457. data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
  458. },
  459. yAxis: {
  460. type: 'value'
  461. },
  462. series: [
  463. {
  464. name: '景区1',
  465. type: 'line',
  466. stack: 'Total',
  467. data: [120, 132, 101, 134, 90, 230, 210]
  468. },
  469. {
  470. name: '景区2',
  471. type: 'line',
  472. stack: 'Total',
  473. data: [220, 182, 191, 234, 290, 330, 310]
  474. },
  475. {
  476. name: '景区3',
  477. type: 'line',
  478. stack: 'Total',
  479. data: [150, 232, 201, 154, 190, 330, 410]
  480. },
  481. {
  482. name: '景区4',
  483. type: 'line',
  484. stack: 'Total',
  485. data: [320, 332, 301, 334, 390, 330, 320]
  486. },
  487. {
  488. name: '景区5',
  489. type: 'line',
  490. stack: 'Total',
  491. data: [820, 932, 901, 934, 1290, 1330, 1320]
  492. }
  493. ]
  494. };
  495. let myChart = this.$echarts.init(document.getElementById("chartRankOneSale"));
  496. myChart.setOption(option);
  497. },
  498. //https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category
  499. chartRankOneCityGet() {
  500. let option = {
  501. color: ['#1890FF'],
  502. tooltip: {},
  503. textStyle: {
  504. show: false,
  505. fontSize: 14,
  506. fontStyle: 'normal',
  507. fontWeight: 'bold'
  508. },
  509. grid: {
  510. top: '5%',
  511. left: '2%',
  512. right: '4%',
  513. bottom: '2%',
  514. containLabel: true,
  515. borderWidth: 0
  516. },
  517. xAxis: {
  518. type: 'value',
  519. // max:50,
  520. axisLine: {
  521. show: false,
  522. lineStyle: {
  523. color: '#fefef',
  524. },
  525. },
  526. axisLabel: {
  527. show: false,
  528. interval: 0,
  529. formatter: '{value} %' // 给每个数值添加%
  530. }
  531. },
  532. yAxis: {
  533. axisLine: {
  534. show: false,
  535. lineStyle: {
  536. color: 'white',
  537. },
  538. },
  539. type: 'category',
  540. data: [
  541. '北京',
  542. '澳门',
  543. '香港',
  544. '长春',
  545. '新建'
  546. ]
  547. },
  548. series: [
  549. {
  550. itemStyle: {
  551. normal: {
  552. color: function (params) {
  553. // build a color map as your need.
  554. var colorList = [
  555. '#27727B',
  556. '#27727B',
  557. '#FCCE10',
  558. '#E87C25',
  559. '#C1232B'
  560. ];
  561. return colorList[params.dataIndex];
  562. },
  563. label: {
  564. show: false,
  565. position: 'right',
  566. formatter: '{c}%' //这是关键,在需要的地方加上就行了
  567. },
  568. //设置柱子圆角
  569. barBorderRadius: [0, 20, 20, 0]
  570. },
  571. backgroundStyle: {
  572. color: '#EBEEF5'
  573. }
  574. },
  575. data: [444, 555, 666, 777, 888],
  576. type: 'bar',
  577. barWidth: 10 //柱图宽度
  578. }
  579. ]
  580. };
  581. let myChart = this.$echarts.init(document.getElementById("chartRankOneCity"));
  582. myChart.setOption(option);
  583. },
  584. //https://ppchart.com/#/今日各考场承载总考生数
  585. chartRankOnePayGet() {
  586. var scale = 1;
  587. var echartData = [
  588. {
  589. value: 2154,
  590. name: "微信",
  591. },
  592. {
  593. value: 3854,
  594. name: "现金",
  595. },
  596. {
  597. value: 3515,
  598. name: "支付宝",
  599. },
  600. {
  601. value: 3515,
  602. name: "银联",
  603. }
  604. ];
  605. var rich = {
  606. yellow: {
  607. color: "#ffc72b",
  608. fontSize: 12 * scale,
  609. padding: [5, 4],
  610. align: "center",
  611. },
  612. total: {
  613. color: "#ffc72b",
  614. fontSize: 12 * scale,
  615. align: "center",
  616. },
  617. white: {
  618. color: "#fff",
  619. align: "center",
  620. fontSize: 12 * scale,
  621. padding: [21, 0],
  622. },
  623. blue: {
  624. color: "#49dff0",
  625. fontSize: 12 * scale,
  626. align: "center",
  627. },
  628. hr: {
  629. borderColor: "#0b5263",
  630. width: "100%",
  631. borderWidth: 1,
  632. height: 0,
  633. },
  634. };
  635. let option = {
  636. backgroundColor: "#031f2d",
  637. tooltip: {},
  638. graphic: {
  639. type: 'text',
  640. left: 'center',
  641. top: 'center',
  642. style: {
  643. text: '支付方式',
  644. textAlign: 'center',
  645. fill: 'white',
  646. width: 30,
  647. height: 30,
  648. fontSize: 14
  649. }
  650. },
  651. series: [
  652. {
  653. name: "支付方式",
  654. type: "pie",
  655. radius: ["32%", "40%"],
  656. hoverAnimation: false,
  657. color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
  658. label: {
  659. normal: {
  660. formatter: function (params, ticket, callback) {
  661. var total = 0;
  662. var percent = 0;
  663. echartData.forEach(function (value, index, array) {
  664. total += value.value;
  665. });
  666. percent = ((params.value / total) * 100).toFixed(1);
  667. return (
  668. "{white|" +
  669. params.name +
  670. "}\n{hr|}\n{yellow|" +
  671. params.value +
  672. "}\n{blue|" +
  673. percent +
  674. "%}"
  675. );
  676. },
  677. rich: rich,
  678. },
  679. },
  680. labelLine: {
  681. normal: {
  682. length: 20 * scale,
  683. length2: 0,
  684. lineStyle: {
  685. color: "#0b5263",
  686. },
  687. },
  688. },
  689. data: echartData,
  690. },
  691. ],
  692. };
  693. let myChart1 = this.$echarts.init(document.getElementById("chartRankOnePay1"));
  694. let myChart2 = this.$echarts.init(document.getElementById("chartRankOnePay2"));
  695. myChart1.setOption(option);
  696. myChart2.setOption(option);
  697. },
  698. //https://blog.csdn.net/qq_43519782/article/details/118707267?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171393938516800186569476%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171393938516800186569476&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-9-118707267-null-null.142^v100^pc_search_result_base4&utm_term=%E6%A8%AA%E5%90%91%E6%9F%B1%E5%9B%BE%E9%87%8D%E5%90%88&spm=1018.2226.3001.4187
  699. chartRankOneMbsGet() {
  700. let option = {
  701. grid: {
  702. left: "2%",
  703. right: "2%",
  704. bottom: "2%",
  705. top: "2%",
  706. containLabel: true,
  707. },
  708. tooltip: {
  709. trigger: "axis",
  710. axisPointer: {
  711. type: "shadow",
  712. },
  713. confine: true,
  714. textStyle: {
  715. fontSize: 13,
  716. color: "rgba(255, 255, 255, 0.8)",
  717. },
  718. formatter: function (params) {
  719. return (
  720. params[0].name +
  721. "<br/>" +
  722. "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
  723. params[0].seriesName +
  724. " : " +
  725. params[0].value
  726. .toLocaleString()
  727. .toString()
  728. .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
  729. " 辆/天"
  730. );
  731. },
  732. },
  733. xAxis: {
  734. show: false,
  735. type: "value",
  736. },
  737. yAxis: [
  738. {
  739. type: "category",
  740. inverse: true,
  741. axisLabel: {
  742. show: true,
  743. textStyle: {
  744. fontSize: 20,
  745. color: "rgba(255, 255, 255, 0.8)",
  746. },
  747. formatter: function (name) {
  748. return name + ": ";
  749. },
  750. },
  751. splitLine: {
  752. show: false,
  753. },
  754. axisTick: {
  755. show: false,
  756. },
  757. axisLine: {
  758. show: false,
  759. },
  760. data: [
  761. "香榭丽",
  762. "拉斯维",
  763. "格林",
  764. "密歇根",
  765. "格拉西",
  766. ],
  767. },
  768. {
  769. type: "category",
  770. inverse: true,
  771. axisTick: "none",
  772. axisLine: "none",
  773. show: true,
  774. axisLabel: {
  775. textStyle: {
  776. fontSize: 13,
  777. color: "rgba(255, 255, 255, 0.8)",
  778. padding: [0, 0, 0, 10],
  779. },
  780. formatter: function (value) {
  781. return value
  782. .toLocaleString()
  783. .toString()
  784. .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
  785. },
  786. },
  787. data: [50000, 22000, 10000, 5000, 2000],
  788. },
  789. ],
  790. series: [
  791. {
  792. name: "车辆",
  793. type: "bar",
  794. zlevel: 1, //通过 zlevel 设置层级
  795. barWidth: 10,
  796. itemStyle: {
  797. normal: {
  798. barBorderRadius: 10,
  799. // 渐变色
  800. // color: "rgba(108, 254, 255, 0.3)",
  801. color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  802. {
  803. offset: 0,
  804. color: "#388CFF",
  805. },
  806. {
  807. offset: 1,
  808. color: "#6CFEFF",
  809. },
  810. ]),
  811. },
  812. },
  813. data: [50000, 22000, 10000, 5000, 2000],
  814. },
  815. {
  816. name: "背景",
  817. type: "bar",
  818. barWidth: 10,
  819. barGap: "-100%", //两条柱状图重合
  820. data: [50000, 50000, 50000, 50000, 50000],
  821. itemStyle: {
  822. normal: {
  823. color: "rgba(108, 254, 255, 0.3)",
  824. barBorderRadius: 10,
  825. },
  826. },
  827. },
  828. ],
  829. };
  830. let myChart = this.$echarts.init(document.getElementById("chartRankOneMb"));
  831. myChart.setOption(option);
  832. },
  833. getMapByPerson() {
  834. getMapPromise()
  835. .then((result) => {
  836. let myChart = this.$echarts.init(document.getElementById("mapByPerson"));
  837. myChart.setOption(result);
  838. })
  839. .catch((error) => {
  840. console.error(error);
  841. });
  842. },
  843. tabClick(state) {
  844. if (state == 1) {
  845. this.regionInShowOne = true;
  846. this.regionInShowTwo = false;
  847. } else {
  848. this.regionInShowOne = false;
  849. this.regionInShowTwo = true;
  850. this.getMapByPerson()
  851. }
  852. },
  853. getFirstDigit(num) {
  854. return Number(String(this.money).charAt(num));
  855. }
  856. },
  857. }
  858. </script>
  859. <style lang="scss" scoped>
  860. @import "@/assets/styles/shh_body.scss";
  861. @import "@/assets/styles/shh_index.scss";
  862. </style>