From fb6f82d799e5cbd789875e8f24d47413485ee8bd Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 10 五月 2024 11:25:32 +0800
Subject: [PATCH] 1.综合看板开发
---
src/utils/myEcharts.js | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 223 insertions(+), 14 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index b97dc12..31dd3f8 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -2106,23 +2106,23 @@
return {
backgroundColor: 'transparent',
// tooltip: {},
- title: {
- text: '姣忔湀璁㈠崟鏁伴噺/鍑哄簱鏁伴噺',
- left: '50%',
- top: '0%',
- textAlign: 'center',
- textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- }
- },
+ // title: {
+ // text: '姣忔湀璁㈠崟鏁伴噺/鍑哄簱鏁伴噺',
+ // left: '50%',
+ // top: '0%',
+ // textAlign: 'center',
+ // textStyle: {
+ // // color: '#fff',
+ // color: '#00ffff',
+ // fontSize: '20',
+ // fontWeight: 'bolder'
+ // }
+ // },
grid: {
left: '4%',
right: '4%',
- bottom: '4%',
- top: '15%',
+ bottom: '15%',
+ top: '10%',
containLabel: true
},
// legend: {
@@ -2934,3 +2934,212 @@
return option
}
+
+export function bar3(value1, value2) {
+ const list = [
+ {
+ key: '閲囪喘鏁伴噺',
+ value: value1
+ },
+ {
+ key: '宸查噰鏁伴噺',
+ value: value2
+ }
+
+ ]
+ const color = ['26,171,234', '73,226,196', '255,221,97']
+ const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
+ const seriesData = []
+
+ list.forEach((r, i) => {
+ var o = {
+ name: r.key,
+ type: 'bar',
+ smooth: false,
+ yAxisIndex: 0,
+ showSymbol: true,
+ showAllSymbol: true,
+ barWidth: 8,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(${color[i]})`
+ }
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 14,
+ color: '#fff'
+ }
+
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ data: r.value.map(r => r.value)
+ }
+
+ seriesData.push(o)
+ })
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ show: true,
+ data: list.map(r => r.key),
+ top: '4%',
+ right: '4%',
+ itemHeight: 20,
+ itemWidth: 20,
+ textStyle: {
+ fontSize: 14,
+ color: 'F1F1F3'
+ // color: colorX
+ }
+
+ },
+ // title: {
+ // text: '鍚堟牸鐜囧垎鏋�',
+ // left: '28%',
+ // top: '2%',
+ // textAlign: 'center',
+ // textStyle: {
+ // // color: '#fff',
+ // color: '#00ffff',
+ // fontSize: '20',
+ // fontWeight: 'bolder'
+ // }
+ // },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ // tooltip: {
+ // show: true,
+ // trigger: 'axis', // axis , item
+ // backgroundColor: 'RGBA(0, 0, 0, 0.3)',
+ // borderColor: 'rgba(0, 151, 251, 0.6)',
+ // borderWidth: 1,
+ // borderRadius: 0,
+ // textStyle: {
+ // color: '#BCE9FC',
+ // fontSize: 14,
+ // align: 'left'
+ // }
+ // },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xList
+ }
+ ],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+
+ ],
+ series: seriesData
+ }
+ return option
+}
--
Gitblit v1.9.3