dcim-topology2d 2.0.7 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/activity-diagram/src/final/final.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.js +1 -1
- package/activity-diagram/src/fork/fork.anchor.d.ts +1 -1
- package/activity-diagram/src/fork/fork.anchor.js +1 -1
- package/activity-diagram/src/fork/fork.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.js +1 -1
- package/activity-diagram/src/register.js +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.js +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.js +1 -1
- package/chart-diagram/index.d.ts +1 -3
- package/chart-diagram/index.js +1 -2
- package/chart-diagram/src/echarts/index.d.ts +2 -1
- package/chart-diagram/src/echarts/index.js +104 -106
- package/chart-diagram/src/register.js +8 -9
- package/class-diagram/src/class/class.d.ts +1 -1
- package/class-diagram/src/class/class.rect.d.ts +1 -1
- package/class-diagram/src/class/class.rect.js +1 -1
- package/class-diagram/src/register.js +1 -1
- package/core/index.d.ts +0 -2
- package/core/index.js +0 -2
- package/core/src/activeLayer.d.ts +10 -2
- package/core/src/activeLayer.js +47 -42
- package/core/src/animateLayer.d.ts +7 -3
- package/core/src/animateLayer.js +12 -10
- package/core/src/calling.d.ts +4 -1
- package/core/src/calling.js +41 -43
- package/core/src/canvas.d.ts +6 -1
- package/core/src/canvas.js +18 -18
- package/core/src/common.d.ts +7 -6
- package/core/src/common.js +672 -333
- package/core/src/core.d.ts +4 -3
- package/core/src/core.js +367 -466
- package/core/src/divLayer.d.ts +36 -2
- package/core/src/divLayer.js +305 -33
- package/core/src/healps/changeData.d.ts +2 -1
- package/core/src/healps/changeData.js +66 -32
- package/core/src/hoverLayer.d.ts +9 -2
- package/core/src/hoverLayer.js +34 -31
- package/core/src/middles/default.d.ts +3 -1
- package/core/src/middles/default.js +51 -53
- package/core/src/middles/index.js +2 -3
- package/core/src/middles/nodes/arbitrarygraph.js +9 -11
- package/core/src/middles/nodes/pentagon.rect.js +1 -1
- package/core/src/middles/nodes/rectangle.rect.js +1 -1
- package/core/src/models/data.d.ts +26 -0
- package/core/src/models/data.js +77 -0
- package/core/src/models/data.js.map +1 -0
- package/core/src/models/index.d.ts +1 -0
- package/core/src/models/index.js +1 -0
- package/core/src/models/node.d.ts +0 -10
- package/core/src/models/node.js +32 -54
- package/core/src/models/pen.js +59 -19
- package/core/src/models/rect.js +2 -2
- package/core/src/mqtt.d.ts +14 -0
- package/core/src/mqtt.js +82 -0
- package/core/src/mqtt.js.map +1 -0
- package/core/src/offscreen.d.ts +4 -1
- package/core/src/offscreen.js +8 -10
- package/core/src/options.d.ts +1 -3
- package/core/src/options.js +0 -2
- package/core/src/poll.js +39 -0
- package/core/src/preview.d.ts +13 -1
- package/core/src/preview.js +43 -111
- package/core/src/renderLayer.d.ts +9 -11
- package/core/src/renderLayer.js +60 -48
- package/core/src/socket.d.ts +10 -0
- package/core/src/socket.js +51 -0
- package/core/src/socket.js.map +1 -0
- package/core/src/utils/canvas.js +1 -1
- package/core/src/utils/construction.d.ts +3 -12
- package/core/src/utils/construction.js +1 -8
- package/core/src/utils/conversion.d.ts +0 -11
- package/core/src/utils/conversion.js +0 -167
- package/core/src/utils/dom.d.ts +8 -0
- package/core/src/utils/dom.js +67 -0
- package/core/src/utils/dom.js.map +1 -0
- package/core/src/utils/index.d.ts +1 -2
- package/core/src/utils/index.js +1 -2
- package/core/src/utils/math.d.ts +0 -1
- package/core/src/utils/math.js +0 -3
- package/core/src/utils/onmousevent.d.ts +0 -3
- package/core/src/utils/onmousevent.js +8 -37
- package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
- package/flow-diagram/src/comment/comment.anchor.js +1 -1
- package/flow-diagram/src/comment/comment.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.js +1 -1
- package/flow-diagram/src/data/data.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.js +1 -1
- package/flow-diagram/src/db/db.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.js +1 -1
- package/flow-diagram/src/display/display.anchor.d.ts +1 -1
- package/flow-diagram/src/display/display.anchor.js +1 -1
- package/flow-diagram/src/display/display.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.js +1 -1
- package/flow-diagram/src/document/document.anchor.d.ts +1 -1
- package/flow-diagram/src/document/document.anchor.js +1 -1
- package/flow-diagram/src/document/document.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
- package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
- package/flow-diagram/src/manually/manually.anchor.js +1 -1
- package/flow-diagram/src/manually/manually.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.js +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
- package/flow-diagram/src/parallel/parallel.d.ts +1 -1
- package/flow-diagram/src/queue/queue.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.js +1 -1
- package/flow-diagram/src/register.js +1 -1
- package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
- package/layout/src/align.d.ts +1 -1
- package/layout/src/align.js +1 -1
- package/layout/src/layout.d.ts +1 -1
- package/layout/src/layout.js +1 -1
- package/myShape-diagram/{index.js → myShape.js} +1 -4
- package/package.json +1 -1
- package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.anchor.js +1 -1
- package/sequence-diagram/src/focus/focus.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
- package/sequence-diagram/src/register.js +1 -1
- package/chart-diagram/src/utils/changeOptions.d.ts +0 -7
- package/chart-diagram/src/utils/changeOptions.js +0 -253
- package/chart-diagram/src/utils/conversion.d.ts +0 -18
- package/chart-diagram/src/utils/conversion.js +0 -399
- package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
- package/chart-diagram/src/utils/drawGraphic.js +0 -97
- package/chart-diagram/src/utils/formatter.d.ts +0 -1
- package/chart-diagram/src/utils/formatter.js +0 -129
- package/chart-diagram/src/utils/index.d.ts +0 -4
- package/chart-diagram/src/utils/index.js +0 -4
- package/chart-diagram/src/utils/render.d.ts +0 -8
- package/chart-diagram/src/utils/render.js +0 -199
- package/core/src/element/common.d.ts +0 -5
- package/core/src/element/common.js +0 -54
- package/core/src/element/iframe.d.ts +0 -3
- package/core/src/element/iframe.js +0 -12
- package/core/src/element/index.d.ts +0 -4
- package/core/src/element/index.js +0 -4
- package/core/src/element/select.d.ts +0 -11
- package/core/src/element/select.js +0 -263
- package/core/src/element/tab.d.ts +0 -1
- package/core/src/element/tab.js +0 -23
- package/core/src/middles/arrows/index.d.ts +0 -4
- package/core/src/middles/arrows/index.js +0 -5
- package/core/src/middles/lines/index.d.ts +0 -4
- package/core/src/middles/lines/index.js +0 -5
- package/core/src/middles/nodes/formoverflow.js +0 -61
- package/core/src/middles/nodes/formselect.d.ts +0 -2
- package/core/src/middles/nodes/formselect.js +0 -95
- package/core/src/middles/nodes/iframe.d.ts +0 -2
- package/core/src/middles/nodes/iframe.js +0 -29
- package/core/src/middles/nodes/index.d.ts +0 -48
- package/core/src/middles/nodes/index.js +0 -49
- package/core/src/store/common.d.ts +0 -9
- package/core/src/store/common.js +0 -5
- package/core/src/store/data.d.ts +0 -186
- package/core/src/store/data.js +0 -178
- package/core/src/store/index.d.ts +0 -2
- package/core/src/store/index.js +0 -2
- package/core/src/utils/assignment.d.ts +0 -6
- package/core/src/utils/assignment.js +0 -168
- package/core/src/utils/params.d.ts +0 -2
- package/core/src/utils/params.js +0 -60
- package/static/echartsDefaultData.js +0 -167
- package/static/element.js +0 -14
- package/static/form.js +0 -11
- package/static/index.js +0 -3
- package/store/actions.js +0 -1
- package/store/clear.js +0 -10
- package/store/index.js +0 -2
- package/style/common.css +0 -18
- package/style/editor.css +0 -13
- package/style/index.css +0 -4
- package/style/select.css +0 -143
- /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
@@ -1,399 +0,0 @@
|
|
1
|
-
import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
|
2
|
-
import {
|
3
|
-
setSeriesRenderGroup,
|
4
|
-
drawGraphicShape,
|
5
|
-
setChartLegendData,
|
6
|
-
setChartXAxisData,
|
7
|
-
setChartYAxisData,
|
8
|
-
setLineSeriesStyleData,
|
9
|
-
setRingPreSeriesOptions,
|
10
|
-
setRingProSeriesOptions,
|
11
|
-
mapFormatterSet
|
12
|
-
} from '../utils';
|
13
|
-
import {
|
14
|
-
gaugeNormalAuto,
|
15
|
-
lineBarDataAuto,
|
16
|
-
pieRingAssetTotalAuto,
|
17
|
-
pieRingProportionAuto,
|
18
|
-
pieRingNormalAuto,
|
19
|
-
topRankingListAuto,
|
20
|
-
scatterDataAuto,
|
21
|
-
barPileStaticDataAuto
|
22
|
-
} from './render';
|
23
|
-
import {commonStore, echartsStaticType} from "../../../core";
|
24
|
-
|
25
|
-
export function getXYAxisLabelVal(index, intervalNum, value) {
|
26
|
-
if (index === 0 || index % intervalNum === 0) {
|
27
|
-
return value;
|
28
|
-
} else {
|
29
|
-
return '';
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
/**
|
34
|
-
* 初始化图表与tabs关联的配置数据
|
35
|
-
* @param node 元件节点
|
36
|
-
*/
|
37
|
-
export function initBindTabSetting(node) {
|
38
|
-
const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
|
39
|
-
const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
|
40
|
-
if(switchTabData) {
|
41
|
-
const tabNode = Object.values(switchTabData)[0];
|
42
|
-
const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
|
43
|
-
const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
|
44
|
-
node.data.params.staticForType = tabStaticType;
|
45
|
-
return {
|
46
|
-
type: tabStaticType,
|
47
|
-
data: tabNode.tabData
|
48
|
-
};
|
49
|
-
}
|
50
|
-
return null;
|
51
|
-
}
|
52
|
-
|
53
|
-
// 自动滑动展示数据
|
54
|
-
export function setMapAutoMoveOptions(option, chartNode, node, callback) {
|
55
|
-
option.dataZoom = echartsDataRoom;
|
56
|
-
const dataZoomNode = option.dataZoom[0];
|
57
|
-
const {start, end, time} = node.appearance.zoomParams;
|
58
|
-
const zoomStart = Number(start);
|
59
|
-
const zoomEnd = Number(end);
|
60
|
-
const zoomTime = Number(time);
|
61
|
-
dataZoomNode.start = zoomStart;
|
62
|
-
dataZoomNode.end = zoomEnd;
|
63
|
-
chartNode.timeTicket = setInterval(() => {
|
64
|
-
if (Number(dataZoomNode.end) > 100) {
|
65
|
-
dataZoomNode.end = zoomEnd;
|
66
|
-
dataZoomNode.start = zoomStart;
|
67
|
-
} else {
|
68
|
-
dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
|
69
|
-
dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
|
70
|
-
}
|
71
|
-
callback(option);
|
72
|
-
}, zoomTime * 1000);
|
73
|
-
}
|
74
|
-
|
75
|
-
// 停止自动滑动展示数据
|
76
|
-
export function setMapStopAutoMoveOptions(chartNode) {
|
77
|
-
|
78
|
-
clearInterval(chartNode.timeTicket);
|
79
|
-
|
80
|
-
}
|
81
|
-
|
82
|
-
// 自动配置折线和柱状图的节点数据
|
83
|
-
export function setMapLineBarOptions(option, node) {
|
84
|
-
option.color = node.appearance.color;
|
85
|
-
option.xAxis[0].axisLabel.formatter = function (value, index) {
|
86
|
-
return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
|
87
|
-
}
|
88
|
-
option.yAxis[0].axisLabel.formatter = function (value, index) {
|
89
|
-
return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
|
90
|
-
}
|
91
|
-
if (option.series.length < 2) {
|
92
|
-
option.tooltip.formatter = function (params) {
|
93
|
-
const item = params[0];
|
94
|
-
return item.name + ' : ' + item.value;
|
95
|
-
}
|
96
|
-
}else {
|
97
|
-
option.series.map((item, index) => {
|
98
|
-
if(!(item.itemStyle && item.itemStyle.normal && item.itemStyle.normal.color)) {
|
99
|
-
item.itemStyle = {
|
100
|
-
normal: {
|
101
|
-
color : echartsColorData[index]
|
102
|
-
}
|
103
|
-
}
|
104
|
-
}
|
105
|
-
});
|
106
|
-
}
|
107
|
-
// chartOption.yAxis[0].splitLine = node.appearance.splitLine;
|
108
|
-
}
|
109
|
-
|
110
|
-
// 自动配置仪表盘的节点数据
|
111
|
-
export function setMapGaugeOptions(option, node) {
|
112
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
113
|
-
const seriesNode = option.series[0];
|
114
|
-
const appearance = node.appearance;
|
115
|
-
if(!appearance.min) appearance.min = 0;
|
116
|
-
if(!appearance.max) appearance.max = 100;
|
117
|
-
if (typeof appearance.min === 'number') seriesNode.min = appearance.min;
|
118
|
-
if (appearance.max) seriesNode.max = appearance.max;
|
119
|
-
if (appearance.splitNumber) seriesNode.splitNumber = appearance.splitNumber;
|
120
|
-
if (appearance.pointer) seriesNode.pointer = appearance.pointer;
|
121
|
-
if (appearance.axisLabel) seriesNode.axisLabel = appearance.axisLabel;
|
122
|
-
if (appearance.axisLine) seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
|
123
|
-
if (appearance.detail) seriesNode.detail = appearance.detail;
|
124
|
-
if (appearance.data) seriesNode.data = appearance.data;
|
125
|
-
if (appearance.detail) seriesNode.detail = appearance.detail;
|
126
|
-
if (appearance.data) seriesNode.data = appearance.data;
|
127
|
-
if (option.isGaugeLinear) {
|
128
|
-
seriesNode.axisLine.lineStyle.color = [
|
129
|
-
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
|
130
|
-
]
|
131
|
-
}
|
132
|
-
}
|
133
|
-
|
134
|
-
// 自动配置环形图和饼图的节点数据
|
135
|
-
export function setMapRingOptions(option, node) {
|
136
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
137
|
-
const appearance = node.appearance;
|
138
|
-
if(appearance.type === 'ringPre'){
|
139
|
-
|
140
|
-
setRingPreSeriesOptions(option, appearance);
|
141
|
-
|
142
|
-
}else if(appearance.type === 'ringPro'){
|
143
|
-
|
144
|
-
setRingProSeriesOptions(option, appearance);
|
145
|
-
|
146
|
-
}else {
|
147
|
-
const seriesNode = option.series[0];
|
148
|
-
if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
|
149
|
-
appearance.label = {
|
150
|
-
showValue: appearance.type === 'ring',
|
151
|
-
unit: appearance.type === 'ring' ? '%' : ''
|
152
|
-
}
|
153
|
-
}
|
154
|
-
seriesNode.label = {
|
155
|
-
normal: {
|
156
|
-
show: true,
|
157
|
-
position: 'outside',
|
158
|
-
color: appearance.label.color || '',
|
159
|
-
fontSize: appearance.label.fontSize || '12'
|
160
|
-
}
|
161
|
-
};
|
162
|
-
|
163
|
-
seriesNode.labelLine = appearance.labelLine && {...appearance.labelLine} || {};
|
164
|
-
|
165
|
-
if(seriesNode.labelLine.lineStyle && !seriesNode.labelLine.lineStyle.color) {
|
166
|
-
delete seriesNode.labelLine.lineStyle['color'];
|
167
|
-
}
|
168
|
-
|
169
|
-
const rich = {};
|
170
|
-
|
171
|
-
if(appearance.cir && appearance.cir.show) {
|
172
|
-
rich.cir = {...appearance.cir};
|
173
|
-
if(!rich.cir.borderColor) rich.cir.borderColor = 'auto';
|
174
|
-
if(!rich.cir.backgroundColor) rich.cir.backgroundColor = 'transparent';
|
175
|
-
}
|
176
|
-
|
177
|
-
if(appearance.labelDetail && appearance.labelDetail.length) {
|
178
|
-
// 环形明细展示配置,线条样式配置
|
179
|
-
rich.a = {
|
180
|
-
color: appearance.label.color || '',
|
181
|
-
fontSize: appearance.label.fontSize || '12'
|
182
|
-
};
|
183
|
-
for (let i = 0; i < appearance.labelDetail.length; i++) {
|
184
|
-
const detail = appearance.labelDetail[i];
|
185
|
-
rich[`b${i+1}`] = {
|
186
|
-
color: detail.color,
|
187
|
-
fontSize: detail.fontSize || '12'
|
188
|
-
};
|
189
|
-
}
|
190
|
-
}
|
191
|
-
seriesNode.label.normal.rich = rich;
|
192
|
-
}
|
193
|
-
}
|
194
|
-
|
195
|
-
// 自动配置3D柱状图的节点数据
|
196
|
-
export function setMap3dBarOptions(option, node) {
|
197
|
-
// 取消注册自定义形状
|
198
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
199
|
-
const seriesNode = option.series[0];
|
200
|
-
const appearance = node.appearance;
|
201
|
-
if (appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
|
202
|
-
if (appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
|
203
|
-
if (appearance.graphicShape) {
|
204
|
-
const {CubeLeft, CubeRight, CubeTop} = drawGraphicShape(appearance);
|
205
|
-
// 注册三个面图形
|
206
|
-
echarts.graphic.registerShape('CubeLeft', CubeLeft);
|
207
|
-
echarts.graphic.registerShape('CubeRight', CubeRight);
|
208
|
-
echarts.graphic.registerShape('CubeTop', CubeTop);
|
209
|
-
}
|
210
|
-
option.tooltip.formatter = function (params) {
|
211
|
-
const item = params[0];
|
212
|
-
return item.name + ' : ' + item.value;
|
213
|
-
}
|
214
|
-
}
|
215
|
-
|
216
|
-
function renderMap3dBarSeriesItem(seriesNode, appearance) {
|
217
|
-
seriesNode.renderItem = (params, api) => {
|
218
|
-
const seriesRenderData = setSeriesRenderGroup(appearance, api);
|
219
|
-
return {
|
220
|
-
type: 'group',
|
221
|
-
children: seriesRenderData,
|
222
|
-
};
|
223
|
-
};
|
224
|
-
}
|
225
|
-
|
226
|
-
export function setMapTopOptions(option, node) {
|
227
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
228
|
-
const appearance = node.appearance;
|
229
|
-
Object.assign(option.grid, appearance.grid);
|
230
|
-
if(!appearance.type.includes('TOPRanking')) return;
|
231
|
-
const yNode = option.yAxis[0];
|
232
|
-
if(yNode.axisLabel.rich['a1']) return;
|
233
|
-
for (let i = 0, length = yNode.data.length; i < length; i++) {
|
234
|
-
const order = i + 1;
|
235
|
-
yNode.axisLabel.rich[`a${order}`] = {
|
236
|
-
width: 30,
|
237
|
-
height: 17,
|
238
|
-
lineHeight: 22,
|
239
|
-
verticalAlign: 'bottom',
|
240
|
-
backgroundColor: {
|
241
|
-
image: `../../../images/TOP/NO-${order}-${rankingTopImageName[i]}.png`
|
242
|
-
}
|
243
|
-
}
|
244
|
-
}
|
245
|
-
}
|
246
|
-
|
247
|
-
/**
|
248
|
-
* 公共配置
|
249
|
-
* @param option 图表配置数据
|
250
|
-
* @param node 元件数据
|
251
|
-
*/
|
252
|
-
export function setMapGlobalOptions(option, node) {
|
253
|
-
// const chartOption = JSON.parse(JSON.stringify(option));
|
254
|
-
const appearance = node.appearance;
|
255
|
-
// 图表网格数据
|
256
|
-
if (appearance.grid) {
|
257
|
-
|
258
|
-
option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
|
259
|
-
|
260
|
-
}
|
261
|
-
// 图表X轴数据
|
262
|
-
if (option.xAxis) setChartXAxisData(option.xAxis, appearance);
|
263
|
-
// 图表Y轴数据
|
264
|
-
if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
|
265
|
-
// 图表图例数据
|
266
|
-
//if (option.legend) setChartLegendData(option.legend, appearance);
|
267
|
-
// 曲线样式数据
|
268
|
-
if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
|
269
|
-
}
|
270
|
-
|
271
|
-
// 实时改变图表data值
|
272
|
-
export function setMapDataOptions(option, node) {
|
273
|
-
const optionNode = commonStore[node.TID].echartsOptionsPool[node.id].option;
|
274
|
-
const appearance = node.appearance;
|
275
|
-
const params = node.params;
|
276
|
-
// 3d 柱状图
|
277
|
-
if (appearance.type === '3dBar') renderMap3dBarSeriesItem(optionNode.series[0], appearance);
|
278
|
-
const displayMode = parseInt(option.displayMode); // 图表类型
|
279
|
-
const staticForType = params && params.staticForType || ''; //统计类型:日,周,月,年,实时,其他
|
280
|
-
const syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
|
281
|
-
let staticTypeData = null; // 统计类型数据
|
282
|
-
if(staticForType === 'OTHER'){
|
283
|
-
// 其他类型,类型中的数据通常统计的都是历史数据,日、周、月、年、实时中的某一类,通常搭配分组统计使用。
|
284
|
-
// 类型中绑定一个测点为一个类型,绑定多个测点为多个类型。比如:有电功率和功率因数为两个分类,图表分组中分类数据绑定时就要同时绑定有电功率和功率因数两个测点,否则无法实现切换
|
285
|
-
for (let i = 0 ; i < echartsStaticType.length; i++) {
|
286
|
-
const chartData = syncEchartsData && syncEchartsData[`${echartsStaticType[i]}_Data`];
|
287
|
-
if(chartData) staticTypeData = chartData;
|
288
|
-
}
|
289
|
-
}else {
|
290
|
-
// 日,周,月,年,实时类型,不与分组统计一起使用
|
291
|
-
staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
|
292
|
-
}
|
293
|
-
// 实时数据加载
|
294
|
-
if(staticTypeData) {
|
295
|
-
|
296
|
-
if (displayMode === 1 || displayMode === 2) { // 折线图,柱状图
|
297
|
-
|
298
|
-
if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据,则修改Y轴原有配置
|
299
|
-
|
300
|
-
if(appearance.type === 'barPileStatic') {
|
301
|
-
|
302
|
-
barPileStaticDataAuto(optionNode, staticTypeData, appearance);
|
303
|
-
|
304
|
-
}else {
|
305
|
-
|
306
|
-
lineBarDataAuto(optionNode, params, staticTypeData);
|
307
|
-
|
308
|
-
}
|
309
|
-
|
310
|
-
}
|
311
|
-
if(displayMode === 4) { // top排行榜-电量仪
|
312
|
-
|
313
|
-
topRankingListAuto(optionNode, staticTypeData, appearance);
|
314
|
-
|
315
|
-
}
|
316
|
-
if(displayMode === 7) { // 散点图
|
317
|
-
|
318
|
-
scatterDataAuto(optionNode, staticTypeData);
|
319
|
-
|
320
|
-
}
|
321
|
-
if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
|
322
|
-
const pieData = staticTypeData && staticTypeData.data || staticTypeData || [];
|
323
|
-
if(appearance.type === 'ringPre') {
|
324
|
-
// 按照资产总台数统计设备告警数量
|
325
|
-
pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
|
326
|
-
|
327
|
-
}else if(appearance.type === 'ringPro'){
|
328
|
-
// 按照百分比统计设备配置情况
|
329
|
-
pieRingProportionAuto(optionNode, pieData, appearance.proportion);
|
330
|
-
}else {
|
331
|
-
|
332
|
-
pieRingNormalAuto(optionNode, pieData);
|
333
|
-
|
334
|
-
}
|
335
|
-
}
|
336
|
-
if(displayMode === 6) { // 仪表盘
|
337
|
-
|
338
|
-
gaugeNormalAuto(optionNode, staticTypeData);
|
339
|
-
|
340
|
-
}
|
341
|
-
}else {
|
342
|
-
if(option.title && option.title.text) {
|
343
|
-
optionNode.title.text = option.title.text;
|
344
|
-
}
|
345
|
-
if (option.legend) {
|
346
|
-
optionNode.legend = option.legend;
|
347
|
-
} else {
|
348
|
-
delete optionNode['legend'];
|
349
|
-
}
|
350
|
-
if (option.xAxis) {
|
351
|
-
for (let i = 0; i < option.xAxis.length; i++) {
|
352
|
-
const item = option.xAxis[i];
|
353
|
-
if (item.data) {
|
354
|
-
optionNode.xAxis[i].data = item.data;
|
355
|
-
}
|
356
|
-
}
|
357
|
-
}
|
358
|
-
if (option.yAxis) {
|
359
|
-
for (let i = 0; i < option.yAxis.length; i++) {
|
360
|
-
const item = option.yAxis[i];
|
361
|
-
if (item.data) {
|
362
|
-
optionNode.yAxis[i].data = item.data;
|
363
|
-
}
|
364
|
-
}
|
365
|
-
}
|
366
|
-
if (option.series) {
|
367
|
-
for (let i = 0; i < option.series.length; i++) {
|
368
|
-
const item = option.series[i];
|
369
|
-
if(item.name) optionNode.series[i].name = item.name;
|
370
|
-
optionNode.series[i].data = item.data;
|
371
|
-
}
|
372
|
-
}
|
373
|
-
}
|
374
|
-
|
375
|
-
mapFormatterSet(appearance, optionNode, staticTypeData);
|
376
|
-
|
377
|
-
const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
|
378
|
-
const mapChart = currentChartNode.chart;
|
379
|
-
clearInterval(currentChartNode.timeTicket);
|
380
|
-
currentChartNode.timeTicket = null;
|
381
|
-
// 自动滑动展示数据
|
382
|
-
if (appearance.timeTicket) {
|
383
|
-
mapChart.off('mouseover');
|
384
|
-
mapChart.off('mouseout');
|
385
|
-
mapChart.on('mouseover', function () {
|
386
|
-
setMapStopAutoMoveOptions(currentChartNode);
|
387
|
-
});
|
388
|
-
mapChart.on('mouseout', function () {
|
389
|
-
setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
|
390
|
-
return mapChart.setOption(chartNode);
|
391
|
-
})
|
392
|
-
});
|
393
|
-
setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
|
394
|
-
return mapChart.setOption(chartNode);
|
395
|
-
})
|
396
|
-
}
|
397
|
-
mapChart.setOption(optionNode);
|
398
|
-
mapChart.resize();
|
399
|
-
}
|
@@ -1,97 +0,0 @@
|
|
1
|
-
// 绘制柱子切面
|
2
|
-
export function drawGraphicShape(appearance) {
|
3
|
-
const offsetX = appearance.offsetX;
|
4
|
-
const offsetY = appearance.offsetY;
|
5
|
-
// 绘制左侧面
|
6
|
-
const CubeLeft = echarts.graphic.extendShape({
|
7
|
-
shape: {
|
8
|
-
x: 0,
|
9
|
-
y: 0,
|
10
|
-
},
|
11
|
-
buildPath: function (ctx, shape) {
|
12
|
-
// 会canvas的应该都能看得懂,shape是从custom传入的
|
13
|
-
const xAxisPoint = shape.xAxisPoint;
|
14
|
-
// console.log(shape);
|
15
|
-
const c0 = [shape.x, shape.y];
|
16
|
-
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
17
|
-
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
18
|
-
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
19
|
-
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
20
|
-
},
|
21
|
-
});
|
22
|
-
// 绘制右侧面
|
23
|
-
const CubeRight = echarts.graphic.extendShape({
|
24
|
-
shape: {
|
25
|
-
x: 0,
|
26
|
-
y: 0,
|
27
|
-
},
|
28
|
-
buildPath: function (ctx, shape) {
|
29
|
-
const xAxisPoint = shape.xAxisPoint;
|
30
|
-
const c1 = [shape.x, shape.y];
|
31
|
-
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
32
|
-
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
33
|
-
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
34
|
-
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
35
|
-
},
|
36
|
-
});
|
37
|
-
// 绘制顶面
|
38
|
-
const CubeTop = echarts.graphic.extendShape({
|
39
|
-
shape: {
|
40
|
-
x: 0,
|
41
|
-
y: 0,
|
42
|
-
},
|
43
|
-
buildPath: function (ctx, shape) {
|
44
|
-
const c1 = [shape.x, shape.y];
|
45
|
-
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
46
|
-
const c3 = [shape.x, shape.y - offsetX];
|
47
|
-
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
48
|
-
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
49
|
-
},
|
50
|
-
});
|
51
|
-
return {
|
52
|
-
CubeLeft,
|
53
|
-
CubeRight,
|
54
|
-
CubeTop
|
55
|
-
}
|
56
|
-
}
|
57
|
-
// 线性渐变
|
58
|
-
export function graphicLinearGradient(nr, nb, nl, nt, colors) {
|
59
|
-
return new echarts.graphic.LinearGradient(nr, nb, nl, nt, colors);
|
60
|
-
}
|
61
|
-
export function setSeriesRenderGroup(appearance, api) {
|
62
|
-
const seriesRenderData = [];
|
63
|
-
const groupTypeData = ['CubeLeft', 'CubeRight', 'CubeTop'];
|
64
|
-
const location = api.coord([api.value(0), api.value(1)]);
|
65
|
-
for (let i = 0; i < groupTypeData.length; i++) {
|
66
|
-
const groupItem = groupTypeData[i];
|
67
|
-
const groupNode = {
|
68
|
-
type: groupItem,
|
69
|
-
shape: {
|
70
|
-
api,
|
71
|
-
xValue: api.value(0),
|
72
|
-
yValue: api.value(1),
|
73
|
-
x: location[0],
|
74
|
-
y: location[1],
|
75
|
-
xAxisPoint: api.coord([api.value(0), 0]),
|
76
|
-
}
|
77
|
-
};
|
78
|
-
if(i === groupTypeData.length - 1){
|
79
|
-
// 顶部切面颜色填充
|
80
|
-
groupNode.style = {
|
81
|
-
fill: appearance.seriesCubeTopColor
|
82
|
-
}
|
83
|
-
}else {
|
84
|
-
// 左右切面颜色填充
|
85
|
-
let fillColor = graphicLinearGradient(0, 0, 0, 1, appearance[`series${groupItem}Gradient`]);
|
86
|
-
const cubeColorLinear = appearance[`series${groupItem}Linear`];
|
87
|
-
if(!cubeColorLinear) {
|
88
|
-
fillColor = appearance[`series${groupItem}Color`];
|
89
|
-
}
|
90
|
-
groupNode.style = {
|
91
|
-
fill: fillColor
|
92
|
-
}
|
93
|
-
}
|
94
|
-
seriesRenderData.push(groupNode);
|
95
|
-
}
|
96
|
-
return seriesRenderData;
|
97
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare function mapFormatterSet(appearance: object, option: any, data: any): void;
|
@@ -1,129 +0,0 @@
|
|
1
|
-
import {rankingTopImageName, rankingTopColorList} from '../../../static';
|
2
|
-
|
3
|
-
export function mapFormatterSet(appearance, options, data) {
|
4
|
-
if(appearance.type.includes('ring') || appearance.type.includes('pie')) {
|
5
|
-
const seriesNode = options.series[0];
|
6
|
-
if(seriesNode.label && seriesNode.label.normal &&!seriesNode.label.normal.formatter) {
|
7
|
-
setMapRingOptionsFormatter(appearance, seriesNode);
|
8
|
-
}
|
9
|
-
}
|
10
|
-
if(appearance.type.includes('lineTwins')) setMapLineTwinsFormatter(appearance, options);
|
11
|
-
if(appearance.type.includes('scatter')) setMapScatterFormatter(options);
|
12
|
-
if(appearance.type.includes('TOPRanking')) setMapTopScoreFormatter(options, data, appearance);
|
13
|
-
if(appearance.type.includes('barPileStatic')) setMapBarPileStaticFormatter(appearance, options);
|
14
|
-
}
|
15
|
-
function setMapLineTwinsFormatter(appearance, options) {
|
16
|
-
if(!options.tooltip.formatter && appearance.tooltipUnit) {
|
17
|
-
options.tooltip.formatter = function (params) {
|
18
|
-
let relVal = params[0].name;
|
19
|
-
for (var i = 0, l = params.length; i < l; i++) {
|
20
|
-
const unit = appearance.tooltipUnit[i] || '';
|
21
|
-
relVal +=
|
22
|
-
"<br/>" +
|
23
|
-
params[i].marker +
|
24
|
-
params[i].seriesName +
|
25
|
-
" : " +
|
26
|
-
params[i].value +
|
27
|
-
unit;
|
28
|
-
}
|
29
|
-
return relVal;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|
33
|
-
// 堆叠统计
|
34
|
-
function setMapBarPileStaticFormatter(appearance, options) {
|
35
|
-
if(!options.tooltip.formatter){
|
36
|
-
options.tooltip.formatter = function(param) {
|
37
|
-
return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${param[0].seriesName}:${param[0].value}<br>${param[1].seriesName}:${appearance.total[param[1].dataIndex]}`;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
if(!options.series[1].label.formatter){
|
41
|
-
options.series[1].label.formatter = function(param) {
|
42
|
-
if(!param.value) return '';
|
43
|
-
let value = '';
|
44
|
-
if(appearance.totalStyle) {
|
45
|
-
value = `${appearance.totalStyle.label ? appearance.total[param.dataIndex] : ''}${appearance.totalStyle.unit}`;
|
46
|
-
}else {
|
47
|
-
value = `${appearance.total[param.dataIndex]}`;
|
48
|
-
}
|
49
|
-
return value;
|
50
|
-
}
|
51
|
-
}
|
52
|
-
}
|
53
|
-
// Top排行榜自定义展示配置
|
54
|
-
function setMapTopScoreFormatter(options, data, appearance) {
|
55
|
-
const yNode = options.yAxis[0];
|
56
|
-
if(!yNode.axisLabel.formatter) {
|
57
|
-
yNode.axisLabel.formatter = function(value, i) {
|
58
|
-
return `{a${i+1}|}{b|${value}}`;
|
59
|
-
}
|
60
|
-
}
|
61
|
-
const seriesNode = options.series[0];
|
62
|
-
if(appearance.total && appearance.total.length) {
|
63
|
-
const realData = data && data.seriesData && data.seriesData[0] && data.seriesData[0].data;
|
64
|
-
if(realData && realData.length) {
|
65
|
-
seriesNode.data = appearance.total;
|
66
|
-
seriesNode.itemStyle.normal.label.formatter = function(param) {
|
67
|
-
return `${realData[param.dataIndex]}${appearance.unit}`;
|
68
|
-
}
|
69
|
-
}
|
70
|
-
}
|
71
|
-
if(seriesNode.itemStyle.normal.color) return;
|
72
|
-
for (let i = 0; i < options.series.length; i++) {
|
73
|
-
const node = options.series[i];
|
74
|
-
node.itemStyle.normal.color = function(params) {
|
75
|
-
return rankingTopColorList[params.dataIndex];
|
76
|
-
}
|
77
|
-
}
|
78
|
-
}
|
79
|
-
// 散点图series自定义展示配置
|
80
|
-
function setMapScatterFormatter(options) {
|
81
|
-
const seriesNode = options.series[0];
|
82
|
-
if(!options.tooltip.formatter) {
|
83
|
-
options.tooltip.formatter = function(param) {
|
84
|
-
const value = param.value;
|
85
|
-
// prettier-ignore
|
86
|
-
return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;padding-bottom: 5px;margin-bottom: 5px;">${param.seriesName}告警</div>告警等级:${value[1]}<br>告警数量:${value[2]}`;
|
87
|
-
}
|
88
|
-
}
|
89
|
-
if(!options.yAxis[0].axisLabel.formatter) {
|
90
|
-
options.yAxis[0].axisLabel.formatter = function (value, index) {
|
91
|
-
return `{f${index+1}|${value}}`;
|
92
|
-
}
|
93
|
-
}
|
94
|
-
if(seriesNode.symbolSize) return;
|
95
|
-
for (let i = 0; i < options.series.length; i++) {
|
96
|
-
const node = options.series[i];
|
97
|
-
node.symbolSize = function(d) {
|
98
|
-
let markSize = Math.sqrt(d[2]) * 2;
|
99
|
-
if(markSize < 6) markSize = 6;
|
100
|
-
if(markSize > 20) markSize = 20;
|
101
|
-
//if(!markSize) markSize = 1;
|
102
|
-
return markSize;
|
103
|
-
}
|
104
|
-
node.label.emphasis.formatter = function(param) {
|
105
|
-
return param.data[0];
|
106
|
-
}
|
107
|
-
}
|
108
|
-
}
|
109
|
-
// 环形图自定义展示配置
|
110
|
-
function setMapRingOptionsFormatter(appearance, seriesNode) {
|
111
|
-
if(appearance.labelDetail && appearance.labelDetail.length) {
|
112
|
-
seriesNode.label.normal.formatter = (data) => {
|
113
|
-
let result = `{a|${data.name}}\n{cir|}`;
|
114
|
-
for (let i = 0; i < appearance.labelDetail.length; i++) {
|
115
|
-
const detail = appearance.labelDetail[i];
|
116
|
-
result += '\n'+`{b${i+1}|${detail.title}${i === 0 ? data.value : data[`value${i+1}`]}${detail.unit}}`;
|
117
|
-
}
|
118
|
-
return result;
|
119
|
-
}
|
120
|
-
}else {
|
121
|
-
seriesNode.label.normal.formatter = (data) => {
|
122
|
-
if (appearance.label.showValue === true) {
|
123
|
-
return `${data.name}:${data.value}${appearance.label.unit}`;
|
124
|
-
} else {
|
125
|
-
return `${data.name}`;
|
126
|
-
}
|
127
|
-
}
|
128
|
-
}
|
129
|
-
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
export declare function lineBarDataAuto(option: any, params: {}, data: {}): void;
|
2
|
-
export declare function barPileStaticDataAuto(option: any, data: {}, appearance: {}): void;
|
3
|
-
export declare function topRankingListAuto(option: any, data: {}, appearance: {}): void;
|
4
|
-
export declare function scatterDataAuto(option: any, data: {}): void;
|
5
|
-
export declare function pieRingAssetTotalAuto(option: any, data: {}, total: number, count: number): void;
|
6
|
-
export declare function pieRingProportionAuto(option: any, data: {}, proportion: number): void;
|
7
|
-
export declare function pieRingNormalAuto(option: any, data: {}): void;
|
8
|
-
export declare function gaugeNormalAuto(option: any, data: {}): void;
|