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>
<!-- 为 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>
<script>
@ -13,91 +18,76 @@
}
},
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: {
// 健康指数 雷达图
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'
}
},
label: {
show: false,
textStyle:{
},
formatter:function(params) {
return params.value;}
},
}
},
data : [
{
value : [2400, 10000, 28000, 35000, 50000, 19000],
name : '第一标准'
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%"
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '第二标准'
},
{
value : [6000, 14000, 18000, 21000, 32000, 11000],
name : '第三标准'
}
]
}]
};
series: [{
name: '',
type: 'radar',
itemStyle : {
normal : {
splitLine: {
lineStyle: {
myChart.setOption(option);
},
initWebsocket(){
this.initChart();
}
}
},
label: {
show: false,
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>

5
src/widerscreen/index1.vue
View File

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