From b4972fd2d422f1a29be5282ab10fad00425931cc Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 07 十月 2022 09:08:02 +0800
Subject: [PATCH] 1.综合看板数据动态化
---
src/views/kb/zhkb.vue | 73 +++++++++++++++++++++---------------
src/utils/myEcharts.js | 24 +++++++----
2 files changed, 57 insertions(+), 40 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index c7024cf..c1458d9 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1570,7 +1570,7 @@
export function zhkb01() {
// const zhkb01name = ['璁″垝瀹屾垚杩涘害(鑷骇)', '璁″垝瀹屾垚杩涘害(澶栬喘)'] // 鍚嶇О
const zhkb01name = ['', ''] // 鍚嶇О
- const zhkb01Value = [88, 95] // 鍊�
+ const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 鍊�
const zhkb01Max = []
const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
@@ -2235,7 +2235,8 @@
export function zhkb04() {
const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
- const data = [330, 404, 780, 509, 150]
+ // const data = [330, 404, 780, 509, 150]
+ const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
const option = {
backgroundColor: 'transparent',
grid: {
@@ -2397,7 +2398,8 @@
// var XName = ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
var XName = ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�']
var data1 = [
- [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
+ // [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
+ [Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
// [123, 154, 234, 321, 120, 390, 634],
// [63, 194, 234, 321, 278, 110, 534],
// [53, 254, 234, 321, 118, 240, 434],
@@ -3192,7 +3194,8 @@
}
export function zhkb09() {
- const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+ // const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+ const dataY = [(60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]
const option = {
backgroundColor: 'transparent',
@@ -3349,8 +3352,10 @@
const _legendColor = '#8FD8FF'
const _fontSize = 16
const _fontColor = '#8FD8FF'
- const data1 = [70, 90, 100, 70, 90, 100]
- const data2 = [80, 60, 80, 50, 90, 60]
+ // const data1 = [70, 90, 100, 70, 90, 100]
+ // const data2 = [80, 60, 80, 50, 90, 60]
+ const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
+ const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
const option = {
backgroundColor: 'transparent',
legend: {
@@ -3371,7 +3376,8 @@
containLabel: true
},
yAxis: {
- max: Math.ceil(Math.max(...data1) * 1.2),
+ // max: Math.ceil(Math.max(...data1) * 1.2),
+ max: 100,
type: 'value',
position: 'left',
axisLine: {
@@ -3631,7 +3637,7 @@
name: '璁惧鍒╃敤鐜�',
type: 'bar',
barGap: '70%',
- data: [30, 75, 77, 39, 85],
+ data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
barWidth: 12,
itemStyle: {
normal: {
@@ -3675,7 +3681,7 @@
{
name: '璁惧寮�鏈虹巼',
type: 'bar',
- data: [90, 45, 27, 20, 85],
+ data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
barWidth: 12,
itemStyle: {
normal: {
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 2da035a..288c494 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -4,7 +4,7 @@
<div class="kb_body">
<div class="kb_background" />
<div class="kb_background2" />
- <div class="kb_head">鏅鸿兘璁㈠崟鐪嬫澘</div>
+ <div class="kb_head">鏅鸿兘宸ュ巶缁煎悎绠＄悊</div>
<!-- <div class="kb_headerPic" />-->
<div class="kb_headerPic kb_flex_space_between">
<div id="zhkbTop01" style="width: 800px;height:36px;" />
@@ -26,9 +26,9 @@
<div>璁″垝瀹屾垚杩涘害锛堝璐級 30000鍚�</div>
</div>
<div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
- <div style="color:#fff">鐢熶骇绫诲瀷</div>
- <div style="color:#fff">鐢熶骇鏁伴噺</div>
- <div style="color:#fff">瀹屾垚杩涘害</div>
+ <div :style="{color:colorX}">鐢熶骇绫诲瀷</div>
+ <div :style="{color:colorX}">鐢熶骇鏁伴噺</div>
+ <div :style="{color:colorX}">瀹屾垚杩涘害</div>
</div>
<div>
<div class="kb_flex_space_between">
@@ -66,7 +66,7 @@
</div>
<div style="margin-left: 30px;">
<div>8000鍚�</div>
- <div style="color:#fff;">鏄ㄦ棩鍏ュ簱鏁伴噺</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍏ュ簱鏁伴噺</div>
</div>
</div>
</div>
@@ -77,7 +77,7 @@
</div>
<div style="margin-left: 30px;">
<div>10000鍚�</div>
- <div style="color:#fff;">鏄ㄦ棩鍑哄簱鏁伴噺</div>
+ <div :style="{color:colorX}">鏄ㄦ棩鍑哄簱鏁伴噺</div>
</div>
</div>
</div>
@@ -85,7 +85,7 @@
</div>
<div style="height: 190px;position: relative" class="kb_flex_space_between">
<div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
- <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">鍏ュ簱鍙婃椂鐜�
+ <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #c7e7ff">鍏ュ簱鍙婃椂鐜�
</div>
<div
@@ -287,17 +287,17 @@
loadEcharts('zhkb06', zhkb06())
loadEcharts('zhkb06_2', zhkb06())
}, 1000 * 8)
- setInterval(() => {
- loadEcharts('zhkb07_1', zhkb07())
- loadEcharts('zhkb07_2', zhkb07())
- loadEcharts('zhkb07_3', zhkb07())
- loadEcharts('zhkb07_4', zhkb07())
- loadEcharts('zhkb07_5', zhkb07())
- loadEcharts('zhkb07_6', zhkb07())
- }, 1000 * 5)
+ // setInterval(() => {
+ // loadEcharts('zhkb07_1', zhkb07())
+ // loadEcharts('zhkb07_2', zhkb07())
+ // loadEcharts('zhkb07_3', zhkb07())
+ // loadEcharts('zhkb07_4', zhkb07())
+ // loadEcharts('zhkb07_5', zhkb07())
+ // loadEcharts('zhkb07_6', zhkb07())
+ // }, 1000 * 5)
setInterval(() => {
loadEcharts('zhkb08', zhkb08())
- }, 1000 * 6.5)
+ }, 1000 * 9.5)
setInterval(() => {
loadEcharts('zhkb09', zhkb09())
}, 1000 * 10.5)
@@ -388,6 +388,7 @@
{
// name: 'title',
type: 'pie',
+ silent: true,
radius: [60, 90],
center: ['75%', '60%'],
label: {
@@ -476,6 +477,7 @@
}
},
getzhkb12() {
+ const value1 = Math.ceil(Math.random() * 10 + 60)
const option = {
backgroundColor: 'transparent',
grid: {
@@ -486,11 +488,11 @@
containLabel: true
},
title: {
- text: '85%',
+ text: value1 + '%',
x: '36%',
y: '40%',
textStyle: {
- color: '#fff',
+ color: this.colorX,
fontSize: 26
}
},
@@ -499,7 +501,7 @@
type: 'liquidFill',
radius: '80%',
// data: [0.6],
- data: [0.6, 0.4, 0.2],
+ data: [value1 / 100, 0.4, 0.2],
backgroundStyle: {
color: {
type: 'radial',
@@ -798,19 +800,24 @@
},
getzhkb02() {
+ let a, b, c, d
+ a = Math.ceil(Math.random() * 10 + 20)
+ b = Math.ceil(Math.random() * 10 + 20)
+ c = Math.ceil(Math.random() * 10 + 20)
+ d = 100 - a - b - c
const data = [
{
'name': '鐢熶骇宸叉帓婊�',
- 'value': 40
+ 'value': a
}, {
'name': '鐗╂枡涓嶈冻',
- 'value': 10
+ 'value': b
}, {
'name': '鎻掔彮',
- 'value': 20
+ 'value': c
}, {
'name': '鍏跺畠',
- 'value': 30
+ 'value': d
}]
const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
@@ -831,7 +838,7 @@
// color: ['#ff9d19']
// },
x: 'center',
- y: '-2%'
+ y: '2%'
},
grid: {
left: '0%',
@@ -842,7 +849,7 @@
},
legend: {
orient: 'vertical',
- top: 'middle',
+ top: '30%',
left: '5%',
textStyle: {
color: colorArr.map(r => r),
@@ -857,8 +864,9 @@
left: 150,
radius: ['40%', '61%'],
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
type: 'pie',
+ silent: true,
label: {
normal: {
show: true,
@@ -886,7 +894,7 @@
normal: {
show: true,
length: 30,
- length2: 55
+ length2: 30
},
emphasis: {
show: true
@@ -900,8 +908,9 @@
{
left: 150,
radius: ['30%', '34%'],
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
type: 'pie',
+ silent: true,
label: {
normal: {
show: false
@@ -929,13 +938,15 @@
color: '#09d8f2'
}
}]
- }, {
+ },
+ {
left: 150,
name: '澶栬竟妗�',
type: 'pie',
+ silent: true,
clockWise: false, // 椤烘椂鍔犺浇
hoverAnimation: false, // 榧犳爣绉诲叆鍙樺ぇ
- center: ['50%', '50%'],
+ center: ['50%', '60%'],
radius: ['65%', '65%'],
label: {
normal: {
@@ -974,7 +985,7 @@
})
let currentIndex = -1 // 褰撳墠楂樹寒鍥惧舰鍦ㄩゼ鍥炬暟鎹腑鐨勪笅鏍�
- const changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
+ var changePieInterval = setInterval(selectPie, 2000) // 璁剧疆鑷姩鍒囨崲楂樹寒鍥惧舰鐨勫畾鏃跺櫒
function highlightPie() { // 鍙栨秷鎵�鏈夐珮浜苟楂樹寒褰撳墠鍥惧舰
// for (var idx in option.series[0].data) {
--
Gitblit v1.9.3