151 lines
3.1 KiB
Vue
151 lines
3.1 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: [],
|
||
|
|
rysshyqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getRysshyqk()
|
||
|
|
// setTimeout(() => {
|
||
|
|
// this.gr()
|
||
|
|
|
||
|
|
// }, 300);
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fn(url) {
|
||
|
|
layer.open({
|
||
|
|
type: 2,
|
||
|
|
content: url,
|
||
|
|
area: ['80%', '80%'],
|
||
|
|
title:'' ,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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: {
|
||
|
|
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: [
|
||
|
|
{
|
||
|
|
data: this.number,
|
||
|
|
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.list
|
||
|
|
// console.log(this.data);
|
||
|
|
this.data.forEach(item => {
|
||
|
|
this.times.push(item.time)
|
||
|
|
this.number.push(item.value)
|
||
|
|
})
|
||
|
|
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>
|