From e713b378b01d189f972cfb5b9eae749ee95a8b51 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 29 十月 2022 13:48:00 +0800
Subject: [PATCH] 1.解决两个账号登录，是否被挤掉的问题
---
src/utils/myEcharts.js | 352 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 334 insertions(+), 18 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index a68e0d0..ac3560d 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -350,21 +350,38 @@
}
// 缁煎悎鐪嬫澘鍥�
-export function bar02() {
- const data = [70, 60, 50, 40, 30]
+export function bar02(dataArr, titlenameArr) {
+ // const data = [70, 60, 50, 40, 30]
+ // 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 = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
+ const titlename = titlenameArr.filter((item, index) => index < 5)
+
+ const length = titlename.length
+ if (titlename.length < 5) {
+ for (let i = 0; i < 5 - length; i++) {
+ titlename.push('0')
+ }
+ }
+
const valdata = [683, 500, 400, 300, 200]
- const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
+ // const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
+ // const myColor = ['#0000FF']
+ // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
+ const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
const option = {
backgroundColor: 'transparent',
title: {
- text: 'Top5涓嶈壇',
- x: 'center',
+ show: false,
+ text: '涓�鍛ㄥ唴Top5涓嶈壇锛�',
+ x: '2%',
y: '4%',
textStyle: {
- color: '#fff',
- fontSize: '22'
+ color: '#d8d7d9',
+ fontSize: '18'
+ // fontWeight: 'lighter'
},
subtextStyle: {
color: '#90979c',
@@ -373,8 +390,8 @@
}
},
grid: {
- left: '2%',
- right: '2%',
+ left: '10%',
+ right: '5%',
bottom: '0%',
top: '10%',
containLabel: true
@@ -397,16 +414,29 @@
show: false
},
axisLabel: {
- color: '#fff',
- fontSize: 14,
- formatter: function(value, index) {
- return [
- '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
- ].join('\n')
+ // color: '#fff',
+ color: function(value, index) {
+ return value === '0' ? 'transparent' : '#fff'
+ },
+ fontSize: 18,
+ // formatter: function(value, index) {
+ // return [
+ // '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
+ // ].join('\n')
+ // },
+ formatter: function(params) {
+ var val = ''
+ if (params.length > 8) {
+ val = params.substr(0, 8) + '...'
+ return val
+ } else {
+ return params
+ }
},
rich: {
lg: {
- // backgroundColor: '#339911',
+ // backgroundColor: '#339911',
+ // color: '#d8d7d9',
color: '#fff',
borderRadius: 15,
// padding: 5,
@@ -463,7 +493,7 @@
formatter: '{c}',
fontSize: 14,
color: '#fff'
- // formatter: '{c}%',
+ // formatter: '{c}%',
}
}
}
@@ -472,3 +502,289 @@
return option
}
+
+// 浠撳簱绠＄悊鐪嬫澘鍥� 锛堝純鐢級
+export function bar03(titleText) {
+ const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
+ const zzx1 = ['800', '900', '700', '300', '500', '800', '700']
+ const wgx1 = ['700', '600', '500', '400', '300', '333', '222']
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false,
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+ formatter: function(e) {
+ if (e.length > 1) {
+ var S = e[1].data - e[0].data
+ return e[0].axisValue + ':<br>宸=褰撳墠锛嶅勾鍒�<br>=' + S
+ } else if (e.length = 1) {
+ return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
+ }
+ }
+ },
+ title: {
+ text: titleText,
+ x: '66%',
+ y: '2%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '18',
+ fontWeight: 'lighter'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ data: ['title1', 'title2'],
+ left: 220,
+ top: 10,
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 14
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ itemGap: 35,
+ color: '#242424'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�'],
+ axisLine: {
+ lineStyle: {
+ show: true,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ }
+ },
+ axisLabel: {
+ // interval: 0,
+ // rotate: 40,
+ textStyle: {
+ fontFamily: 'Microsoft YaHei',
+ color: '#fff', // x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: '14',
+ lineHeight: 22
+ }
+ }
+ // splitLine:{
+ // show:true,
+ // lineStyle: {
+ // type: 'dashed',
+ // color: 'rgba(135,140,147,0.8)'
+ // }
+ // },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺锛堝崟浣嶏細涓級',
+ nameTextStyle: {
+ color: '#ffffff'
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(135,140,147,1)' // 宸︿晶鏄剧ず绾�
+ }
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ series: [
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [-18, -4],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#3440FF',
+ data: zzx1
+ },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [18, -4],
+ // symbolOffset: [20, -5],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#FF1155',
+ data: wgx1
+ },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [-18, 4],
+ z: 12,
+ color: 'rgba(126,192,238,0.6)',
+ data: zzx1
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ // symbolOffset: [20, 4],
+ symbolOffset: [18, 4],
+ color: '#FFC0CB',
+ z: 12,
+ data: wgx1
+ }, {
+ name: 'title1',
+ type: 'bar',
+ barWidth: '30',
+ itemStyle: {
+ normal: {
+ opacity: 0.7,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'blue'
+ }, {
+ offset: 1,
+ color: '#7EC0EE'
+ }]),
+ barBorderRadius: 0
+ }
+
+ },
+ label: {
+ show: true,
+ // position: ['-18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
+ },
+ data: zzx1
+ },
+ {
+ name: 'title2',
+ type: 'bar',
+ barWidth: '30',
+ itemStyle: {
+ normal: {
+ opacity: 0.7,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#FF2246'
+ }, {
+ offset: 1,
+ color: '#FFC0CB'
+
+ }]),
+ barBorderRadius: 0
+ }
+
+ },
+ label: {
+ show: true,
+ // position: ['18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
+ },
+ data: wgx1
+ }
+ ]
+ }
+
+ return option
+}
+
+// 閲囪喘璁㈠崟鍥�
+export function pie01() {
+ const option = {
+ backgroundColor: 'transparent',
+ title: {
+ text: '60.21%',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#fff',
+ fontSize: 18
+ }
+ },
+ color: ['rgba(176, 212, 251, 1)'],
+ legend: {
+ show: false,
+ itemGap: 12,
+ data: ['01', '02']
+ },
+
+ series: [
+ {
+ name: 'Line 1',
+ type: 'pie',
+ clockWise: true,
+ radius: ['50%', '66%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ },
+ hoverAnimation: false,
+ data: [
+ {
+ value: 80,
+ name: '01',
+ itemStyle: {
+ normal: {
+ color: { // 瀹屾垚鐨勫渾鐜殑棰滆壊
+ colorStops: [{
+ offset: 0,
+ color: '#24d3ff' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#5580fe' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ }
+ },
+ {
+ name: '02',
+ value: 20
+ }
+ ]
+ }]
+ }
+ return option
+}
--
Gitblit v1.9.3