方案数据趋势图多y轴调整
This commit is contained in:
zhujiyan
@@ -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 + '<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: {
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user