dcim-topology2d 1.1.2 → 1.1.3
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/chart-diagram/src/echarts/index.js +6 -0
- package/core/src/common.js +15 -6
- package/core/src/core.js +6 -2
- package/core/src/healps/changeData.d.ts +1 -1
- package/core/src/healps/changeData.js +70 -55
- package/core/src/models/node.js +1 -1
- package/core/src/models/pen.js +10 -1
- package/core/src/preview.js +16 -7
- package/core/src/renderLayer.js +1 -1
- package/core/src/utils/canvas.js +1 -1
- package/core/src/utils/onmousevent.js +12 -3
- package/package.json +1 -1
- package/static/echartsDefaultData.js +95 -0
- package/static/index.js +1 -0
- package/style/index.css +10 -0
@@ -62,6 +62,12 @@ export function echarts(ctx, node) {
|
|
62
62
|
return '';
|
63
63
|
}
|
64
64
|
}
|
65
|
+
if(option.series.length < 2) {
|
66
|
+
option.tooltip.formatter = function(params) {
|
67
|
+
const item = params[0];
|
68
|
+
return item.name + ' : ' + item.value;
|
69
|
+
}
|
70
|
+
}
|
65
71
|
// if(option.series.length >= 2) {
|
66
72
|
|
67
73
|
// for(let i=0; i<option.series.length-1 ; i++){
|
package/core/src/common.js
CHANGED
@@ -4,12 +4,13 @@ import {AnimateLayer} from './animateLayer';
|
|
4
4
|
import {RenderLayer} from './renderLayer';
|
5
5
|
import {Offscreen} from './offscreen';
|
6
6
|
import {Line, Node, Point, EventAction} from './models';
|
7
|
-
import {setConfItemNode} from './healps';
|
7
|
+
import {setConfItemNode, setStatisticalData} from './healps';
|
8
8
|
import {s8, formatPadding, getRect} from './utils';
|
9
9
|
import { useStore, clearStore } from './store'
|
10
10
|
import {POLL} from './poll';
|
11
11
|
import axios from 'axios';
|
12
12
|
import * as mqtt from './mqtt.min';
|
13
|
+
import {echartsDefaultDataMap, echartsLineBarDefaultLegendData} from "../../static";
|
13
14
|
|
14
15
|
var MoveInType;
|
15
16
|
(function (MoveInType) {
|
@@ -176,7 +177,7 @@ var Common = /** @class */ (function () {
|
|
176
177
|
window.topology = this;
|
177
178
|
}
|
178
179
|
|
179
|
-
Common.prototype.conversionData = function (obj) {
|
180
|
+
Common.prototype.conversionData = function (obj, type) {
|
180
181
|
this.clear();
|
181
182
|
let data = JSON.parse(JSON.stringify(obj));
|
182
183
|
if (!data) {
|
@@ -189,13 +190,17 @@ var Common = /** @class */ (function () {
|
|
189
190
|
// for old data.
|
190
191
|
if (data.nodes) {
|
191
192
|
for (var _i = 0, _a = data.nodes; _i < _a.length; _i++) {
|
192
|
-
|
193
|
+
const item = new Node(_a[_i]);
|
193
194
|
this.store.data.pens.push(item);
|
194
195
|
this.store.pens[item.id] = item;
|
195
196
|
this.setSwitchTabData(item, _i);
|
197
|
+
// 初始化图表数据
|
198
|
+
if (item.name === 'echarts' && item.data && type !== 'mqtt') {
|
199
|
+
item.data.echarts.option = setStatisticalData(item, 'def');
|
200
|
+
}
|
196
201
|
}
|
197
202
|
for (var _b = 0, _c = data.lines; _b < _c.length; _b++) {
|
198
|
-
|
203
|
+
const item = new Line(_c[_b]);
|
199
204
|
this.store.data.pens.push(item);
|
200
205
|
this.store.pens[item.id] = item;
|
201
206
|
}
|
@@ -203,12 +208,16 @@ var Common = /** @class */ (function () {
|
|
203
208
|
// end.
|
204
209
|
if (data.pens) {
|
205
210
|
for (var _d = 0, _e = data.pens; _d < _e.length; _d++) {
|
206
|
-
|
211
|
+
const item = _e[_d];
|
207
212
|
if (!item.from) {
|
208
|
-
|
213
|
+
const node = new Node(item);
|
209
214
|
this.store.data.pens.push(node);
|
210
215
|
this.store.pens[item.id] = node;
|
211
216
|
this.setSwitchTabData(node, _d);
|
217
|
+
// 初始化图表数据
|
218
|
+
if (node.name === 'echarts' && node.data && type !== 'mqtt') {
|
219
|
+
node.data.echarts.option = setStatisticalData(node, 'def');
|
220
|
+
}
|
212
221
|
} else {
|
213
222
|
const linNode = new Line(item);
|
214
223
|
this.store.data.pens.push(linNode);
|
package/core/src/core.js
CHANGED
@@ -905,6 +905,7 @@ var Topology = (function (_super) {
|
|
905
905
|
|
906
906
|
} else {
|
907
907
|
var node = new Node(json);
|
908
|
+
if(node.name === 'echarts') node.dash = 4;
|
908
909
|
node.setTID(_this.id);
|
909
910
|
node.clearChildrenIds();
|
910
911
|
_this.addNode(node, true);
|
@@ -921,7 +922,7 @@ var Topology = (function (_super) {
|
|
921
922
|
});
|
922
923
|
this.divLayer.canvas.focus();
|
923
924
|
};
|
924
|
-
Topology.prototype.addNode = function (node, focus) {
|
925
|
+
Topology.prototype.addNode = function (node, focus, visit) {
|
925
926
|
if (focus === void 0) {
|
926
927
|
focus = false;
|
927
928
|
}
|
@@ -946,7 +947,10 @@ var Topology = (function (_super) {
|
|
946
947
|
this.store.data.pens.push(node);
|
947
948
|
this.setSwitchTabData(node, this.store.data.pens.length-1);
|
948
949
|
if (focus) {
|
949
|
-
|
950
|
+
if(!visit) {
|
951
|
+
this.activeLayer.setPens([node]);
|
952
|
+
this.dispatch('addNode', node);
|
953
|
+
}
|
950
954
|
this.render();
|
951
955
|
this.animate(true);
|
952
956
|
this.cache();
|
@@ -5,4 +5,4 @@ export declare function setNodeEvents(item: any[], pen: Pen): void;
|
|
5
5
|
export declare function setControlData(pen: Pen, syncData: Node): void;
|
6
6
|
export declare function getControlNode(item: any, data: any): Node;
|
7
7
|
export declare function getDetailData(data: Node): void;
|
8
|
-
export declare function setStatisticalData(pen: Pen, staticForType: string, chartData: any): Node;
|
8
|
+
export declare function setStatisticalData(pen: Pen, dataType: any, staticForType: string, chartData: any): Node;
|
@@ -1,4 +1,5 @@
|
|
1
1
|
//let DETAILDATA = null;
|
2
|
+
import { echartsDefaultDataMap } from '../../../static/index';
|
2
3
|
export function setConfItemNode(pen, syn_synata) {
|
3
4
|
if (!pen.data) return
|
4
5
|
if(pen.data instanceof Array) {
|
@@ -78,7 +79,6 @@ export function setConfItemNode(pen, syn_synata) {
|
|
78
79
|
color = '#D38C00';
|
79
80
|
break;
|
80
81
|
}
|
81
|
-
|
82
82
|
// 显示的属性
|
83
83
|
if (name === 'text') {
|
84
84
|
pen.font.color = color
|
@@ -88,77 +88,92 @@ export function setConfItemNode(pen, syn_synata) {
|
|
88
88
|
}else {
|
89
89
|
pen.fillStyle = color
|
90
90
|
}
|
91
|
-
|
92
91
|
if (name === 'electricFan') setFanData(pen, _syn)
|
93
92
|
}else {
|
94
93
|
if (pen.elementRendered) pen.elementRendered = false;
|
95
|
-
if(pen.data.
|
94
|
+
if(pen.data.echarts) {
|
96
95
|
const { echartDataValue } = syn_synata;
|
97
|
-
//const seriesData = pen.data.echarts.option.series.length > 1 ? echartDataValue : echartData
|
98
96
|
const seriesData = echartDataValue;
|
99
|
-
const chartData = seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
|
100
|
-
const staticForType = pen.data.params
|
101
|
-
|
102
|
-
// 无效配置
|
103
|
-
}else {
|
104
|
-
pen.data.echarts = setStatisticalData(pen, staticForType, chartData);
|
105
|
-
}
|
97
|
+
const chartData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
|
98
|
+
const staticForType = pen.data.params && pen.data.params.staticForType || '';//统计类型:日,周,月,年
|
99
|
+
pen.data.echarts.option = setStatisticalData(pen, null, staticForType, chartData);
|
106
100
|
}
|
107
101
|
}
|
108
102
|
return pen
|
109
103
|
}
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
104
|
+
|
105
|
+
/**
|
106
|
+
* 设置图表数据
|
107
|
+
* @param pen 拓扑节点
|
108
|
+
* @param dataType 数据类型:‘def’-默认,不传默认为-实时
|
109
|
+
* @param staticForType 统计类型:日,周,月,年
|
110
|
+
* @param chartData // 图表实时数据
|
111
|
+
* @returns {*}
|
112
|
+
*/
|
113
|
+
export function setStatisticalData(pen, dataType, staticForType, chartData) {
|
114
|
+
const node = JSON.parse(JSON.stringify(pen));
|
115
|
+
const echartsOption = node.data.echarts.option;
|
116
|
+
const displayMode = parseInt(echartsOption.displayMode);
|
117
|
+
const defaultData = echartsDefaultDataMap[`displayMode_${displayMode}`];
|
118
|
+
const staticTypeData = chartData && chartData[`${staticForType}_Data`];
|
119
|
+
const chartRealData = staticForType ? staticTypeData || defaultData : chartData || defaultData;
|
120
|
+
dataType = staticForType && staticTypeData ? '' : 'def';
|
114
121
|
if (displayMode === 1 || displayMode === 2){ // 折线图,柱状图
|
115
122
|
//const xData = [], seriesData = [];
|
116
|
-
const
|
123
|
+
const defaultSeriesNode = JSON.parse(JSON.stringify(defaultData.seriesData[0]));
|
124
|
+
const seriesNodes = echartsOption.series;
|
117
125
|
// 双轴曲线
|
118
|
-
if(seriesNodes.length > 1 || node.data.params.curveNum > 1){
|
126
|
+
if(seriesNodes.length > 1 || node.data.params && node.data.params.curveNum > 1){
|
119
127
|
const legendData = [];
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
+
echartsOption.xAxis[0].data = chartRealData.XData;
|
129
|
+
//循环给每条统计数据赋值
|
130
|
+
seriesNodes.map((item, index) => {
|
131
|
+
if(dataType === 'def') {
|
132
|
+
if(!index) {
|
133
|
+
item.data = defaultSeriesNode.data;
|
134
|
+
}else {
|
135
|
+
for(let i = 0, sdl = defaultSeriesNode.data.length; i < sdl; i++){
|
136
|
+
displayMode === 1 ? defaultSeriesNode.data[i] -= 400 : defaultSeriesNode.data[i] += 100;
|
137
|
+
}
|
138
|
+
item.data = defaultSeriesNode.data;
|
139
|
+
}
|
140
|
+
}else {
|
141
|
+
const { name, data } = chartRealData.seriesData[index];
|
142
|
+
if(name) {
|
143
|
+
item.name = name;
|
144
|
+
legendData.push(name);
|
145
|
+
}
|
128
146
|
item.data = data;
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
}else {
|
133
|
-
node.data.echarts.option.legend = [];
|
134
|
-
node.data.echarts.option.series = []
|
135
|
-
}
|
147
|
+
}
|
148
|
+
});
|
149
|
+
if(echartsOption.legend && !dataType) echartsOption.legend.data = legendData;
|
136
150
|
}else {
|
137
|
-
|
138
|
-
|
139
|
-
|
151
|
+
echartsOption.xAxis[0].data = chartRealData.XData;
|
152
|
+
const { name, data } = chartRealData.seriesData[0];
|
153
|
+
if(name) seriesNodes[0].name = name;
|
154
|
+
seriesNodes[0].data = data;
|
155
|
+
}
|
156
|
+
if(echartsOption.legend && echartsOption.legend.data.length) {
|
157
|
+
echartsOption.legend.data = [];
|
158
|
+
for(let i=0, legLeng=echartsOption.legend.data.length; i<legLeng; i++){
|
159
|
+
echartsOption.legend.data.push(`标注${i+1}`);
|
140
160
|
}
|
141
161
|
}
|
142
162
|
}
|
143
|
-
if(displayMode === 4) { //
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
node
|
149
|
-
|
150
|
-
|
151
|
-
for (let sd = 0; sd < chartOptions.seriesData.length; sd++) {
|
152
|
-
barData.push(100);
|
153
|
-
}
|
154
|
-
node.data.echarts.option.series[1].data = barData;
|
163
|
+
if(displayMode === 4) { // top排行榜
|
164
|
+
echartsOption.yAxis[0].data = chartRealData.XData;
|
165
|
+
const { data } = chartRealData.seriesData[0];
|
166
|
+
echartsOption.yAxis[1].data = data;
|
167
|
+
for (let i = 0; i < echartsOption.series.length; i++) {
|
168
|
+
const node = echartsOption.series[i];
|
169
|
+
node.symbolBoundingData = chartRealData.total;
|
170
|
+
node.data = data;
|
155
171
|
}
|
156
172
|
}
|
157
|
-
if (displayMode === 5){ //
|
158
|
-
const colors =
|
159
|
-
const pieData = staticForType ? chartData : chartData.data;
|
173
|
+
if (displayMode === 5 || displayMode === 3){ // 饼图/环形图
|
174
|
+
const colors = echartsOption.color;
|
175
|
+
const pieData = staticForType ? chartData || defaultData : chartData && chartData.data || defaultData.seriesData;
|
160
176
|
const seriesData = [];
|
161
|
-
if(!pieData) return;
|
162
177
|
pieData.map((chd, index) => {
|
163
178
|
seriesData.push({
|
164
179
|
itemStyle: { color: colors[index] },
|
@@ -166,15 +181,15 @@ export function setStatisticalData(pen, staticForType, chartData) {
|
|
166
181
|
value: chd.value
|
167
182
|
})
|
168
183
|
})
|
169
|
-
|
184
|
+
echartsOption.series[0].data = seriesData;
|
170
185
|
}
|
171
|
-
if(displayMode === 6
|
186
|
+
if(displayMode === 6){ // 仪表盘
|
172
187
|
// 仪表盘分两种,分别有不同的取值方式,下面两行先注释掉
|
173
188
|
// node.appearance.title.text = chartData.name;
|
174
189
|
// node.data.echarts.option.title.text = chartData.name;
|
175
|
-
|
190
|
+
echartsOption.series[0].data[0].value = chartData && chartData.value || defaultData.value;
|
176
191
|
}
|
177
|
-
return
|
192
|
+
return echartsOption;
|
178
193
|
}
|
179
194
|
export function setNodeEvents(item, pen) {
|
180
195
|
|
package/core/src/models/node.js
CHANGED
@@ -80,7 +80,7 @@ var Node = /** @class */ (function (_super) {
|
|
80
80
|
_this.leakageFillStyle = json.leakageFillStyle || '#ff0000';
|
81
81
|
_this.bindStaticId = json.bindStaticId || '';
|
82
82
|
_this.buttonCheckSlide = json.buttonCheckSlide || '';
|
83
|
-
_this.
|
83
|
+
_this.visitStrokeStyle = json.visitStrokeStyle || '';
|
84
84
|
_this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
|
85
85
|
_this.thBottomLineWidth = json.thBottomLineWidth || 1;
|
86
86
|
// 兼容老数据
|
package/core/src/models/pen.js
CHANGED
@@ -19,6 +19,7 @@ var Pen = /** @class */ (function () {
|
|
19
19
|
this.globalAlpha = 1;
|
20
20
|
this.dash = 0;
|
21
21
|
this.strokeStyle = '';
|
22
|
+
this.visitStrokeStyle = '';
|
22
23
|
this.fillStyle = '';
|
23
24
|
this.defaultFillStyle = '';
|
24
25
|
this.defaultFontColor = '#fff';
|
@@ -71,6 +72,8 @@ var Pen = /** @class */ (function () {
|
|
71
72
|
if (json.lineWidth || json.lineWidth === 0) {
|
72
73
|
this.lineWidth = json.lineWidth;
|
73
74
|
}
|
75
|
+
this.activeImgeIndex = json.activeImgeIndex || false;
|
76
|
+
this.visitStrokeStyle = json.visitStrokeStyle || '';
|
74
77
|
this.strokeStyle = json.strokeStyle || '';
|
75
78
|
this.fillStyle = json.fillStyle || '';
|
76
79
|
this.defaultFillStyle = json.defaultFillStyle || '';
|
@@ -147,7 +150,13 @@ var Pen = /** @class */ (function () {
|
|
147
150
|
if (this.lineWidth > 1) {
|
148
151
|
ctx.lineWidth = this.lineWidth;
|
149
152
|
}
|
150
|
-
|
153
|
+
if(this.dash === 4) {
|
154
|
+
ctx.strokeStyle = 'transparent';
|
155
|
+
}else {
|
156
|
+
const staticStrokeStyle = this.strokeStyle || '#222';
|
157
|
+
ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
|
158
|
+
}
|
159
|
+
//ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
|
151
160
|
this.fillStyle && (ctx.fillStyle = this.fillStyle);
|
152
161
|
if (this.lineCap) {
|
153
162
|
ctx.lineCap = this.lineCap;
|
package/core/src/preview.js
CHANGED
@@ -49,9 +49,9 @@ var Preview = (function (_super) {
|
|
49
49
|
_this.moveIn.type = _this.moveInType.None;
|
50
50
|
_this.scheduledAnimationFrame = false;
|
51
51
|
_this.hideTip();
|
52
|
-
_this.
|
52
|
+
_this.setAttributeForCanvasPoint('default');
|
53
53
|
if (hoverNode) {
|
54
|
-
if(eventNode) _this.
|
54
|
+
if(eventNode) _this.setAttributeForCanvasPoint('pointer');
|
55
55
|
if(hoverNode.visible) _this.showTip(hoverNode, pos);
|
56
56
|
_this.moveIn.type = moveType;
|
57
57
|
}
|
@@ -68,14 +68,14 @@ var Preview = (function (_super) {
|
|
68
68
|
var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
|
69
69
|
_this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
|
70
70
|
if (e.altKey) {
|
71
|
-
_this.
|
71
|
+
_this.setAttributeForCanvasPoint('pointer');
|
72
72
|
}
|
73
73
|
if (_this.inputObj) {
|
74
74
|
_this.setNodeText();
|
75
75
|
}
|
76
76
|
const {eventType, value} = mousDownFun(_this.store.options.type, _this.moveIn.eventNode);
|
77
77
|
if (_this.moveIn.type == _this.moveInType.Nodes) {
|
78
|
-
_this.
|
78
|
+
_this.setAttributeForCanvasPoint('pointer');
|
79
79
|
switch (eventType) {
|
80
80
|
case downDataType.Window:
|
81
81
|
omouseEventPrototDoWindowFn(_this.moveIn.eventNode, _this.moveIn.hoverNode);
|
@@ -103,7 +103,11 @@ var Preview = (function (_super) {
|
|
103
103
|
_this.mouseDown = null;
|
104
104
|
_this.lastTranlated.x = 0;
|
105
105
|
_this.lastTranlated.y = 0;
|
106
|
-
_this.
|
106
|
+
if(_this.moveIn.eventNode) {
|
107
|
+
_this.setAttributeForCanvasPoint('pointer');
|
108
|
+
}else {
|
109
|
+
_this.setAttributeForCanvasPoint('default');
|
110
|
+
}
|
107
111
|
};
|
108
112
|
_this.divLayer.canvas.onmousemove = this.onMouseMove;
|
109
113
|
_this.divLayer.canvas.onmousedown = this.onmousedown;
|
@@ -158,14 +162,19 @@ var Preview = (function (_super) {
|
|
158
162
|
return false;
|
159
163
|
};
|
160
164
|
return _this;
|
165
|
+
}
|
166
|
+
Preview.prototype.setAttributeForCanvasPoint = function (type){
|
167
|
+
|
168
|
+
this.divLayer.canvas.setAttribute('class', `canvas-point ${type}`);
|
169
|
+
|
161
170
|
};
|
162
171
|
Preview.prototype.fitViewPreview = function (restore){
|
163
172
|
this.fitView(null, restore);
|
164
173
|
this.render();
|
165
174
|
};
|
166
175
|
// open - redraw by the data
|
167
|
-
Preview.prototype.open = function (topoJSon) {
|
168
|
-
this.conversionData(topoJSon);
|
176
|
+
Preview.prototype.open = function (topoJSon, type) {
|
177
|
+
this.conversionData(topoJSon, type);
|
169
178
|
this.fitView();
|
170
179
|
this.render(true);
|
171
180
|
this.animate(true);
|
package/core/src/renderLayer.js
CHANGED
@@ -148,7 +148,7 @@ var RenderLayer = /** @class */ (function (_super) {
|
|
148
148
|
};
|
149
149
|
|
150
150
|
RenderLayer.prototype.bkImgRectResize = function (size) {
|
151
|
-
const bkImageRect = commonStore[this.TID].bkImageRect;
|
151
|
+
const bkImageRect = commonStore[this.TID].data.bkImageRect;
|
152
152
|
if(!size) return;
|
153
153
|
if(bkImageRect) {
|
154
154
|
let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
|
package/core/src/utils/canvas.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import { ptInPolyXY } from './math';
|
2
2
|
import { moveDataType, downDataType } from './construction'
|
3
|
+
import { Node } from '../models'
|
3
4
|
// 执行window函数
|
4
5
|
export function omouseEventPrototDoWindowFn (eventNode, node) {
|
5
6
|
|
@@ -18,8 +19,16 @@ export function mousMoveFun(type, pos, data) {
|
|
18
19
|
|
19
20
|
for (var _i = 0, _a = data; _i < _a.length; _i++) {
|
20
21
|
var item = _a[_i];
|
21
|
-
const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
|
22
|
-
|
22
|
+
//const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
|
23
|
+
let isInPointNode = null;
|
24
|
+
if(item.name === 'arbitraryGraph') {
|
25
|
+
// 任意多边形通过点获取区域
|
26
|
+
isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
|
27
|
+
}else {
|
28
|
+
if(!(item instanceof Node)) item = new Node(item);
|
29
|
+
isInPointNode = item.hit(pos);
|
30
|
+
}
|
31
|
+
if(isInPointNode) {
|
23
32
|
params.hoverNode = item;
|
24
33
|
params.order = _i;
|
25
34
|
}
|
@@ -43,7 +52,7 @@ export function mousDownFun(type, eventNode) {
|
|
43
52
|
if(action === 3) {
|
44
53
|
params.eventType = downDataType.Window; // 打开会话窗口
|
45
54
|
}else if(action === 7){
|
46
|
-
params.eventType = downDataType.Showhide; //
|
55
|
+
params.eventType = downDataType.Showhide; // 显示/隐藏
|
47
56
|
params.value = eventNode.value;
|
48
57
|
}else if(action === 8){
|
49
58
|
params.eventType = downDataType.Tabswitch; // Tab切换
|
package/package.json
CHANGED
@@ -0,0 +1,95 @@
|
|
1
|
+
/**
|
2
|
+
* echarts图表默认数据组
|
3
|
+
* @type {{displayMode_1: string}}
|
4
|
+
*/
|
5
|
+
export const echartsDefaultDataMap = {
|
6
|
+
displayMode_1: {
|
7
|
+
legend: null,
|
8
|
+
XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
9
|
+
seriesData: [{
|
10
|
+
type: 'line',
|
11
|
+
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
12
|
+
}]
|
13
|
+
}, // 折线图
|
14
|
+
displayMode_2: {
|
15
|
+
legend: null,
|
16
|
+
XData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
17
|
+
seriesData: [{
|
18
|
+
name: '',
|
19
|
+
data: [20, 60, 110, 220, 80, 100, 180]
|
20
|
+
}]
|
21
|
+
},// 柱状图
|
22
|
+
displayMode_3: {
|
23
|
+
legend: null,
|
24
|
+
seriesData: [{
|
25
|
+
value: 10,
|
26
|
+
name: '机房1'
|
27
|
+
}, {
|
28
|
+
value: 30,
|
29
|
+
name: '机房2'
|
30
|
+
}, {
|
31
|
+
value: 50,
|
32
|
+
name: '机房3'
|
33
|
+
}, {
|
34
|
+
value: 20,
|
35
|
+
name: '机房4'
|
36
|
+
}, {
|
37
|
+
value: 60,
|
38
|
+
name: '机房5'
|
39
|
+
}, {
|
40
|
+
value: 15,
|
41
|
+
name: '机房6'
|
42
|
+
}, {
|
43
|
+
value: 18,
|
44
|
+
name: '机房7'
|
45
|
+
}, {
|
46
|
+
value: 26,
|
47
|
+
name: '机房8'
|
48
|
+
}]
|
49
|
+
},// 环形图
|
50
|
+
displayMode_4: {
|
51
|
+
legend: null,
|
52
|
+
total: 100,
|
53
|
+
XData: ['CA机房', '五层IT', '四层IT', '冷水机组'],
|
54
|
+
seriesData: [{
|
55
|
+
data: [5, 20, 50, 80]
|
56
|
+
}]
|
57
|
+
},// TOP排行榜
|
58
|
+
displayMode_5: {
|
59
|
+
legend: null,
|
60
|
+
seriesData: [{
|
61
|
+
name: '一般',
|
62
|
+
value: 0
|
63
|
+
}, {
|
64
|
+
name: '较大',
|
65
|
+
value: 0
|
66
|
+
}, {
|
67
|
+
name: '重大',
|
68
|
+
value: 0
|
69
|
+
}, {
|
70
|
+
name: '严重',
|
71
|
+
value: 0
|
72
|
+
}, {
|
73
|
+
name: '高级',
|
74
|
+
value: 0
|
75
|
+
}]
|
76
|
+
},// 饼图
|
77
|
+
displayMode_6: {
|
78
|
+
value: 8
|
79
|
+
},// 仪表盘
|
80
|
+
}
|
81
|
+
// 柱状图和折线图默认标注
|
82
|
+
export const echartsLineBarDefaultLegendData = {
|
83
|
+
data: ['标注1'],
|
84
|
+
icon: 'rich',
|
85
|
+
show: true,
|
86
|
+
itemWidth: 14,
|
87
|
+
itemHeight: 14,
|
88
|
+
textStyle: {
|
89
|
+
color: '#C6D1DB',
|
90
|
+
fontSize: '14px',
|
91
|
+
},
|
92
|
+
top: '12%',
|
93
|
+
left: '10%',
|
94
|
+
itemGap: 8
|
95
|
+
};
|
package/static/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export * from './echartsDefaultData';
|