From 699b2c16fe39f8a38f104f29b343bd06d1e53e82 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 23 九月 2022 09:07:15 +0800
Subject: [PATCH] 1.修改品质异常排行echarts图2.调整收搜栏顶部与按钮对齐
---
src/views/bbgl/pzyc.vue | 92 ++++++++++++++++++++++++++++++----------------
1 files changed, 60 insertions(+), 32 deletions(-)
diff --git a/src/views/bbgl/pzyc.vue b/src/views/bbgl/pzyc.vue
index 5c990f1..70577b5 100644
--- a/src/views/bbgl/pzyc.vue
+++ b/src/views/bbgl/pzyc.vue
@@ -1,8 +1,11 @@
<template>
<div>
<div class="body" :style="{height:mainHeight+'px'}">
- <div style="margin: 30px auto;width: 1600px;" :style="{height:mainHeight+'px'}">
- <div id="Echarts" style="width: 100%;height: 100%" />
+ <div style="margin: 10px auto;width: 1680px;background-color: #fff" :style="{height:mainHeight+'px'}">
+
+ <div style="margin: 20px auto;width: 1600px" :style="{height:(mainHeight-60)+'px'}">
+ <div id="Echarts" style="width: 100%;height: 100%" />
+ </div>
</div>
</div>
</div>
@@ -50,12 +53,13 @@
textAlign: 'center',
textStyle: {
// color: '#fff',
- color: '#00ffff',
+ color: '#000',
fontSize: '20',
fontWeight: 'bolder'
}
},
- backgroundColor: '#323a5e',
+ // backgroundColor: '#323a5e',
+ backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
@@ -69,29 +73,36 @@
top: '15%',
containLabel: true
},
- legend: {
- data: ['1', '2', '3'],
- right: 10,
- top: 12,
- textStyle: {
- color: '#fff'
- },
- itemWidth: 12,
- itemHeight: 10
- // itemGap: 35
- },
+ // legend: {
+ // data: ['1', '2', '3'],
+ // right: 10,
+ // top: 12,
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // itemWidth: 12,
+ // itemHeight: 10
+ // // itemGap: 35
+ // },
xAxis: {
name: '绉嶇被',
nameTextStyle: {
- // color: ,
+ color: '#000',
fontSize: 16,
lineHeight: 20
},
type: 'category',
data: this.echartsData.map(r => r.name),
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: true
+ },
axisLine: {
+ show: true,
lineStyle: {
- color: 'white'
+ color: '#000'
}
},
axisLabel: {
@@ -99,6 +110,7 @@
rotate: 20,
textStyle: {
fontSize: 16,
+ color: '#000',
fontFamily: 'Microsoft YaHei'
}
}
@@ -106,25 +118,37 @@
yAxis: {
name: '鏁伴噺',
nameTextStyle: {
- // color: ,
+ color: '#000',
fontSize: 16,
lineHeight: 20
},
type: 'value',
// max: '1200',
+ axisTick: {
+ show: true
+ },
axisLine: {
- show: false,
+ show: true,
lineStyle: {
- color: 'white'
+ color: '#000'
}
},
splitLine: {
- show: true,
+ show: false,
lineStyle: {
- color: 'rgba(255,255,255,0.3)'
+ // color: 'rgba(255,255,255,0.3)'
+ color: '#000'
}
},
- axisLabel: {}
+ axisLabel: {
+ // interval: 0,
+ // rotate: 20,
+ textStyle: {
+ fontSize: 16,
+ color: '#000',
+ fontFamily: 'Microsoft YaHei'
+ }
+ }
},
dataZoom: [{
show: true,
@@ -138,21 +162,24 @@
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
- color: '#d3dee5'
-
+ // color: '#d3dee5'
+ color: '#000'
},
textStyle: {
- color: '#fff'
+ color: '#000'
},
- borderColor: '#90979c'
-
+ // borderColor: '#90979c'
+ borderColor: '#000',
+ fillerColor: `rgba(42, 197, 137, 0.1)`
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
- }],
+
+ }
+ ],
series: [{
name: '鏁伴噺',
type: 'bar',
@@ -161,10 +188,12 @@
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#fccb05'
+ // color: '#fccb05'
+ color: `rgba(42, 197, 137, 1)`// 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#f5804d'
+ color: `rgba(187, 236, 218, 1)` // 100% 澶勭殑棰滆壊
+ // color: '#f5804d'
}]),
barBorderRadius: 12
}
@@ -186,7 +215,6 @@
// }]),
// barBorderRadius: 11,
// }
-
// },
// data: [400, 500, 500, 500, 500, 400,400, 500, 500]
// },
--
Gitblit v1.9.3