1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
| /** 异常数据的折线图 */
|
| function baseOption(title, xData) {
| return {
| title: {
| text: title,
| left: '1%',
| textStyle: {
| fontSize: 14
| }
| },
| tooltip: {},
| toolbox: {
| // 工具栏
| feature: {
| // 保存为图片
| saveAsImage: {}
| }
| },
| xAxis: {
| type: 'category',
| data: xData,
| name: '时间',
| axisLabel: {
| formatter: function (value) {
| return value.slice(11, -3)
| }
| }
| },
| yAxis: {
| type: 'value',
| name: 'mg/m³'
| }
| }
| }
|
| function baseSeries(yData) {
| return {
| name: '颗粒物浓度',
| type: 'line',
| data: yData
| }
| }
|
| function baseMarkArea(area) {
| const _data = []
| area.forEach((v) => {
| _data.push([{ xAxis: v[0] }, { xAxis: v[1] }])
| })
| return {
| itemStyle: {
| color: 'rgba(255, 173, 177, 0.4)'
| },
| data: _data
| }
| }
|
| function baseVisualMap(area) {
| const _pieces = []
| area.forEach((v, i) => {
| if (i == 0) {
| _pieces.push({
| lt: v[0],
| color: 'green'
| })
| }
| _pieces.push({
| gte: v[0],
| lte: v[1],
| color: 'red'
| })
| })
| const lastOne = area[area.length - 1]
| _pieces.push({
| gt: lastOne[1],
| color: 'green'
| })
| return {
| show: false,
| dimension: 0,
| pieces: _pieces
| }
| }
|
| function baseMarkLine() {
| return {
| symbol: 'none',
| itemStyle: {
| // 基线公共样式
| normal: {
| lineStyle: {
| type: 'dashed'
| },
| label: {
| show: true,
| position: 'end',
| formatter: '{b}'
| }
| }
| },
| data: [
| {
| name: '超标',
| type: 'max',
| yAxis: 1,
| lineStyle: {
| color: 'red'
| }
| },
| {
| name: '数据超低',
| type: 'min',
| yAxis: 0.02,
| lineStyle: {
| color: 'red'
| }
| }
| ]
| }
| }
|
| export default {
| /**
| * 获取各类异常的折线图配置项
| * @param {*} param0
| * @returns
| */
| setExceptionChartOption2({ xData, yData, exceptionArea, exceptionName, exceptionType }) {
| const indexArea = []
| exceptionArea.forEach((e) => {
| const i1 = xData.indexOf(e[0])
| const i2 = xData.indexOf(e[1])
| indexArea.push([i1, i2])
| })
| const option = baseOption(exceptionName, xData)
| const series = baseSeries(yData)
| series.markArea = baseMarkArea(exceptionArea)
| // 数据超低或超标
| if (exceptionType == '1' || exceptionType == '2') {
| series.markLine = baseMarkLine()
| }
| const visualMap = baseVisualMap(indexArea)
|
| option.series = [series]
| option.visualMap = visualMap
|
| return option
| }
| }
|
|
