1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207 |
- <template>
- <div class="dataView-content">
- <!-- <dv-loading>Loading...</dv-loading> -->
- <div class="data-header">
- <div class="total-block">
- <div>
- <div class="total-label"><i class="cor1" v-for="item in 3" :key="item">|</i>用户总数</div>
- <div class="total-value cor1">{{ userTotal }}</div>
- </div>
- <div>
- <div class="total-label"><i class="cor2" v-for="item in 3" :key="item">|</i>试点单位数</div>
- <div class="total-value cor2">{{ dwTotal }}</div>
- </div>
- <div>
- <div class="total-label"><i class="cor3" v-for="item in 3" :key="item">|</i>设备总数</div>
- <div class="total-value cor3">{{ devTotal }}</div>
- </div>
- </div>
- <div class="page-title">
- <!-- 智享亿家投递大数据 -->
- </div>
- <div>
- <div class="border-box-content">
- <div>区域</div>
- <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
- <option value="">省</option>
- <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
- </select> -->
- <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
- <option value="">全部</option>
- <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}
- </option>
- </select>
- <!-- <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
- <option value="">全部区/县</option>
- <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
- </select> -->
- <a-icon
- @click="isFullscreenMap"
- :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
- :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
- </div>
- </div>
- </div>
- <div class="data-body">
- <div class="b-middle">
- <div>
- <dv-border-box-8 ref="map" style="padding: 10px;">
- <div class="lajiliang">
- <div class="laji-title">垃圾产生量</div>
- <div class="laji-item">
- <div class="cor1">可回收垃圾</div>
- <div>{{ rubbishWeightData.RECYCLING }} kg</div>
- </div>
- <div class="laji-item">
- <div class="cor2">其它垃圾</div>
- <div>{{ rubbishWeightData.GATHER_OTHER }} kg</div>
- </div>
- <div class="laji-item">
- <div class="cor3">厨余垃圾</div>
- <div>{{ rubbishWeightData.GATHER_KITCHEN }} kg</div>
- </div>
- <div class="laji-item">
- <div class="cor4">建筑垃圾</div>
- <div>{{ rubbishWeightData.GATHER_BUILDING }} kg</div>
- </div>
- <div class="laji-item">
- <div class="cor5">有害垃圾</div>
- <div>{{ rubbishWeightData.HARM }} kg</div>
- </div>
- <div class="laji-total">共计<span>{{ rubbishWeightTotal }}</span>kg</div>
- </div>
- <div id="map" :style="{height: '100%'}"></div>
- </dv-border-box-8>
- </div>
- <div>
- <div>
- <dv-border-box-13 ref="con1">
- <div id="con1" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <div>
- <dv-border-box-13 ref="con2">
- <div id="con2" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <div>
- <dv-border-box-13 ref="con4">
- <div id="con4" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- </div>
- </div>
- <div class="b-right">
- <!-- 设备比例分布 -->
- <div>
- <dv-border-box-13 ref="con3">
- <div id="con3" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <!-- 各分类垃圾量分布 -->
- <div>
- <dv-border-box-13 ref="con5">
- <div id="con5" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- <!-- 各机构投递量分布比例 -->
- <div>
- <dv-border-box-13 ref="con6">
- <div id="con6" style="width: 100%;height: 100%;"></div>
- </dv-border-box-13>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import echarts from 'echarts'
- import {
- getUserTotal,
- getDeviceTotal,
- getMapStation
- } from '@/api/nodeMap.js'
- import {
- getNewRegister,
- getTimeSharingLog,
- getDeliveryTop,
- getHeatMapData,
- getLocationCode,
- getRubbishTypeTotal,
- querySumWeight,
- labelWeightPercent,
- devicePercent,
- getDwTotal
- } from '@/api/borard.js'
- import {
- getProvince,
- getCityByPro,
- getDistrictByCity
- } from '@/api/station'
- import moment from 'moment'
- import getDate from '@/libs/getDate.js'
- export default {
- name: 'DataBoratd',
- data () {
- return {
- queryParam: {
- provinceCode: '610000', // 省
- cityCode: '', // 市
- districtCode: '' // 区
- },
- addrProvinceList: [{
- code: '610000',
- id: '610000',
- isOpen: '0',
- name: '陕西省',
- parentId: '100000',
- parentIds: '100000',
- sort: 27,
- type: '2'
- }], // 省下拉
- addrCityList: [{
- 'id': '610100',
- 'sort': 1,
- 'parentId': '610000',
- 'parentIds': '100000,610000',
- 'isOpen': '0',
- 'name': '西安市',
- 'code': '610100'
- },
- {
- 'id': '610400',
- 'sort': 4,
- 'parentId': '610000',
- 'parentIds': '100000,610000',
- 'isOpen': '0',
- 'name': '咸阳市',
- 'code': '610400'
- }
- ], // 市下拉
- addrDistrictList: [], // 区下拉
- chart1: null,
- chart2: null,
- chart3: null,
- chart4: null,
- chart5: null,
- chart6: null,
- userTotal: 0,
- devTotal: 0,
- dwTotal: 0,
- isMapFull: false,
- map: null, // 地图对象
- markerLayer: null, // 地图点标记对象
- infoWindow: null, // 地图信息窗口对象
- beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
- endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59'), // 查询结束时间
- rubbishWeightData: {
- 'GATHER_OTHER': 0, // 其它垃圾
- 'GATHER_KITCHEN': 0, // 厨余垃圾
- 'GATHER_BUILDING': 0, // 建筑垃圾
- 'HARM': 0, // 有害垃圾
- 'RECYCLING': 0 // 可回收垃圾
- }, // 垃圾产生量数据
- rubbishWeightTotal: 0 // 垃圾产生量数据总计
- }
- },
- methods: {
- // 获取省列表'
- getProvinceList () {
- getProvince().then(res => {
- if (res.status == 200) {
- this.addrProvinceList = res.data || []
- } else {
- this.addrProvinceList = []
- }
- })
- },
- // 获取城市列表
- getCityList (e) {
- if (e.target.value == '') return
- this.addrCityList = []
- this.addrDistrictList = []
- this.queryParam.cityCode = ''
- this.queryParam.districtCode = ''
- this.getCityListRequest(e.target.value)
- },
- getCityListRequest (val) {
- getCityByPro({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrCityList = res.data || []
- } else {
- this.addrCityList = []
- }
- })
- },
- // 获取区县列表
- getAreaList (e) {
- if (e.target.value == '') {
- this.initChart()
- return
- }
- this.addrDistrictList = []
- this.queryParam.districtCode = ''
- // 地图经纬度
- this.getLocationCode()
- this.getAreaListRequest(e.target.value)
- this.initChart()
- },
- getAreaListRequest (val) {
- getDistrictByCity({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrDistrictList = res.data || []
- } else {
- this.addrDistrictList = []
- }
- })
- },
- // 全屏
- fullScreen () {
- var element = document.documentElement
- if (element.requestFullscreen) {
- element.requestFullscreen()
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen()
- } else if (element.mozRequestFullScreen) {
- element.mozRequestFullScreen()
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen()
- }
- },
- // 退出全屏
- exitFullscreen () {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- }
- },
- // 地图是否全屏展示
- isFullscreenMap () {
- this.isMapFull = !this.isMapFull
- if (this.isMapFull) {
- this.fullScreen()
- } else {
- this.exitFullscreen()
- }
- this.chart1.resize()
- this.chart2.resize()
- this.chart3.resize()
- this.chart4.resize()
- },
- formatter (number) {
- const numbers = number.toString().split('').reverse()
- const segs = []
- while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
- return segs.join(',').split('').reverse().join('')
- },
- // 获取用户总数
- getUser () {
- getUserTotal({}).then(res => {
- const data = res.data || 0
- this.userTotal = data
- })
- },
- // 获取设备总数
- getDevice () {
- getDeviceTotal({}).then(res => {
- const data = res.data || 0
- this.devTotal = data
- })
- },
- // 获取试点单位数(网点数量)
- getDwTotal () {
- getDwTotal({}).then(res => {
- const data = res.data.count || 0
- this.dwTotal = data
- })
- },
- // 获取新用户注册量
- getNewRegister () {
- const params = {
- beginRegisterTime: this.beginDate,
- endRegisterTime: this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getNewRegister(params).then(res => {
- if (res.status == 200) {
- const xData = res.data.dateTime
- const yData = res.data.registerNum
- const arr = []
- yData.map(item => {
- arr.push(Number(item))
- })
- this.initChart1(xData, arr)
- }
- })
- },
- // 获取分时投递
- getTimeSharingLog () {
- const params = {
- 'beginDeliveryDate': this.beginDate,
- 'endDeliveryDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getTimeSharingLog(params).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.initChart2(res.data)
- }
- })
- },
- // 排行榜
- getDeliveryTop () {
- const params = {
- 'findRubbishDataBeginDate': this.beginDate,
- 'findRubbishDataEndDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getDeliveryTop(params).then(res => {
- console.log(res)
- if (res.status == 200) {
- this.initChart3(res.data)
- }
- })
- },
- // 设备分布比例
- getDevicePercent () {
- devicePercent({}).then(res => {
- console.log(res, '------------设备分布比例')
- const data = res.data || []
- data.forEach(item => {
- item.name = item.LABEL_NAME
- item.value = item.DEVCIE_NUM
- })
- const con3 = document.getElementById('con3')
- const chart3 = echarts.init(con3)
- const option3 = this.initPie(chart3, '设备分布比例', data, '个')
- chart3.setOption(option3)
- this.chart3 = chart3
- this.chart3.resize()
- })
- },
- // 各机构投递量分布比例
- getLabelWeightPercent () {
- labelWeightPercent({}).then(res => {
- console.log(res, '-------各机构投递量分布比例')
- if (res.status == 200) {
- const data = res.data || []
- data.forEach(item => {
- item.name = item.labelName
- item.value = Math.round(item.weight / 1000000)
- })
- const con6 = document.getElementById('con6')
- const chart6 = echarts.init(con6)
- const option6 = this.initPie(chart6, '各机构投递量分布比例', data, '吨')
- chart6.setOption(option6)
- this.chart6 = chart6
- this.chart6.resize()
- }
- })
- },
- // 垃圾产生量
- getRubbishWeight () {
- querySumWeight({}).then(res => {
- console.log(res, '垃圾产生量')
- if (res.status == 200) {
- Object.keys(this.rubbishWeightData).map(item => {
- this.rubbishWeightData[item] = this.formatter(Math.round((res.data.list.find(key => key.rubbishType == item).rubbishWeight) / 1000))
- })
- this.rubbishWeightTotal = this.formatter(Math.round(res.data.total / 1000))
- } else {
- this.rubbishWeightTotal = 0
- this.rubbishWeightData = {
- 'GATHER_OTHER': 0, // 其它垃圾
- 'GATHER_KITCHEN': 0, // 厨余垃圾
- 'GATHER_BUILDING': 0, // 建筑垃圾
- 'HARM': 0, // 有害垃圾
- 'RECYCLING': 0 // 可回收垃圾
- }
- }
- })
- },
- // 各分类垃圾量分布
- getRubbishTypeChart () {
- getRubbishTypeTotal({}).then(res => {
- console.log(res)
- let data = []
- if (res.status == 200 && res.data) {
- // this.initChart3(res.data)
- Object.keys(this.rubbishWeightData).map(item => {
- const p = res.data.find(key => key.rubbishType == item)
- if (p) {
- data.push({
- name: p.rubbishTypeDict,
- value: p.rubbishWeight
- })
- }
- })
- } else {
- data = [{
- name: '可回收垃圾',
- value: 0
- },
- {
- name: '其他垃圾',
- value: 0
- },
- {
- name: '厨余垃圾',
- value: 0
- },
- {
- name: '建筑垃圾',
- value: 0
- },
- {
- name: '有害垃圾',
- value: 0
- }
- ]
- }
- const con5 = document.getElementById('con5')
- const chart5 = echarts.init(con5)
- const option = this.initPie(chart5, '各分类垃圾量分布', data)
- chart5.setOption(option)
- this.chart5 = chart5
- this.chart5.resize()
- })
- },
- getLocationCode () {
- const cityCode = this.queryParam.cityCode
- const districtCode = this.queryParam.districtCode
- getLocationCode({
- keyword: districtCode || cityCode
- }).then(res => {
- console.log(res)
- if (res.status == 200) {
- if (this.map) {
- this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
- } else {
- this.initMap(res.data)
- }
- }
- })
- },
- // 初始化地图
- initMap (res) {
- // 定义地图中心点坐标 默认定位在陕西省咸阳市
- var center = new TMap.LatLng(res.lat, res.lng)
- // 定义map变量,调用 TMap.Map() 构造函数创建地图
- this.map = new TMap.Map(document.getElementById('map'), {
- center: center, // 设置地图中心点坐标
- mapStyleId: 'style3',
- zoom: 13, // 设置地图缩放级别
- pitch: 0, // 设置俯仰角
- showControl: false,
- rotation: 45 // 设置地图旋转角度
- })
- // 创建并初始化MultiMarker 点标记
- this.markerLayer = new TMap.MultiMarker({
- map: this.map, // 指定地图容器
- // 样式定义
- styles: {
- // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
- 'myStyle': new TMap.MarkerStyle({
- 'width': 40, // 点标记样式宽度(像素)
- 'height': 40, // 点标记样式高度(像素)
- 'src': '../ldt.png', // 图片路径
- // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
- 'anchor': {
- x: 8,
- y: 15
- }
- })
- },
- // 点标记数据数组
- geometries: []
- })
- // 初始化infoWindow
- this.infoWindow = new TMap.InfoWindow({
- map: this.map,
- position: new TMap.LatLng(39.984104, 116.307503),
- offset: {
- x: 0,
- y: -32
- } // 设置信息窗相对position偏移像素
- })
- this.infoWindow.close() // 初始关闭信息窗关闭
- this.markerLayer.on('mousemove', this.showMarkTitle)
- // 监听地图加载完成
- // this.map.on('tilesloaded', this.getMapMark)
- },
- // 获取热力图
- getHeatMapData () {
- // 初始化热力图并添加至map图层
- const heat = new TMap.visualization.Heat({
- max: 180, // 热力最强阈值
- min: 0, // 热力最弱阈值
- height: 40, // 峰值高度
- gradientColor: { // 渐变颜色
- 0.2: '#0a8b4d',
- 0.3: '#57e0a5',
- 0.5: '#05a8a4'
- },
- radius: 30 // 最大辐射半径
- }).addTo(this.map)
- const params = {
- 'beginDeliveryDate': this.beginDate,
- 'endDeliveryDate': this.endDate,
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }
- getHeatMapData(params).then(res => {
- if (res.status == 200) {
- const ret = []
- for (let i = 0; i < res.data.length; i++) {
- if (res.data[i].lat <= 90) {
- ret.push({
- count: res.data[i].deliveryTimes,
- lat: res.data[i].lat,
- lng: res.data[i].lng
- })
- }
- }
- // console.log(ret)
- heat.setData(ret) // 设置数据
- }
- })
- },
- // 获取地图点坐标
- getMapMark () {
- this.getHeatMapData()
- getMapStation({
- 'provinceCode': this.queryParam.provinceCode,
- 'cityCode': this.queryParam.cityCode,
- 'districtCode': this.queryParam.districtCode
- }).then(res => {
- const list = res.data || []
- const data = []
- list.map((item, index) => {
- if (item.lat <= 85.051128 && item.lat >= -85.051128) {
- const p = {
- 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
- 'styleId': 'myStyle', // 指定样式id
- 'position': new TMap.LatLng(Number(item.lat), Number(item
- .lng)), // 点标记坐标位置
- 'properties': { // 自定义属性
- 'title': item.name
- }
- }
- data.push(p)
- }
- })
- // 增加点标记
- this.markerLayer.add(data)
- })
- },
- // 显示地图标记点名称
- showMarkTitle (evt) {
- this.infoWindow.open() // 打开信息窗
- this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
- this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
- },
- // 初始化图表
- initChart () {
- // 用户总数
- this.getUser()
- // 设备总数
- this.getDevice()
- // 网点总数
- this.getDwTotal()
- // 新注册用户
- this.getNewRegister()
- // 分时投递
- this.getTimeSharingLog()
- // 垃圾产生量
- this.getRubbishWeight()
- // 各分类垃圾量分布
- this.getRubbishTypeChart()
- // 设备分布比例
- this.getDevicePercent()
- // 各机构投递量分布比例
- this.getLabelWeightPercent()
- // 网点投递量排名
- this.getDeliveryTop()
- },
- // 排行榜
- initChart3 (res) {
- const con4 = document.getElementById('con4')
- const chart4 = echarts.init(con4)
- const option4 = {
- title: {
- text: '网点投递量排名',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}: {c0}kg'
- },
- grid: {
- left: 15,
- right: 15,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- xAxis: {
- data: res.stationName,
- show: false
- },
- yAxis: {
- name: 'kg',
- type: 'value'
- },
- series: [{
- data: res.deliveryWeight,
- type: 'bar',
- barWidth: 30,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- },
- itemStyle: {
- color: '#37a2da',
- shadowColor: '#246d91',
- shadowOffsetX: 8,
- shadowOffsetY: 0
- }
- }]
- }
- chart4.setOption(option4)
- this.chart4 = chart4
- this.chart4.resize()
- },
- // 分时投递记录
- initChart2 (res) {
- const con2 = document.getElementById('con2')
- const chart2 = echarts.init(con2)
- const series = []
- const arr = res.dayKey.slice(res.dayKey.length - 3)
- console.log(arr)
- for (let i = 0; i < arr.length; i++) {
- series.push({
- name: arr[i],
- data: res.value[arr[i]],
- type: 'line',
- stack: '投递量',
- smooth: true,
- barWidth: 10,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- }
- })
- }
- const option2 = {
- title: {
- text: '分时投递量',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}时: {c0}kg'
- },
- grid: {
- left: 20,
- right: 40,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- legend: {
- data: arr,
- orient: 'vertical',
- textStyle: {
- fontSize: 10,
- color: '#abd7ff'
- },
- top: 15,
- left: 'right'
- },
- xAxis: {
- name: '时',
- type: 'category',
- data: res.hourKey,
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- yAxis: {
- name: 'kg',
- type: 'value',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- series: series
- }
- chart2.setOption(option2)
- this.chart2 = chart2
- this.chart2.resize()
- },
- // 初始化新用户注册量
- initChart1 (xData, yData) {
- const con1 = document.getElementById('con1')
- const chart1 = echarts.init(con1)
- const option1 = {
- title: {
- text: '新用户注册量',
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- formatter: '{b0}日: {c0}人'
- },
- grid: {
- left: 15,
- right: 60,
- bottom: 20,
- top: 85,
- containLabel: true
- },
- xAxis: {
- name: '日期',
- data: xData,
- type: 'category',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- yAxis: {
- name: '用户',
- type: 'value',
- nameTextStyle: {
- color: '#666'
- },
- axisLine: {
- lineStyle: {
- color: '#666'
- }
- }
- },
- series: [{
- data: yData,
- type: 'line',
- smooth: true,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- },
- lineStyle: {
- color: 'rgba(55, 162, 218, 0.9)'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
- }, {
- offset: 1,
- color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
- }]
- }
- }
- }]
- }
- chart1.setOption(option1)
- this.chart1 = chart1
- this.chart1.resize()
- window.addEventListener('pageshow', this.chart1.resize())
- on(window, 'pageshow', this.chart1.resize())
- },
- // 初始化饼图 title: 标题 data:数据 bit:单位
- initPie (chart, title, data, bit) {
- const legend = []
- if (bit) {
- data.map(item => {
- const p = `${item.name}: ${item.value}${bit}`
- legend.push(p)
- })
- }
- const option = {
- color: ['#f56548', '#ffb301', '#7561af', '#06beff', '#20ce7a' ],
- title: {
- text: title,
- top: 20,
- left: 20,
- textStyle: {
- color: '#abd7ff'
- },
- textAlingn: 'left'
- },
- tooltip: {
- trigger: 'item',
- formatter: `{b} : {d}%`
- },
- legend: {
- orient: 'horizontal',
- left: 'center',
- bottom: '5',
- padding: 5,
- textStyle: {
- color: '#abd7ff',
- fontSize: 10
- },
- show: !!bit,
- formatter: function (name) {
- if (bit) {
- const p = data.find(item => item.name == name)
- return name + (p ? (':' + p.value + bit) : '')
- }
- }
- },
- series: [{
- type: 'pie',
- radius: ['30%', '50%'],
- startAngle: 75,
- top: 50,
- avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
- label: {
- normal: {
- formatter: params => {
- // console.log(params, 'ppppppp')
- return (
- '{name|' + params.name + '}{value|' +
- params.percent + '%' + '}'
- )
- },
- padding: [0, -70, 25, -70],
- rich: {
- name: {
- fontSize: 12,
- padding: [0, 4, 0, 4],
- color: '#999'
- },
- value: {
- fontSize: 12,
- color: '#999'
- }
- }
- }
- },
- labelLine: {
- normal: {
- length: 20,
- length2: 70,
- lineStyle: {
- color: '#e6e6e6'
- }
- }
- },
- data: data,
- insideLabel: {
- show: true
- }
- }]
- }
- return option
- }
- },
- watch: {
- },
- mounted () {
- const that = this
- // 默认定位在陕西省咸阳市
- this.initMap({ lat: 34.32932, lng: 108.70929 })
- window.onresize = () => {
- return (() => {
- that.chart1.resize()
- that.chart2.resize()
- that.chart3.resize()
- that.chart4.resize()
- that.chart5.resize()
- that.chart6.resize()
- })()
- }
- // 监听页面刷新,重置边框宽高
- window.addEventListener('pageshow', (e) => {
- // console.log(e, this.chart1, 'eeeeeeeeeeee')
- this.$refs.map.initWH()
- this.$refs.con1.initWH()
- this.$refs.con2.initWH()
- this.$refs.con3.initWH()
- this.$refs.con4.initWH()
- this.$refs.con5.initWH()
- this.$refs.con6.initWH()
- })
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.getMapMark()
- setTimeout(() => {
- vm.initChart()
- if (vm.queryParam.cityCode != '') {
- vm.getAreaListRequest(vm.queryParam.cityCode)
- }
- }, 150)
- })
- },
- beforeRouterLeave (to, from, next) {
- next(vm => {
- // 销毁地图
- vm.map.destroy()
- vm.map = null
- })
- }
- }
- </script>
- <style lang="less">
- .dataView-content {
- width: 100%;
- height: 100%;
- min-height: 600px;
- background-image: url(../../assets/dataViewBg.png);
- background-size: 100% 100%;
- display: flex;
- flex-direction: column;
- .data-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- background-image: url(../../assets/headBg.png);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: auto 80%;
- padding: 10px 0 0;
- .total-block {
- width: 35%;
- display: flex;
- align-items: center;
- justify-content: center;
- >div {
- width: 30%;
- padding-right: 10px;
- }
- .total-label {
- color: #fff;
- text-align: left;
- display: flex;
- i {
- transform: rotate(330deg);
- display: inline-block;
- font-size: 12px;
- margin: 0 1px;
- &:last-child {
- margin-right: 10px;
- }
- }
- }
- .total-value {
- font-size: 22px;
- font-weight: bold;
- }
- .cor1 {
- color: #00ff84;
- }
- .cor2 {
- color: #d7ff00;
- }
- .cor3 {
- color: #00c0ff;
- }
- }
- .page-title {
- width: 50%;
- flex-grow: 1;
- color: #00aaff;
- font-size: 32px;
- text-align: center;
- }
- >div {
- padding: 15px;
- &:last-child {
- width: 25%;
- color: #0ed3ff;
- .border-box-content {
- font-size: 18px;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- padding-left: 50px;
- select {
- background: #021931;
- border: 1px solid #3e566d;
- min-width: 30%;
- padding: 2px 20px;
- margin: 0 10px;
- box-shadow: inset 0 0 2px #69b2ff;
- border-radius: 60px;
- }
- }
- }
- }
- }
- .data-body {
- flex-grow: 1;
- display: flex;
- padding: 0 15px 15px;
- .b-right {
- width: 25%;
- display: flex;
- padding: 5px;
- flex-direction: column;
- justify-content: space-around;
- >div {
- height: 33%;
- }
- }
- .b-middle {
- width: 75%;
- padding: 5px;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- >div {
- &:first-child {
- height: 66%;
- .lajiliang {
- width: 23%;
- position: absolute;
- padding: 15px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 6px;
- left: 20px;
- top: 20px;
- z-index: 1000;
- color: #fff;
- .laji-title {
- text-align: center;
- padding: 0 0 10px;
- }
- .laji-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: 15px 0;
- >div {
- &:first-child {
- border-radius: 30px;
- padding: 2px 10px;
- font-size: 12px;
- width: 50%;
- text-align: center;
- }
- }
- .cor1 {
- background-color: #c2523f;
- }
- .cor2 {
- background-color: #c59b16;
- }
- .cor3 {
- background-color: #7561af;
- }
- .cor4 {
- background-color: #418ec6;
- }
- .cor5 {
- background-color: #20ce7a;
- }
- }
- }
- }
- &:last-child {
- height: 33%;
- display: flex;
- >div {
- width: 33.3%;
- justify-content: space-around;
- align-items: center;
- }
- }
- }
- }
- }
- }
- </style>
|