开发自动登录 系统风险折线图
This commit is contained in:
GongDragon
parent
d96d3a1025
commit
db77dc0708
368
src/widerscreen/components/systemRiskComponent.vue
Normal file
368
src/widerscreen/components/systemRiskComponent.vue
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
<template>
|
||||
<div style="height: 85%;">
|
||||
<div style="display: flex;height: 100%;">
|
||||
<div ref="whole risk" style=" float: left;width: 98%; height: 100%;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
|
||||
<div ref="future" style=" float: left; width: 2%; height: 100%;margin-left: -168px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
<!-- <div class="warning-component">
|
||||
<div class="warning-dates">
|
||||
<div class="date-item">前日：<span>{{ prevDayRisk }}</span></div>
|
||||
<div class="date-item">昨日：<span>{{ yesterdayRisk }}</span></div>
|
||||
<div class="date-item">今日：<span>{{ todayRisk }}</span></div>
|
||||
<div class="date-item">明日：<span>{{ tomorrowRisk }}</span></div>
|
||||
<div class="warning-recent">
|
||||
最近预警：<span>{{ warningRisk }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import { color } from "d3";
|
||||
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return {
|
||||
yMax:2,
|
||||
yMin:0,
|
||||
prevDayRisk:'',
|
||||
yesterdayRisk:'',
|
||||
todayRisk:'',
|
||||
tomorrowRisk:'',
|
||||
warningRisk:'',
|
||||
riskData:[],
|
||||
markLine: [],
|
||||
markPoint: [],
|
||||
markArea:[],
|
||||
future:[],
|
||||
datazoom:[]
|
||||
}
|
||||
},
|
||||
props:{
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
},
|
||||
yMax(newVal){
|
||||
console.log(newVal)
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
http.get('/risk/whole/').then((res)=>{
|
||||
this.riskData=res.data.wholerisk
|
||||
this.markPoint=res.data.markpoint
|
||||
this.markLine=res.data.markline
|
||||
this.markArea=res.data.markarea
|
||||
this.prevDayRisk=res.data.detail[0]
|
||||
this.yesterdayRisk=res.data.detail[1]
|
||||
this.todayRisk=res.data.detail[2]
|
||||
this.tomorrowRisk=res.data.detail[3]
|
||||
this.warningRisk=res.data.detail[4]
|
||||
this.future=res.data.future
|
||||
// console.log(this.riskData,this.markLine,this.markPoint[0])
|
||||
this.initChart()
|
||||
})
|
||||
|
||||
// this.initChart(this.dat)
|
||||
},
|
||||
initChart(){
|
||||
/*
|
||||
示例参考如下
|
||||
* https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
|
||||
*
|
||||
* https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
|
||||
*
|
||||
* */
|
||||
let data=this.riskData
|
||||
const future=this.future
|
||||
var myChart = echarts.init(this.$refs["whole risk"])
|
||||
var myChartFuture= echarts.init(this.$refs["future"])
|
||||
let option = {
|
||||
title: {
|
||||
text: '系统性风险指数',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel:{
|
||||
fontSize:5,
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data: data.map(function (item) {
|
||||
return item[0];
|
||||
})
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30
|
||||
}],
|
||||
// 根据阈值映射不同颜色
|
||||
visualMap: {
|
||||
top: 10,
|
||||
right: 0,
|
||||
precision:2,
|
||||
pieces: [
|
||||
{
|
||||
gt: 0,
|
||||
lte: parseFloat(this.markLine[0]),
|
||||
color: '#096'
|
||||
},
|
||||
{
|
||||
gt: parseFloat(this.markLine[0]),
|
||||
lte: parseFloat(this.markLine[1]),
|
||||
color: '#ffde33'
|
||||
},
|
||||
],
|
||||
outOfRange: {
|
||||
color: '#fa0744'
|
||||
},
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '系统性风险指数',
|
||||
type: 'line',
|
||||
data: data.map(function (item) {
|
||||
return item[1];
|
||||
}),
|
||||
//标记极端值
|
||||
markPoint:{
|
||||
symbol:'circle',
|
||||
symbolSize:10,
|
||||
data: [{
|
||||
itemStyle:{
|
||||
//标注的颜色
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'purple' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#258ddc' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
//x轴的index和y值
|
||||
coord: this.markPoint[0] // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
|
||||
// coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
|
||||
// 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
|
||||
// 而只能写成 [string, string, ...]
|
||||
}]
|
||||
|
||||
},
|
||||
markLine: {
|
||||
//阈值标记线 这里应该是动态的
|
||||
silent: true,
|
||||
symbol:'none',
|
||||
label:{ position:'middle',},
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
data: [{
|
||||
yAxis: this.markLine[0]
|
||||
}, {
|
||||
yAxis:this.markLine[1]
|
||||
},
|
||||
]
|
||||
},
|
||||
markArea:{
|
||||
label: { // 分界线上的文字标签
|
||||
// position: 'end',
|
||||
formatter: '预测值'
|
||||
},
|
||||
data:[[{
|
||||
xAxis:this.markArea[0]},
|
||||
{
|
||||
xAxis:this.markArea[1]
|
||||
// x:'100%'
|
||||
},
|
||||
]]
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
let opt2={
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid:
|
||||
|
||||
{backgroundColor: '#eeb0ae',
|
||||
left:'0%',
|
||||
show:true,
|
||||
zlevel:0,
|
||||
}
|
||||
,
|
||||
xAxis:
|
||||
{
|
||||
data:[{value:'未来一个月'}],
|
||||
axisLabel:{
|
||||
fontSize:5
|
||||
}
|
||||
// gridIndex: 0,
|
||||
},
|
||||
yAxis: {
|
||||
min:0.8,
|
||||
max:2,
|
||||
type: 'value',
|
||||
show:false,
|
||||
// boundaryGap: false,
|
||||
// gridIndex: 1
|
||||
},
|
||||
series: {
|
||||
type: 'boxplot',
|
||||
boxWidth : [2, 10],
|
||||
itemStyle: {
|
||||
clip: true
|
||||
},
|
||||
data:[{value: this.future,} ],
|
||||
// 确保箱型图显示在折线图之后
|
||||
// zlevel: 3,
|
||||
// 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处
|
||||
// ... 箱型图其他配置，如颜色、样式等
|
||||
markArea:{
|
||||
label: { // 分界线上的文字标签
|
||||
// position: 'end',
|
||||
formatter: '预测值'
|
||||
},
|
||||
itemStyle:{
|
||||
color:'yellow'
|
||||
}
|
||||
// data: [[ {
|
||||
// name: '平均值到最大值',
|
||||
// type: 'average'
|
||||
// },
|
||||
// {
|
||||
// type: 'max'
|
||||
// }]]
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
return [
|
||||
// 'Experiment ' + param.name + ': ',
|
||||
'最大值: ' + future[4],
|
||||
'均值+标准差: ' + future[3],
|
||||
'中位数: ' +future[2],
|
||||
'均值-标准差: ' + future[1],
|
||||
'最小值: ' + future[0]
|
||||
].join('<br/>');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChartFuture.setOption(opt2)
|
||||
const that=this
|
||||
myChart.on('datazoom', function (params) {
|
||||
// Y轴最大值
|
||||
this.yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
|
||||
// Y轴最小值
|
||||
this.yMin = myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
|
||||
|
||||
that.$nextTick(() => {
|
||||
// 设置 myChartFuture 的 y 轴值
|
||||
myChartFuture.setOption({
|
||||
yAxis: {
|
||||
min: this.yMin,
|
||||
max: this.yMax
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.warning-component {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.warning-dates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
margin: 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.warning-recent {
|
||||
color: #ff4d4f;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -240,27 +240,18 @@
|
|||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块1
|
||||
板块3
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
<div class="charts-row" style="">
|
||||
<div style="flex:0 1 33%">
|
||||
<div style="flex:0 1 100%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<span style="padding-right: 50px;">节点类型总数</span>
|
||||
<span style="padding-left: 50px;">边类型总数</span>
|
||||
</div>
|
||||
|
||||
|
||||
<systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<div style="flex:0 1 34%">
|
||||
<!-- <div style="flex:0 1 34%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
|
|
@ -287,7 +278,7 @@
|
|||
<span style="padding-left: 50px;">边类型总数</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
|
|
@ -360,16 +351,22 @@ import LineChart from './components/LineChart.vue'
|
|||
import http from "@/utils/request";
|
||||
import * as echarts from "echarts";
|
||||
import { color } from 'd3';
|
||||
import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
|
||||
import dimensionComponent from "@/components/dimensionComponent";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
LineChart,
|
||||
systemRiskComponent,
|
||||
dimensionComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
compName:'systemRiskComponent',
|
||||
datazoom:[],
|
||||
scale: 0,
|
||||
width: 5760,
|
||||
height: 1080,
|
||||
|
|
@ -669,6 +666,13 @@ export default {
|
|||
}, delays);
|
||||
};
|
||||
},
|
||||
changeComp(mesg){
|
||||
this.datazoom=mesg
|
||||
console.log(mesg)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 大屏自适应部分
|
||||
|
|
@ -676,6 +680,25 @@ export default {
|
|||
window.removeEventListener("resize",this.debounce(this.setScale))
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
|
||||
// 自动登录
|
||||
const params = new URLSearchParams();
|
||||
params.append('username', 'gongdragon');
|
||||
params.append('password', 'gwl123');
|
||||
http.post('/users/login/', params)
|
||||
.then((res)=>{
|
||||
if (res.data.message===1){
|
||||
this.loading = false
|
||||
let user={token:res.data.data,name:'gongdragon',stats:res.data.stats}
|
||||
this.$store.commit('login',user)
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.data,
|
||||
type: 'warning'
|
||||
});
|
||||
this.loading = false
|
||||
}
|
||||
}).then(()=>{
|
||||
// 获取股票风险 圆圈类饼图部分
|
||||
http.get('/warning/get_warning_count/').then((res)=> {
|
||||
// console.log('get_warning_count',res);
|
||||
|
|
@ -780,11 +803,19 @@ export default {
|
|||
name: '上海纳尔实业股份有限公司',//公司名
|
||||
date: '2024-01',//时间（年份+季度）
|
||||
}}).then(response => {
|
||||
console.log('Response',response);
|
||||
|
||||
// let radarDatas// 存放所有数据项
|
||||
// radarDatas = response.data.data.map(item => {
|
||||
// // 单个数据项 转化为echarts格式
|
||||
// let radarData = [item.投资关系,item.操盘模式,item.财务状态,item.运行状态,item.规模扩张,item.声誉风险,item.外部环境]
|
||||
// return radarData
|
||||
// })
|
||||
// console.log('radarDatas',radarDatas)
|
||||
let radarData = []
|
||||
for (let i in response.data.data) {
|
||||
if (i !== '健康指数' && i !== '等级' && typeof response.data.data[i] === 'number') radarData.push(response.data.data[i])
|
||||
}
|
||||
// console.log('radarData',radarData)
|
||||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||||
const option_3 = {
|
||||
title: {
|
||||
|
|
@ -948,6 +979,11 @@ export default {
|
|||
// }
|
||||
// echarts1.setOption(option_1,true)
|
||||
// })
|
||||
|
||||
// 系统性风险
|
||||
this.$refs.systemRisk.getData()
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user