From 32ec691abab0c837f34ce2c4908a40a10b9dbec7 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 29 七月 2022 17:20:15 +0800
Subject: [PATCH] 1.优化项目2.综合看板静态页面初步实现
---
src/utils/myEcharts.js | 133 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 129 insertions(+), 4 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index e67cf75..a68e0d0 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -116,6 +116,7 @@
return option
}
+
export function bar01(data) {
var dataX = data.map(r => r.key)
var dataY = data.map(r => r.value)
@@ -209,11 +210,11 @@
colorStops: [
{
offset: 0,
- color: `rgba(42,197,137,1)`// 0% 澶勭殑棰滆壊
+ color: `rgba(42, 197, 137, 1)`// 0% 澶勭殑棰滆壊
},
{
offset: 1,
- color: `rgba(187,236,218,1)` // 100% 澶勭殑棰滆壊
+ color: `rgba(187, 236, 218, 1)` // 100% 澶勭殑棰滆壊
}
],
globalCoord: false // 缂虹渷涓� false
@@ -332,13 +333,13 @@
symbolSize: 8,
itemStyle: {
normal: {
- color: `rgba(42,197,137,1)`
+ color: `rgba(42, 197, 137, 1)`
}
},
lineStyle: {
normal: {
width: 2,
- color: `rgba(42,197,137,1)`
+ color: `rgba(42, 197, 137, 1)`
}
},
data: dataY
@@ -347,3 +348,127 @@
return option
}
+
+// 缁煎悎鐪嬫澘鍥�
+export function bar02() {
+ const data = [70, 60, 50, 40, 30]
+
+ const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
+ const valdata = [683, 500, 400, 300, 200]
+ const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
+ const option = {
+ backgroundColor: 'transparent',
+ title: {
+ text: 'Top5涓嶈壇',
+ x: 'center',
+ y: '4%',
+ textStyle: {
+ color: '#fff',
+ fontSize: '22'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '0%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ show: true,
+ data: titlename,
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: 14,
+ formatter: function(value, index) {
+ return [
+ '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
+ ].join('\n')
+ },
+ rich: {
+ lg: {
+ // backgroundColor: '#339911',
+ color: '#fff',
+ borderRadius: 15,
+ // padding: 5,
+ align: 'center',
+ width: 15,
+ height: 15
+ }
+ }
+ }
+ },
+ {
+ show: false,
+ inverse: true,
+ data: valdata,
+ axisLabel: {
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+
+ }
+ ],
+ series: [
+ {
+ name: '鏉�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 22,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: function(params) {
+ // const num = myColor.length
+ // return myColor[params.dataIndex % num]
+ return myColor[params.dataIndex]
+ }
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'right',
+ formatter: '{c}',
+ fontSize: 14,
+ color: '#fff'
+ // formatter: '{c}%',
+ }
+ }
+ }
+ ]
+ }
+
+ return option
+}
--
Gitblit v1.9.3