截止主任良乡汇报：widerscreen1和bigscreen1是主版本
This commit is contained in:
GongDragon
parent
db77dc0708
commit
2278b7ac94
|
|
@ -16,13 +16,13 @@
|
|||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const distance = 2500;
|
||||
const distance = 2000;
|
||||
let isRotationActive = true;
|
||||
|
||||
// Random tree
|
||||
const N = 1500;
|
||||
const N = 1200;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/300) })),
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/150) })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
|
|
@ -37,9 +37,10 @@
|
|||
.nodeAutoColorBy('group')
|
||||
.nodeLabel('id')
|
||||
.linkDirectionalParticles(4)
|
||||
.linkDirectionalParticleWidth(2)
|
||||
.linkDirectionalParticleWidth(4)
|
||||
.linkDirectionalParticleSpeed(d => 4 * 0.001)// d.value
|
||||
.linkWidth(2)
|
||||
.linkWidth(4)
|
||||
.nodeRelSize(6)
|
||||
// .nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
|
||||
// const sprite = new SpriteText(node.id);
|
||||
// sprite.material.depthWrite = false; // make sprite background transparent
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
// .linkDirectionalArrowRelPos(1)// 设置箭头位置
|
||||
.onNodeClick(node => {
|
||||
// Aim at node from outside it
|
||||
const distance = 2400;
|
||||
const distance = 1800;
|
||||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
||||
|
||||
const newPos = node.x || node.y || node.z
|
||||
|
|
@ -78,7 +79,7 @@
|
|||
y: 0,
|
||||
z: distance * Math.cos(angle),
|
||||
});
|
||||
angle += Math.PI / 400;
|
||||
angle += Math.PI / 500;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
|
|
@ -61,7 +65,7 @@ html {
|
|||
|
||||
.module-box {
|
||||
display:flex;
|
||||
justify-self: space-between;
|
||||
justify-content: space-evenly;
|
||||
margin:10px;
|
||||
}
|
||||
.d-flex {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
|
||||
<iframe src="/static/3d-force-graph/index0.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
52
src/bigscreen1/CapsuleChart.vue
Normal file
52
src/bigscreen1/CapsuleChart.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
colorsChart:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
dataChart:{
|
||||
type:Array,
|
||||
default:()=>[
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: this.dataChart,
|
||||
colors: this.colorsChart,
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
70
src/bigscreen1/Chart.vue
Normal file
70
src/bigscreen1/Chart.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:200px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
color:'#f60', //系列柱颜色
|
||||
tooltip: {},
|
||||
// legend: {
|
||||
// data: ['销量']
|
||||
// },
|
||||
xAxis: {
|
||||
data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data:this.items || [10,20,30,40,50,60,70]
|
||||
}
|
||||
],
|
||||
grid:{
|
||||
left:'5%',
|
||||
right:'5%',
|
||||
top:'10%',
|
||||
bottom:'5%',
|
||||
containLabel:true
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
105
src/bigscreen1/LineChart.vue
Normal file
105
src/bigscreen1/LineChart.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "年度生产量",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14,
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
bottom: 25,
|
||||
top: "18%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
99
src/bigscreen1/Map.vue
Normal file
99
src/bigscreen1/Map.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:350px;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initChart();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'北京',
|
||||
value:[116.405285,39.904989,20]
|
||||
},
|
||||
{
|
||||
name:'上海',
|
||||
value:[121.472644,31.231706,20]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
584
src/bigscreen1/ModuleHeader.vue
Normal file
584
src/bigscreen1/ModuleHeader.vue
Normal file
|
|
@ -0,0 +1,584 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<!-- 股票市场 -->
|
||||
<dv-border-box-13 style="width:100%;height:200px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">股票市场</h3>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<span >低风险</span>
|
||||
<span >中风险</span>
|
||||
<span >高风险</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
<!-- 雷达图 -->
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<div ref="echarts_3" style="height:80%;width:100%"></div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<!-- 3D -->
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<!-- 债券市场 -->
|
||||
<dv-border-box-13 style="width:100%;height:200px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">债券市场</h3>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<span >低风险</span>
|
||||
<span >中风险</span>
|
||||
<span >高风险</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
|
||||
<Map />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一行二等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<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-scroll-board :config="config22" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px"></h3>
|
||||
<!-- 维度时序 -->
|
||||
<dimension-component :zoom="datazoom" ref="dimension"/>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
||||
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Map from './Map.vue'
|
||||
import RadarChart from './RadarChart.vue'
|
||||
import CapsuleChart from './CapsuleChart.vue';
|
||||
import LineChart from './LineChart.vue'
|
||||
import dimensionComponent from "./components/dimensionComponent";
|
||||
|
||||
import http from "@/utils/request";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
export default {
|
||||
components:{
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart,
|
||||
dimensionComponent
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: [
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
],
|
||||
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
},
|
||||
config2:{
|
||||
data: [66, 45],
|
||||
shape: 'roundRect'
|
||||
},
|
||||
config3:{
|
||||
data: [
|
||||
{
|
||||
name: '周口',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '南阳',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 71
|
||||
},
|
||||
{
|
||||
name: '驻马店',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: '新乡',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '信阳',
|
||||
value: 35
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 15
|
||||
}
|
||||
],
|
||||
img: [
|
||||
require('../assets/img/1st.png'),
|
||||
require('../assets/img/2st.png'),
|
||||
require('../assets/img/3st.png'),
|
||||
require('../assets/img/4st.png'),
|
||||
require('../assets/img/5st.png'),
|
||||
require('../assets/img/6st.png'),
|
||||
require('../assets/img/7st.png'),
|
||||
]
|
||||
},
|
||||
config4:{
|
||||
centerPoint: [0.48, 0.35],
|
||||
points: [
|
||||
{
|
||||
position: [0.52, 0.235],
|
||||
text: '新乡'
|
||||
},
|
||||
{
|
||||
position: [0.43, 0.29],
|
||||
text: '焦作'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.35],
|
||||
text: '开封'
|
||||
},
|
||||
{
|
||||
position: [0.53, 0.47],
|
||||
text: '许昌'
|
||||
},
|
||||
{
|
||||
position: [0.45, 0.54],
|
||||
text: '平顶山'
|
||||
},
|
||||
{
|
||||
position: [0.36, 0.38],
|
||||
text: '洛阳'
|
||||
},
|
||||
{
|
||||
position: [0.62, 0.55],
|
||||
text: '周口'
|
||||
},
|
||||
{
|
||||
position: [0.56, 0.56],
|
||||
text: '漯河'
|
||||
},
|
||||
{
|
||||
position: [0.37, 0.66],
|
||||
text: '南阳'
|
||||
},
|
||||
{
|
||||
position: [0.55, 0.81],
|
||||
text: '信阳'
|
||||
},
|
||||
{
|
||||
position: [0.55, 0.67],
|
||||
text: '驻马店'
|
||||
},
|
||||
{
|
||||
position: [0.37, 0.29],
|
||||
text: '济源'
|
||||
},
|
||||
{
|
||||
position: [0.20, 0.36],
|
||||
text: '三门峡'
|
||||
},
|
||||
{
|
||||
position: [0.76, 0.41],
|
||||
text: '商丘'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.18],
|
||||
text: '鹤壁'
|
||||
},
|
||||
{
|
||||
position: [0.68, 0.17],
|
||||
text: '濮阳'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.10],
|
||||
text: '安阳'
|
||||
}
|
||||
],
|
||||
bgImgUrl: require('../assets/img/map.jpg'),
|
||||
centerPointImg: {
|
||||
url: require('../assets/img/mapCenterPoint.png')
|
||||
},
|
||||
pointsImg: {
|
||||
url: require('../assets/img/mapPoint.png')
|
||||
}
|
||||
},
|
||||
|
||||
// 表格设置
|
||||
config1 : {
|
||||
header: ['主体代码 ', '行业', '     预警时刻','   风险水平','风险类型 '],
|
||||
data: [
|
||||
{
|
||||
主体代码:'688001.SH',
|
||||
行业:'计算机',
|
||||
预警时刻:'2023/6/29 16:00',
|
||||
风险水平:'严重',
|
||||
风险类型:'流动风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
headerBGC:'rgba(61,89,171,0.5)',
|
||||
align: ['right'],
|
||||
|
||||
|
||||
},
|
||||
config22 :
|
||||
{
|
||||
data: [
|
||||
['教育', 7],
|
||||
['金融业', 1],
|
||||
['房地产业', 2],
|
||||
['制造业', 3],
|
||||
['房地产业', 4],
|
||||
['批发和零售业', 5],
|
||||
|
||||
],
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
|
||||
|
||||
},
|
||||
items:[
|
||||
{
|
||||
name: '股权质押',
|
||||
value: 683
|
||||
},
|
||||
{
|
||||
name: '转让股价',
|
||||
value: 234
|
||||
},
|
||||
{
|
||||
name: '股份增持',
|
||||
value: 240
|
||||
},
|
||||
{
|
||||
name: '债券发行',
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: '高管变动',
|
||||
value: 345
|
||||
},
|
||||
{
|
||||
name: '产品发布',
|
||||
value: 320
|
||||
},
|
||||
{
|
||||
name: '破产',
|
||||
value: 280
|
||||
},
|
||||
{
|
||||
name: '业绩下滑',
|
||||
value: 271
|
||||
},
|
||||
],
|
||||
//
|
||||
date:[],
|
||||
rate:[],
|
||||
macro:[],
|
||||
montary:[],
|
||||
income:[],
|
||||
investment:[],
|
||||
loan:[],
|
||||
lever:[],
|
||||
other:[],
|
||||
whole:[],
|
||||
title:['利率','货币','信贷','宏观指标','收入和融资','银行理财','整体杠杆','其他']
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// 自动登录
|
||||
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(
|
||||
"/health/health_search/",
|
||||
{params:{
|
||||
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 = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['纳尔实业', '平安保险','招商银行'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['red', 'yellow', 'blue'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: '投资关系', max: 100, color:'#fff'},
|
||||
{ name: '操盘模式', max: 100, color:'#fff' },
|
||||
{ name: '财务状态', max: 100, color:'#fff' },
|
||||
{ name: '运行状态', max: 100, color:'#fff' },
|
||||
{ name: '规模扩张', max: 100, color:'#fff' },
|
||||
{ name: '声誉风险', max: 100, color:'#fff' },
|
||||
{ name: '外部环境', max: 100, color:'#fff' }
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
|
||||
name : '纳尔实业'
|
||||
},
|
||||
{
|
||||
value : [50.033,45,58.8,62.73,10,65,50],
|
||||
name : '平安保险'
|
||||
},
|
||||
{
|
||||
value : [43.064,50,53.6,64.23,10,75,50],
|
||||
name : '招商银行'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
echarts3.setOption(option)
|
||||
})
|
||||
// 轮播图
|
||||
http.get('/anomaly/item_anomaly/',{params:{
|
||||
sc:'stock',
|
||||
}}).then((res)=>{
|
||||
// console.log(res.data.data);
|
||||
const formatData = res.data.data.map(item => {
|
||||
return [item.监测时间,item.名称,item.异常关联类型]
|
||||
})
|
||||
const config22 = {
|
||||
header: ['监测时间', '名称', '异常关联类型'],
|
||||
data: formatData,
|
||||
// headerBGC:'black',
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
}
|
||||
// console.log('formatData',formatData);
|
||||
this.config22 = config22
|
||||
})
|
||||
|
||||
//系统性
|
||||
this.$refs.dimension.getData()
|
||||
|
||||
// 宏观分析折线图
|
||||
http.get('/risk/future_risk/').then((res)=>{
|
||||
this.date=res.data.date
|
||||
this.rate=res.data.rate
|
||||
this.macro=res.data.macro
|
||||
this.montary=res.data.montary
|
||||
this.income=res.data.income
|
||||
this.investment=res.data.investment
|
||||
this.loan=res.data.loan
|
||||
this.lever=res.data.lever
|
||||
this.other=res.data.other
|
||||
this.whole.push(this.rate)
|
||||
this.whole.push(this.montary)
|
||||
this.whole.push(this.loan)
|
||||
this.whole.push(this.macro)
|
||||
this.whole.push(this.income)
|
||||
this.whole.push(this.investment)
|
||||
this.whole.push(this.lever)
|
||||
this.whole.push(this.other)
|
||||
}).then(()=>{
|
||||
for(let i = 0; i < 6; i++) {
|
||||
// let chartContainer = 'chartContainer' + i
|
||||
let echart = echarts.init(this.$refs.chartContainer)
|
||||
|
||||
const option = {
|
||||
title:{
|
||||
text:this.title[4],
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
left:'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
top:30,
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.date,
|
||||
axisLabel: {//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
grid:{
|
||||
containLabel:true
|
||||
},
|
||||
series: this.whole[4]
|
||||
};
|
||||
echart.setOption(option)
|
||||
}}
|
||||
)
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
156
src/bigscreen1/ModuleMain.vue
Normal file
156
src/bigscreen1/ModuleMain.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<!-- 一行二等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
|
||||
<!-- <CapsuleChart :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"/> -->
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<dv-scroll-board :config="config1" style="width:95%;height:220px;justify-content: center;align-items: center" />
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<LineChart />
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<dv-scroll-board :config="config2" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CapsuleChart from './CapsuleChart.vue';
|
||||
import LineChart from './LineChart.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
// 表格设置
|
||||
config1 : {
|
||||
header: ['主体代码 ', '行业', '     预警时刻','   风险水平','风险类型 '],
|
||||
data: [
|
||||
{
|
||||
主体代码:'688001.SH',
|
||||
行业:'计算机',
|
||||
预警时刻:'2023/6/29 16:00',
|
||||
风险水平:'严重',
|
||||
风险类型:'流动风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
headerBGC:'rgba(61,89,171,0.5)',
|
||||
align: ['right'],
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
config2 :
|
||||
{
|
||||
data: [
|
||||
['教育', 7],
|
||||
['金融业', 1],
|
||||
['房地产业', 2],
|
||||
['制造业', 3],
|
||||
['房地产业', 4],
|
||||
['批发和零售业', 5],
|
||||
|
||||
],
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
|
||||
|
||||
},
|
||||
|
||||
items:[
|
||||
{
|
||||
name: '股权质押',
|
||||
value: 683
|
||||
},
|
||||
{
|
||||
name: '转让股价',
|
||||
value: 234
|
||||
},
|
||||
{
|
||||
name: '股份增持',
|
||||
value: 240
|
||||
},
|
||||
{
|
||||
name: '债券发行',
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: '高管变动',
|
||||
value: 345
|
||||
},
|
||||
{
|
||||
name: '产品发布',
|
||||
value: 320
|
||||
},
|
||||
{
|
||||
name: '破产',
|
||||
value: 280
|
||||
},
|
||||
{
|
||||
name: '业绩下滑',
|
||||
value: 271
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
src/bigscreen1/ModuleTitle.vue
Normal file
32
src/bigscreen1/ModuleTitle.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<!-- 标题 一行三等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 30%">
|
||||
<dv-decoration-10 style="height:5px;" />
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 40%">
|
||||
<div class="d-flex">
|
||||
<dv-decoration-8 style="height:50px;flex:1;" />
|
||||
<h2 style="font-size: 20px;">资本市场系统风险监测与预警平台</h2>
|
||||
<!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
|
||||
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 30%">
|
||||
<dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
103
src/bigscreen1/RadarChart.vue
Normal file
103
src/bigscreen1/RadarChart.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:340px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let
|
||||
option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
|
||||
data: ['第一标准', '第二标准','第三标准'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['#4c95d9', '#f6731b', '#8cd43f'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'test1', max: 6500},
|
||||
{ name: 'test2', max: 16000},
|
||||
{ name: 'test3', max: 30000},
|
||||
{ name: 'test4', max: 38000},
|
||||
{ name: 'test5', max: 52000},
|
||||
{ name: 'test6', max: 25000}
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [2400, 10000, 28000, 35000, 50000, 19000],
|
||||
name : '第一标准'
|
||||
},
|
||||
{
|
||||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name : '第二标准'
|
||||
},
|
||||
{
|
||||
value : [6000, 14000, 18000, 21000, 32000, 11000],
|
||||
name : '第三标准'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
src/bigscreen1/ScaleBox.vue
Normal file
81
src/bigscreen1/ScaleBox.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div
|
||||
class="ScaleBox"
|
||||
ref="ScaleBox"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScaleBox",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
scale: 0,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
},
|
||||
methods: {
|
||||
getScale() {
|
||||
// 固定好16：9的宽高比，计算出最合适的缩放比
|
||||
const { width, height } = this;
|
||||
const wh = window.innerHeight / height;
|
||||
const ww = window.innerWidth / width;
|
||||
console.log(ww < wh ? ww : wh);
|
||||
return ww < wh ? ww : wh;
|
||||
},
|
||||
setScale() {
|
||||
// 获取到缩放比例，设置它
|
||||
this.scale = this.getScale();
|
||||
if (this.$refs.ScaleBox) {
|
||||
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
||||
}
|
||||
},
|
||||
debounce(fn, delay) {
|
||||
const delays = delay || 500;
|
||||
let timer;
|
||||
return function () {
|
||||
const th = this;
|
||||
const args = arguments;
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
timer = null;
|
||||
fn.apply(th, args);
|
||||
}, delays);
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#ScaleBox {
|
||||
--scale: 1;
|
||||
}
|
||||
.ScaleBox {
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
52
src/bigscreen1/components/CapsuleChart.vue
Normal file
52
src/bigscreen1/components/CapsuleChart.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
colorsChart:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
dataChart:{
|
||||
type:Array,
|
||||
default:()=>[
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: this.dataChart,
|
||||
colors: this.colorsChart,
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
105
src/bigscreen1/components/LineChart.vue
Normal file
105
src/bigscreen1/components/LineChart.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "年度生产量",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14,
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
bottom: 25,
|
||||
top: "18%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
src/bigscreen1/components/Map.vue
Normal file
104
src/bigscreen1/components/Map.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:80%;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initChart();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'鄂尔多斯',
|
||||
value:[109.781327, 39.608266,20]
|
||||
},
|
||||
{
|
||||
name:'张家口',
|
||||
value:[114.87, 40.82,5]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
},
|
||||
{
|
||||
name:'武汉',
|
||||
value:[114.31, 30.52,30]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
src/bigscreen1/components/RadarChart.vue
Normal file
103
src/bigscreen1/components/RadarChart.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:80%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let
|
||||
option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
|
||||
data: ['第一标准', '第二标准','第三标准'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['#4c95d9', '#f6731b', '#8cd43f'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'test1', max: 6500},
|
||||
{ name: 'test2', max: 16000},
|
||||
{ name: 'test3', max: 30000},
|
||||
{ name: 'test4', max: 38000},
|
||||
{ name: 'test5', max: 52000},
|
||||
{ name: 'test6', max: 25000}
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [2400, 10000, 28000, 35000, 50000, 19000],
|
||||
name : '第一标准'
|
||||
},
|
||||
{
|
||||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name : '第二标准'
|
||||
},
|
||||
{
|
||||
value : [6000, 14000, 18000, 21000, 32000, 11000],
|
||||
name : '第三标准'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
323
src/bigscreen1/components/dimensionComponent.vue
Normal file
323
src/bigscreen1/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<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";
|
||||
|
||||
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(){
|
||||
http.get('/risk/dimension/').then((res)=>{
|
||||
this.date=res.data.date
|
||||
this.individualRisk=res.data.individual
|
||||
this.structureRisk=res.data.structure
|
||||
this.spillRisk=res.data.spill
|
||||
this.volatilityRisk=res.data.volatility
|
||||
this.detail=res.data.detail
|
||||
this.markArea=res.data.markarea
|
||||
this.prevDayDim=res.data.detail[this.state][0]
|
||||
this.yesterdayDim=res.data.detail[this.state][1]
|
||||
this.todayDim=res.data.detail[this.state][2]
|
||||
this.tomorrowDim=res.data.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>
|
||||
156
src/bigscreen1/components/riskIndexComponent.vue
Normal file
156
src/bigscreen1/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
156
src/bigscreen1/components/riskIndexComponent1.vue
Normal file
156
src/bigscreen1/components/riskIndexComponent1.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
368
src/bigscreen1/components/systemRiskComponent.vue
Normal file
368
src/bigscreen1/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>
|
||||
37
src/bigscreen1/大屏.vue
Normal file
37
src/bigscreen1/大屏.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="content bg">
|
||||
|
||||
<!-- <dv-full-screen-container> -->
|
||||
<scale-box>
|
||||
<ModuleTitle />
|
||||
<ModuleHeader />
|
||||
|
||||
</scale-box>
|
||||
<!-- </dv-full-screen-container> -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModuleTitle from './ModuleTitle.vue'
|
||||
import ModuleHeader from './ModuleHeader.vue'
|
||||
import ModuleMain from './ModuleMain.vue'
|
||||
import ScaleBox from './ScaleBox.vue'
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components:{
|
||||
ModuleTitle,
|
||||
ModuleHeader,
|
||||
ModuleMain,
|
||||
ScaleBox,// 大屏根据显示器尺寸大小自适应
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '../assets/css/index.css';
|
||||
</style>
|
||||
52
src/bigscreen2/CapsuleChart.vue
Normal file
52
src/bigscreen2/CapsuleChart.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
colorsChart:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
dataChart:{
|
||||
type:Array,
|
||||
default:()=>[
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: this.dataChart,
|
||||
colors: this.colorsChart,
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
70
src/bigscreen2/Chart.vue
Normal file
70
src/bigscreen2/Chart.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:200px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
color:'#f60', //系列柱颜色
|
||||
tooltip: {},
|
||||
// legend: {
|
||||
// data: ['销量']
|
||||
// },
|
||||
xAxis: {
|
||||
data: ['1月', '2月', '3月', '裤子', '高跟鞋', '袜子'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data:this.items || [10,20,30,40,50,60,70]
|
||||
}
|
||||
],
|
||||
grid:{
|
||||
left:'5%',
|
||||
right:'5%',
|
||||
top:'10%',
|
||||
bottom:'5%',
|
||||
containLabel:true
|
||||
}
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
105
src/bigscreen2/LineChart.vue
Normal file
105
src/bigscreen2/LineChart.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "年度生产量",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14,
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
bottom: 25,
|
||||
top: "18%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
99
src/bigscreen2/Map.vue
Normal file
99
src/bigscreen2/Map.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:350px;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initChart();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'北京',
|
||||
value:[116.405285,39.904989,20]
|
||||
},
|
||||
{
|
||||
name:'上海',
|
||||
value:[121.472644,31.231706,20]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
535
src/bigscreen2/ModuleHeader.vue
Normal file
535
src/bigscreen2/ModuleHeader.vue
Normal file
|
|
@ -0,0 +1,535 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<!-- 股票市场 -->
|
||||
<dv-border-box-13 style="width:100%;height:200px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">股票市场</h3>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1100</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1184</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1254</h1></dv-decoration-9>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<span >低风险</span>
|
||||
<span >中风险</span>
|
||||
<span >高风险</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
<!-- 雷达图 -->
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<div ref="echarts_3" style="height:80%;width:100%"></div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<!-- 3D -->
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-1 style="width:100%;height:600px;">
|
||||
<!-- 图谱 -->
|
||||
<iframe src="/static/3d-force-graph/index1.html" ref="iframe" width="100%" height="600px" scrolling="no"></iframe>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<!-- 债券市场 -->
|
||||
<dv-border-box-13 style="width:100%;height:200px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">债券市场</h3>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">1862</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">441</h1></dv-decoration-9>
|
||||
<dv-decoration-9 style="width:120px;height:120px;" dur=5><h1 style="color: rgba(255,215,0);">87</h1></dv-decoration-9>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-evenly;align-items: center;">
|
||||
<span >低风险</span>
|
||||
<span >中风险</span>
|
||||
<span >高风险</span>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
|
||||
<dv-border-box-13 style="width:100%;height:400px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">区域分析</h3>
|
||||
<Map />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一行二等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<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-scroll-board :config="config22" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px"></h3>
|
||||
<!-- 维度时序 -->
|
||||
<dimension-component :zoom="datazoom" ref="dimension"/>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
||||
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Map from './Map.vue'
|
||||
import RadarChart from './RadarChart.vue'
|
||||
import CapsuleChart from './CapsuleChart.vue';
|
||||
import LineChart from './LineChart.vue'
|
||||
import dimensionComponent from "./components/dimensionComponent";
|
||||
|
||||
import http from "@/utils/request";
|
||||
import * as echarts from "echarts";
|
||||
// 数据部分
|
||||
import lunboData from './data/lunbo.json'
|
||||
import hongguanData from './data/hongguan.json'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
Map,
|
||||
RadarChart,
|
||||
CapsuleChart,
|
||||
LineChart,
|
||||
dimensionComponent
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: [
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
],
|
||||
colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
},
|
||||
config2:{
|
||||
data: [66, 45],
|
||||
shape: 'roundRect'
|
||||
},
|
||||
config3:{
|
||||
data: [
|
||||
{
|
||||
name: '周口',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '南阳',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 71
|
||||
},
|
||||
{
|
||||
name: '驻马店',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: '新乡',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '信阳',
|
||||
value: 35
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 15
|
||||
}
|
||||
],
|
||||
img: [
|
||||
require('../assets/img/1st.png'),
|
||||
require('../assets/img/2st.png'),
|
||||
require('../assets/img/3st.png'),
|
||||
require('../assets/img/4st.png'),
|
||||
require('../assets/img/5st.png'),
|
||||
require('../assets/img/6st.png'),
|
||||
require('../assets/img/7st.png'),
|
||||
]
|
||||
},
|
||||
config4:{
|
||||
centerPoint: [0.48, 0.35],
|
||||
points: [
|
||||
{
|
||||
position: [0.52, 0.235],
|
||||
text: '新乡'
|
||||
},
|
||||
{
|
||||
position: [0.43, 0.29],
|
||||
text: '焦作'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.35],
|
||||
text: '开封'
|
||||
},
|
||||
{
|
||||
position: [0.53, 0.47],
|
||||
text: '许昌'
|
||||
},
|
||||
{
|
||||
position: [0.45, 0.54],
|
||||
text: '平顶山'
|
||||
},
|
||||
{
|
||||
position: [0.36, 0.38],
|
||||
text: '洛阳'
|
||||
},
|
||||
{
|
||||
position: [0.62, 0.55],
|
||||
text: '周口'
|
||||
},
|
||||
{
|
||||
position: [0.56, 0.56],
|
||||
text: '漯河'
|
||||
},
|
||||
{
|
||||
position: [0.37, 0.66],
|
||||
text: '南阳'
|
||||
},
|
||||
{
|
||||
position: [0.55, 0.81],
|
||||
text: '信阳'
|
||||
},
|
||||
{
|
||||
position: [0.55, 0.67],
|
||||
text: '驻马店'
|
||||
},
|
||||
{
|
||||
position: [0.37, 0.29],
|
||||
text: '济源'
|
||||
},
|
||||
{
|
||||
position: [0.20, 0.36],
|
||||
text: '三门峡'
|
||||
},
|
||||
{
|
||||
position: [0.76, 0.41],
|
||||
text: '商丘'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.18],
|
||||
text: '鹤壁'
|
||||
},
|
||||
{
|
||||
position: [0.68, 0.17],
|
||||
text: '濮阳'
|
||||
},
|
||||
{
|
||||
position: [0.59, 0.10],
|
||||
text: '安阳'
|
||||
}
|
||||
],
|
||||
bgImgUrl: require('../assets/img/map.jpg'),
|
||||
centerPointImg: {
|
||||
url: require('../assets/img/mapCenterPoint.png')
|
||||
},
|
||||
pointsImg: {
|
||||
url: require('../assets/img/mapPoint.png')
|
||||
}
|
||||
},
|
||||
|
||||
// 表格设置
|
||||
config1 : {
|
||||
header: ['主体代码 ', '行业', '     预警时刻','   风险水平','风险类型 '],
|
||||
data: [
|
||||
{
|
||||
主体代码:'688001.SH',
|
||||
行业:'计算机',
|
||||
预警时刻:'2023/6/29 16:00',
|
||||
风险水平:'严重',
|
||||
风险类型:'流动风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
headerBGC:'rgba(61,89,171,0.5)',
|
||||
align: ['right'],
|
||||
|
||||
|
||||
},
|
||||
config22 :
|
||||
{
|
||||
data: [
|
||||
['教育', 7],
|
||||
['金融业', 1],
|
||||
['房地产业', 2],
|
||||
['制造业', 3],
|
||||
['房地产业', 4],
|
||||
['批发和零售业', 5],
|
||||
|
||||
],
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
|
||||
|
||||
},
|
||||
items:[
|
||||
{
|
||||
name: '股权质押',
|
||||
value: 683
|
||||
},
|
||||
{
|
||||
name: '转让股价',
|
||||
value: 234
|
||||
},
|
||||
{
|
||||
name: '股份增持',
|
||||
value: 240
|
||||
},
|
||||
{
|
||||
name: '债券发行',
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: '高管变动',
|
||||
value: 345
|
||||
},
|
||||
{
|
||||
name: '产品发布',
|
||||
value: 320
|
||||
},
|
||||
{
|
||||
name: '破产',
|
||||
value: 280
|
||||
},
|
||||
{
|
||||
name: '业绩下滑',
|
||||
value: 271
|
||||
},
|
||||
],
|
||||
//
|
||||
date:[],
|
||||
rate:[],
|
||||
macro:[],
|
||||
montary:[],
|
||||
income:[],
|
||||
investment:[],
|
||||
loan:[],
|
||||
lever:[],
|
||||
other:[],
|
||||
whole:[],
|
||||
title:['利率','货币','信贷','宏观指标','收入和融资','银行理财','整体杠杆','其他']
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// 健康指数 雷达图
|
||||
let radarData = [
|
||||
{
|
||||
value : [82.44588614888224,25,54.00000000000001,58.56999999999999,20,65,5],
|
||||
name : '纳尔实业'
|
||||
},
|
||||
{
|
||||
value : [50.033,45,58.8,62.73,10,65,50],
|
||||
name : '平安保险'
|
||||
},
|
||||
{
|
||||
value : [43.064,50,53.6,64.23,10,75,50],
|
||||
name : '招商银行'
|
||||
}]
|
||||
console.log('radarData',radarData);
|
||||
const echarts3 = echarts.init(this.$refs.echarts_3)
|
||||
const option = {
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['纳尔实业', '平安保险','招商银行'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['red', 'yellow', 'blue'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: '投资关系', max: 100, color:'#fff'},
|
||||
{ name: '操盘模式', max: 100, color:'#fff' },
|
||||
{ name: '财务状态', max: 100, color:'#fff' },
|
||||
{ name: '运行状态', max: 100, color:'#fff' },
|
||||
{ name: '规模扩张', max: 100, color:'#fff' },
|
||||
{ name: '声誉风险', max: 100, color:'#fff' },
|
||||
{ name: '外部环境', max: 100, color:'#fff' }
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : radarData
|
||||
}]
|
||||
};
|
||||
echarts3.setOption(option)
|
||||
|
||||
// 轮播图
|
||||
const formatData = lunboData.map(item => {
|
||||
return [item.监测时间,item.名称,item.异常关联类型]
|
||||
})
|
||||
const config22 = {
|
||||
header: ['监测时间', '名称', '异常关联类型'],
|
||||
data: formatData,
|
||||
// headerBGC:'black',
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
}
|
||||
// console.log('formatData',formatData);
|
||||
this.config22 = config22
|
||||
|
||||
//系统性
|
||||
this.$refs.dimension.getData()
|
||||
|
||||
// 宏观分析折线图
|
||||
this.date=hongguanData.date
|
||||
this.rate=hongguanData.rate
|
||||
this.macro=hongguanData.macro
|
||||
this.montary=hongguanData.montary
|
||||
this.income=hongguanData.income
|
||||
this.investment=hongguanData.investment
|
||||
this.loan=hongguanData.loan
|
||||
this.lever=hongguanData.lever
|
||||
this.other=hongguanData.other
|
||||
this.whole.push(this.rate)
|
||||
this.whole.push(this.montary)
|
||||
this.whole.push(this.loan)
|
||||
this.whole.push(this.macro)
|
||||
this.whole.push(this.income)
|
||||
this.whole.push(this.investment)
|
||||
this.whole.push(this.lever)
|
||||
this.whole.push(this.other)
|
||||
|
||||
for(let i = 0; i < 6; i++) {
|
||||
// let chartContainer = 'chartContainer' + i
|
||||
let echart = echarts.init(this.$refs.chartContainer)
|
||||
const option = {
|
||||
title:{
|
||||
text:this.title[4],
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
left:'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
top:30,
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.date,
|
||||
axisLabel: {//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
}
|
||||
},
|
||||
},
|
||||
grid:{
|
||||
containLabel:true
|
||||
},
|
||||
series: this.whole[4]
|
||||
};
|
||||
echart.setOption(option)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
156
src/bigscreen2/ModuleMain.vue
Normal file
156
src/bigscreen2/ModuleMain.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<!-- 一行二等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">舆情预警</h3>
|
||||
<!-- <CapsuleChart :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"/> -->
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<dv-scroll-board :config="config1" style="width:95%;height:220px;justify-content: center;align-items: center" />
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">系统性风险指数</h3>
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<LineChart />
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">异常监测结果</h3>
|
||||
<!-- <CapsuleChart :dataChart="items"/> -->
|
||||
<div style="display: flex;justify-content: center;align-items: center;">
|
||||
<dv-scroll-board :config="config2" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CapsuleChart from './CapsuleChart.vue';
|
||||
import LineChart from './LineChart.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
CapsuleChart,
|
||||
LineChart
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
// 表格设置
|
||||
config1 : {
|
||||
header: ['主体代码 ', '行业', '     预警时刻','   风险水平','风险类型 '],
|
||||
data: [
|
||||
{
|
||||
主体代码:'688001.SH',
|
||||
行业:'计算机',
|
||||
预警时刻:'2023/6/29 16:00',
|
||||
风险水平:'严重',
|
||||
风险类型:'流动风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
{
|
||||
主体代码:'688002.SH',
|
||||
行业:'计算机',
|
||||
当前预警时刻:'2023/6/29 16:00',
|
||||
预警类型:'严重',
|
||||
风险类型:'市场风险',
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
headerBGC:'rgba(61,89,171,0.5)',
|
||||
align: ['right'],
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
config2 :
|
||||
{
|
||||
data: [
|
||||
['教育', 7],
|
||||
['金融业', 1],
|
||||
['房地产业', 2],
|
||||
['制造业', 3],
|
||||
['房地产业', 4],
|
||||
['批发和零售业', 5],
|
||||
|
||||
],
|
||||
evenRowBGC:'#0A2732',
|
||||
oddRowBGC:'0A2732',
|
||||
|
||||
|
||||
},
|
||||
|
||||
items:[
|
||||
{
|
||||
name: '股权质押',
|
||||
value: 683
|
||||
},
|
||||
{
|
||||
name: '转让股价',
|
||||
value: 234
|
||||
},
|
||||
{
|
||||
name: '股份增持',
|
||||
value: 240
|
||||
},
|
||||
{
|
||||
name: '债券发行',
|
||||
value: 523
|
||||
},
|
||||
{
|
||||
name: '高管变动',
|
||||
value: 345
|
||||
},
|
||||
{
|
||||
name: '产品发布',
|
||||
value: 320
|
||||
},
|
||||
{
|
||||
name: '破产',
|
||||
value: 280
|
||||
},
|
||||
{
|
||||
name: '业绩下滑',
|
||||
value: 271
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
src/bigscreen2/ModuleTitle.vue
Normal file
32
src/bigscreen2/ModuleTitle.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<!-- 标题 一行三等分 -->
|
||||
<div class="module-box">
|
||||
<div style="flex:0 1 30%">
|
||||
<dv-decoration-10 style="height:5px;" />
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 40%">
|
||||
<div class="d-flex">
|
||||
<dv-decoration-8 style="height:50px;flex:1;" />
|
||||
<h2 style="font-size: 20px;">资本市场系统风险监测与预警平台</h2>
|
||||
<!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
|
||||
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 30%">
|
||||
<dv-decoration-10 style="height:5px;transform:rotateY(180deg)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
103
src/bigscreen2/RadarChart.vue
Normal file
103
src/bigscreen2/RadarChart.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:340px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let
|
||||
option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
|
||||
data: ['第一标准', '第二标准','第三标准'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['#4c95d9', '#f6731b', '#8cd43f'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'test1', max: 6500},
|
||||
{ name: 'test2', max: 16000},
|
||||
{ name: 'test3', max: 30000},
|
||||
{ name: 'test4', max: 38000},
|
||||
{ name: 'test5', max: 52000},
|
||||
{ name: 'test6', max: 25000}
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [2400, 10000, 28000, 35000, 50000, 19000],
|
||||
name : '第一标准'
|
||||
},
|
||||
{
|
||||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name : '第二标准'
|
||||
},
|
||||
{
|
||||
value : [6000, 14000, 18000, 21000, 32000, 11000],
|
||||
name : '第三标准'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
src/bigscreen2/ScaleBox.vue
Normal file
81
src/bigscreen2/ScaleBox.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div
|
||||
class="ScaleBox"
|
||||
ref="ScaleBox"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ScaleBox",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
scale: 0,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.setScale();
|
||||
window.addEventListener("resize", this.debounce(this.setScale));
|
||||
},
|
||||
methods: {
|
||||
getScale() {
|
||||
// 固定好16：9的宽高比，计算出最合适的缩放比
|
||||
const { width, height } = this;
|
||||
const wh = window.innerHeight / height;
|
||||
const ww = window.innerWidth / width;
|
||||
console.log(ww < wh ? ww : wh);
|
||||
return ww < wh ? ww : wh;
|
||||
},
|
||||
setScale() {
|
||||
// 获取到缩放比例，设置它
|
||||
this.scale = this.getScale();
|
||||
if (this.$refs.ScaleBox) {
|
||||
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
|
||||
}
|
||||
},
|
||||
debounce(fn, delay) {
|
||||
const delays = delay || 500;
|
||||
let timer;
|
||||
return function () {
|
||||
const th = this;
|
||||
const args = arguments;
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
timer = null;
|
||||
fn.apply(th, args);
|
||||
}, delays);
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#ScaleBox {
|
||||
--scale: 1;
|
||||
}
|
||||
.ScaleBox {
|
||||
position: absolute;
|
||||
transform: scale(var(--scale)) translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0 0;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
52
src/bigscreen2/components/CapsuleChart.vue
Normal file
52
src/bigscreen2/components/CapsuleChart.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props:{
|
||||
colorsChart:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
dataChart:{
|
||||
type:Array,
|
||||
default:()=>[
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
config:{
|
||||
data: this.dataChart,
|
||||
colors: this.colorsChart,
|
||||
unit: '单位',
|
||||
showValue: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
105
src/bigscreen2/components/LineChart.vue
Normal file
105
src/bigscreen2/components/LineChart.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
position: "bottom",
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "年度生产量",
|
||||
nameLocation: "end",
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: 14,
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,.8)",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 10,
|
||||
bottom: 25,
|
||||
top: "18%",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
src/bigscreen2/components/Map.vue
Normal file
104
src/bigscreen2/components/Map.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:80%;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import chinaMap from '@/assets/json/china.json'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initChart();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
echarts.registerMap('china', chinaMap);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
geo:{
|
||||
show:true,
|
||||
type:'map',
|
||||
map:'china',
|
||||
// label:{
|
||||
// show:true, //文字标签显示
|
||||
// color:'#fff',
|
||||
// fontSize:12
|
||||
// },
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#3352c7', //背景色
|
||||
borderColor:'#fff',
|
||||
borderWidth:1
|
||||
},
|
||||
zoom:1.2,
|
||||
emphasis:{ //高亮状态
|
||||
label:{
|
||||
show:true, //文字标签显示
|
||||
color:'#fff',
|
||||
fontSize:14
|
||||
},
|
||||
itemStyle:{ //图形样式
|
||||
areaColor:'#f60', //背景色
|
||||
borderColor:'#ccc',
|
||||
borderWidth:1
|
||||
},
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
||||
coordinateSystem:'geo',//该系列使用的坐标系
|
||||
rippleEffect:{ //涟漪特效相关配置。
|
||||
period:2,
|
||||
brushType:'stroke',
|
||||
scale :5,
|
||||
},
|
||||
label:{ //标签
|
||||
normal:{
|
||||
show:true,
|
||||
position:'right'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
color:'#f00'
|
||||
},
|
||||
symbol:'circle' ,//标记的图形，还可以设置图片
|
||||
symbolSize:function(val){
|
||||
return val[2]
|
||||
},
|
||||
data:[
|
||||
{
|
||||
name:'鄂尔多斯',
|
||||
value:[109.781327, 39.608266,20]
|
||||
},
|
||||
{
|
||||
name:'张家口',
|
||||
value:[114.87, 40.82,5]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
},
|
||||
{
|
||||
name:'武汉',
|
||||
value:[114.31, 30.52,30]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
src/bigscreen2/components/RadarChart.vue
Normal file
103
src/bigscreen2/components/RadarChart.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width: 100%;height:80%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
items:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.initWebsocket();
|
||||
},
|
||||
methods:{
|
||||
initChart(){
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(this.$refs.chart);
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let
|
||||
option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
|
||||
data: ['第一标准', '第二标准','第三标准'],
|
||||
x:"center",
|
||||
y:'bottom',
|
||||
textStyle:{
|
||||
color:"#fff"
|
||||
}
|
||||
},
|
||||
color: ['#4c95d9', '#f6731b', '#8cd43f'],
|
||||
radar: {
|
||||
name:{
|
||||
textStyle: {
|
||||
//设置颜色
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'test1', max: 6500},
|
||||
{ name: 'test2', max: 16000},
|
||||
{ name: 'test3', max: 30000},
|
||||
{ name: 'test4', max: 38000},
|
||||
{ name: 'test5', max: 52000},
|
||||
{ name: 'test6', max: 25000}
|
||||
],
|
||||
center: ['50%','50%'],
|
||||
radius: "58%"
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
itemStyle : {
|
||||
normal : {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
textStyle:{
|
||||
},
|
||||
formatter:function(params) {
|
||||
return params.value;}
|
||||
},
|
||||
}
|
||||
},
|
||||
data : [
|
||||
{
|
||||
value : [2400, 10000, 28000, 35000, 50000, 19000],
|
||||
name : '第一标准'
|
||||
},
|
||||
{
|
||||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name : '第二标准'
|
||||
},
|
||||
{
|
||||
value : [6000, 14000, 18000, 21000, 32000, 11000],
|
||||
name : '第三标准'
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
initWebsocket(){
|
||||
|
||||
this.initChart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
287
src/bigscreen2/components/dimensionComponent.vue
Normal file
287
src/bigscreen2/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
<template>
|
||||
<div style="height: 85%;">
|
||||
<div ref="dimension" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
import dimensionData from '../data/dimensionData.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:{
|
||||
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(){
|
||||
this.date=dimensionData.date
|
||||
this.individualRisk=dimensionData.individual
|
||||
this.structureRisk=dimensionData.structure
|
||||
this.spillRisk=dimensionData.spill
|
||||
this.volatilityRisk=dimensionData.volatility
|
||||
this.detail=dimensionData.detail
|
||||
this.markArea=dimensionData.markarea
|
||||
this.prevDayDim=dimensionData.detail[this.state][0]
|
||||
this.yesterdayDim=dimensionData.detail[this.state][1]
|
||||
this.todayDim=dimensionData.detail[this.state][2]
|
||||
this.tomorrowDim=dimensionData.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>
|
||||
156
src/bigscreen2/components/riskIndexComponent.vue
Normal file
156
src/bigscreen2/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
156
src/bigscreen2/components/riskIndexComponent1.vue
Normal file
156
src/bigscreen2/components/riskIndexComponent1.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
368
src/bigscreen2/components/systemRiskComponent.vue
Normal file
368
src/bigscreen2/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>
|
||||
42816
src/bigscreen2/data/dimensionData.json
Normal file
42816
src/bigscreen2/data/dimensionData.json
Normal file
File diff suppressed because it is too large
Load Diff
3974
src/bigscreen2/data/hongguan.json
Normal file
3974
src/bigscreen2/data/hongguan.json
Normal file
File diff suppressed because it is too large
Load Diff
2135
src/bigscreen2/data/lunbo.json
Normal file
2135
src/bigscreen2/data/lunbo.json
Normal file
File diff suppressed because it is too large
Load Diff
37
src/bigscreen2/大屏.vue
Normal file
37
src/bigscreen2/大屏.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="content bg">
|
||||
|
||||
<!-- <dv-full-screen-container> -->
|
||||
<scale-box>
|
||||
<ModuleTitle />
|
||||
<ModuleHeader />
|
||||
|
||||
</scale-box>
|
||||
<!-- </dv-full-screen-container> -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModuleTitle from './ModuleTitle.vue'
|
||||
import ModuleHeader from './ModuleHeader.vue'
|
||||
import ModuleMain from './ModuleMain.vue'
|
||||
import ScaleBox from './ScaleBox.vue'
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components:{
|
||||
ModuleTitle,
|
||||
ModuleHeader,
|
||||
ModuleMain,
|
||||
ScaleBox,// 大屏根据显示器尺寸大小自适应
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '../assets/css/index.css';
|
||||
</style>
|
||||
|
|
@ -28,6 +28,8 @@ import 事件图谱 from '../views/事件图谱.vue'
|
|||
import graphViewV4 from "@/views/graphViewV4";
|
||||
import 风险传导 from "@/views/风险传导"
|
||||
import 大屏 from '../bigscreen/大屏.vue'
|
||||
import 大屏1 from '../bigscreen1/大屏.vue'
|
||||
import 大屏2 from '../bigscreen2/大屏.vue'
|
||||
import widerscreen from '../widerscreen/index.vue'
|
||||
import widerscreen1 from '../widerscreen/index1.vue'
|
||||
import widerscreen0 from '../widerscreen/index0.vue'
|
||||
|
|
@ -156,6 +158,8 @@ const routes = [
|
|||
|
||||
//大屏
|
||||
{path:'/bigscreen',name :'bigscreen',component: 大屏,},
|
||||
{path:'/bigscreen1',name :'bigscreen1',component: 大屏1,},
|
||||
{path:'/bigscreen2',name :'bigscreen2',component: 大屏2},
|
||||
{path:'/widerscreen',name :'widerscreen',component: widerscreen},
|
||||
{path:'/widerscreen1',name :'widerscreen1',component: widerscreen1},
|
||||
{path:'/widerscreen0',name :'widerscreen0',component: widerscreen0},
|
||||
|
|
@ -179,7 +183,7 @@ export const isLogin=false;
|
|||
router.beforeEach(async(to,from,next) => {
|
||||
const allowedRoutes = ['/systematic_risk', '/market_entities','/individual_risk','/influential_entities'
|
||||
,'/warning','/risk_warning','/abnormal_detection','/health','/diffus','/pressure','/quotation','/event_analysis',
|
||||
'/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/widerscreen','/widerscreen1','/widerscreen0','/test','/sse','/systemrisk'];
|
||||
'/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/bigscreen1','/bigscreen2','/widerscreen','/widerscreen1','/widerscreen0','/test','/sse','/systemrisk'];
|
||||
const name=sessionStorage.getItem('user')
|
||||
// if (allowedRoutes.includes(to.path)) {
|
||||
// next();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||||
<div ref="chart" style="width:100%;height:80%;;"></div>
|
||||
<div ref="chart" style="width:100%;height:350px;;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -76,28 +76,23 @@
|
|||
},
|
||||
data:[
|
||||
{
|
||||
name:'鄂尔多斯',
|
||||
value:[109.781327, 39.608266,20]
|
||||
name:'北京',
|
||||
value:[116.405285,39.904989,20]
|
||||
},
|
||||
{
|
||||
name:'张家口',
|
||||
value:[114.87, 40.82,5]
|
||||
name:'上海',
|
||||
value:[121.472644,31.231706,20]
|
||||
},
|
||||
{
|
||||
name:'珠海',
|
||||
value:[113.52, 22.3,15]
|
||||
},
|
||||
{
|
||||
name:'武汉',
|
||||
value:[114.31, 30.52,30]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
323
src/widerscreen/components/dimensionComponent.vue
Normal file
323
src/widerscreen/components/dimensionComponent.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<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";
|
||||
|
||||
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(){
|
||||
http.get('/risk/dimension/').then((res)=>{
|
||||
this.date=res.data.date
|
||||
this.individualRisk=res.data.individual
|
||||
this.structureRisk=res.data.structure
|
||||
this.spillRisk=res.data.spill
|
||||
this.volatilityRisk=res.data.volatility
|
||||
this.detail=res.data.detail
|
||||
this.markArea=res.data.markarea
|
||||
this.prevDayDim=res.data.detail[this.state][0]
|
||||
this.yesterdayDim=res.data.detail[this.state][1]
|
||||
this.todayDim=res.data.detail[this.state][2]
|
||||
this.tomorrowDim=res.data.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>
|
||||
156
src/widerscreen/components/riskIndexComponent.vue
Normal file
156
src/widerscreen/components/riskIndexComponent.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
156
src/widerscreen/components/riskIndexComponent1.vue
Normal file
156
src/widerscreen/components/riskIndexComponent1.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="height: 95%;">
|
||||
<div ref="index" style="width: 100%; height: 100%;margin-left: 0px;margin-top: 0px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import http from "@/utils/request";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date:[],
|
||||
result:[],
|
||||
title:String,
|
||||
zoom:{
|
||||
type:Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
//数据库结构映射
|
||||
mapTable:{'个体风险状态':["经营风险","信用风险","流动性风险","市场风险","非流动性"],'风险关联与溢出':["条件在险价值差额","Coplua","协整关系","吸收率"],'市场系统结构':['聚类系数','密度变化','同配性'],
|
||||
'市场波动和趋势':['vixPlus指数','市场受损性']},
|
||||
datazoom:[],
|
||||
state:'个体风险状态'
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
title(newValue){
|
||||
this.state=newValue
|
||||
},
|
||||
zoom(newVal){
|
||||
this.datazoom=newVal
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods:{
|
||||
getData(){
|
||||
var that=this
|
||||
http.get('/risk/index/?table='+this.title).then((res)=>{
|
||||
that.date=res.data.date
|
||||
that.result=res.data.result
|
||||
var series=[]
|
||||
let nameLis=[]
|
||||
for (let yaxis in this.result){
|
||||
nameLis.push(this.result[yaxis].name)
|
||||
series.push({
|
||||
data:this.result[yaxis].data,
|
||||
type:'line',
|
||||
name:this.result[yaxis].name
|
||||
})
|
||||
}
|
||||
this.initChart(nameLis,series)
|
||||
})
|
||||
},
|
||||
initChart(nameLis,series){
|
||||
/*
|
||||
示例参考如下
|
||||
* 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["index"])
|
||||
let option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left:'center',
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
top:30,
|
||||
data: nameLis,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
data: this.date,
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
scale:true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
//以下是时间轴
|
||||
dataZoom: [{
|
||||
//也应该是动态的
|
||||
startValue: '2022-07-01',
|
||||
type: 'slider',
|
||||
dataBackground:{
|
||||
lineStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
areaStyle:{
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
textStyle:{
|
||||
color: '#fff'
|
||||
},
|
||||
maxSpan:30,
|
||||
bottom:10
|
||||
}],
|
||||
//以上是时间轴
|
||||
series: series,
|
||||
}
|
||||
myChart.setOption(option);
|
||||
myChart.dispatchAction({
|
||||
type: 'dataZoom',
|
||||
batch: [{
|
||||
// 第一个 dataZoom 组件
|
||||
start: this.datazoom[0],
|
||||
end: this.datazoom[1]
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div class="header-title" style="display:flex;justify-self: space-between;margin:10px;">
|
||||
<div style="flex:0 1 25%">
|
||||
<dv-decoration-10 style="height:5px;" />
|
||||
<dv-decoration-10 style="height:5px;"/>
|
||||
</div>
|
||||
|
||||
<div style="flex:0 1 50%">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div style="flex:0 1 50%">
|
||||
<div class="d-flex">
|
||||
<dv-decoration-8 style="height:50px;flex:1;" />
|
||||
<h2 style="width: 260px;">大规模泛金融知识图谱系统</h2>
|
||||
<h2 style="width: 260px;font-size: 17px;" @click="$router.push('/login');">资本市场系统风险监测与预警平台</h2>
|
||||
<!-- <div style="font-size: large;">大规模泛金融知识图谱系统</div> -->
|
||||
<dv-decoration-8 :reverse="true" style="height:50px;flex:1;" />
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块1
|
||||
预警监测
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块2
|
||||
市场主体概况
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<!-- 第一行 一列 课程概览 -->
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
<div class="box">
|
||||
<div class="box-header" style="">
|
||||
<span style=""></span>
|
||||
板块3
|
||||
系统性风险分析
|
||||
</div>
|
||||
<div class=" box-body">
|
||||
<!-- 第一行 -->
|
||||
|
|
@ -248,7 +248,10 @@
|
|||
<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>
|
||||
<systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent>
|
||||
<!-- 维度时序 -->
|
||||
<dimension-component :zoom="datazoom" ref="dimension"/>
|
||||
<!-- 系统性风险指数 -->
|
||||
<!-- <systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<!-- <div style="flex:0 1 34%">
|
||||
|
|
@ -262,8 +265,6 @@
|
|||
<span style="padding-right: 50px;">节点类型总数</span>
|
||||
<span style="padding-left: 50px;">边类型总数</span>
|
||||
</div>
|
||||
|
||||
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<div style="flex:0 1 33%">
|
||||
|
|
@ -283,40 +284,52 @@
|
|||
|
||||
<!-- 第二行 -->
|
||||
<div class="charts-row" style="">
|
||||
<div style="flex:0 1 33%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
<div style="flex:0 1 100%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;padding-top: 4px">
|
||||
<!-- <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3> -->
|
||||
<el-tabs type="border-card" style='height: 90%;' @tab-click="handleClick">
|
||||
<!-- 收益率传染 -->
|
||||
<el-tab-pane label="个体风险状态" :lazy='true' style="height: 100%;">
|
||||
<market-risk-component :zoom="datazoom" :title="'个体风险状态'" ref="marketRisk"/>
|
||||
</el-tab-pane>
|
||||
<!-- 波动传染 -->
|
||||
<el-tab-pane label="风险关联与溢出" :lazy='true' style="height: 100%;">
|
||||
<market-risk-component1 :zoom="datazoom" :title="'风险关联与溢出'" ref="marketRisk"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="市场系统结构" :lazy='true' style="height: 100%;">
|
||||
<market-risk-component1 :zoom="datazoom" :title="'市场系统结构'" ref="marketRisk"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="市场波动和趋势" :lazy='true' style="height: 100%;">
|
||||
<market-risk-component1 :zoom="datazoom" :title="'市场波动和趋势'" ref="marketRisk"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <market-risk-component :zoom="datazoom" :title="'个体风险状态'"/> -->
|
||||
<!-- <dimension-component :zoom="datazoom"/> -->
|
||||
</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>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
<div style="flex:0 1 33%">
|
||||
<dv-border-box-13 style="width:100%;height:300px;">
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">健康指数</h3>
|
||||
<RadarChart/>
|
||||
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<div class="charts-row" style="">
|
||||
<div style="flex:0 1 33%">
|
||||
<div style="flex:0 1 33.33%" v-for="item in 3" :key="item">
|
||||
<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-scroll-board :config="config22" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
<h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">宏观经济指标</h3>
|
||||
<div ref="chartContainer" style="width:100%; height: 90%;margin: 1px"></div>
|
||||
</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;">
|
||||
|
|
@ -331,7 +344,7 @@
|
|||
<dv-scroll-board :config="config22" style="width:95%;height:220px;" />
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="box-footer">
|
||||
|
|
@ -352,7 +365,9 @@ import http from "@/utils/request";
|
|||
import * as echarts from "echarts";
|
||||
import { color } from 'd3';
|
||||
import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
|
||||
import dimensionComponent from "@/components/dimensionComponent";
|
||||
import dimensionComponent from "./components/dimensionComponent";
|
||||
import marketRiskComponent from "./components/riskIndexComponent";
|
||||
import marketRiskComponent1 from "./components/riskIndexComponent1";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
|
@ -361,7 +376,9 @@ export default {
|
|||
CapsuleChart,
|
||||
LineChart,
|
||||
systemRiskComponent,
|
||||
dimensionComponent
|
||||
dimensionComponent,
|
||||
marketRiskComponent,
|
||||
marketRiskComponent1
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -670,6 +687,10 @@ export default {
|
|||
this.datazoom=mesg
|
||||
console.log(mesg)
|
||||
},
|
||||
// handleClick(){
|
||||
// console.log('jinru');
|
||||
// this.$refs.marketRisk.getData()
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
|
||||
|
|
@ -728,7 +749,7 @@ export default {
|
|||
this.whole.push(this.lever)
|
||||
this.whole.push(this.other)
|
||||
}).then(()=>{
|
||||
for(let i = 0; i < 3; i++) {
|
||||
for(let i = 0; i < 6; i++) {
|
||||
// let chartContainer = 'chartContainer' + i
|
||||
let echart = echarts.init(this.$refs.chartContainer[i])
|
||||
|
||||
|
|
@ -981,7 +1002,12 @@ export default {
|
|||
// })
|
||||
|
||||
// 系统性风险
|
||||
this.$refs.systemRisk.getData()
|
||||
// this.$refs.systemRisk.getData()
|
||||
|
||||
// 第三屏上
|
||||
this.$refs.dimension.getData()
|
||||
// 第三屏中间
|
||||
this.$refs.marketRisk.getData()
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
@ -1022,7 +1048,6 @@ ul li {
|
|||
top: 50%;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
.bg {
|
||||
padding:0;
|
||||
|
|
@ -1122,6 +1147,23 @@ ul li {
|
|||
height: 90%; //
|
||||
}
|
||||
}
|
||||
.el-tabs__content{
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.el-tabs--border-card{
|
||||
background-color: transparent !important;
|
||||
border: transparent !important;
|
||||
}
|
||||
.el-tabs__header{
|
||||
background-color: transparent !important;
|
||||
border-bottom: transparent !important;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
background-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.box-footer {
|
||||
|
|
|
|||
BIN
widerscreen/2.6.ico
Normal file
BIN
widerscreen/2.6.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
widerscreen/Logo.ico
Normal file
BIN
widerscreen/Logo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
1
widerscreen/css/app.d4baead9.css
Normal file
1
widerscreen/css/app.d4baead9.css
Normal file
File diff suppressed because one or more lines are too long
1
widerscreen/css/chunk-vendors.3a09ad9a.css
Normal file
1
widerscreen/css/chunk-vendors.3a09ad9a.css
Normal file
File diff suppressed because one or more lines are too long
BIN
widerscreen/fonts/element-icons.f1a45d74.ttf
Normal file
BIN
widerscreen/fonts/element-icons.f1a45d74.ttf
Normal file
Binary file not shown.
BIN
widerscreen/fonts/element-icons.ff18efd1.woff
Normal file
BIN
widerscreen/fonts/element-icons.ff18efd1.woff
Normal file
Binary file not shown.
BIN
widerscreen/img/logo.eeaf803c.png
Normal file
BIN
widerscreen/img/logo.eeaf803c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
widerscreen/img/map.56576f80.jpg
Normal file
BIN
widerscreen/img/map.56576f80.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
widerscreen/img/pageBg.e0ec611c.png
Normal file
BIN
widerscreen/img/pageBg.e0ec611c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
widerscreen/img/数据显示.9cc3bf1b.png
Normal file
BIN
widerscreen/img/数据显示.9cc3bf1b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
1
widerscreen/index.html
Normal file
1
widerscreen/index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="Logo.ico"><title>资本市场系统性风险平台</title><script defer="defer" src="/js/chunk-vendors.4f7948c0.js"></script><script defer="defer" src="/js/app.5c692974.js"></script><link href="/css/chunk-vendors.3a09ad9a.css" rel="stylesheet"><link href="/css/app.d4baead9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but finacial doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
|
||||
2
widerscreen/js/app.5c692974.js
Normal file
2
widerscreen/js/app.5c692974.js
Normal file
File diff suppressed because one or more lines are too long
1
widerscreen/js/app.5c692974.js.map
Normal file
1
widerscreen/js/app.5c692974.js.map
Normal file
File diff suppressed because one or more lines are too long
2
widerscreen/js/app.7edf0e10.js
Normal file
2
widerscreen/js/app.7edf0e10.js
Normal file
File diff suppressed because one or more lines are too long
1
widerscreen/js/app.7edf0e10.js.map
Normal file
1
widerscreen/js/app.7edf0e10.js.map
Normal file
File diff suppressed because one or more lines are too long
37
widerscreen/js/chunk-vendors.4f7948c0.js
Normal file
37
widerscreen/js/chunk-vendors.4f7948c0.js
Normal file
File diff suppressed because one or more lines are too long
1
widerscreen/js/chunk-vendors.4f7948c0.js.map
Normal file
1
widerscreen/js/chunk-vendors.4f7948c0.js.map
Normal file
File diff suppressed because one or more lines are too long
5
widerscreen/static/3d-force-graph/3d-force-graph.min.js
vendored
Normal file
5
widerscreen/static/3d-force-graph/3d-force-graph.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
29
widerscreen/static/3d-force-graph/index-shiny.html
Normal file
29
widerscreen/static/3d-force-graph/index-shiny.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<!-- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script> -->
|
||||
<script src="../../../node_modules/three/build/three.module.js"></script>
|
||||
<script type="module">
|
||||
import { UnrealBloomPass } from '../../../node_modules/three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.backgroundColor('#000003')
|
||||
.jsonUrl('../datasets/miserables.json')
|
||||
.nodeLabel('id')
|
||||
.nodeAutoColorBy('group');
|
||||
|
||||
const bloomPass = new UnrealBloomPass();
|
||||
bloomPass.strength = 4;
|
||||
bloomPass.radius = 1;
|
||||
bloomPass.threshold = 0;
|
||||
Graph.postProcessingComposer().addPass(bloomPass);
|
||||
</script>
|
||||
</body>
|
||||
80
widerscreen/static/3d-force-graph/index.html
Normal file
80
widerscreen/static/3d-force-graph/index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
<div style="position: absolute; top: 5px; right: 5px;">
|
||||
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
暂停旋转
|
||||
</button>
|
||||
</div>
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const distance = 500;
|
||||
let isRotationActive = true;
|
||||
|
||||
// Random tree
|
||||
// const N = 300;
|
||||
// const gData = {
|
||||
// nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/7) })),
|
||||
// links: [...Array(N).keys()]
|
||||
// .filter(id => id)
|
||||
// .map(id => ({
|
||||
// source: id,
|
||||
// target: Math.round(Math.random() * (id-1))
|
||||
// }))
|
||||
// };
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
// .graphData(gData)
|
||||
.jsonUrl('./miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
// .nodeLabel('id')
|
||||
// .linkDirectionalParticles("value")
|
||||
// .linkDirectionalParticleWidth(2)
|
||||
// .linkDirectionalParticleSpeed(d => d.value * 0.001)
|
||||
// .linkWidth(2)
|
||||
.nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
|
||||
const sprite = new SpriteText(node.id);
|
||||
sprite.material.depthWrite = false; // make sprite background transparent
|
||||
sprite.color = node.color;// node.color
|
||||
sprite.textHeight = 8;
|
||||
return sprite;
|
||||
})
|
||||
.linkDirectionalArrowLength(3)// 让边带上箭头
|
||||
.linkDirectionalArrowRelPos(1)// 设置箭头位置
|
||||
.cameraPosition({ z: distance })
|
||||
|
||||
// Spread nodes a little wider
|
||||
// Graph.d3Force('charge').strength(-120);
|
||||
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
let time = setInterval(() => {
|
||||
if (isRotationActive) {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
y: 0,
|
||||
z: distance * Math.cos(angle),
|
||||
});
|
||||
angle += Math.PI / 300;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.getElementById('rotationToggle').addEventListener('click', event => {
|
||||
if(isRotationActive){
|
||||
isRotationActive = !isRotationActive
|
||||
}else{
|
||||
isRotationActive = !isRotationActive
|
||||
}
|
||||
event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
28
widerscreen/static/3d-force-graph/index0.html
Normal file
28
widerscreen/static/3d-force-graph/index0.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
|
||||
<script>
|
||||
// Random tree
|
||||
const N = 1500;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData);
|
||||
</script>
|
||||
</body>
|
||||
96
widerscreen/static/3d-force-graph/index1.html
Normal file
96
widerscreen/static/3d-force-graph/index1.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<head>
|
||||
<style> body { margin: 0; } </style>
|
||||
|
||||
<script src="3d-force-graph.min.js"></script>
|
||||
<!--<script src="../../dist/3d-force-graph.js"></script>-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="3d-graph"></div>
|
||||
<div style="position: absolute; top: 5px; right: 5px;">
|
||||
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
|
||||
暂停旋转
|
||||
</button>
|
||||
</div>
|
||||
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
|
||||
<script type="module">
|
||||
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
|
||||
|
||||
const distance = 2000;
|
||||
let isRotationActive = true;
|
||||
|
||||
// Random tree
|
||||
const N = 1200;
|
||||
const gData = {
|
||||
nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/150) })),
|
||||
links: [...Array(N).keys()]
|
||||
.filter(id => id)
|
||||
.map(id => ({
|
||||
source: id,
|
||||
target: Math.round(Math.random() * (id-1))
|
||||
}))
|
||||
};
|
||||
const Graph = ForceGraph3D()
|
||||
(document.getElementById('3d-graph'))
|
||||
.graphData(gData)
|
||||
// .jsonUrl('./miserables.json')
|
||||
.nodeAutoColorBy('group')
|
||||
.nodeLabel('id')
|
||||
.linkDirectionalParticles(4)
|
||||
.linkDirectionalParticleWidth(4)
|
||||
.linkDirectionalParticleSpeed(d => 4 * 0.001)// d.value
|
||||
.linkWidth(4)
|
||||
.nodeRelSize(6)
|
||||
// .nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
|
||||
// const sprite = new SpriteText(node.id);
|
||||
// sprite.material.depthWrite = false; // make sprite background transparent
|
||||
// sprite.color = node.color;// node.color
|
||||
// sprite.textHeight = 8;
|
||||
// return sprite;
|
||||
// })
|
||||
// .linkDirectionalArrowLength(3)// 让边带上箭头
|
||||
// .linkDirectionalArrowRelPos(1)// 设置箭头位置
|
||||
.onNodeClick(node => {
|
||||
// Aim at node from outside it
|
||||
const distance = 1800;
|
||||
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
|
||||
|
||||
const newPos = node.x || node.y || node.z
|
||||
? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
|
||||
: { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
|
||||
|
||||
Graph.cameraPosition(
|
||||
newPos, // new position
|
||||
node, // lookAt ({ x, y, z })
|
||||
3000 // ms transition duration
|
||||
)
|
||||
})
|
||||
.cameraPosition({ z: distance })
|
||||
|
||||
// Spread nodes a little wider
|
||||
// Graph.d3Force('charge').strength(-120);
|
||||
|
||||
// camera orbit
|
||||
let angle = 0;
|
||||
let time = setInterval(() => {
|
||||
if (isRotationActive) {
|
||||
Graph.cameraPosition({
|
||||
x: distance * Math.sin(angle),
|
||||
y: 0,
|
||||
z: distance * Math.cos(angle),
|
||||
});
|
||||
angle += Math.PI / 500;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.getElementById('rotationToggle').addEventListener('click', event => {
|
||||
if(isRotationActive){
|
||||
isRotationActive = !isRotationActive
|
||||
}else{
|
||||
isRotationActive = !isRotationActive
|
||||
}
|
||||
event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
337
widerscreen/static/3d-force-graph/miserables.json
Normal file
337
widerscreen/static/3d-force-graph/miserables.json
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
{
|
||||
"nodes": [
|
||||
{"id": "Myriel", "group": 1},
|
||||
{"id": "Napoleon", "group": 1},
|
||||
{"id": "Mlle.Baptistine", "group": 1},
|
||||
{"id": "Mme.Magloire", "group": 1},
|
||||
{"id": "CountessdeLo", "group": 1},
|
||||
{"id": "Geborand", "group": 1},
|
||||
{"id": "Champtercier", "group": 1},
|
||||
{"id": "Cravatte", "group": 1},
|
||||
{"id": "Count", "group": 1},
|
||||
{"id": "OldMan", "group": 1},
|
||||
{"id": "Labarre", "group": 2},
|
||||
{"id": "Valjean", "group": 2},
|
||||
{"id": "Marguerite", "group": 3},
|
||||
{"id": "Mme.deR", "group": 2},
|
||||
{"id": "Isabeau", "group": 2},
|
||||
{"id": "Gervais", "group": 2},
|
||||
{"id": "Tholomyes", "group": 3},
|
||||
{"id": "Listolier", "group": 3},
|
||||
{"id": "Fameuil", "group": 3},
|
||||
{"id": "Blacheville", "group": 3},
|
||||
{"id": "Favourite", "group": 3},
|
||||
{"id": "Dahlia", "group": 3},
|
||||
{"id": "Zephine", "group": 3},
|
||||
{"id": "Fantine", "group": 3},
|
||||
{"id": "Mme.Thenardier", "group": 4},
|
||||
{"id": "Thenardier", "group": 4},
|
||||
{"id": "Cosette", "group": 5},
|
||||
{"id": "Javert", "group": 4},
|
||||
{"id": "Fauchelevent", "group": 0},
|
||||
{"id": "Bamatabois", "group": 2},
|
||||
{"id": "Perpetue", "group": 3},
|
||||
{"id": "Simplice", "group": 2},
|
||||
{"id": "Scaufflaire", "group": 2},
|
||||
{"id": "Woman1", "group": 2},
|
||||
{"id": "Judge", "group": 2},
|
||||
{"id": "Champmathieu", "group": 2},
|
||||
{"id": "Brevet", "group": 2},
|
||||
{"id": "Chenildieu", "group": 2},
|
||||
{"id": "Cochepaille", "group": 2},
|
||||
{"id": "Pontmercy", "group": 4},
|
||||
{"id": "Boulatruelle", "group": 6},
|
||||
{"id": "Eponine", "group": 4},
|
||||
{"id": "Anzelma", "group": 4},
|
||||
{"id": "Woman2", "group": 5},
|
||||
{"id": "MotherInnocent", "group": 0},
|
||||
{"id": "Gribier", "group": 0},
|
||||
{"id": "Jondrette", "group": 7},
|
||||
{"id": "Mme.Burgon", "group": 7},
|
||||
{"id": "Gavroche", "group": 8},
|
||||
{"id": "Gillenormand", "group": 5},
|
||||
{"id": "Magnon", "group": 5},
|
||||
{"id": "Mlle.Gillenormand", "group": 5},
|
||||
{"id": "Mme.Pontmercy", "group": 5},
|
||||
{"id": "Mlle.Vaubois", "group": 5},
|
||||
{"id": "Lt.Gillenormand", "group": 5},
|
||||
{"id": "Marius", "group": 8},
|
||||
{"id": "BaronessT", "group": 5},
|
||||
{"id": "Mabeuf", "group": 8},
|
||||
{"id": "Enjolras", "group": 8},
|
||||
{"id": "Combeferre", "group": 8},
|
||||
{"id": "Prouvaire", "group": 8},
|
||||
{"id": "Feuilly", "group": 8},
|
||||
{"id": "Courfeyrac", "group": 8},
|
||||
{"id": "Bahorel", "group": 8},
|
||||
{"id": "Bossuet", "group": 8},
|
||||
{"id": "Joly", "group": 8},
|
||||
{"id": "Grantaire", "group": 8},
|
||||
{"id": "MotherPlutarch", "group": 9},
|
||||
{"id": "Gueulemer", "group": 4},
|
||||
{"id": "Babet", "group": 4},
|
||||
{"id": "Claquesous", "group": 4},
|
||||
{"id": "Montparnasse", "group": 4},
|
||||
{"id": "Toussaint", "group": 5},
|
||||
{"id": "Child1", "group": 10},
|
||||
{"id": "Child2", "group": 10},
|
||||
{"id": "Brujon", "group": 4},
|
||||
{"id": "Mme.Hucheloup", "group": 8}
|
||||
],
|
||||
"links": [
|
||||
{"source": "Napoleon", "target": "Myriel", "value": 1},
|
||||
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
|
||||
{"source": "Mme.Magloire", "target": "Myriel", "value": 10},
|
||||
{"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
|
||||
{"source": "CountessdeLo", "target": "Myriel", "value": 1},
|
||||
{"source": "Geborand", "target": "Myriel", "value": 1},
|
||||
{"source": "Champtercier", "target": "Myriel", "value": 1},
|
||||
{"source": "Cravatte", "target": "Myriel", "value": 1},
|
||||
{"source": "Count", "target": "Myriel", "value": 2},
|
||||
{"source": "OldMan", "target": "Myriel", "value": 1},
|
||||
{"source": "Valjean", "target": "Labarre", "value": 1},
|
||||
{"source": "Valjean", "target": "Mme.Magloire", "value": 3},
|
||||
{"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
|
||||
{"source": "Valjean", "target": "Myriel", "value": 5},
|
||||
{"source": "Marguerite", "target": "Valjean", "value": 1},
|
||||
{"source": "Mme.deR", "target": "Valjean", "value": 1},
|
||||
{"source": "Isabeau", "target": "Valjean", "value": 1},
|
||||
{"source": "Gervais", "target": "Valjean", "value": 1},
|
||||
{"source": "Listolier", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Fameuil", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Tholomyes", "value": 4},
|
||||
{"source": "Blacheville", "target": "Listolier", "value": 4},
|
||||
{"source": "Blacheville", "target": "Fameuil", "value": 4},
|
||||
{"source": "Favourite", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Favourite", "target": "Listolier", "value": 3},
|
||||
{"source": "Favourite", "target": "Fameuil", "value": 3},
|
||||
{"source": "Favourite", "target": "Blacheville", "value": 4},
|
||||
{"source": "Dahlia", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Dahlia", "target": "Listolier", "value": 3},
|
||||
{"source": "Dahlia", "target": "Fameuil", "value": 3},
|
||||
{"source": "Dahlia", "target": "Blacheville", "value": 3},
|
||||
{"source": "Dahlia", "target": "Favourite", "value": 5},
|
||||
{"source": "Zephine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Zephine", "target": "Listolier", "value": 3},
|
||||
{"source": "Zephine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Zephine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Zephine", "target": "Favourite", "value": 4},
|
||||
{"source": "Zephine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Tholomyes", "value": 3},
|
||||
{"source": "Fantine", "target": "Listolier", "value": 3},
|
||||
{"source": "Fantine", "target": "Fameuil", "value": 3},
|
||||
{"source": "Fantine", "target": "Blacheville", "value": 3},
|
||||
{"source": "Fantine", "target": "Favourite", "value": 4},
|
||||
{"source": "Fantine", "target": "Dahlia", "value": 4},
|
||||
{"source": "Fantine", "target": "Zephine", "value": 4},
|
||||
{"source": "Fantine", "target": "Marguerite", "value": 2},
|
||||
{"source": "Fantine", "target": "Valjean", "value": 9},
|
||||
{"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
|
||||
{"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
|
||||
{"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
|
||||
{"source": "Thenardier", "target": "Fantine", "value": 1},
|
||||
{"source": "Thenardier", "target": "Valjean", "value": 12},
|
||||
{"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
|
||||
{"source": "Cosette", "target": "Valjean", "value": 31},
|
||||
{"source": "Cosette", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Cosette", "target": "Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Valjean", "value": 17},
|
||||
{"source": "Javert", "target": "Fantine", "value": 5},
|
||||
{"source": "Javert", "target": "Thenardier", "value": 5},
|
||||
{"source": "Javert", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Javert", "target": "Cosette", "value": 1},
|
||||
{"source": "Fauchelevent", "target": "Valjean", "value": 8},
|
||||
{"source": "Fauchelevent", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Fantine", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Javert", "value": 1},
|
||||
{"source": "Bamatabois", "target": "Valjean", "value": 2},
|
||||
{"source": "Perpetue", "target": "Fantine", "value": 1},
|
||||
{"source": "Simplice", "target": "Perpetue", "value": 2},
|
||||
{"source": "Simplice", "target": "Valjean", "value": 3},
|
||||
{"source": "Simplice", "target": "Fantine", "value": 2},
|
||||
{"source": "Simplice", "target": "Javert", "value": 1},
|
||||
{"source": "Scaufflaire", "target": "Valjean", "value": 1},
|
||||
{"source": "Woman1", "target": "Valjean", "value": 2},
|
||||
{"source": "Woman1", "target": "Javert", "value": 1},
|
||||
{"source": "Judge", "target": "Valjean", "value": 3},
|
||||
{"source": "Judge", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Champmathieu", "target": "Valjean", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Judge", "value": 3},
|
||||
{"source": "Champmathieu", "target": "Bamatabois", "value": 2},
|
||||
{"source": "Brevet", "target": "Judge", "value": 2},
|
||||
{"source": "Brevet", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Brevet", "target": "Valjean", "value": 2},
|
||||
{"source": "Brevet", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Chenildieu", "target": "Judge", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Brevet", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Valjean", "value": 2},
|
||||
{"source": "Chenildieu", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Cochepaille", "target": "Judge", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Champmathieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Brevet", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Chenildieu", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Valjean", "value": 2},
|
||||
{"source": "Cochepaille", "target": "Bamatabois", "value": 1},
|
||||
{"source": "Pontmercy", "target": "Thenardier", "value": 1},
|
||||
{"source": "Boulatruelle", "target": "Thenardier", "value": 1},
|
||||
{"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
|
||||
{"source": "Eponine", "target": "Thenardier", "value": 3},
|
||||
{"source": "Anzelma", "target": "Eponine", "value": 2},
|
||||
{"source": "Anzelma", "target": "Thenardier", "value": 2},
|
||||
{"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Woman2", "target": "Valjean", "value": 3},
|
||||
{"source": "Woman2", "target": "Cosette", "value": 1},
|
||||
{"source": "Woman2", "target": "Javert", "value": 1},
|
||||
{"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
|
||||
{"source": "MotherInnocent", "target": "Valjean", "value": 1},
|
||||
{"source": "Gribier", "target": "Fauchelevent", "value": 2},
|
||||
{"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
|
||||
{"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
|
||||
{"source": "Gavroche", "target": "Thenardier", "value": 1},
|
||||
{"source": "Gavroche", "target": "Javert", "value": 1},
|
||||
{"source": "Gavroche", "target": "Valjean", "value": 1},
|
||||
{"source": "Gillenormand", "target": "Cosette", "value": 3},
|
||||
{"source": "Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Magnon", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
|
||||
{"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
|
||||
{"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
|
||||
{"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
|
||||
{"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
|
||||
{"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
|
||||
{"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
|
||||
{"source": "Marius", "target": "Gillenormand", "value": 12},
|
||||
{"source": "Marius", "target": "Pontmercy", "value": 1},
|
||||
{"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
|
||||
{"source": "Marius", "target": "Cosette", "value": 21},
|
||||
{"source": "Marius", "target": "Valjean", "value": 19},
|
||||
{"source": "Marius", "target": "Tholomyes", "value": 1},
|
||||
{"source": "Marius", "target": "Thenardier", "value": 2},
|
||||
{"source": "Marius", "target": "Eponine", "value": 5},
|
||||
{"source": "Marius", "target": "Gavroche", "value": 4},
|
||||
{"source": "BaronessT", "target": "Gillenormand", "value": 1},
|
||||
{"source": "BaronessT", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Marius", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Eponine", "value": 1},
|
||||
{"source": "Mabeuf", "target": "Gavroche", "value": 1},
|
||||
{"source": "Enjolras", "target": "Marius", "value": 7},
|
||||
{"source": "Enjolras", "target": "Gavroche", "value": 7},
|
||||
{"source": "Enjolras", "target": "Javert", "value": 6},
|
||||
{"source": "Enjolras", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Enjolras", "target": "Valjean", "value": 4},
|
||||
{"source": "Combeferre", "target": "Enjolras", "value": 15},
|
||||
{"source": "Combeferre", "target": "Marius", "value": 5},
|
||||
{"source": "Combeferre", "target": "Gavroche", "value": 6},
|
||||
{"source": "Combeferre", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Prouvaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Prouvaire", "target": "Enjolras", "value": 4},
|
||||
{"source": "Prouvaire", "target": "Combeferre", "value": 2},
|
||||
{"source": "Feuilly", "target": "Gavroche", "value": 2},
|
||||
{"source": "Feuilly", "target": "Enjolras", "value": 6},
|
||||
{"source": "Feuilly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Feuilly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Feuilly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Feuilly", "target": "Marius", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Marius", "value": 9},
|
||||
{"source": "Courfeyrac", "target": "Enjolras", "value": 17},
|
||||
{"source": "Courfeyrac", "target": "Combeferre", "value": 13},
|
||||
{"source": "Courfeyrac", "target": "Gavroche", "value": 7},
|
||||
{"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Courfeyrac", "target": "Eponine", "value": 1},
|
||||
{"source": "Courfeyrac", "target": "Feuilly", "value": 6},
|
||||
{"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
|
||||
{"source": "Bahorel", "target": "Combeferre", "value": 5},
|
||||
{"source": "Bahorel", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bahorel", "target": "Courfeyrac", "value": 6},
|
||||
{"source": "Bahorel", "target": "Mabeuf", "value": 2},
|
||||
{"source": "Bahorel", "target": "Enjolras", "value": 4},
|
||||
{"source": "Bahorel", "target": "Feuilly", "value": 3},
|
||||
{"source": "Bahorel", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bahorel", "target": "Marius", "value": 1},
|
||||
{"source": "Bossuet", "target": "Marius", "value": 5},
|
||||
{"source": "Bossuet", "target": "Courfeyrac", "value": 12},
|
||||
{"source": "Bossuet", "target": "Gavroche", "value": 5},
|
||||
{"source": "Bossuet", "target": "Bahorel", "value": 4},
|
||||
{"source": "Bossuet", "target": "Enjolras", "value": 10},
|
||||
{"source": "Bossuet", "target": "Feuilly", "value": 6},
|
||||
{"source": "Bossuet", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Bossuet", "target": "Combeferre", "value": 9},
|
||||
{"source": "Bossuet", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Bossuet", "target": "Valjean", "value": 1},
|
||||
{"source": "Joly", "target": "Bahorel", "value": 5},
|
||||
{"source": "Joly", "target": "Bossuet", "value": 7},
|
||||
{"source": "Joly", "target": "Gavroche", "value": 3},
|
||||
{"source": "Joly", "target": "Courfeyrac", "value": 5},
|
||||
{"source": "Joly", "target": "Enjolras", "value": 5},
|
||||
{"source": "Joly", "target": "Feuilly", "value": 5},
|
||||
{"source": "Joly", "target": "Prouvaire", "value": 2},
|
||||
{"source": "Joly", "target": "Combeferre", "value": 5},
|
||||
{"source": "Joly", "target": "Mabeuf", "value": 1},
|
||||
{"source": "Joly", "target": "Marius", "value": 2},
|
||||
{"source": "Grantaire", "target": "Bossuet", "value": 3},
|
||||
{"source": "Grantaire", "target": "Enjolras", "value": 3},
|
||||
{"source": "Grantaire", "target": "Combeferre", "value": 1},
|
||||
{"source": "Grantaire", "target": "Courfeyrac", "value": 2},
|
||||
{"source": "Grantaire", "target": "Joly", "value": 2},
|
||||
{"source": "Grantaire", "target": "Gavroche", "value": 1},
|
||||
{"source": "Grantaire", "target": "Bahorel", "value": 1},
|
||||
{"source": "Grantaire", "target": "Feuilly", "value": 1},
|
||||
{"source": "Grantaire", "target": "Prouvaire", "value": 1},
|
||||
{"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
|
||||
{"source": "Gueulemer", "target": "Thenardier", "value": 5},
|
||||
{"source": "Gueulemer", "target": "Valjean", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Javert", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Gavroche", "value": 1},
|
||||
{"source": "Gueulemer", "target": "Eponine", "value": 1},
|
||||
{"source": "Babet", "target": "Thenardier", "value": 6},
|
||||
{"source": "Babet", "target": "Gueulemer", "value": 6},
|
||||
{"source": "Babet", "target": "Valjean", "value": 1},
|
||||
{"source": "Babet", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Babet", "target": "Javert", "value": 2},
|
||||
{"source": "Babet", "target": "Gavroche", "value": 1},
|
||||
{"source": "Babet", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Thenardier", "value": 4},
|
||||
{"source": "Claquesous", "target": "Babet", "value": 4},
|
||||
{"source": "Claquesous", "target": "Gueulemer", "value": 4},
|
||||
{"source": "Claquesous", "target": "Valjean", "value": 1},
|
||||
{"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
|
||||
{"source": "Claquesous", "target": "Javert", "value": 1},
|
||||
{"source": "Claquesous", "target": "Eponine", "value": 1},
|
||||
{"source": "Claquesous", "target": "Enjolras", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Javert", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Babet", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Gueulemer", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Claquesous", "value": 2},
|
||||
{"source": "Montparnasse", "target": "Valjean", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Gavroche", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Eponine", "value": 1},
|
||||
{"source": "Montparnasse", "target": "Thenardier", "value": 1},
|
||||
{"source": "Toussaint", "target": "Cosette", "value": 2},
|
||||
{"source": "Toussaint", "target": "Javert", "value": 1},
|
||||
{"source": "Toussaint", "target": "Valjean", "value": 1},
|
||||
{"source": "Child1", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Gavroche", "value": 2},
|
||||
{"source": "Child2", "target": "Child1", "value": 3},
|
||||
{"source": "Brujon", "target": "Babet", "value": 3},
|
||||
{"source": "Brujon", "target": "Gueulemer", "value": 3},
|
||||
{"source": "Brujon", "target": "Thenardier", "value": 3},
|
||||
{"source": "Brujon", "target": "Gavroche", "value": 1},
|
||||
{"source": "Brujon", "target": "Eponine", "value": 1},
|
||||
{"source": "Brujon", "target": "Claquesous", "value": 1},
|
||||
{"source": "Brujon", "target": "Montparnasse", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
|
||||
{"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user