From 56ba7c96dd7054e5d544a9ffbe80593107ecb855 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期二, 02 七月 2024 15:18:58 +0800
Subject: [PATCH] 1.金华智研院看板开发100%
---
src/utils/myEcharts.js | 758 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 758 insertions(+), 0 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index d9ab55a..d6d01c6 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -4501,3 +4501,761 @@
return option
}
+
+export function echart06() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '10%',
+ top: '20%',
+ bottom: '15%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ // max: 1000,
+ splitNumber: 4,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [500, 800, 100, 900, 1000, 800]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart07() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '鏁村巶缁堟鐜�',
+ x: '40%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 100,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value} %',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [99, 98, 100, 96, 100, 97]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart08() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '缂洪櫡鍒嗙被姣斾緥',
+ x: '40%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['鍘嬮摳', '鎴愬瀷', '鎶涘厜', '鐐圭剨', '鐑ゆ紗', '鐢甸晙']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 100,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value} %',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+ {
+ name: ' ',
+ type: 'bar',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [55, 68, 60, 86, 40, 37]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart09() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '铏氭嫙娴嬮噺',
+ x: '45%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['Pro01', 'Pro02', 'Pro03', 'Pro04', 'Pro05', 'Pro06']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 3000,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [2000, 2298, 2800, 0, 2200, 1600]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart10() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '30%',
+ bottom: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '鍘嬪姏鐩戞帶',
+ x: '46%',
+ y: '12%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 90, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ min: -20,
+ max: 20,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+ {
+ name: ' ',
+ type: 'bar',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [-10, -20, 5, 10, -5, 20, 10, -10, -20, -10, 5, 10, 20, 10]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart11() {
+ 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 + 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: {
+ x: '55%',
+ y: '10%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '30%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ // max: Math.ceil(Math.max(...data1) * 1.2),
+ // max: 100,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'category',
+ nameTextStyle: {
+ fontSize: 16,
+ color: '#7dd6ea'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // margin: 20,
+ textStyle: {
+ color: colorX,
+ fontSize: 16
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 3
+ }
+ },
+ data: ['閽㈡潗鏀瑰埗', '鍐峰ⅸ', '鐑ⅸ', '鐑鐞�', '杈惧厠缃�', '闀�閿�']
+ },
+ series: [
+ {
+ name: '璁″垝浜ч噺',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '30%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0,234,255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,234,255, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 36,
+ // color: '#00EAFF'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data1,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [-10, 0],
+ data: data1,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ },
+ {
+ name: '瀹為檯浜ч噺',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(252,160,0, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,160,0, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 16,
+ // color: '#FFA200'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data2,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [10, 0],
+ data: data2,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
--
Gitblit v1.9.3