| | |
| | | <script> |
| | | import * as echarts from 'echarts'; |
| | | import {video} from "../../../api/platform/home"; |
| | | var chartDom = document.getElementById('main'); |
| | | var myChart = echarts.init(chartDom); |
| | | var myChart =null; |
| | | var option; |
| | | let observer = null; |
| | | export default { |
| | |
| | | initChart(data) { |
| | | const dataList = this.groupByData(data.list); |
| | | const baseLine = data.baseLine == null ? 0 : data.baseLine; |
| | | const colors = ['#5470C6', '#66CC99', '#EE6666']; |
| | | const colors = ['#EE6666', '#66CC99', '#f8c87a']; |
| | | option = { |
| | | color: colors, |
| | | tooltip: { |
| | |
| | | </div>`; |
| | | }).join(''); |
| | | tooltipHtml = `${tooltipHtml}${pointsHtml}`; |
| | | tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">录像正常参考值: ${baseLine.toLocaleString()}</div>`; |
| | | tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">录像完整参考值: ${baseLine.toLocaleString()}</div>`; |
| | | |
| | | return tooltipHtml; |
| | | } |
| | |
| | | containLabel: true |
| | | }, |
| | | legend: { |
| | | data: ['点位在线', '录像完整', '录像缺失'] |
| | | data: ['点位在线', '录像完整', '录像缺失','无录像'] |
| | | }, |
| | | xAxis: [ |
| | | { |
| | |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: colors[0] |
| | | color: '#5470C6' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | |
| | | name: '录像完整', |
| | | yAxisIndex: 0, |
| | | type: 'bar', |
| | | data: data.list.map(item => { |
| | | data: |
| | | |
| | | data.list.map(item => { |
| | | return item['integrityNum']; |
| | | }) |
| | | }, |
| | |
| | | type: 'bar', |
| | | yAxisIndex: 0, |
| | | data: data.list.map(item => { |
| | | return item['loseNum']; |
| | | return { |
| | | value: item['loseNum'], |
| | | itemStyle:{ |
| | | color: '#f8c87a', |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | { |
| | | name: '无录像', |
| | | type: 'bar', |
| | | yAxisIndex: 0, |
| | | data: data.list.map(item => { |
| | | return { |
| | | value :item['errNum'], |
| | | itemStyle:{ |
| | | color: '#EE6666', |
| | | }} |
| | | }) |
| | | }, |
| | | |
| | | { |
| | | name: '点位在线', |
| | | type: 'line', |
| | |
| | | const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1); |
| | | this.date = year + '-' + month; |
| | | this.params.date = this.date; |
| | | myChart = echarts.init(this.$refs.chartContent); |
| | | this.getChart(); |
| | | this.observe(); |
| | | }, |