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

156
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,91 +18,76 @@
} }
}, },
mounted(){ mounted(){
this.initWebsocket(); // 健康指数 雷达图
}, const echarts3 = echarts.init(this.$refs.echarts_3)
methods:{ const option = {
initChart(){ tooltip: {},
// 基于准备好的dom，初始化echarts实例 legend: {
var myChart = echarts.init(this.$refs.chart); data: ['纳尔实业', '平安保险','招商银行'],
x:"center",
// 指定图表的配置项和数据 y:'bottom',
let textStyle:{
option = { color:"#fff"
title: { }
text: '' },
}, color: ['red', 'yellow', 'blue'],
tooltip: {}, radar: {
legend: { name:{
textStyle: {
data: ['第一标准', '第二标准','第三标准'], //设置颜色
x:"center", color:'#fff'
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: { indicator: [
show: false, { name: '投资关系', max: 100, color:'#fff'},
textStyle:{ { name: '操盘模式', max: 100, color:'#fff' },
}, { name: '财务状态', max: 100, color:'#fff' },
formatter:function(params) { { name: '运行状态', max: 100, color:'#fff' },
return params.value;} { name: '规模扩张', max: 100, color:'#fff' },
}, { name: '声誉风险', max: 100, color:'#fff' },
} { name: '外部环境', max: 100, color:'#fff' }
}, ],
data : [ center: ['50%','50%'],
{ radius: "58%"
value : [2400, 10000, 28000, 35000, 50000, 19000],
name : '第一标准'
}, },
{ series: [{
value : [5000, 14000, 28000, 31000, 42000, 21000], name: '',
name : '第二标准' type: 'radar',
}, itemStyle : {
{ normal : {
value : [6000, 14000, 18000, 21000, 32000, 11000], splitLine: {
name : '第三标准' lineStyle: {
}
]
}]
};
myChart.setOption(option); }
}, },
initWebsocket(){ label: {
show: false,
this.initChart(); textStyle:{
},
} formatter:function(params) {
return params.value;}
},
}
},
data : [
{
value : [57.17727272727273,40,27.6,62.900000000000006,10,75,50],
name : '郑州银行'
},
{
value : [48.81363636363636,50,44,61.56999999999999,10,75,50],
name : '宁波银行'
},
{
value : [46.2,25,38.4,58.91,10,75,50],
name : '苏州银行'
}
]
}]
};
echarts3.setOption(option)
},
methods:{
} }
} }
</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%">