borard.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918
  1. <template>
  2. <div class="dataView-content">
  3. <div class="data-header">
  4. <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
  5. 智享亿家投递大数据
  6. </dv-border-box-5>
  7. <dv-decoration-3 style="width:25%;height:30px;" />
  8. <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
  9. <div>区域</div>
  10. <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
  11. <option value="">省</option>
  12. <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
  13. </select> -->
  14. <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
  15. <option value="">选择市</option>
  16. <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
  17. </select>
  18. <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
  19. <option value="">选择区/县</option>
  20. <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
  21. </select>
  22. <a-icon
  23. @click="isFullscreenMap"
  24. :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
  25. :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
  26. </dv-border-box-5>
  27. </div>
  28. <div class="data-body">
  29. <div class="b-left">
  30. <div>
  31. <dv-border-box-13>
  32. <div id="con1" style="width: 100%;height: 100%;"></div>
  33. </dv-border-box-13>
  34. </div>
  35. <div>
  36. <dv-border-box-13>
  37. <div id="con2" style="width: 100%;height: 100%;"></div>
  38. </dv-border-box-13>
  39. </div>
  40. </div>
  41. <div class="b-middle">
  42. <div>
  43. <dv-border-box-8 style="padding: 10px;">
  44. <div id="map" :style="{height: '100%'}"></div>
  45. </dv-border-box-8>
  46. </div>
  47. <div>
  48. <dv-border-box-12>
  49. <div class="total-block">
  50. <div>
  51. <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
  52. <div class="total-label">用户总数</div>
  53. </div>
  54. <div>
  55. <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
  56. <div class="total-label">设备总数</div>
  57. </div>
  58. </div>
  59. </dv-border-box-12>
  60. </div>
  61. </div>
  62. <div class="b-right">
  63. <div>
  64. <dv-border-box-13>
  65. <div id="con3" style="width: 100%;height: 100%;"></div>
  66. </dv-border-box-13>
  67. </div>
  68. <div>
  69. <dv-border-box-13>
  70. <div id="con4" style="width: 100%;height: 100%;"></div>
  71. </dv-border-box-13>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </template>
  77. <script>
  78. import echarts from 'echarts'
  79. import {
  80. getUserTotal,
  81. getDeviceTotal,
  82. getMapStation
  83. } from '@/api/nodeMap.js'
  84. import {
  85. getNewRegister,
  86. getTimeSharingLog,
  87. getDeliveryTop,
  88. getHeatMapData,
  89. getLocationCode
  90. } from '@/api/borard.js'
  91. import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
  92. import moment from 'moment'
  93. import getDate from '@/libs/getDate.js'
  94. export default {
  95. name: 'DataBoratd',
  96. data () {
  97. return {
  98. queryParam: {
  99. provinceCode: '610000', // 省
  100. cityCode: '610100', // 市
  101. districtCode: '' // 区
  102. },
  103. addrProvinceList: [{
  104. code: '610000',
  105. id: '610000',
  106. isOpen: '0',
  107. name: '陕西省',
  108. parentId: '100000',
  109. parentIds: '100000',
  110. sort: 27,
  111. type: '2'
  112. }], // 省下拉
  113. addrCityList: [
  114. {
  115. 'id': '610100',
  116. 'sort': 1,
  117. 'parentId': '610000',
  118. 'parentIds': '100000,610000',
  119. 'isOpen': '0',
  120. 'name': '西安市',
  121. 'code': '610100'
  122. },
  123. {
  124. 'id': '610400',
  125. 'sort': 4,
  126. 'parentId': '610000',
  127. 'parentIds': '100000,610000',
  128. 'isOpen': '0',
  129. 'name': '咸阳市',
  130. 'code': '610400'
  131. }
  132. ], // 市下拉
  133. addrDistrictList: [], // 区下拉
  134. chart1: null,
  135. chart2: null,
  136. chart3: null,
  137. chart4: null,
  138. userTotal: {
  139. number: [],
  140. content: '{nt}',
  141. formatter: this.formatter
  142. },
  143. devTotal: {
  144. number: [],
  145. content: '{nt}',
  146. formatter: this.formatter
  147. },
  148. isMapFull: false,
  149. map: null, // 地图对象
  150. markerLayer: null, // 地图点标记对象
  151. infoWindow: null, // 地图信息窗口对象
  152. beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
  153. endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
  154. }
  155. },
  156. methods: {
  157. // 获取省列表'
  158. getProvinceList () {
  159. getProvince().then(res => {
  160. if (res.status == 200) {
  161. this.addrProvinceList = res.data || []
  162. } else {
  163. this.addrProvinceList = []
  164. }
  165. })
  166. },
  167. // 获取城市列表
  168. getCityList (e) {
  169. if (e.target.value == '') return
  170. this.addrCityList = []
  171. this.addrDistrictList = []
  172. this.queryParam.cityCode = ''
  173. this.queryParam.districtCode = ''
  174. this.getCityListRequest(e.target.value)
  175. },
  176. getCityListRequest (val) {
  177. getCityByPro({
  178. id: val
  179. }).then(res => {
  180. if (res.status == 200) {
  181. this.addrCityList = res.data || []
  182. } else {
  183. this.addrCityList = []
  184. }
  185. })
  186. },
  187. // 获取区县列表
  188. getAreaList (e) {
  189. if (e.target.value == '') return
  190. this.addrDistrictList = []
  191. this.queryParam.districtCode = ''
  192. this.initChart()
  193. this.getAreaListRequest(e.target.value)
  194. },
  195. getAreaListRequest (val) {
  196. getDistrictByCity({
  197. id: val
  198. }).then(res => {
  199. if (res.status == 200) {
  200. this.addrDistrictList = res.data || []
  201. } else {
  202. this.addrDistrictList = []
  203. }
  204. })
  205. },
  206. // 全屏
  207. fullScreen () {
  208. var element = document.documentElement
  209. if (element.requestFullscreen) {
  210. element.requestFullscreen()
  211. } else if (element.msRequestFullscreen) {
  212. element.msRequestFullscreen()
  213. } else if (element.mozRequestFullScreen) {
  214. element.mozRequestFullScreen()
  215. } else if (element.webkitRequestFullscreen) {
  216. element.webkitRequestFullscreen()
  217. }
  218. },
  219. // 退出全屏
  220. exitFullscreen () {
  221. if (document.exitFullscreen) {
  222. document.exitFullscreen()
  223. } else if (document.msExitFullscreen) {
  224. document.msExitFullscreen()
  225. } else if (document.mozCancelFullScreen) {
  226. document.mozCancelFullScreen()
  227. } else if (document.webkitExitFullscreen) {
  228. document.webkitExitFullscreen()
  229. }
  230. },
  231. // 地图是否全屏展示
  232. isFullscreenMap () {
  233. this.isMapFull = !this.isMapFull
  234. if (this.isMapFull) {
  235. this.fullScreen()
  236. } else {
  237. this.exitFullscreen()
  238. }
  239. this.chart1.resize()
  240. this.chart2.resize()
  241. this.chart3.resize()
  242. this.chart4.resize()
  243. },
  244. formatter (number) {
  245. const numbers = number.toString().split('').reverse()
  246. const segs = []
  247. while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
  248. return segs.join(',').split('').reverse().join('')
  249. },
  250. // 获取用户总数
  251. getUser () {
  252. getUserTotal({
  253. 'provinceCode': this.queryParam.provinceCode,
  254. 'cityCode': this.queryParam.cityCode,
  255. 'districtCode': this.queryParam.districtCode
  256. }).then(res => {
  257. const data = res.data || 0
  258. const arr = []
  259. arr.push(data)
  260. this.userTotal = {
  261. number: arr,
  262. content: '{nt}',
  263. formatter: this.formatter
  264. }
  265. console.log(this.userTotal, data, '获取用户总数')
  266. })
  267. },
  268. // 获取设备总数
  269. getDevice () {
  270. getDeviceTotal({
  271. 'provinceCode': this.queryParam.provinceCode,
  272. 'cityCode': this.queryParam.cityCode,
  273. 'districtCode': this.queryParam.districtCode
  274. }).then(res => {
  275. const data = res.data || 0
  276. const arr = []
  277. arr.push(data)
  278. this.devTotal = {
  279. number: arr,
  280. content: '{nt}',
  281. formatter: this.formatter
  282. }
  283. })
  284. },
  285. // 获取新用户注册量
  286. getNewRegister () {
  287. const params = {
  288. beginRegisterTime: this.beginDate,
  289. endRegisterTime: this.endDate,
  290. 'provinceCode': this.queryParam.provinceCode,
  291. 'cityCode': this.queryParam.cityCode,
  292. 'districtCode': this.queryParam.districtCode
  293. }
  294. getNewRegister(params).then(res => {
  295. if (res.status == 200) {
  296. const xData = res.data.dateTime
  297. const yData = res.data.registerNum
  298. const arr = []
  299. yData.map(item => {
  300. arr.push(Number(item))
  301. })
  302. this.initChart1(xData, arr)
  303. }
  304. })
  305. },
  306. // 获取分时投递
  307. getTimeSharingLog () {
  308. const params = {
  309. 'beginDeliveryDate': this.beginDate,
  310. 'endDeliveryDate': this.endDate,
  311. 'provinceCode': this.queryParam.provinceCode,
  312. 'cityCode': this.queryParam.cityCode,
  313. 'districtCode': this.queryParam.districtCode
  314. }
  315. getTimeSharingLog(params).then(res => {
  316. console.log(res)
  317. if (res.status == 200) {
  318. this.initChart2(res.data)
  319. }
  320. })
  321. },
  322. // 排行榜
  323. getDeliveryTop () {
  324. const params = {
  325. 'beginDeliveryDate': this.beginDate,
  326. 'endDeliveryDate': this.endDate,
  327. 'provinceCode': this.queryParam.provinceCode,
  328. 'cityCode': this.queryParam.cityCode,
  329. 'districtCode': this.queryParam.districtCode
  330. }
  331. getDeliveryTop(params).then(res => {
  332. console.log(res)
  333. if (res.status == 200) {
  334. this.initChart3(res.data)
  335. }
  336. })
  337. },
  338. getLocationCode () {
  339. const cityCode = this.queryParam.cityCode
  340. const districtCode = this.queryParam.districtCode
  341. getLocationCode({
  342. keyword: districtCode || cityCode
  343. }).then(res => {
  344. console.log(res)
  345. if (res.status == 200) {
  346. if (this.map) {
  347. this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
  348. } else {
  349. this.initMap(res.data)
  350. }
  351. }
  352. })
  353. },
  354. // 初始化地图
  355. initMap (res) {
  356. // 定义地图中心点坐标 默认定位在陕西省咸阳市
  357. var center = new TMap.LatLng(res.lat, res.lng)
  358. // 定义map变量,调用 TMap.Map() 构造函数创建地图
  359. this.map = new TMap.Map(document.getElementById('map'), {
  360. center: center, // 设置地图中心点坐标
  361. mapStyleId: 'style3',
  362. zoom: 13, // 设置地图缩放级别
  363. pitch: 0, // 设置俯仰角
  364. showControl: false,
  365. rotation: 45 // 设置地图旋转角度
  366. })
  367. // 创建并初始化MultiMarker 点标记
  368. this.markerLayer = new TMap.MultiMarker({
  369. map: this.map, // 指定地图容器
  370. // 样式定义
  371. styles: {
  372. // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
  373. 'myStyle': new TMap.MarkerStyle({
  374. 'width': 16, // 点标记样式宽度(像素)
  375. 'height': 20, // 点标记样式高度(像素)
  376. 'src': '../ldt.png', // 图片路径
  377. // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
  378. 'anchor': {
  379. x: 8,
  380. y: 15
  381. }
  382. })
  383. },
  384. // 点标记数据数组
  385. geometries: []
  386. })
  387. // 初始化infoWindow
  388. this.infoWindow = new TMap.InfoWindow({
  389. map: this.map,
  390. position: new TMap.LatLng(39.984104, 116.307503),
  391. offset: {
  392. x: 0,
  393. y: -32
  394. } // 设置信息窗相对position偏移像素
  395. })
  396. this.infoWindow.close() // 初始关闭信息窗关闭
  397. this.markerLayer.on('mousemove', this.showMarkTitle)
  398. // 监听地图加载完成
  399. this.map.on('tilesloaded', this.getMapMark)
  400. },
  401. // 获取热力图
  402. getHeatMapData () {
  403. // 初始化热力图并添加至map图层
  404. const heat = new TMap.visualization.Heat({
  405. max: 350, // 热力最强阈值
  406. min: 0, // 热力最弱阈值
  407. height: 0, // 峰值高度
  408. gradientColor: { // 渐变颜色
  409. 0.6: '#673198',
  410. 0.8: '#e53390',
  411. 0.9: '#ffc95a'
  412. },
  413. radius: 30 // 最大辐射半径
  414. }).addTo(this.map)
  415. const params = {
  416. 'beginDeliveryDate': this.beginDate,
  417. 'endDeliveryDate': this.endDate,
  418. 'provinceCode': this.queryParam.provinceCode,
  419. 'cityCode': this.queryParam.cityCode,
  420. 'districtCode': this.queryParam.districtCode
  421. }
  422. getHeatMapData(params).then(res => {
  423. if (res.status == 200) {
  424. const ret = []
  425. for (let i = 0; i < res.data.length; i++) {
  426. if (res.data[i].lat <= 90) {
  427. ret.push({
  428. count: res.data[i].deliveryTimes,
  429. lat: res.data[i].lat,
  430. lng: res.data[i].lng
  431. })
  432. }
  433. }
  434. // console.log(ret)
  435. heat.setData(ret)// 设置数据
  436. }
  437. })
  438. },
  439. // 获取地图点坐标
  440. getMapMark () {
  441. getMapStation({
  442. 'provinceCode': this.queryParam.provinceCode,
  443. 'cityCode': this.queryParam.cityCode,
  444. 'districtCode': this.queryParam.districtCode
  445. }).then(res => {
  446. const list = res.data || []
  447. const data = []
  448. list.map((item, index) => {
  449. if (item.lat <= 85.051128 && item.lat >= -85.051128) {
  450. const p = {
  451. 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
  452. 'styleId': 'myStyle', // 指定样式id
  453. 'position': new TMap.LatLng(Number(item.lat), Number(item
  454. .lng)), // 点标记坐标位置
  455. 'properties': { // 自定义属性
  456. 'title': item.name
  457. }
  458. }
  459. data.push(p)
  460. }
  461. })
  462. // 增加点标记
  463. this.markerLayer.add(data)
  464. })
  465. this.getHeatMapData()
  466. },
  467. // 显示地图标记点名称
  468. showMarkTitle (evt) {
  469. this.infoWindow.open() // 打开信息窗
  470. this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
  471. this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
  472. },
  473. // 初始化图表
  474. initChart () {
  475. // 用户总数
  476. this.getUser()
  477. // 设备总数
  478. this.getDevice()
  479. // 地图
  480. this.getLocationCode()
  481. // 新注册用户
  482. this.getNewRegister()
  483. // 分时投递
  484. this.getTimeSharingLog()
  485. // 设备分布比例
  486. const con3 = document.getElementById('con3')
  487. const chart3 = echarts.init(con3)
  488. const option3 = {
  489. color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
  490. title: {
  491. text: '设备分布比例',
  492. top: 20,
  493. left: 20,
  494. textStyle: {
  495. color: '#abd7ff'
  496. },
  497. textAlingn: 'left'
  498. },
  499. tooltip: {},
  500. series: [{
  501. type: 'pie',
  502. radius: ['30%', '50%'],
  503. startAngle: -Math.PI / 8,
  504. avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
  505. label: {
  506. normal: {
  507. formatter: params => {
  508. return (
  509. '{name|' + params.name + '}{value|' +
  510. params.value + '%' + '}'
  511. )
  512. },
  513. padding: [0, -70, 25, -70],
  514. rich: {
  515. name: {
  516. fontSize: 12,
  517. padding: [0, 10, 0, 4],
  518. color: '#999'
  519. },
  520. value: {
  521. fontSize: 12,
  522. color: '#999'
  523. }
  524. }
  525. }
  526. },
  527. labelLine: {
  528. normal: {
  529. length: 20,
  530. length2: 60,
  531. lineStyle: {
  532. color: '#e6e6e6'
  533. }
  534. }
  535. },
  536. data: [{
  537. name: '居民小区',
  538. value: 49
  539. },
  540. {
  541. name: '公共机构',
  542. value: 32
  543. },
  544. {
  545. name: '学校',
  546. value: 14
  547. },
  548. {
  549. name: '企业',
  550. value: 5
  551. }
  552. ],
  553. insideLabel: {
  554. show: true
  555. }
  556. }]
  557. }
  558. chart3.setOption(option3)
  559. this.chart3 = chart3
  560. this.chart3.resize()
  561. // 网点投递量排名
  562. this.getDeliveryTop()
  563. },
  564. // 排行榜
  565. initChart3 (res) {
  566. const con4 = document.getElementById('con4')
  567. const chart4 = echarts.init(con4)
  568. const option4 = {
  569. title: {
  570. text: '网点投递量排名',
  571. top: 20,
  572. left: 20,
  573. textStyle: {
  574. color: '#abd7ff'
  575. },
  576. textAlingn: 'left'
  577. },
  578. tooltip: {
  579. formatter: '{b0}: {c0}kg'
  580. },
  581. grid: {
  582. left: 15,
  583. right: 15,
  584. bottom: 20,
  585. top: 85,
  586. containLabel: true
  587. },
  588. xAxis: {
  589. data: res.stationName
  590. },
  591. yAxis: {
  592. name: 'kg',
  593. type: 'value'
  594. },
  595. series: [{
  596. data: res.deliveryWeight,
  597. type: 'bar',
  598. barWidth: 30,
  599. label: {
  600. normal: {
  601. show: true,
  602. position: 'top'
  603. }
  604. },
  605. itemStyle: {
  606. color: '#37a2da',
  607. shadowColor: '#246d91',
  608. shadowOffsetX: 10,
  609. shadowOffsetY: -1
  610. }
  611. }]
  612. }
  613. chart4.setOption(option4)
  614. this.chart4 = chart4
  615. this.chart4.resize()
  616. },
  617. // 分时投递记录
  618. initChart2 (res) {
  619. const con2 = document.getElementById('con2')
  620. const chart2 = echarts.init(con2)
  621. const series = []
  622. const arr = res.dayKey.slice(res.dayKey.length - 3)
  623. console.log(arr)
  624. for (let i = 0; i < arr.length; i++) {
  625. series.push({
  626. name: arr[i],
  627. data: res.value[arr[i]],
  628. type: 'line',
  629. stack: '投递量',
  630. smooth: true,
  631. barWidth: 10,
  632. label: {
  633. normal: {
  634. show: true,
  635. position: 'top'
  636. }
  637. }
  638. })
  639. }
  640. const option2 = {
  641. title: {
  642. text: '分时投递量',
  643. top: 20,
  644. left: 20,
  645. textStyle: {
  646. color: '#abd7ff'
  647. },
  648. textAlingn: 'left'
  649. },
  650. tooltip: {
  651. formatter: '{b0}时: {c0}kg'
  652. },
  653. grid: {
  654. left: 20,
  655. right: 40,
  656. bottom: 20,
  657. top: 85,
  658. containLabel: true
  659. },
  660. legend: {
  661. data: arr,
  662. orient: 'vertical',
  663. textStyle: {
  664. fontSize: 10
  665. },
  666. top: 15,
  667. left: 'right'
  668. },
  669. xAxis: {
  670. name: '时',
  671. type: 'category',
  672. data: res.hourKey,
  673. nameTextStyle: {
  674. color: '#666'
  675. },
  676. axisLine: {
  677. lineStyle: {
  678. color: '#666'
  679. }
  680. }
  681. },
  682. yAxis: {
  683. name: 'kg',
  684. type: 'value',
  685. nameTextStyle: {
  686. color: '#666'
  687. },
  688. axisLine: {
  689. lineStyle: {
  690. color: '#666'
  691. }
  692. }
  693. },
  694. series: series
  695. }
  696. chart2.setOption(option2)
  697. this.chart2 = chart2
  698. this.chart2.resize()
  699. },
  700. // 初始化新用户注册量
  701. initChart1 (xData, yData) {
  702. const con1 = document.getElementById('con1')
  703. const chart1 = echarts.init(con1)
  704. const option1 = {
  705. title: {
  706. text: '新用户注册量',
  707. top: 20,
  708. left: 20,
  709. textStyle: {
  710. color: '#abd7ff'
  711. },
  712. textAlingn: 'left'
  713. },
  714. tooltip: {
  715. formatter: '{b0}日: {c0}人'
  716. },
  717. grid: {
  718. left: 15,
  719. right: 60,
  720. bottom: 20,
  721. top: 85,
  722. containLabel: true
  723. },
  724. xAxis: {
  725. name: '日期',
  726. data: xData,
  727. type: 'category',
  728. nameTextStyle: {
  729. color: '#666'
  730. },
  731. axisLine: {
  732. lineStyle: {
  733. color: '#666'
  734. }
  735. }
  736. },
  737. yAxis: {
  738. name: '用户',
  739. type: 'value',
  740. nameTextStyle: {
  741. color: '#666'
  742. },
  743. axisLine: {
  744. lineStyle: {
  745. color: '#666'
  746. }
  747. }
  748. },
  749. series: [{
  750. data: yData,
  751. type: 'line',
  752. smooth: true,
  753. label: {
  754. normal: {
  755. show: true,
  756. position: 'top'
  757. }
  758. },
  759. lineStyle: {
  760. color: 'rgba(55, 162, 218, 0.9)'
  761. },
  762. areaStyle: {
  763. color: {
  764. type: 'linear',
  765. x: 0,
  766. y: 0,
  767. x2: 0,
  768. y2: 1,
  769. colorStops: [{
  770. offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
  771. }, {
  772. offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
  773. }]
  774. }
  775. }
  776. }]
  777. }
  778. chart1.setOption(option1)
  779. this.chart1 = chart1
  780. this.chart1.resize()
  781. }
  782. },
  783. mounted () {
  784. const that = this
  785. window.onresize = () => {
  786. return (() => {
  787. that.chart1.resize()
  788. that.chart2.resize()
  789. that.chart3.resize()
  790. that.chart4.resize()
  791. })()
  792. }
  793. },
  794. beforeRouteEnter (to, from, next) {
  795. next(vm => {
  796. setTimeout(() => {
  797. vm.initChart()
  798. vm.getAreaListRequest(vm.queryParam.cityCode)
  799. }, 150)
  800. })
  801. },
  802. beforeRouterLeave (to, from, next) {
  803. next(vm => {
  804. // 销毁地图
  805. vm.map.destroy()
  806. vm.map = null
  807. })
  808. }
  809. }
  810. </script>
  811. <style lang="less">
  812. .dataView-content {
  813. width: 100%;
  814. height: 100%;
  815. min-height: 600px;
  816. background-image: url(../../assets/dataViewBg.png);
  817. background-size: 100% 100%;
  818. display: flex;
  819. flex-direction: column;
  820. .data-header {
  821. display: flex;
  822. align-items: center;
  823. justify-content: space-between;
  824. >div {
  825. height: 80px;
  826. line-height: 80px;
  827. &:first-child {
  828. width: 40%;
  829. color: #b3dcf5;
  830. padding-right: 10%;
  831. .border-box-content {
  832. font-size: 30px;
  833. text-align: center;
  834. }
  835. }
  836. &:last-child {
  837. width: 35%;
  838. color: #0ed3ff;
  839. .border-box-content {
  840. font-size: 18px;
  841. text-align: center;
  842. display: flex;
  843. align-items: center;
  844. justify-content: center;
  845. padding-left: 50px;
  846. select {
  847. background: #021931;
  848. border: 1px solid #3e566d;
  849. min-width: 20%;
  850. padding: 2px 10px;
  851. margin: 0 10px;
  852. box-shadow: inset 0 0 2px #69b2ff;
  853. border-radius: 6px;
  854. }
  855. }
  856. }
  857. }
  858. }
  859. .data-body {
  860. flex-grow: 1;
  861. display: flex;
  862. .b-left,
  863. .b-right {
  864. width: 25%;
  865. display: flex;
  866. padding: 5px;
  867. flex-direction: column;
  868. justify-content: space-around;
  869. > div{
  870. height: 400px;
  871. }
  872. }
  873. .b-middle {
  874. width: 50%;
  875. padding: 5px;
  876. display: flex;
  877. flex-direction: column;
  878. >div {
  879. &:first-child {
  880. height: 80%;
  881. }
  882. &:last-child {
  883. height: 20%;
  884. .total-block {
  885. display: flex;
  886. align-items: center;
  887. justify-content: center;
  888. height: 100%;
  889. >div {
  890. width: 40%;
  891. }
  892. .total-label {
  893. color: #fff;
  894. text-align: center;
  895. }
  896. }
  897. }
  898. }
  899. }
  900. }
  901. }
  902. </style>