修改y轴样式
This commit is contained in:
@@ -8,21 +8,10 @@
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计指标" label-width="80px">
|
||||
<el-select
|
||||
multiple
|
||||
:multiple-limit="3"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
v-model="searchForm.index"
|
||||
placeholder="请选择统计指标"
|
||||
@change="onIndexChange($event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
|
||||
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
|
||||
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值类型">
|
||||
@@ -32,19 +21,11 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
class="history_count"
|
||||
v-for="(item, index) in countData"
|
||||
:key="index"
|
||||
<el-form-item class="history_count" v-for="(item, index) in countData" :key="index"
|
||||
:label="item.name.includes('次数') ? item.name : item.name + '谐波次数'"
|
||||
v-show="item.countOptions.length != 0"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.count"
|
||||
@change="onCountChange($event, index)"
|
||||
placeholder="请选择谐波次数"
|
||||
style="width: 100px"
|
||||
>
|
||||
v-show="item.countOptions.length != 0">
|
||||
<el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
|
||||
style="width: 100px">
|
||||
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -220,7 +201,14 @@ const init = async () => {
|
||||
let unitList: any = []
|
||||
|
||||
let groupedData = chartsList.reduce((acc: any, item: any) => {
|
||||
let key = item.anotherName
|
||||
|
||||
let key = ''
|
||||
if (item.phase == null) {
|
||||
key = item.unit
|
||||
} else {
|
||||
key = item.anotherName
|
||||
}
|
||||
|
||||
if (!acc[key]) {
|
||||
acc[key] = []
|
||||
}
|
||||
@@ -228,6 +216,7 @@ const init = async () => {
|
||||
return acc
|
||||
}, {})
|
||||
let result = Object.values(groupedData)
|
||||
// console.log("🚀 ~ .then ~ result:", result)
|
||||
if (chartsList.length > 0) {
|
||||
unitList = result.map((item: any) => {
|
||||
return item[0].unit
|
||||
@@ -238,14 +227,17 @@ const init = async () => {
|
||||
legend: {
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 15,
|
||||
itemGap: 10,
|
||||
type: 'scroll', // 开启滚动分页
|
||||
// orient: 'vertical', // 垂直排列
|
||||
top: 25,
|
||||
bottom: 30,
|
||||
top: 10,
|
||||
|
||||
width: 400,
|
||||
right: 150,
|
||||
height: 100
|
||||
height: 50
|
||||
},
|
||||
grid: {
|
||||
top: '80px',
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
@@ -319,13 +311,21 @@ const init = async () => {
|
||||
series: []
|
||||
}
|
||||
}
|
||||
// console.log("🚀 ~ unitList.forEach ~ unitList:", unitList)
|
||||
|
||||
if (chartsList.length > 0) {
|
||||
echartsData.value.yAxis = []
|
||||
|
||||
|
||||
unitList.forEach((item: any, index: any) => {
|
||||
if (index > 2) {
|
||||
echartsData.value.grid.right = (index - 1) * 80
|
||||
}
|
||||
let right = {
|
||||
position: 'right',
|
||||
offset: (index - 1) * 80
|
||||
}
|
||||
console.log("🚀 ~ unitList.forEach ~ right.index:", index)
|
||||
echartsData.value.yAxis.push({
|
||||
name: item,
|
||||
yAxisIndex: index,
|
||||
@@ -337,13 +337,22 @@ const init = async () => {
|
||||
...(index > 0 ? right : null)
|
||||
})
|
||||
})
|
||||
// console.log("🚀 ~ result.forEach ~ result:", result)
|
||||
|
||||
result.forEach((item: any, index: any) => {
|
||||
let yMethodList: any = []
|
||||
|
||||
let ABCList = Object.values(
|
||||
item.reduce((acc, item) => {
|
||||
let key = item.phase
|
||||
|
||||
let key = ''
|
||||
if (item.phase == null) {
|
||||
key = item.anotherName
|
||||
} else {
|
||||
|
||||
key = item.phase
|
||||
}
|
||||
|
||||
if (!acc[key]) {
|
||||
acc[key] = []
|
||||
}
|
||||
@@ -351,6 +360,8 @@ const init = async () => {
|
||||
return acc
|
||||
}, {})
|
||||
)
|
||||
// console.log("🚀 ~ ABCList.forEach ~ ABCList:", ABCList)
|
||||
|
||||
ABCList.forEach((kk: any) => {
|
||||
let seriesList: any = []
|
||||
kk.forEach((cc: any) => {
|
||||
@@ -360,11 +371,12 @@ const init = async () => {
|
||||
|
||||
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
|
||||
})
|
||||
// console.log(kk);
|
||||
|
||||
echartsData.value.options.series.push({
|
||||
name: kk[0].phase
|
||||
? kk[0].phase + '相' + item[0].anotherName
|
||||
: item[0].anotherName,
|
||||
? kk[0].phase + '相' + kk[0].anotherName
|
||||
: kk[0].anotherName,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
@@ -376,6 +388,7 @@ const init = async () => {
|
||||
echartsData.value.yAxis[index].min = min
|
||||
echartsData.value.yAxis[index].max = max
|
||||
})
|
||||
console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
@@ -665,6 +678,7 @@ defineExpose({ getTrendRequest })
|
||||
// flex: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.history_count {
|
||||
.el-select {
|
||||
min-width: 100px;
|
||||
|
||||
Reference in New Issue
Block a user