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 | 507 +++++++++++++++++++++++++++++---------------------------
1 files changed, 264 insertions(+), 243 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index d577d03..31dd3f8 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -327,26 +327,28 @@
}
}
},
- series: [{
- name: '鏃堕棿',
- type: 'line',
- smooth: false,
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 8,
- itemStyle: {
- normal: {
- color: `rgba(42, 197, 137, 1)`
- }
- },
- lineStyle: {
- normal: {
- width: 2,
- color: `rgba(42, 197, 137, 1)`
- }
- },
- data: dataY
- }]
+ series: [
+ {
+ name: '鏃堕棿',
+ type: 'line',
+ smooth: false,
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 8,
+ itemStyle: {
+ normal: {
+ color: `rgba(42, 197, 137, 1)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(42, 197, 137, 1)`
+ }
+ },
+ data: dataY
+ }
+ ]
}
return option
@@ -358,6 +360,7 @@
// const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
// const data = val.map(i => i.cont)
// const titlename = val.map(i => i.name)
+
const data = dataArr.filter((item, index) => index < 5)
const titlename = titlenameArr.filter((item, index) => index < 5)
@@ -423,7 +426,7 @@
color: function(value, index) {
return value === '0' ? 'transparent' : '#fff'
},
- fontSize: 20,
+ fontSize: 16,
// formatter: function(value, index) {
// return [
// '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
@@ -2103,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: {
@@ -2643,7 +2646,7 @@
}
}
-export function cjzl03_2(xData, legendData, yData, show) { // 宸︿晶
+export function cjzl03_2(xData, yData) { // 宸︿晶
return {
backgroundColor: 'transparent',
// tooltip: {},
@@ -2741,7 +2744,7 @@
],
series: [
{
- name: legendData[0],
+
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2770,216 +2773,25 @@
tooltip: {
show: false
},
- // areaStyle: { // 鍖哄煙濉厖鏍峰紡
- // normal: {
- // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(0,154,120,1)'
- // },
- // {
- // offset: 1,
- // color: 'rgba(0,0,0, 0)'
- // }
- // ], false),
- // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
- // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
- // }
- // },
- data: yData[0]
- },
- {
- name: legendData[1],
- type: 'line',
- // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
- // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 6,
- lineStyle: {
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
normal: {
- color: '#ff3000' // 绾挎潯棰滆壊
- },
- borderColor: '#ff3000'
- },
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 16,
- color: '#fff'
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,154,120,1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ], false),
+ shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
}
},
- itemStyle: {
- normal: {
- color: '#ff3000'
- }
- },
- tooltip: {
- show: false
- },
- // areaStyle: { // 鍖哄煙濉厖鏍峰紡
- // normal: {
- // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(0,154,120,1)'
- // },
- // {
- // offset: 1,
- // color: 'rgba(0,0,0, 0)'
- // }
- // ], false),
- // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
- // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
- // }
- // },
- data: yData[1]
- },
- {
- name: legendData[2],
- type: 'line',
- // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
- // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: '#ffa800' // 绾挎潯棰滆壊
- },
- borderColor: '#ffa800'
- },
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 16,
- color: '#fff'
- }
- },
- itemStyle: {
- normal: {
- color: '#ffa800'
- }
- },
- tooltip: {
- show: false
- },
- // areaStyle: { // 鍖哄煙濉厖鏍峰紡
- // normal: {
- // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(0,154,120,1)'
- // },
- // {
- // offset: 1,
- // color: 'rgba(0,0,0, 0)'
- // }
- // ], false),
- // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
- // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
- // }
- // },
- data: yData[2]
- },
- {
- name: legendData[3],
- type: 'line',
- // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
- // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: '#ffee00' // 绾挎潯棰滆壊
- },
- borderColor: '#ffee00'
- },
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 16,
- color: '#fff'
- }
- },
- itemStyle: {
- normal: {
- color: '#ffee00'
- }
- },
- tooltip: {
- show: false
- },
- // areaStyle: { // 鍖哄煙濉厖鏍峰紡
- // normal: {
- // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(0,154,120,1)'
- // },
- // {
- // offset: 1,
- // color: 'rgba(0,0,0, 0)'
- // }
- // ], false),
- // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
- // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
- // }
- // },
- data: yData[3]
- },
- {
- name: legendData[4],
- type: 'line',
- // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
- // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
- showAllSymbol: true,
- symbol: 'emptyCircle',
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: '#ff5b00' // 绾挎潯棰滆壊
- },
- borderColor: '#ff5b00'
- },
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 16,
- color: '#fff'
- }
- },
- itemStyle: {
- normal: {
- color: '#ff5b00'
- }
- },
- tooltip: {
- show: false
- },
- // areaStyle: { // 鍖哄煙濉厖鏍峰紡
- // normal: {
- // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(0,154,120,1)'
- // },
- // {
- // offset: 1,
- // color: 'rgba(0,0,0, 0)'
- // }
- // ], false),
- // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
- // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
- // }
- // },
- data: yData[4]
+ data: yData
}
+
]
}
}
@@ -3122,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