From 664a46fc62954c7ee167177e373b81b458e8f91c Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Thu, 4 Jul 2024 14:22:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B9=E6=A1=88=E6=95=B0=E6=8D=AE=E8=B6=8B?=
=?UTF-8?q?=E5=8A=BF=E5=9B=BE=E5=A4=9Ay=E8=BD=B4=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/govern/device/planData/index.vue | 152 +++++++++++++++++----
1 file changed, 125 insertions(+), 27 deletions(-)
diff --git a/src/views/govern/device/planData/index.vue b/src/views/govern/device/planData/index.vue
index a9a78ce..39520e6 100644
--- a/src/views/govern/device/planData/index.vue
+++ b/src/views/govern/device/planData/index.vue
@@ -165,6 +165,7 @@ import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
+import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
@@ -280,6 +281,21 @@ const init = async () => {
})
})
+ //颜色数组
+ const colorList = [
+ '#DAA521',
+ '#2E8B58',
+ 'blueviolet',
+ '#A5292A',
+ 'aqua',
+ '#d81e06',
+ 'coral',
+ '#012B6A',
+ 'brown',
+ '#70B601',
+ '#1DD0CE',
+ 'cadetblue',
+ ]
if (historyDevId.value) {
//选择的指标使用方法处理
initSearchFormIndexAndCount(searchForm.value.index)
@@ -339,10 +355,12 @@ const init = async () => {
let xAxis: any = [],
timeList: any = []
- let unit = ''
+ let unitList: any = []
historyDataList.value.map((item: any) => {
timeList.push(item.time)
- unit = item.unit
+ if (unitList.indexOf(item.unit) == -1) {
+ unitList.push(item.unit)
+ }
})
xAxis = timeList.sort((a: any, b: any) => {
return (
@@ -361,7 +379,8 @@ const init = async () => {
options: {
title: [
{
- left: 'center',
+ left: '10%',
+ top: 0,
text: chartTitle.value
}
],
@@ -378,6 +397,21 @@ const init = async () => {
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ formatter: function (params: any) {
+ var res = params[0].name + '
'
+ for (var i = 0, l = params.length; i < l; i++) {
+ params[i].unit =
+ echartsData.value.options.yAxis[
+ echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
+ ]?.name
+ res +=
+ params[i].seriesName +
+ ' ' +
+ `` +
+ `${params[i].value} ${params[i].unit}
`
+ }
+ return res
}
},
legend: {
@@ -388,21 +422,23 @@ const init = async () => {
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
- right: 10, // 位置调整
- width: 300,
+ right: '13%', // 位置调整
+ top: 0,
+ bottom: 20,
+ width: 400,
height: 50
},
grid: {
- left: '1%',
- right: '5%',
- bottom: '5%',
- top: '10%',
+ left: '3%',
+ right: '3%',
+ bottom: '10%',
+ top: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
- name: '时间',
+ name: '\n\n\n\n\n时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,
@@ -411,6 +447,9 @@ const init = async () => {
// return data.some(item:any => item[0] === value)
}
},
+ nameTextStyle: {
+ right: 0
+ },
data: Array.from(new Set(xAxis)),
axisLine: {
lineStyle: {
@@ -422,10 +461,10 @@ const init = async () => {
yAxis: [
{
type: 'value',
- name: unit,
+ name: unitList[0],
axisLabel: {
- color: '#A9AEB2',
- fontSize: 12
+ color: '#000',
+ fontSize: 14
},
axisTick: {
show: true
@@ -433,12 +472,12 @@ const init = async () => {
axisLine: {
show: true,
lineStyle: {
- // color: 'white'
+ color: colorList[0]
}
},
nameTextStyle: {
- color: '#A9AEB2',
- fontSize: '12'
+ color: '#000',
+ fontSize: '14'
},
splitLine: {
show: false,
@@ -453,8 +492,47 @@ const init = async () => {
series: []
}
}
- //颜色数组
- const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
+ //处理多y轴
+ if (unitList.length != 0 && unitList.length > 1) {
+ // echartsData.value.options.yAxis[0].yAxisIndex = 0
+ unitList.map((item: any, index: any) => {
+ if (index != unitList.length - 1) {
+ echartsData.value.options.yAxis.push({
+ type: 'value',
+ position: 'right',
+ offset: index * 80, // y轴位置的偏移量
+ name: unitList[index + 1],
+ axisLabel: {
+ color: '#000',
+ fontSize: 14
+ },
+ axisTick: {
+ show: true
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colorList[index+1]
+ }
+ },
+ nameTextStyle: {
+ color: '#000',
+ fontSize: '14'
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: ['#43485E'],
+ width: 1,
+ type: 'solid'
+ }
+ }
+ // yAxisIndex: index + 1
+ })
+ }
+ })
+ }
+
list.map((item: any, index: any) => {
item.map((vv: any, indexs: any) => {
//处理legend
@@ -464,6 +542,18 @@ const init = async () => {
icon: iconThree
})
}
+ if (
+ unitList.findIndex((item: any) => {
+ return item == vv.unit
+ }) != -1
+ ) {
+ vv.yAxisIndex = unitList.findIndex((item: any) => {
+ return item == vv.unit
+ })
+ } else {
+ vv.yAxisIndex = 0
+ }
+
//series数据
echartsData.value.options.series.push({
name: vv.phase + '相' + vv.showName,
@@ -473,14 +563,8 @@ const init = async () => {
emphasis: {
focus: 'series'
},
- itemStyle: {
- normal: {
- color: colorList[indexs],
- lineStyle: {
- color: colorList[indexs]
- }
- }
- },
+ itemStyle: {},
+ //数据
data: historyDataList.value
.map((kk: any) => {
if (kk.statisticalName == vv.name) {
@@ -489,10 +573,24 @@ const init = async () => {
return ''
}
})
- .filter((kk: any) => kk !== '')
+ .filter((kk: any) => kk !== ''),
+ //数据对应的y轴
+ // yAxisIndex:0,
+ yAxisIndex: vv.yAxisIndex
})
})
})
+ //设置数据项颜色
+ echartsData.value.options.series.map((item: any, index: any) => {
+ item.itemStyle = {
+ normal: {
+ color: colorList[index],
+ lineStyle: {
+ color: colorList[index]
+ }
+ }
+ }
+ })
loading.value = false
}
})