gongdragon/financial-bigscreen
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

修改宽屏中间的雷达图

Browse Source
This commit is contained in:
GongDragon 2024-12-17 13:28:32 +08:00
parent 2278b7ac94
commit 4cd418f587
2 changed files with 73 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/widerscreen/components/RadarChart.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<!-- 为 ECharts 准备一个定义了宽高的 DOM --> <!-- 雷达图 -->
<div ref="chart" style="width: 100%;height:80%;"></div> <div>
<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>
</template> </template>
<script> <script>
@ -13,30 +18,19 @@
} }
}, },
mounted(){ mounted(){
this.initWebsocket(); // 健康指数 雷达图
}, const echarts3 = echarts.init(this.$refs.echarts_3)
methods:{ const option = {
initChart(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 指定图表的配置项和数据
let
option = {
title: {
text: ''
},
tooltip: {}, tooltip: {},
legend: { legend: {
data: ['纳尔实业', '平安保险','招商银行'],
data: ['第一标准', '第二标准','第三标准'],
x:"center", x:"center",
y:'bottom', y:'bottom',
textStyle:{ textStyle:{
color:"#fff" color:"#fff"
} }
}, },
color: ['#4c95d9', '#f6731b', '#8cd43f'], color: ['red', 'yellow', 'blue'],
radar: { radar: {
name:{ name:{
textStyle: { textStyle: {
@ -45,12 +39,13 @@
} }
}, },
indicator: [ indicator: [
{ name: 'test1', max: 6500}, { name: '投资关系', max: 100, color:'#fff'},
{ name: 'test2', max: 16000}, { name: '操盘模式', max: 100, color:'#fff' },
{ name: 'test3', max: 30000}, { name: '财务状态', max: 100, color:'#fff' },
{ name: 'test4', max: 38000}, { name: '运行状态', max: 100, color:'#fff' },
{ name: 'test5', max: 52000}, { name: '规模扩张', max: 100, color:'#fff' },
{ name: 'test6', max: 25000} { name: '声誉风险', max: 100, color:'#fff' },
{ name: '外部环境', max: 100, color:'#fff' }
], ],
center: ['50%','50%'], center: ['50%','50%'],
radius: "58%" radius: "58%"
@ -76,28 +71,23 @@
}, },
data : [ data : [
{ {
value : [2400, 10000, 28000, 35000, 50000, 19000], value : [57.17727272727273,40,27.6,62.900000000000006,10,75,50],
name : '第一标准' name : '郑州银行'
}, },
{ {
value : [5000, 14000, 28000, 31000, 42000, 21000], value : [48.81363636363636,50,44,61.56999999999999,10,75,50],
name : '第二标准' name : '宁波银行'
}, },
{ {
value : [6000, 14000, 18000, 21000, 32000, 11000], value : [46.2,25,38.4,58.91,10,75,50],
name : '第三标准' name : '苏州银行'
} }
] ]
}] }]
}; };
echarts3.setOption(option)
myChart.setOption(option);
}, },
initWebsocket(){ methods:{
this.initChart();
}
} }
} }
</script> </script>

5
src/widerscreen/index1.vue
View File

@ -167,12 +167,7 @@
</dv-border-box-13> </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>
<RadarChart/> <RadarChart/>
<!-- <dv-capsule-chart :config="config" style="width:100%;height:350px" /> -->
</dv-border-box-13>
</div> </div>
<div style="flex:0 1 50%"> <div style="flex:0 1 50%">