方案数据趋势图多y轴调整
This commit is contained in:
zhujiyan
@@ -165,6 +165,7 @@ import { useDictData } from '@/stores/dictData'
|
|||||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { isNonNullChain } from 'typescript'
|
import { isNonNullChain } from 'typescript'
|
||||||
|
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/device/manage'
|
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) {
|
if (historyDevId.value) {
|
||||||
//选择的指标使用方法处理
|
//选择的指标使用方法处理
|
||||||
initSearchFormIndexAndCount(searchForm.value.index)
|
initSearchFormIndexAndCount(searchForm.value.index)
|
||||||
@@ -339,10 +355,12 @@ const init = async () => {
|
|||||||
|
|
||||||
let xAxis: any = [],
|
let xAxis: any = [],
|
||||||
timeList: any = []
|
timeList: any = []
|
||||||
let unit = ''
|
let unitList: any = []
|
||||||
historyDataList.value.map((item: any) => {
|
historyDataList.value.map((item: any) => {
|
||||||
timeList.push(item.time)
|
timeList.push(item.time)
|
||||||
unit = item.unit
|
if (unitList.indexOf(item.unit) == -1) {
|
||||||
|
unitList.push(item.unit)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
xAxis = timeList.sort((a: any, b: any) => {
|
xAxis = timeList.sort((a: any, b: any) => {
|
||||||
return (
|
return (
|
||||||
@@ -361,7 +379,8 @@ const init = async () => {
|
|||||||
options: {
|
options: {
|
||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
left: 'center',
|
left: '10%',
|
||||||
|
top: 0,
|
||||||
text: chartTitle.value
|
text: chartTitle.value
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
@@ -378,6 +397,21 @@ const init = async () => {
|
|||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var res = params[0].name + '<br/>'
|
||||||
|
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 +
|
||||||
|
' ' +
|
||||||
|
`<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 10px"></div>` +
|
||||||
|
`<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
|
||||||
|
}
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@@ -388,21 +422,23 @@ const init = async () => {
|
|||||||
itemGap: 15,
|
itemGap: 15,
|
||||||
type: 'scroll', // 开启滚动分页
|
type: 'scroll', // 开启滚动分页
|
||||||
// orient: 'vertical', // 垂直排列
|
// orient: 'vertical', // 垂直排列
|
||||||
right: 10, // 位置调整
|
right: '13%', // 位置调整
|
||||||
width: 300,
|
top: 0,
|
||||||
|
bottom: 20,
|
||||||
|
width: 400,
|
||||||
height: 50
|
height: 50
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '1%',
|
left: '3%',
|
||||||
right: '5%',
|
right: '3%',
|
||||||
bottom: '5%',
|
bottom: '10%',
|
||||||
top: '10%',
|
top: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name: '时间',
|
name: '\n\n\n\n\n时间',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#A9AEB2',
|
color: '#A9AEB2',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@@ -411,6 +447,9 @@ const init = async () => {
|
|||||||
// return data.some(item:any => item[0] === value)
|
// return data.some(item:any => item[0] === value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
right: 0
|
||||||
|
},
|
||||||
data: Array.from(new Set(xAxis)),
|
data: Array.from(new Set(xAxis)),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@@ -422,10 +461,10 @@ const init = async () => {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: unit,
|
name: unitList[0],
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#A9AEB2',
|
color: '#000',
|
||||||
fontSize: 12
|
fontSize: 14
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: true
|
show: true
|
||||||
@@ -433,12 +472,12 @@ const init = async () => {
|
|||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
// color: 'white'
|
color: colorList[0]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#A9AEB2',
|
color: '#000',
|
||||||
fontSize: '12'
|
fontSize: '14'
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false,
|
show: false,
|
||||||
@@ -453,8 +492,47 @@ const init = async () => {
|
|||||||
series: []
|
series: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//颜色数组
|
//处理多y轴
|
||||||
const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
|
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) => {
|
list.map((item: any, index: any) => {
|
||||||
item.map((vv: any, indexs: any) => {
|
item.map((vv: any, indexs: any) => {
|
||||||
//处理legend
|
//处理legend
|
||||||
@@ -464,6 +542,18 @@ const init = async () => {
|
|||||||
icon: iconThree
|
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数据
|
//series数据
|
||||||
echartsData.value.options.series.push({
|
echartsData.value.options.series.push({
|
||||||
name: vv.phase + '相' + vv.showName,
|
name: vv.phase + '相' + vv.showName,
|
||||||
@@ -473,14 +563,8 @@ const init = async () => {
|
|||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {},
|
||||||
normal: {
|
//数据
|
||||||
color: colorList[indexs],
|
|
||||||
lineStyle: {
|
|
||||||
color: colorList[indexs]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: historyDataList.value
|
data: historyDataList.value
|
||||||
.map((kk: any) => {
|
.map((kk: any) => {
|
||||||
if (kk.statisticalName == vv.name) {
|
if (kk.statisticalName == vv.name) {
|
||||||
@@ -489,10 +573,24 @@ const init = async () => {
|
|||||||
return ''
|
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
|
loading.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user