155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
|
<template>
|
|||
|
|
<div ref="changetrend" style="width: 800px; height: 320px;margin-left: 100px;margin-top: 0px;"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
import http from "@/utils/request";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
time:[],
|
|||
|
|
riskData:[],
|
|||
|
|
len:Number,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
http.get('/warning/get_warning_count/?need=1').then((res)=>{
|
|||
|
|
|
|||
|
|
for (let i in res.data) {
|
|||
|
|
this.time.push(res.data[i]["time"].replace('_','-'))
|
|||
|
|
this.riskData.push(res.data[i]["综合风险水平"])
|
|||
|
|
}
|
|||
|
|
this.len=this.time.length
|
|||
|
|
let selectedTime=this.time.slice(0,40)
|
|||
|
|
let selectedRisk=this.riskData.slice(0,40)
|
|||
|
|
var myChart = echarts.init(this.$refs.changetrend);
|
|||
|
|
// 绘制图表
|
|||
|
|
// function randomData() {
|
|||
|
|
// now = new Date(+now + oneDay);
|
|||
|
|
// value = value + Math.random() * 21 - 10;
|
|||
|
|
// return {
|
|||
|
|
// name: now.toString(),
|
|||
|
|
// value: [
|
|||
|
|
// [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
|
|||
|
|
// Math.round(value),
|
|||
|
|
// ],
|
|||
|
|
// };
|
|||
|
|
// }
|
|||
|
|
// let data = [];
|
|||
|
|
// let now = new Date(1997, 9, 3);
|
|||
|
|
// let oneDay = 24 * 3600 * 1000;
|
|||
|
|
// let value = Math.random() * 1000;
|
|||
|
|
// for (var i = 0; i < 1000; i++) {
|
|||
|
|
// data.push(randomData());
|
|||
|
|
// }
|
|||
|
|
// console.log(data)
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: "系统性风险整体变化趋势",
|
|||
|
|
left:'center',
|
|||
|
|
textStyle: {//主标题文本样式
|
|||
|
|
fontSize: 15,
|
|||
|
|
color:'#696969',
|
|||
|
|
},
|
|||
|
|
padding:[ 5,0,5,0],//[5,10] | [ 5,6, 7, 8] ,标题内边距[上，x，下，x]
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
grid: {
|
|||
|
|
left: '20%',//离左边远一点
|
|||
|
|
right: '4%',
|
|||
|
|
// bottom: '10%',
|
|||
|
|
top:'5%',//如果不填，会默认一个特别大的值，导致图的上面留白特别大
|
|||
|
|
// containLabel: true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
// formatter:
|
|||
|
|
// function (params) {
|
|||
|
|
// params = params[0];
|
|||
|
|
// var date = new Date(params.name);
|
|||
|
|
// return (
|
|||
|
|
// date.getDate() +
|
|||
|
|
// "/" +
|
|||
|
|
// (date.getMonth() + 1) +
|
|||
|
|
// "/" +
|
|||
|
|
// date.getFullYear() +
|
|||
|
|
// " : " +
|
|||
|
|
// params.value[1]
|
|||
|
|
// );
|
|||
|
|
// },
|
|||
|
|
axisPointer: {
|
|||
|
|
animation: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data:selectedTime
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
boundaryGap: [0, "100%"],
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "综合风险",
|
|||
|
|
type: "line",
|
|||
|
|
showSymbol: true,
|
|||
|
|
data: selectedRisk
|
|||
|
|
// data,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
var that=this
|
|||
|
|
let i =0
|
|||
|
|
setInterval(function () {
|
|||
|
|
// for (var i = 0; i < 5; i++) {
|
|||
|
|
// data.shift();
|
|||
|
|
// data.push(randomData());
|
|||
|
|
// }
|
|||
|
|
if (i===that.time.length-50)
|
|||
|
|
i=0
|
|||
|
|
selectedRisk=that.riskData.slice(i,50+i)
|
|||
|
|
selectedTime=that.time.slice(i,50+i)
|
|||
|
|
i++
|
|||
|
|
myChart.setOption({
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "综合风险",
|
|||
|
|
type: "line",
|
|||
|
|
showSymbol: true,
|
|||
|
|
data: selectedRisk,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
xAxis: {
|
|||
|
|
|
|||
|
|
type: "category",
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
data:selectedTime
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}, 1500);
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
</style>
|