方案数据echarts图修改
This commit is contained in:
zhujiyan
@@ -22,8 +22,12 @@
|
|||||||
<p>测试项信息</p>
|
<p>测试项信息</p>
|
||||||
</div> -->
|
</div> -->
|
||||||
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
|
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
|
||||||
<el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName"
|
<el-tab-pane
|
||||||
:name="item.id" :key="index">
|
v-for="(item, index) in deviceData.records"
|
||||||
|
:label="item.itemName"
|
||||||
|
:name="item.id"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<span class="custom-tabs-label">
|
<span class="custom-tabs-label">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
@@ -101,10 +105,20 @@
|
|||||||
<div class="history_header">
|
<div class="history_header">
|
||||||
<el-form :model="searchForm" class="history_select" id="history_select">
|
<el-form :model="searchForm" class="history_select" id="history_select">
|
||||||
<el-form-item label="统计指标" label-width="80px">
|
<el-form-item label="统计指标" label-width="80px">
|
||||||
<el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
|
<el-select
|
||||||
placeholder="请选择统计指标" multiple :multiple-limit="3" @change="init()">
|
collapse-tags
|
||||||
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
|
collapse-tags-tooltip
|
||||||
:value="item.id"></el-option>
|
v-model="searchForm.index"
|
||||||
|
placeholder="请选择统计指标"
|
||||||
|
multiple
|
||||||
|
:multiple-limit="3"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in indexOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="值类型">
|
<el-form-item label="值类型">
|
||||||
@@ -114,25 +128,41 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div v-for="(item, index) in countData" :key="index">
|
<div v-for="(item, index) in countData" :key="index">
|
||||||
<el-form-item :label="item.name + '谐波次数'" label-width="180px"
|
<el-form-item
|
||||||
v-if="item.countOptions.length != 0">
|
:label="item.name + '谐波次数'"
|
||||||
|
label-width="180px"
|
||||||
|
v-if="item.countOptions.length != 0"
|
||||||
|
>
|
||||||
<!-- multiple -->
|
<!-- multiple -->
|
||||||
<el-select v-model="item.count" collapse-tags collapse-tags-tooltip
|
<el-select
|
||||||
placeholder="请选择谐波次数" style="width: 100px">
|
v-model="item.count"
|
||||||
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
|
collapse-tags
|
||||||
:value="vv"></el-option>
|
collapse-tags-tooltip
|
||||||
|
placeholder="请选择谐波次数"
|
||||||
|
style="width: 100px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="vv in item.countOptions"
|
||||||
|
:key="vv"
|
||||||
|
:label="vv"
|
||||||
|
:value="vv"
|
||||||
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<el-form-item label="统计类型" label-width="80px">
|
<el-form-item label="统计类型" label-width="80px">
|
||||||
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
||||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
|
<el-option
|
||||||
:value="item.id"></el-option>
|
v-for="item in typeOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="history_searchBtn">
|
<div class="history_searchBtn">
|
||||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="history_title">
|
<div class="history_title">
|
||||||
@@ -161,6 +191,7 @@ import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planDat
|
|||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||||
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
|
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
|
||||||
|
import { yMethod } from '@/utils/echartMethod'
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/device/planData/index'
|
name: 'govern/device/planData/index'
|
||||||
@@ -225,7 +256,7 @@ const chartTitle: any = ref('')
|
|||||||
const handleClickTabs = async () => {
|
const handleClickTabs = async () => {
|
||||||
historyDevId.value = activeName.value
|
historyDevId.value = activeName.value
|
||||||
schemeTreeRef.value.setCheckedNode(activeName.value)
|
schemeTreeRef.value.setCheckedNode(activeName.value)
|
||||||
await init()
|
await init(true)
|
||||||
}
|
}
|
||||||
const nodeClick = async (e: anyObj) => {
|
const nodeClick = async (e: anyObj) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
@@ -249,7 +280,7 @@ const nodeClick = async (e: anyObj) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
schemeTreeRef.value.getPlanData(deviceData.value)
|
schemeTreeRef.value.getPlanData(deviceData.value)
|
||||||
init()
|
init(true)
|
||||||
loading.value = false
|
loading.value = false
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
@@ -309,10 +340,10 @@ const filterArray = (array: any) => {
|
|||||||
})
|
})
|
||||||
return newArray
|
return newArray
|
||||||
}
|
}
|
||||||
const init = () => {
|
const init = (flag: boolean) => {
|
||||||
//调用子组件的方法切换的时候tree的节点也变化
|
//调用子组件的方法切换的时候tree的节点也变化
|
||||||
let list: any = []
|
let list: any = []
|
||||||
loading.value = true
|
|
||||||
//颜色数组
|
//颜色数组
|
||||||
const colorList = [
|
const colorList = [
|
||||||
'#DAA521',
|
'#DAA521',
|
||||||
@@ -329,7 +360,6 @@ const init = () => {
|
|||||||
'cadetblue'
|
'cadetblue'
|
||||||
]
|
]
|
||||||
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
||||||
console.log('where')
|
|
||||||
// 选择指标的时候切换legend内容和data数据
|
// 选择指标的时候切换legend内容和data数据
|
||||||
legendDictList.value?.selectedList?.map((item: any) => {
|
legendDictList.value?.selectedList?.map((item: any) => {
|
||||||
// if (item.dataType == searchForm.value.index) {
|
// if (item.dataType == searchForm.value.index) {
|
||||||
@@ -384,305 +414,281 @@ const init = () => {
|
|||||||
valueType: searchForm.value.type
|
valueType: searchForm.value.type
|
||||||
}
|
}
|
||||||
|
|
||||||
getHistoryTrend(obj)
|
if (flag) {
|
||||||
.then((res: any) => {
|
loading.value = true
|
||||||
if (res.code === 'A0000') {
|
getHistoryTrend(obj)
|
||||||
console.log('this')
|
.then((res: any) => {
|
||||||
historyDataList.value = res.data
|
if (res.code === 'A0000') {
|
||||||
let chartsList = JSON.parse(JSON.stringify(res.data))
|
historyDataList.value = res.data
|
||||||
echartsData.value = null
|
let chartsList = JSON.parse(JSON.stringify(res.data))
|
||||||
//icon图标替换legend图例
|
echartsData.value = null
|
||||||
const iconThree =
|
//icon图标替换legend图例
|
||||||
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
|
const iconThree =
|
||||||
let xAxis: any = [],
|
'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
|
||||||
timeList: any = [],
|
let xAxis: any = [],
|
||||||
unitList: any = []
|
timeList: any = [],
|
||||||
chartsList.map((item: any) => {
|
unitList: any = []
|
||||||
timeList.push(item.time)
|
chartsList.map((item: any) => {
|
||||||
if (unitList.indexOf(item.unit) == -1) {
|
timeList.push(item.time)
|
||||||
unitList.push(item.unit)
|
if (unitList.indexOf(item.unit) == -1) {
|
||||||
}
|
unitList.push(item.unit)
|
||||||
})
|
|
||||||
xAxis = timeList.sort((a: any, b: any) => {
|
|
||||||
return new Date(a).getTime() - new Date(b).getTime()
|
|
||||||
})
|
|
||||||
echartsData.value = {
|
|
||||||
options: {
|
|
||||||
title: [
|
|
||||||
{
|
|
||||||
left: '10%',
|
|
||||||
top: 0
|
|
||||||
// text: chartTitle.value
|
|
||||||
}
|
|
||||||
],
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
saveAsImage: {
|
|
||||||
title: '保存'
|
|
||||||
}
|
|
||||||
// dataView: { readOnly: false },
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// tooltip: {
|
|
||||||
// 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 15px"></div>` +
|
|
||||||
// `<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
|
|
||||||
// }
|
|
||||||
// return res
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
legend: {
|
|
||||||
//legend使用iconfont图标
|
|
||||||
data: [],
|
|
||||||
itemWidth: 20,
|
|
||||||
itemHeight: 10,
|
|
||||||
itemGap: 15,
|
|
||||||
type: 'scroll', // 开启滚动分页
|
|
||||||
// orient: 'vertical', // 垂直排列
|
|
||||||
right: '3%', // 位置调整
|
|
||||||
top: 5,
|
|
||||||
bottom: 20,
|
|
||||||
width: 400,
|
|
||||||
height: 50
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
borderWidth: 0,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
crossStyle: {
|
|
||||||
color: '#999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
formatter: function (params: any) {
|
|
||||||
let list = params.filter((item, index, self) => {
|
|
||||||
return index === self.findIndex((t) => t.seriesName === item.seriesName);
|
|
||||||
})
|
|
||||||
console.log("🚀 ~ .then ~ list:", list)
|
|
||||||
var res = list[0].name + '<br/>'
|
|
||||||
for (var i = 0, l = list.length; i < l; i++) {
|
|
||||||
list[i].unit =
|
|
||||||
echartsData.value.options.yAxis[
|
|
||||||
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
|
|
||||||
]?.name
|
|
||||||
res +=
|
|
||||||
list[i].seriesName +
|
|
||||||
' ' +
|
|
||||||
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
|
|
||||||
`<div style='float:right;min-width:120px;padding-left:20px;'>${list[i].value} </div><br/>`
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// grid: {
|
|
||||||
// left: chartsList.length != 0 ? '5%' : '1%',
|
|
||||||
// right: '5%',
|
|
||||||
// bottom: '10%',
|
|
||||||
// top: '8%',
|
|
||||||
// containLabel: true
|
|
||||||
// },
|
|
||||||
// xAxis: [
|
|
||||||
// {
|
|
||||||
// type: 'time', //category
|
|
||||||
// name: '\n\n\n\n\n时间',
|
|
||||||
// axisLabel: {
|
|
||||||
// color: '#A9AEB2',
|
|
||||||
// fontSize: 12,
|
|
||||||
// show: function (index: any, value: any) {
|
|
||||||
// // 检查数据中是否存在这个时间点
|
|
||||||
// // return data.some(item:any => item[0] === value)
|
|
||||||
// },
|
|
||||||
// formatter: {
|
|
||||||
// day: '{MM}-{d}'
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// nameTextStyle: {
|
|
||||||
// right: 0
|
|
||||||
// },
|
|
||||||
// data: Array.from(new Set(xAxis)),
|
|
||||||
// axisLine: {
|
|
||||||
// lineStyle: {
|
|
||||||
// color: '#43485E'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
xAxis: {
|
|
||||||
type: 'time',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: {
|
|
||||||
day: '{MM}-{dd}',
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: unitList[0],
|
|
||||||
axisLabel: {
|
|
||||||
color: '#000',
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
// color: colorList[0]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#000',
|
|
||||||
fontSize: '14'
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: ['#43485E'],
|
|
||||||
width: 1,
|
|
||||||
type: 'solid'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//处理多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
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
xAxis = timeList.sort((a: any, b: any) => {
|
||||||
echartsData.value.options.legend.data = []
|
return new Date(a).getTime() - new Date(b).getTime()
|
||||||
console.log(list, '988888888888606')
|
})
|
||||||
list.map((item: any, index: any) => {
|
let [min, max] = [0, 0]
|
||||||
item.map((vv: any, indexs: any) => {
|
list.map((item: any, index: any) => {
|
||||||
//处理legend
|
item.map((vv: any, indexs: any) => {
|
||||||
if (chartsList.length != 0) {
|
;[min, max] = yMethod(
|
||||||
echartsData.value.options.legend.data.push({
|
|
||||||
name: vv.phase + '相' + vv.showName,
|
|
||||||
icon: iconThree
|
|
||||||
})
|
|
||||||
}
|
|
||||||
console.log(echartsData.value.options.legend.data, 'legend-legend-legend')
|
|
||||||
if (
|
|
||||||
unitList.findIndex((item: any) => {
|
|
||||||
return item == vv.unit
|
|
||||||
}) != -1
|
|
||||||
) {
|
|
||||||
vv.yAxisIndex = unitList.findIndex((item: any) => {
|
|
||||||
return item == vv.unit
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
vv.yAxisIndex = 0
|
|
||||||
}
|
|
||||||
echartsData.value.options.series.push({
|
|
||||||
name: vv.phase + '相' + vv.showName,
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
symbol: 'none',
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
itemStyle: {},
|
|
||||||
//数据
|
|
||||||
data: filterArray(
|
|
||||||
chartsList
|
chartsList
|
||||||
.map((kk: any, kks: any) => {
|
.map((kk: any, kks: any) => {
|
||||||
if (kk.statisticalName == vv.name) {
|
if (kk.statisticalName == vv.name) {
|
||||||
// console.log([xAxis[kks],kk.statisticalData],"========>>>>>>>");
|
return kk.statisticalData
|
||||||
return Array.from(new Set([xAxis[kks], kk.statisticalData]))
|
|
||||||
} else {
|
} else {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.filter((kk: any) => kk !== '')
|
.filter((kk: any) => kk !== '')
|
||||||
),
|
)
|
||||||
//数据对应的y轴
|
item.min = min
|
||||||
// yAxisIndex:0,
|
item.max = max
|
||||||
yAxisIndex: vv.yAxisIndex
|
|
||||||
})
|
})
|
||||||
// console.log("🚀 ~ item.map ~ vv.phase + '相' + vv.showName:", vv.phase + '相' + vv.showName)
|
|
||||||
})
|
})
|
||||||
})
|
console.log(list, '00000000000000')
|
||||||
//设置数据项颜色
|
echartsData.value = {
|
||||||
echartsData.value.options.series.map((item: any, index: any) => {
|
options: {
|
||||||
item.itemStyle = {
|
title: [
|
||||||
normal: {
|
{
|
||||||
color: colorList[index],
|
left: '10%',
|
||||||
lineStyle: {
|
top: 0
|
||||||
color: colorList[index]
|
// text: chartTitle.value
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
// saveAsImage: {
|
||||||
|
// title: '保存'
|
||||||
|
// }
|
||||||
|
// dataView: { readOnly: false },
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
//legend使用iconfont图标
|
||||||
|
data: [],
|
||||||
|
itemWidth: 20,
|
||||||
|
itemHeight: 10,
|
||||||
|
itemGap: 15,
|
||||||
|
type: 'scroll', // 开启滚动分页
|
||||||
|
// orient: 'vertical', // 垂直排列
|
||||||
|
right: '15%', // 位置调整
|
||||||
|
top: 5,
|
||||||
|
bottom: 30,
|
||||||
|
width: 400,
|
||||||
|
height: 50
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
formatter: function (params: any) {
|
||||||
|
let list = params.filter((item, index, self) => {
|
||||||
|
return index === self.findIndex(t => t.seriesName === item.seriesName)
|
||||||
|
})
|
||||||
|
var res =
|
||||||
|
'<span style="margin-right:18px;"></span>' +
|
||||||
|
list[0].value[0] +
|
||||||
|
list[0].name +
|
||||||
|
'<br/>'
|
||||||
|
for (var i = 0, l = list.length; i < l; i++) {
|
||||||
|
list[i].unit =
|
||||||
|
echartsData.value.options.yAxis[
|
||||||
|
echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
|
||||||
|
]?.name
|
||||||
|
res +=
|
||||||
|
list[i].seriesName +
|
||||||
|
' ' +
|
||||||
|
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
|
||||||
|
`<div style='float:right;padding-left:20px;'>${list[i].value[1].toFixed(
|
||||||
|
2
|
||||||
|
)} </div><br/>`
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: unitList[0],
|
||||||
|
axisLabel: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
max: list[0].max,
|
||||||
|
min: list[0].min,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: colorList[0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: '14'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#43485E'],
|
||||||
|
width: 1,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitNumber: 5,
|
||||||
|
minInterval: 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// item.data = filterArray(item.data)
|
|
||||||
})
|
echartsData.value.options.legend.data = []
|
||||||
|
list.map((item: any, index: any) => {
|
||||||
|
item.map((vv: any, indexs: any) => {
|
||||||
|
//处理legend
|
||||||
|
if (chartsList.length != 0) {
|
||||||
|
echartsData.value.options.legend.data.push({
|
||||||
|
name: vv.phase + '相' + vv.showName,
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
echartsData.value.options.series.push({
|
||||||
|
name: vv.phase + '相' + vv.showName,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'none',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
itemStyle: {},
|
||||||
|
//数据
|
||||||
|
data: filterArray(
|
||||||
|
chartsList
|
||||||
|
.map((kk: any, kks: any) => {
|
||||||
|
if (kk.statisticalName == vv.name) {
|
||||||
|
return Array.from(new Set([xAxis[kks], kk.statisticalData]))
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter((kk: any) => kk !== '')
|
||||||
|
),
|
||||||
|
//数据对应的y轴
|
||||||
|
// yAxisIndex:0,
|
||||||
|
yAxisIndex: vv.yAxisIndex
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
//处理多y轴
|
||||||
|
if (unitList.length != 0 && unitList.length > 1) {
|
||||||
|
console.log(max, min)
|
||||||
|
// 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'
|
||||||
|
},
|
||||||
|
max: list[index + 1].max,
|
||||||
|
min: list[index + 1].min,
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#43485E'],
|
||||||
|
width: 1,
|
||||||
|
type: 'solid'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// yAxisIndex: index + 1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//设置数据项颜色
|
||||||
|
echartsData.value.options.series.map((item: any, index: any) => {
|
||||||
|
item.itemStyle = {
|
||||||
|
normal: {
|
||||||
|
color: colorList[index],
|
||||||
|
lineStyle: {
|
||||||
|
color: colorList[index]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// item.data = filterArray(item.data)
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
console.log(echartsData.value.options.series, '++++++++++++++++++++669', echartsData.value)
|
})
|
||||||
}
|
}
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//导出
|
//导出
|
||||||
@@ -740,7 +746,6 @@ const handleExport = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (historyDataList.value.length != 0) {
|
if (historyDataList.value.length != 0) {
|
||||||
console.log(historyDataList.value, 'historyDataList')
|
|
||||||
let xAxis: any = []
|
let xAxis: any = []
|
||||||
let timeList: any = []
|
let timeList: any = []
|
||||||
historyDataList.value.map((item: any) => {
|
historyDataList.value.map((item: any) => {
|
||||||
@@ -756,7 +761,6 @@ const handleExport = async () => {
|
|||||||
csv = convertToCSV([], [])
|
csv = convertToCSV([], [])
|
||||||
chartsCsv.value = csv
|
chartsCsv.value = csv
|
||||||
// 如果你想提供下载链接
|
// 如果你想提供下载链接
|
||||||
console.log(list, '745745745745')
|
|
||||||
function convertToCSV(data: any, key: any) {
|
function convertToCSV(data: any, key: any) {
|
||||||
// 添加列头
|
// 添加列头
|
||||||
let title = '统计时间,'
|
let title = '统计时间,'
|
||||||
@@ -773,15 +777,13 @@ const handleExport = async () => {
|
|||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
count = index
|
count = index
|
||||||
}
|
}
|
||||||
// console.log( list[index].data[indexs][list[index].data[indexs]], indexs,"88888888888888");
|
|
||||||
console.log(list[index].data[indexs], "iiiiii");
|
|
||||||
let itemList: any = list[index].data[indexs]
|
let itemList: any = list[index].data[indexs]
|
||||||
index == list.length - 1
|
index == list.length - 1 ? (strs += itemList[0]) : (strs += itemList[0] + ',')
|
||||||
? (strs += itemList[0])
|
|
||||||
: (strs += itemList[0] + ',')
|
|
||||||
})
|
})
|
||||||
if (count == 0 && xAxis[indexs]) {
|
if (count == 0 && xAxis[indexs]) {
|
||||||
csv += `${xAxis[indexs]},` + strs + '\n'
|
csv += `${xAxis[indexs]},` + strs + '\n'
|
||||||
|
} else {
|
||||||
|
strs += '/,'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return csv
|
return csv
|
||||||
@@ -858,7 +860,7 @@ watch(
|
|||||||
countData.value.splice(key, 1)
|
countData.value.splice(key, 1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
init()
|
init(false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -867,10 +869,8 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loading.value = true
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
init()
|
init(true)
|
||||||
loading.value = false
|
|
||||||
}, 1500)
|
}, 1500)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user