176 lines
3.9 KiB
Vue
176 lines
3.9 KiB
Vue
<template>
|
|
<div class="container9" @click="fn(rysshyqkUrl)">
|
|
<div ref="line" class="line"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import '@/utils/echa.js'
|
|
import { getRysshyqk } from '@/api/ddzhxt.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
data: [],
|
|
times: [],
|
|
// number: [], 老数据
|
|
// 新数据
|
|
bossCount: [],
|
|
zgyCount: [],
|
|
// rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html'
|
|
rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-handle-year.html'
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created () {
|
|
this.getRysshyqk()
|
|
// setTimeout(() => {
|
|
// this.gr()
|
|
|
|
// }, 300);
|
|
},
|
|
mounted () {
|
|
},
|
|
watch: {
|
|
},
|
|
methods: {
|
|
fn (url) {
|
|
// eslint-disable-next-line no-undef
|
|
layer.open({
|
|
type: 2,
|
|
content: url,
|
|
area: ['80%', '80%'],
|
|
title: ''
|
|
})
|
|
// window.open('http://192.168.0.4:7022/servicecity/route/bigdata/list-case-handle-year.html')
|
|
},
|
|
gr () {
|
|
let myChart = this.$echarts.init(this.$refs.line)
|
|
// 用于清除定时器
|
|
var tootipTimer = null
|
|
let option = {
|
|
grid: {
|
|
left: '3%',
|
|
right: '7%',
|
|
bottom: '5%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.times,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
} // x轴刻度的颜色
|
|
},
|
|
axisLabel: {
|
|
// 每个显示的坐标间隔几个显示
|
|
// interval: 0,
|
|
// 设置旋转角度
|
|
// rotate: 45,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
borderWidth: 0,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
// formatter: function (param) {
|
|
// return + param.name ;
|
|
// }
|
|
},
|
|
series: [
|
|
{
|
|
name: '网格员',
|
|
data: this.bossCount,
|
|
type: 'line'
|
|
// 是否开启平滑
|
|
// smooth: true,
|
|
// 折线区域是面积及颜色
|
|
// areaStyle: {
|
|
// color: '#e1e3eb'
|
|
// }
|
|
},
|
|
{
|
|
name: '专管员',
|
|
|
|
data: this.zgyCount,
|
|
type: 'line'
|
|
// smooth: true,
|
|
// areaStyle: {
|
|
// color: '#e1e3eb'
|
|
// }
|
|
}
|
|
]
|
|
}
|
|
myChart.setOption(option)
|
|
let sizeFun = function () {
|
|
myChart.resize()
|
|
}
|
|
window.addEventListener('resize', sizeFun)
|
|
tootipTimer && tootipTimer.clearLoop()
|
|
tootipTimer = null
|
|
// 调用轮播的方法
|
|
tootipTimer = window.loopShowTooltip(myChart, option, {
|
|
interval: 2000, // 轮播间隔时间
|
|
loopSeries: true // 是否开启轮播循环
|
|
})
|
|
},
|
|
async getRysshyqk () {
|
|
try {
|
|
const res = await getRysshyqk()
|
|
this.data = res.data.countClass
|
|
console.log(res)
|
|
this.data.forEach(item => {
|
|
this.times.push(item.dateTime)
|
|
this.bossCount.push(item.bossCount)
|
|
this.zgyCount.push(item.zgyCount)
|
|
})
|
|
this.$nextTick(() => {
|
|
this.gr()
|
|
})
|
|
} catch (error) {
|
|
console.log('数据获取失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container9 {
|
|
/* border: 1px solid #00ffff; */
|
|
width: 17.0833vw;
|
|
height: 21.5749vh;
|
|
|
|
.line {
|
|
width: 17.0833vw;
|
|
height: 21.5749vh;
|
|
}
|
|
}
|
|
</style>
|