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>
|