From 248896ac0e9bb76906a270bbc5f83b1c6bd970dd Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 03 十月 2022 17:22:11 +0800
Subject: [PATCH] 1.综合看板基本实现
---
src/utils/myEcharts.js | 892 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 891 insertions(+), 1 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index b4eb432..79ef19f 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1,6 +1,6 @@
import * as echarts from 'echarts'
-/**
+/** 255
* 缁熶竴鏍峰紡锛屽姞杞�
* @param {*} id
* @param {*} option
@@ -2832,3 +2832,893 @@
return option
}
+
+export function zhkb08() {
+ const data = [
+ {
+ name: '閽㈡潗鏀瑰埗杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鍐峰ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑鐞嗚溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杈惧厠缃楄溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '閾搁�犺溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ }
+ ]
+
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']
+
+ const getArrByKey = (data, k) => {
+ const key = k || 'value'
+ const res = []
+ if (data) {
+ data.forEach(function(t) {
+ res.push(t[key])
+ })
+ }
+ return res
+ }
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+ // console.log(getSymbolData(data));
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '涔濇湀鑳借�楃敤閲�',
+ x: '44%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // color: colorY,
+ align: 'left',
+ margin: 30,
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16,
+ align: 'right'
+ // width: 36
+ }
+ // formatter: function(value, index) {
+ // return '{title|' + value + '}'
+ // },
+ // rich: {
+ // title: {
+ // width: 36,
+ // align: 'right',
+ // fontSize: 16
+ // }
+ // }
+ }
+ },
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ // color: colorX,
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 16,
+ margin: 20,
+ formatter: function(value, index) {
+ // return data[index].value + '%'
+ return data[index].value + '鍚�'
+ }
+
+ }
+ }],
+ series: [
+ {
+ name: 'XXX',
+ type: 'pictorialBar',
+ symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [50, 50],
+ symbolOffset: [20, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff'
+ }
+ },
+ data: getSymbolData(data)
+ },
+ {
+ name: '鏉�',
+ type: 'bar',
+ showBackground: true,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ return myColor[params.dataIndex]
+ },
+ barBorderRadius: 10
+ }
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 鏆傛椂寮冪敤
+export function zhkb092222() {
+ const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
+ const sideData = data.map(item => item + 4.5)
+
+ const option = {
+
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'axis',
+ // formatter: '{b} : {c}',
+ // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ // }
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ // 鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8'
+ }
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ },
+ yAxis: {
+ // 鍧愭爣杞�
+ axisLine: {
+ show: false
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ },
+ // 鍒嗘牸绾�
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitNumber: 3
+ },
+ series: [
+ {
+ name: 'a',
+ tooltip: {
+ show: false
+ },
+ type: 'bar',
+ barWidth: 18,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#0B4EC3' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#138CEB' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#17AAFE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data,
+ barGap: 0
+ },
+ {
+ type: 'bar',
+ barWidth: 8,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#09337C' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#0761C0' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#0575DE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barGap: 0,
+ data: sideData
+ },
+ {
+ name: 'b',
+ tooltip: {
+ show: false
+ },
+ type: 'pictorialBar',
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#0571D5',
+ color: '#1779E0'
+ },
+ symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+ symbolSize: ['30', '6'],
+ symbolOffset: ['0', '-4'],
+ // symbolRotate: -5,
+ symbolPosition: 'end',
+ data: data,
+ z: 3
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb09() {
+ const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ },
+ color: ['#3cefff'],
+ tooltip: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ // formatter: '{value}%'
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, -5],
+ symbolPosition: 'end',
+ z: 12,
+ label: {
+ normal: {
+ show: false,
+ position: 'top',
+ formatter: '{c}%'
+ }
+ },
+ data: dataY
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, 5],
+ z: 12,
+ data: dataY
+ },
+ {
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ opacity: 0.7
+ }
+ },
+ barWidth: '20',
+ data: dataY
+ // markLine: {
+ // silent: true,
+ // label: {
+ // position: 'middle',
+ // formatter: '{b}',
+ // color: 'red'
+ // },
+ // data: [
+ // {
+ // name: '鐩爣鍊�',
+ // yAxis: 80,
+ // lineStyle: {
+ // color: 'red'
+ // },
+ // itemStyle: {
+ // color: 'red'
+ // },
+ // label: {
+ // position: 'end',
+ // formatter: '{b}\n {c}%'
+ // }
+ // }
+ // ]
+ // }
+ },
+ {
+ type: 'effectScatter',
+ silent: true,
+ tooltip: {
+ show: false
+ },
+ zlevel: 3,
+ symbolSize: 10,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke',
+ color: '#3cefff',
+ scale: 5
+ },
+ itemStyle: {
+ color: '#3cefff'
+ },
+ hoverAnimation: true,
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb10() {
+ 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 option = {
+ backgroundColor: 'transparent',
+ legend: {
+ x: 'right',
+ y: '2%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '7%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ max: Math.ceil(Math.max(...data1) * 1.2),
+ 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: '浜哄憳鍒嗘瀽1',
+ 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: '浜哄憳鍒嗘瀽2',
+ 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
+}
+
+export function zhkb11() {
+ const option = {
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鏃舵-杩涘嚭娓祦閲�',
+ // left: '5%',
+ // top: '5%',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: '18px'
+ // }
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: [
+ {
+ icon: 'react',
+ right: '0%',
+ top: '0%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ itemGap: 30,
+ itemWidth: 30,
+ itemHeight: 4,
+ data: ['璁惧鍒╃敤鐜�', '璁惧寮�鏈虹巼']
+ }
+ ],
+ grid: {
+ top: '10%',
+ right: '5%',
+ left: '1%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: [
+ {
+ type: 'category',
+ data: ['鍐烽暒杞﹂棿', '鐑ⅸ杞﹂棿', '杈惧厠缃楄溅闂�', '纾峰寲杞﹂棿', '娉ㄥ杞﹂棿'],
+ axisLine: {
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 2
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // margin: 10,
+ color: '#09d8f2',
+ textStyle: {
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ xAxis: [
+ {
+ axisLabel: {
+ formatter: '{value}',
+ color: '#6895CA',
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: '#184D9A'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁惧鍒╃敤鐜�',
+ type: 'bar',
+ barGap: '70%',
+ data: [30, 75, 77, 39, 85],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#00FF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ verticalAlign: 'center',
+ borderRadius: 200,
+ position: 'right',
+ color: '#00FF00',
+ fontSize: 16
+ }
+ }
+ },
+ {
+ name: '璁惧寮�鏈虹巼',
+ type: 'bar',
+ data: [90, 45, 27, 20, 85],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ borderRadius: 200,
+ verticalAlign: 'center',
+ // position: ['-0', '-20'],
+ position: 'right',
+ color: '#FFFF00',
+ fontSize: 16
+ }
+ }
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb12() {
+
+}
--
Gitblit v1.9.3