<template> <ve-histogram :data="chartData" :title="title" :legend-visible="isLegendVisible" :tooltip-visible="isTipShow" :settings="chartSettings" :extend="chartExtends"/> </template> <script> import { peopleCountByDevice } from '@/api/statistics' import { getDayTime } from '@/utils/dateutils' export default { name: 'TempAnalysis', data() { this.title = { text: '测温情况分析' } this.chartSettings = { labelMap: { 'normal': '体温正常', 'abnormal': '体温异常' }, stack: { '体温': ['normal', 'abnormal'] }, filterZero: true } this.chartExtends = { color: ['#36a3f7', '#f4516c'], barWidth: 20, xAxis: { axisLabel: { interval: 0, rotate: 45 // 代表逆时针旋转45度 } }, yAxis: { minInterval: 1 }, filterZero: true } return { isLegendVisible: true, isTipShow: true, chartData: { columns: ['deviceName', 'normal', 'abnormal'], rows: [] } } }, mounted() { this.fetchData() }, activated() { this.fetchData() }, methods: { fetchData() { const startTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 00:00:00' const endTime = getDayTime(new Date().getTime()).Format('yyyy-MM-dd') + ' 23:59:59' // const startTime = '2020-06-01 00:00:00' // const endTime = '2020-06-20 00:00:00' const listQuery = { startTime: startTime, endTime: endTime } peopleCountByDevice(listQuery).then(response => { const data = response.data if (data.length === 0) { var data0 = {} data0['deviceName'] = '' data0['abnormal'] = 0 data0['normal'] = 0 data.push(data0) this.chartExtends.yAxis.max = 10 } else { var indexDelete = [] for (var i = 0; i < data.length; i++) { if (parseInt(data[i].abnormal) === 0 && parseInt(data[i].normal) === 0) { indexDelete.push({ 'index': i }) } } if (indexDelete.length > 0) { for (var j = 0; j < indexDelete.length; j++) { data.splice(parseInt(indexDelete[j].index), 1) } } } debugger this.chartData.rows = data }) } } } </script>