取消限制最高值
This commit is contained in:
@@ -125,7 +125,7 @@ export async function getGoldTitleByNE(neType: string) {
|
|||||||
export async function listUPFData(timeArr: any) {
|
export async function listUPFData(timeArr: any) {
|
||||||
const initTime: Date = new Date();
|
const initTime: Date = new Date();
|
||||||
const twentyFourHoursAgo: Date = new Date(
|
const twentyFourHoursAgo: Date = new Date(
|
||||||
initTime.getTime() - 60 * 60 * 1000
|
initTime.getTime() - 10* 60 * 1000
|
||||||
);
|
);
|
||||||
|
|
||||||
return await Promise.allSettled([
|
return await Promise.allSettled([
|
||||||
|
|||||||
@@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="alarmDayLine" class="chart-container"></div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { markRaw, onMounted, ref } from 'vue';
|
|
||||||
import { origGet } from '@/api/faultManage/actAlarm';
|
|
||||||
import * as echarts from 'echarts/core';
|
|
||||||
import {
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
TooltipComponentOption,
|
|
||||||
GridComponent,
|
|
||||||
GridComponentOption,
|
|
||||||
LegendComponent,
|
|
||||||
LegendComponentOption,
|
|
||||||
} from 'echarts/components';
|
|
||||||
import { LineChart, LineSeriesOption } from 'echarts/charts';
|
|
||||||
import { UniversalTransition } from 'echarts/features';
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
|
||||||
|
|
||||||
echarts.use([
|
|
||||||
TitleComponent,
|
|
||||||
TooltipComponent,
|
|
||||||
GridComponent,
|
|
||||||
LegendComponent,
|
|
||||||
LineChart,
|
|
||||||
CanvasRenderer,
|
|
||||||
UniversalTransition,
|
|
||||||
]);
|
|
||||||
|
|
||||||
type EChartsOption = echarts.ComposeOption<
|
|
||||||
| TooltipComponentOption
|
|
||||||
| GridComponentOption
|
|
||||||
| LegendComponentOption
|
|
||||||
| LineSeriesOption
|
|
||||||
>;
|
|
||||||
/**图DOM节点实例对象 */
|
|
||||||
const alarmDayLine = ref<HTMLElement | undefined>(undefined);
|
|
||||||
|
|
||||||
/**图实例对象 */
|
|
||||||
const alarmDayLineChart = ref<any>(null);
|
|
||||||
|
|
||||||
var xData = (function () {
|
|
||||||
var data = [];
|
|
||||||
for (var i = 2011; i < 2017; i++) {
|
|
||||||
data.push(i + '年');
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
})();
|
|
||||||
|
|
||||||
var color = ['#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d'];
|
|
||||||
var name = ['通信告警', '设备告警', '处理错误', '环境告警', '服务质量'];
|
|
||||||
var data = [
|
|
||||||
[13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
|
|
||||||
[17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
|
|
||||||
[13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
|
|
||||||
[3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
|
|
||||||
[16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
|
|
||||||
];
|
|
||||||
|
|
||||||
var series: any = [];
|
|
||||||
for (var i = 0; i < 5; i++) {
|
|
||||||
series.push({
|
|
||||||
name: name[i],
|
|
||||||
type: 'line',
|
|
||||||
symbolSize: 3, //标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10[ default: 4 ]
|
|
||||||
symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
||||||
smooth: true, //是否平滑曲线显示
|
|
||||||
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: new echarts.graphic.LinearGradient(
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: color[i],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: 'rgba(255,255,255,0)',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
||||||
shadowBlur: 10,
|
|
||||||
opacity: 0.3,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: color[i],
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
type: 'solid', //'dotted'虚线 'solid'实线
|
|
||||||
},
|
|
||||||
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
||||||
borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
|
|
||||||
barBorderRadius: 0,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
opacity: 0.5,
|
|
||||||
},
|
|
||||||
data: data[i],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const optionData: EChartsOption = {
|
|
||||||
legend: {
|
|
||||||
itemGap: 10,
|
|
||||||
itemWidth: 20,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: '15',
|
|
||||||
},
|
|
||||||
data: name,
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
// 坐标轴指示器,坐标轴触发有效
|
|
||||||
// lineStyle: {
|
|
||||||
// color: '#57617B',
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
formatter:
|
|
||||||
'{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%<br />',
|
|
||||||
// backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgb(0,253,255,0.6)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#32346c ',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
boundaryGap: false, //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
inside: false,
|
|
||||||
},
|
|
||||||
data: xData,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgb(0,253,255,0.6)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#32346c ',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value}%',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: series,
|
|
||||||
};
|
|
||||||
|
|
||||||
function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
|
|
||||||
if (!container) return;
|
|
||||||
const { clientHeight, clientWidth } = container;
|
|
||||||
|
|
||||||
// alarmDayLineChart.value = echarts.init(container, 'light', {
|
|
||||||
// width: clientWidth,
|
|
||||||
// height: clientHeight - 36,
|
|
||||||
// });
|
|
||||||
|
|
||||||
alarmDayLineChart.value = markRaw(
|
|
||||||
echarts.init(container, 'light', {
|
|
||||||
width: clientWidth,
|
|
||||||
height: clientHeight - 36,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
option && alarmDayLineChart.value.setOption(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fnDesign(alarmDayLine.value, optionData);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.chart-container {
|
|
||||||
/* 设置图表容器大小和位置 */
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -126,23 +126,16 @@ function initPicture() {
|
|||||||
color: color[x] + ')',
|
color: color[x] + ')',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
0,
|
{
|
||||||
0,
|
offset: 0,
|
||||||
0,
|
color: color[x] + ', .5)',
|
||||||
1,
|
},
|
||||||
[
|
{
|
||||||
{
|
offset: 1,
|
||||||
offset: 0,
|
color: color[x] + ', 0)',
|
||||||
color: color[x] + ', 0.5)',
|
},
|
||||||
},
|
]),
|
||||||
{
|
|
||||||
offset: 0.8,
|
|
||||||
color: color[x] + ', 0.5)',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
false
|
|
||||||
),
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
},
|
},
|
||||||
@@ -197,7 +190,7 @@ function initPicture() {
|
|||||||
data: charts.lineX,
|
data: charts.lineX,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
return params.split(' ')[0] + '\n' + params.split(' ')[1];
|
return params.split(' ')[1];
|
||||||
},
|
},
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
},
|
},
|
||||||
@@ -213,7 +206,7 @@ function initPicture() {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
// splitNumber: 4,
|
// splitNumber: 4,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 300,
|
//max: 300,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}',
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user