1272 lines
47 KiB
Vue
1272 lines
47 KiB
Vue
<template>
|
||
<div class="view">
|
||
<div class="view_top">
|
||
<!-- 左侧仪表盘 -->
|
||
<div class="view_top_left">
|
||
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
<div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
</div>
|
||
<div class="view_top_mid">
|
||
<div class="mid_charts"><MyEchart ref="pieChartRef" :options="echartsData1"></MyEchart></div>
|
||
</div>
|
||
<!-- 右侧仪表盘 -->
|
||
<div class="view_top_right">
|
||
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
<div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
|
||
</div>
|
||
</div>
|
||
<div class="view_bot">
|
||
<div class="view_bot_tables">
|
||
<tableInfo ref="tableInfoRef1" />
|
||
</div>
|
||
<div class="view_bot_tables">
|
||
<tableInfo ref="tableInfoRef2" />
|
||
</div>
|
||
<div class="view_bot_tables">
|
||
<tableInfo ref="tableInfoRef3" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
import tableInfo from './components/tableInfo.vue'
|
||
import * as echarts from 'echarts'
|
||
import { split } from 'lodash-es'
|
||
const pieChartRef: any = ref()
|
||
const echartsData: any = ref({})
|
||
const echartsData1: any = ref({})
|
||
//渲染echarts
|
||
const init = () => {
|
||
echartsData.value = {
|
||
options: {
|
||
tooltip: {},
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 300,
|
||
radius: '150%',
|
||
center: ['55%', '76%'],
|
||
splitNumber: 3, //刻度数量
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
shadowBlur: 0,
|
||
color: [
|
||
[0.3, '#91c7a1'],
|
||
[0.7, '#63869e'],
|
||
[1, '#002B6A']
|
||
]
|
||
}
|
||
},
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
//标题位置
|
||
title: {
|
||
fontWeight: 'bolder',
|
||
fontSize: 12,
|
||
offsetCenter: ['-130%', '-20%']
|
||
},
|
||
//数值位置
|
||
detail: {
|
||
fontSize: 12,
|
||
formatter: '{value}',
|
||
offsetCenter: ['0%', '25%']
|
||
},
|
||
data: [
|
||
{
|
||
value: 15,
|
||
name: '违规率'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
//中间指针图
|
||
echartsData1.value = {
|
||
// options: {
|
||
// // backgroundColor: '#001533',
|
||
// tooltip: {
|
||
// format: function (params) {
|
||
// console.log(params)
|
||
// }
|
||
// },
|
||
// series: [
|
||
// //外圈
|
||
// {
|
||
// radius: '100%',
|
||
// min: -150,
|
||
// max: 180,
|
||
// startAngle: -90,
|
||
// endAngle: 270,
|
||
// pointer: {
|
||
// show: true,
|
||
// length: '80%',
|
||
// radius: '20%',
|
||
// width: 6 //指针粗细
|
||
// },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: 'rgb(0,191,255)'
|
||
// }
|
||
// },
|
||
// // axisLine: {
|
||
// // show: true,
|
||
// // fontSize: 20,
|
||
// // lineStyle: {
|
||
// // width: 0,
|
||
// // color: [[1, '#01b4e0']]
|
||
// // }
|
||
// // },
|
||
|
||
// axisLine: {
|
||
// show: true,
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// color: [[1, '#F42E47']], // 属性lineStyle控制线条样式
|
||
// width: 2
|
||
// },
|
||
// interval: 0
|
||
// },
|
||
// splitLine: {
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// width: 2,
|
||
// color: '#01b4e0',
|
||
// distance: 5
|
||
// }, //刻度节点线
|
||
// splitNumber: 5
|
||
// },
|
||
// splitNumber: 11,
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// show: true,
|
||
// fontSize: 14,
|
||
// color: '#000',
|
||
// formatter: function (v: any) {
|
||
// console.log(v, '00000000000')
|
||
// switch (v + '') {
|
||
// case '-122.5':
|
||
// return '-120'
|
||
// case '-95':
|
||
// return '-90'
|
||
// case '-60':
|
||
// return '-60'
|
||
// case '-67.5':
|
||
// return '-60'
|
||
// case '-40':
|
||
// return '-30'
|
||
// case '-12.5':
|
||
// return '0'
|
||
// case '42.5':
|
||
// return '30'
|
||
// case '70':
|
||
// return '60'
|
||
// case '97.5':
|
||
// return '90'
|
||
// case '125':
|
||
// return '120'
|
||
// case '152.5':
|
||
// return '150'
|
||
// case '-180':
|
||
// return ''
|
||
// case '180':
|
||
// return '180'
|
||
// default:
|
||
// return v
|
||
// }
|
||
// }
|
||
// },
|
||
// detail: {
|
||
// show: false,
|
||
// textStyle: {
|
||
// fontSize: 30,
|
||
// fontWeight: '700',
|
||
// color: '#67d9fe'
|
||
// }
|
||
// },
|
||
// data: [
|
||
// {
|
||
// name: '',
|
||
// value: 150,
|
||
// itemStyle: {
|
||
// color: 'red'
|
||
// }
|
||
// },
|
||
// {
|
||
// name: '',
|
||
// value: 60,
|
||
// itemStyle: {
|
||
// color: '#DAA521'
|
||
// }
|
||
// },
|
||
// {
|
||
// name: '',
|
||
// value: 90,
|
||
// itemStyle: {
|
||
// color: 'green'
|
||
// }
|
||
// }
|
||
// ]
|
||
// },
|
||
// //内圈
|
||
// {
|
||
// radius: '50%',
|
||
// splitNumber: 11,
|
||
// startAngle: 0,
|
||
// endAngle: 360,
|
||
// min: -150,
|
||
// max: 180,
|
||
// axisLine: {
|
||
// show: true,
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// color: [[1, '#1C9EE9']], // 属性lineStyle控制线条样式
|
||
// width: 2,
|
||
// type: 'dashed'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// show: true,
|
||
// length: '80%',
|
||
// radius: '20%',
|
||
// width: 8 //指针粗细
|
||
// },
|
||
// itemStyle: {
|
||
// // show: false,
|
||
// normal: {
|
||
// color: 'rgb(0,191,255)'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// length: 5,
|
||
// interval: 30,
|
||
// lineStyle: {
|
||
// width: 2,
|
||
// color: 'green',
|
||
// distance: -20
|
||
// } //刻度节点线
|
||
// },
|
||
// axisTick: {
|
||
// show: false
|
||
// },
|
||
// axisLabel: {
|
||
// show: true,
|
||
// itemStyle: {
|
||
// interval: 0
|
||
// },
|
||
// formatter: function (v: any) {
|
||
// console.log(v, '00000000000')
|
||
// switch (v + '') {
|
||
// case '-122.5':
|
||
// return '-120'
|
||
// case '-95':
|
||
// return '-90'
|
||
// case '-60':
|
||
// return '-60'
|
||
// case '-67.5':
|
||
// return '-60'
|
||
// case '-40':
|
||
// return '-30'
|
||
// case '-12.5':
|
||
// return '0'
|
||
// case '42.5':
|
||
// return '30'
|
||
// case '70':
|
||
// return '60'
|
||
// case '97.5':
|
||
// return '90'
|
||
// case '125':
|
||
// return '120'
|
||
// case '152.5':
|
||
// return '150'
|
||
// case '-180':
|
||
// return ''
|
||
// case '180':
|
||
// return '180'
|
||
// default:
|
||
// return v
|
||
// }
|
||
// }
|
||
// },
|
||
// detail: {
|
||
// show: false
|
||
// },
|
||
// data: [
|
||
// {
|
||
// name: '',
|
||
// value: 110,
|
||
// itemStyle: {
|
||
// color: 'red'
|
||
// }
|
||
// },
|
||
// {
|
||
// name: '',
|
||
// value: 70,
|
||
// itemStyle: {
|
||
// color: '#DAA521'
|
||
// }
|
||
// },
|
||
// {
|
||
// name: '',
|
||
// value: 20,
|
||
// itemStyle: {
|
||
// color: 'green'
|
||
// }
|
||
// }
|
||
// ]
|
||
// }
|
||
// ]
|
||
// }
|
||
options: {
|
||
grid: {
|
||
top: 230
|
||
},
|
||
title: {
|
||
text: '',
|
||
x: 'center'
|
||
},
|
||
tooltip: {
|
||
formatter: '{a} <br/>{c} {b}'
|
||
},
|
||
legend: [],
|
||
series: [
|
||
// {
|
||
// name: 'atitle +电压有效值',
|
||
// type: 'gauge',
|
||
// center: ['50%', '30%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 180,
|
||
// endAngle: 90,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#DAA520'],
|
||
// [0.5, '#DAA520'],
|
||
// [0.75, '#DAA520'],
|
||
// [1, '#DAA520']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['40%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name:' atitle + (kV)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: ' btitle + 电压有效值',
|
||
// type: 'gauge',
|
||
// center: ['20%', '60%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 180,
|
||
// endAngle: 90,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#2E8B57'],
|
||
// [0.5, '#2E8B57'],
|
||
// [0.75, '#2E8B57'],
|
||
// [1, '#2E8B57']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['40%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name: ' btitle +(kV)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: 'ctitle + 电压有效值',
|
||
// type: 'gauge',
|
||
// center: ['20%', '90%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 180,
|
||
// endAngle: 90,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#A52a2a'],
|
||
// [0.5, '#A52a2a'],
|
||
// [0.75, '#A52a2a'],
|
||
// [1, '#A52a2a']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['-125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['40%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name: 'ctitle + (kV)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: 'A相电流有效值',
|
||
// type: 'gauge',
|
||
// center: ['80%', '30%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 90,
|
||
// endAngle: 0,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#DAA520'],
|
||
// [0.5, '#DAA520'],
|
||
// [0.75, '#DAA520'],
|
||
// [1, '#DAA520']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['-45%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name: 'A相(A)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: 'B相电流有效值',
|
||
// type: 'gauge',
|
||
// center: ['80%', '60%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 90,
|
||
// endAngle: 0,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#2E8B57'],
|
||
// [0.5, '#2E8B57'],
|
||
// [0.75, '#2E8B57'],
|
||
// [1, '#2E8B57']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['-45%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name: 'B相(A)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: 'C相电流有效值',
|
||
// type: 'gauge',
|
||
// center: ['80%', '90%'], // 默认全局居中
|
||
// radius: '50%',
|
||
// min: 0,
|
||
// max: 180,
|
||
// startAngle: 90,
|
||
// endAngle: 0,
|
||
// splitNumber: 2,
|
||
// axisLine: {
|
||
// // 坐标轴线
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: [
|
||
// [0.25, '#A52a2a'],
|
||
// [0.5, '#A52a2a'],
|
||
// [0.75, '#A52a2a'],
|
||
// [1, '#A52a2a']
|
||
// ],
|
||
// width: 5
|
||
// }
|
||
// },
|
||
// axisTick: {
|
||
// // 坐标轴小标记
|
||
// length: 12, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// // 分隔线
|
||
// length: 20, // 属性length控制线长
|
||
// lineStyle: {
|
||
// // 属性lineStyle（详见lineStyle）控制线条样式
|
||
// color: 'auto'
|
||
// }
|
||
// },
|
||
// pointer: {
|
||
// width: 5
|
||
// },
|
||
// title: {
|
||
// offsetCenter: ['125%', '-55%'] // x, y，单位px
|
||
// },
|
||
// detail: {
|
||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
// fontWeight: 'bolder',
|
||
// offsetCenter: ['-45%', '-35%'],
|
||
// fontSize: '35px'
|
||
// },
|
||
// data: [
|
||
// {
|
||
// // value: [0],
|
||
// // name: 'C相(A)'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '基波电流相位',
|
||
// type: 'gauge',
|
||
// // 表盘最小值
|
||
// min: 180,
|
||
// // 表盘最大值
|
||
// max: -180,
|
||
// // 表盘分割数
|
||
// splitNumber: 12,
|
||
// // 圆心位置
|
||
// center: ['50%', '50%'],
|
||
// // 半径
|
||
// radius: '50%',
|
||
// startAngle: 180,
|
||
// endAngle: -179.99,
|
||
// // 指针方向
|
||
// clockWise: true,
|
||
// title: false,
|
||
// // 表盘外框
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: [
|
||
// [0.25, '#2E8B57'],
|
||
// [0.5, '#2E8B57'],
|
||
// [0.75, '#2E8B57'],
|
||
// [1, '#2E8B57']
|
||
// ],
|
||
// width: 2
|
||
// }
|
||
// },
|
||
// // 表盘细分数
|
||
// axisTick: {
|
||
// show: true,
|
||
// splitNumber: 5,
|
||
// length: 6,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 1,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线
|
||
// splitLine: {
|
||
// show: true,
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 2,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线标识
|
||
// axisLabel: {
|
||
// show: false
|
||
// },
|
||
|
||
// // 指针设置
|
||
// pointer: {
|
||
// length: '45%',
|
||
// width: 2
|
||
// },
|
||
// detail: {
|
||
// show: false
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 0,
|
||
// name: 'B相'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '基波电流相位',
|
||
// type: 'gauge',
|
||
// // 表盘最小值
|
||
// min: 180,
|
||
// // 表盘最大值
|
||
// max: -180,
|
||
// // 表盘分割数
|
||
// splitNumber: 12,
|
||
// // 圆心位置
|
||
// center: ['50%', '50%'],
|
||
// // 半径
|
||
// radius: '50%',
|
||
// startAngle: 180,
|
||
// endAngle: -179.99,
|
||
// // 指针方向
|
||
// clockWise: true,
|
||
// title: false,
|
||
// // 表盘外框
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: [
|
||
// [0.25, '#A52a2a'],
|
||
// [0.5, '#A52a2a'],
|
||
// [0.75, '#A52a2a'],
|
||
// [1, '#A52a2a']
|
||
// ],
|
||
// width: 2
|
||
// }
|
||
// },
|
||
// // 表盘细分数
|
||
// axisTick: {
|
||
// show: true,
|
||
// splitNumber: 5,
|
||
// length: 6,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 1,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线
|
||
// splitLine: {
|
||
// show: true,
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 2,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线标识
|
||
// axisLabel: {
|
||
// show: false
|
||
// },
|
||
|
||
// // 指针设置
|
||
// pointer: {
|
||
// length: '45%',
|
||
// width: 2
|
||
// },
|
||
// detail: {
|
||
// show: false
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 0,
|
||
// name: 'C相'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '基波电压相位',
|
||
// type: 'gauge',
|
||
// // 表盘最小值
|
||
// min: 180,
|
||
// // 表盘最大值
|
||
// max: -180,
|
||
// // 表盘分割数
|
||
// splitNumber: 12,
|
||
// // 圆心位置
|
||
// center: ['50%', '50%'],
|
||
// // 半径
|
||
// radius: '85%',
|
||
// startAngle: 180,
|
||
// endAngle: -179.99,
|
||
// // 指针方向
|
||
// clockWise: true,
|
||
// title: false,
|
||
// // 表盘外框
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: [
|
||
// [0.25, '#2E8B57'],
|
||
// [0.5, '#2E8B57'],
|
||
// [0.75, '#2E8B57'],
|
||
// [1, '#2E8B57']
|
||
// ],
|
||
// width: 1.5
|
||
// }
|
||
// },
|
||
// // 表盘细分数
|
||
// axisTick: {
|
||
// show: true,
|
||
// splitNumber: 5,
|
||
// length: 6,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 1,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线
|
||
// splitLine: {
|
||
// show: true,
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 2,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线标识
|
||
// axisLabel: {
|
||
// show: false
|
||
// },
|
||
|
||
// // 指针设置
|
||
// pointer: {
|
||
// length: '75%',
|
||
// width: 4
|
||
// },
|
||
// detail: {
|
||
// show: false
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 0,
|
||
// name: 'B相'
|
||
// }
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '基波电压相位',
|
||
// type: 'gauge',
|
||
// // 表盘最小值
|
||
// min: 180,
|
||
// // 表盘最大值
|
||
// max: -180,
|
||
// // 表盘分割数
|
||
// splitNumber: 12,
|
||
// // 圆心位置
|
||
// center: ['50%', '50%'],
|
||
// // 半径
|
||
// radius: '85%',
|
||
// startAngle: 180,
|
||
// endAngle: -179.99,
|
||
// // 指针方向
|
||
// clockWise: true,
|
||
// title: false,
|
||
// // 表盘外框
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: [
|
||
// [0.25, '#A52a2a'],
|
||
// [0.5, '#A52a2a'],
|
||
// [0.75, '#A52a2a'],
|
||
// [1, '#A52a2a']
|
||
// ],
|
||
// width: 1.5
|
||
// }
|
||
// },
|
||
// // 表盘细分数
|
||
// axisTick: {
|
||
// show: true,
|
||
// splitNumber: 5,
|
||
// length: 6,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 1,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线
|
||
// splitLine: {
|
||
// show: true,
|
||
// length: 10,
|
||
// lineStyle: {
|
||
// color: '#eee',
|
||
// width: 2,
|
||
// type: 'solid'
|
||
// }
|
||
// },
|
||
// // 分割线标识
|
||
// axisLabel: {
|
||
// show: false
|
||
// },
|
||
|
||
// // 指针设置
|
||
// pointer: {
|
||
// length: '75%',
|
||
// width: 4
|
||
// },
|
||
// detail: {
|
||
// show: false
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 0,
|
||
// name: 'C相'
|
||
// }
|
||
// ]
|
||
// }
|
||
{
|
||
name: '基波电流相位',
|
||
type: 'gauge',
|
||
// 表盘最小值
|
||
min: 180,
|
||
// 表盘最大值
|
||
max: -180,
|
||
// 表盘分割数
|
||
splitNumber: 12,
|
||
// 圆心位置
|
||
center: ['50%', '50%'],
|
||
// 半径
|
||
radius: '50%',
|
||
startAngle: 180,
|
||
endAngle: -179.99,
|
||
// 指针方向
|
||
clockWise: true,
|
||
title: false,
|
||
// 表盘外框
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.25, '#1E9FF4'],
|
||
[0.5, '#1E9FF4'],
|
||
[0.75, '#1E9FF4'],
|
||
[1, '#1E9FF4']
|
||
],
|
||
width: 2
|
||
}
|
||
},
|
||
// 表盘细分数
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 5,
|
||
length: 4,
|
||
lineStyle: {
|
||
color: '#1E9FF4',
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: true,
|
||
length: 10,
|
||
lineStyle: {
|
||
color: '#1E9FF4',
|
||
width: 2,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
// 分割线标识
|
||
axisLabel: {
|
||
show: true,
|
||
distance: 5,
|
||
formatter: function (v) {
|
||
switch (v + '') {
|
||
case '-180':
|
||
return ''
|
||
default:
|
||
return v
|
||
}
|
||
}
|
||
},
|
||
|
||
// 指针设置
|
||
pointer: {
|
||
length: '80%',
|
||
width: 3
|
||
},
|
||
detail: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: 40,
|
||
name: 'A相',
|
||
itemStyle: {
|
||
color: '#A5292A'
|
||
}
|
||
},
|
||
{
|
||
value: 10,
|
||
name: 'B相',
|
||
itemStyle: {
|
||
color: '#DAA521'
|
||
}
|
||
},
|
||
{
|
||
value: 20,
|
||
name: 'C相',
|
||
itemStyle: {
|
||
color: '#2F8A57'
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '基波电压相位',
|
||
type: 'gauge',
|
||
// 表盘最小值
|
||
min: 180,
|
||
// 表盘最大值
|
||
max: -180,
|
||
// 表盘分割数
|
||
splitNumber: 12,
|
||
// 圆心位置
|
||
center: ['50%', '50%'],
|
||
// 半径
|
||
radius: '85%',
|
||
startAngle: 180,
|
||
endAngle: -179.99,
|
||
// 指针方向
|
||
clockWise: true,
|
||
title: false,
|
||
// 表盘外框
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.25, '#9D322D'],
|
||
[0.5, '#9D322D'],
|
||
[0.75, '#9D322D'],
|
||
[1, '#9D322D']
|
||
],
|
||
width: 1.5
|
||
}
|
||
},
|
||
// 表盘细分数
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 5,
|
||
length: 6,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: true,
|
||
length: 10,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 2,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
// 分割线标识
|
||
axisLabel: {
|
||
show: true,
|
||
distance: 5,
|
||
formatter: function (v) {
|
||
switch (v + '') {
|
||
case '-180':
|
||
return ''
|
||
default:
|
||
return v
|
||
}
|
||
}
|
||
},
|
||
|
||
// 指针设置
|
||
pointer: {
|
||
length: '90%',
|
||
width: 6
|
||
},
|
||
detail: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: 140,
|
||
name: 'A相',
|
||
itemStyle: {
|
||
color: '#A5292A'
|
||
}
|
||
},
|
||
{
|
||
value: 110,
|
||
name: 'B相',
|
||
itemStyle: {
|
||
color: '#DAA521'
|
||
}
|
||
},
|
||
{
|
||
value: 120,
|
||
name: 'C相',
|
||
itemStyle: {
|
||
color: '#2F8A57'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
for (var i = 0; i < echartsData1.value.options.series.length; i++) {
|
||
echartsData1.value.options.series[i].type = 'gauge'
|
||
echartsData1.value.options.series[i].startAngle = 90
|
||
echartsData1.value.options.series[i].endAngle = -270
|
||
echartsData1.value.options.series[i].center = ['50%', '50%']
|
||
// option.series[i].axisTick = {show: false};
|
||
// option.series[i].axisLabel = {show: false};
|
||
// optionThree.series[i].pointer = {show: false};
|
||
// optionThree.series[i].detail = {show: false};
|
||
}
|
||
}
|
||
//渲染table表头
|
||
const tableInfoRef1: any = ref(null)
|
||
const tableInfoRef2: any = ref(null)
|
||
const tableInfoRef3: any = ref(null)
|
||
const initTableHead = () => {
|
||
const list: any = []
|
||
for (let index = 0; index < 1; index++) {
|
||
list.push({
|
||
a: Math.floor(Math.random() * (100 + 1)),
|
||
b: Math.floor(Math.random() * (100 + 1)),
|
||
c: Math.floor(Math.random() * (100 + 1))
|
||
})
|
||
}
|
||
tableInfoRef1.value.getTableData(0, list)
|
||
tableInfoRef2.value.getTableData(1, list)
|
||
tableInfoRef3.value.getTableData(2, list)
|
||
}
|
||
onMounted(() => {
|
||
init()
|
||
initTableHead()
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.view {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-bottom: 200px;
|
||
box-sizing: border-box;
|
||
overflow: auto;
|
||
.view_top {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border: 1px solid #eee;
|
||
padding: 10px;
|
||
.view_top_left,
|
||
.view_top_right {
|
||
width: 30%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.left_charts,
|
||
.right_charts {
|
||
flex: none;
|
||
width: 100%;
|
||
height: 120px;
|
||
border: 1px solid #eee;
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
.view_top_mid {
|
||
flex: 1;
|
||
border: 1px solid #eee;
|
||
margin: 0 10px;
|
||
padding: 10px;
|
||
.mid_charts {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.view_bot {
|
||
min-height: 300px;
|
||
margin: 10px 0 20px 0;
|
||
.view_bot_tables {
|
||
margin-bottom: 10px;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
.view::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|