322 lines
7.3 KiB
Vue
322 lines
7.3 KiB
Vue
<template>
|
||
<div style="height: 85%;">
|
||
<div ref="dimension" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||
<!-- <div class="warning-component">
|
||
<div class="warning-dates">
|
||
<button class="button" @click="changeState">
|
||
<span class="text">{{ state }}</span>
|
||
<svg class="arrow" viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
|
||
</button>
|
||
<div class="date-item">前日：<span>{{ prevDayDim }}</span></div>
|
||
<div class="date-item">昨日：<span>{{ yesterdayDim }}</span></div>
|
||
<div class="date-item">今日：<span>{{ todayDim }}</span></div>
|
||
<div class="date-item">明日：<span>{{ tomorrowDim }}</span></div>
|
||
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import http from "@/utils/request";
|
||
import dimension from "../data/dimension.json"
|
||
|
||
export default {
|
||
props: {
|
||
// xData:[],
|
||
// yData: [],
|
||
// legend:String,
|
||
title:String,
|
||
zoom:{
|
||
type:Array,
|
||
default: function () {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
datazoom:[],
|
||
state:'个体风险状态',
|
||
individualRisk:[],
|
||
structureRisk:[],
|
||
spillRisk:[],
|
||
volatilityRisk:[],
|
||
markArea:[],
|
||
date:[],
|
||
detail:'',
|
||
prevDayDim:'',
|
||
yesterdayDim:'',
|
||
todayDim:'',
|
||
tomorrowDim:'',
|
||
}
|
||
},
|
||
|
||
mounted: function () {
|
||
},
|
||
watch:{
|
||
// prevDayDim(){
|
||
// return this.detail[this.state][0]
|
||
// },
|
||
// yesterdayDim(){
|
||
// return this.detail[this.state][1]
|
||
// },
|
||
// todayDim(){
|
||
// return this.detail[this.state][2]
|
||
// },
|
||
// tomorrowDim(){
|
||
// return this.detail[this.state][3]
|
||
// },
|
||
zoom(newVal){
|
||
this.datazoom=newVal
|
||
|
||
},
|
||
state(){
|
||
|
||
this.prevDayDim=this.detail[this.state][0]
|
||
this.yesterdayDim=this.detail[this.state][1]
|
||
this.todayDim=this.detail[this.state][2]
|
||
this.tomorrowDim=this.detail[this.state][3]
|
||
|
||
}
|
||
|
||
},
|
||
methods:{
|
||
getData(){
|
||
// dimension json
|
||
this.date=dimension.date
|
||
this.individualRisk=dimension.individual
|
||
this.structureRisk=dimension.structure
|
||
this.spillRisk=dimension.spill
|
||
this.volatilityRisk=dimension.volatility
|
||
this.detail=dimension.detail
|
||
this.markArea=dimension.markarea
|
||
this.prevDayDim=dimension.detail[this.state][0]
|
||
this.yesterdayDim=dimension.detail[this.state][1]
|
||
this.todayDim=dimension.detail[this.state][2]
|
||
this.tomorrowDim=dimension.detail[this.state][3]
|
||
this.initChart()
|
||
|
||
},
|
||
changeState(){
|
||
let lis=['个体风险状态','风险关联与溢出','市场系统结构','市场波动和趋势']
|
||
this.state=lis.indexOf(this.state)+1>3? '个体风险状态':lis[lis.indexOf(this.state)+1]
|
||
},
|
||
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
|
||
*
|
||
* */
|
||
var myChart = echarts.init(this.$refs["dimension"])
|
||
let option = {
|
||
title: {
|
||
text: '系统性风险指数维度分析',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.date,
|
||
axisLabel:{
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle:{
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
legend: {
|
||
top:30,
|
||
data: ['个体风险状态', '风险关联与溢出', '市场系统结构', '市场波动和趋势'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
yAxis: {
|
||
scale: true,
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel:{
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle:{
|
||
color: '#fff'
|
||
}
|
||
},
|
||
},
|
||
//以下是时间轴
|
||
dataZoom: [{
|
||
//也应该是动态的
|
||
start:80,
|
||
end:100,
|
||
type: 'slider',
|
||
dataBackground:{
|
||
lineStyle:{
|
||
color: '#fff'
|
||
},
|
||
areaStyle:{
|
||
color: '#fff'
|
||
}
|
||
},
|
||
textStyle:{
|
||
color: '#fff'
|
||
},
|
||
maxSpan:30
|
||
}],
|
||
//以上是时间轴
|
||
series: [{
|
||
name: '个体风险状态',
|
||
type: 'line',
|
||
smooth:0.8,
|
||
data: this.individualRisk
|
||
},
|
||
{
|
||
name: '风险关联与溢出',
|
||
type: 'line',
|
||
smooth:0.8,
|
||
data: this.spillRisk
|
||
},
|
||
{
|
||
name: '市场系统结构',
|
||
type: 'line',
|
||
smooth:0.8,
|
||
data: this.structureRisk
|
||
},
|
||
{
|
||
name: '市场波动和趋势',
|
||
type: 'line',
|
||
smooth:0.8,
|
||
data: this.volatilityRisk,
|
||
markArea:{
|
||
label: { // 分界线上的文字标签
|
||
// position: 'end',
|
||
formatter: '预测值'
|
||
},
|
||
data:[[{
|
||
xAxis:this.markArea[0]},
|
||
{
|
||
xAxis:this.markArea[1]},
|
||
]]
|
||
|
||
|
||
|
||
}
|
||
},
|
||
],
|
||
}
|
||
myChart.setOption(option);
|
||
// this.$nextTick(()=>{
|
||
// myChart.dispatchAction({
|
||
// type: 'dataZoom',
|
||
// batch: [{
|
||
// // 第一个 dataZoom 组件
|
||
// start: this.datazoom[0],
|
||
// end: this.datazoom[1]
|
||
// }]
|
||
// })
|
||
// })
|
||
|
||
}
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.button {
|
||
border-radius: 7px;
|
||
width: 160px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
border: 3px solid rgb(94, 255, 209);
|
||
background-color: rgb(94, 255, 209);
|
||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.137);
|
||
}
|
||
|
||
.text {
|
||
|
||
width: 70%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
//background-color: rgb(255, 255, 255);
|
||
color: black;
|
||
}
|
||
|
||
.arrow path {
|
||
fill: rgb(19, 19, 19);
|
||
}
|
||
|
||
.button:hover .arrow {
|
||
animation: slide-in-left 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||
}
|
||
|
||
@keyframes slide-in-left {
|
||
0% {
|
||
transform: translateX(-8px);
|
||
opacity: 0;
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(0px);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.button:active {
|
||
transform: scale(0.97);
|
||
}
|
||
.warning-component {
|
||
background-color: #ffffff;
|
||
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> |