dcim-topology2d 2.0.8 → 2.2.0
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 -3
- package/chart-diagram/src/utils/changeOptions.d.ts +1 -0
- package/chart-diagram/src/utils/changeOptions.js +41 -35
- package/chart-diagram/src/utils/conversion.d.ts +1 -1
- package/chart-diagram/src/utils/conversion.js +143 -15
- package/chart-diagram/src/utils/formatter.d.ts +1 -1
- package/chart-diagram/src/utils/formatter.js +51 -15
- package/chart-diagram/src/utils/index.d.ts +1 -0
- package/chart-diagram/src/utils/index.js +1 -0
- package/chart-diagram/src/utils/render.js +43 -52
- package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +3 -0
- package/chart-diagram/src/utils/surfaceParametricConversion.js +252 -0
- package/core/src/common.js +24 -15
- package/core/src/core.d.ts +2 -0
- package/core/src/core.js +75 -23
- package/core/src/element/common.d.ts +2 -1
- package/core/src/element/common.js +27 -18
- package/core/src/element/datePicker.d.ts +3 -0
- package/core/src/element/datePicker.js +44 -0
- package/core/src/element/index.d.ts +2 -1
- package/core/src/element/index.js +3 -1
- package/core/src/element/select.d.ts +1 -1
- package/core/src/element/select.js +15 -5
- package/core/src/element/tab.js +6 -9
- package/core/src/element/time.d.ts +3 -0
- package/core/src/element/time.js +44 -0
- package/core/src/healps/changeData.js +61 -41
- package/core/src/middles/default.js +53 -43
- package/core/src/middles/nodes/formDatePicker.d.ts +2 -0
- package/core/src/middles/nodes/formDatePicker.js +107 -0
- package/core/src/middles/nodes/formselect.js +20 -4
- package/core/src/middles/nodes/index.d.ts +4 -1
- package/core/src/middles/nodes/index.js +4 -0
- package/core/src/middles/nodes/switchs.d.ts +2 -0
- package/core/src/middles/nodes/switchs.js +46 -0
- package/core/src/middles/nodes/time.d.ts +2 -0
- package/core/src/middles/nodes/time.js +98 -0
- package/core/src/models/line.js +7 -7
- package/core/src/models/node.js +88 -74
- package/core/src/models/pen.js +11 -11
- package/core/src/offscreen.js +19 -19
- package/core/src/preview.d.ts +1 -0
- package/core/src/preview.js +44 -11
- package/core/src/store/data.d.ts +7 -0
- package/core/src/store/data.js +15 -2
- package/core/src/utils/assignment.d.ts +2 -1
- package/core/src/utils/assignment.js +55 -12
- package/core/src/utils/construction.d.ts +24 -0
- package/core/src/utils/construction.js +22 -1
- package/core/src/utils/conversion.d.ts +4 -0
- package/core/src/utils/conversion.js +151 -0
- package/core/src/utils/math.d.ts +0 -1
- package/core/src/utils/math.js +0 -3
- package/core/src/utils/onmousevent.js +1 -1
- package/core/src/utils/params.d.ts +1 -0
- package/core/src/utils/params.js +80 -4
- package/package.json +1 -1
- package/store/default.js +22 -0
- package/store/index.js +2 -1
- package/style/common.css +0 -3
- package/style/datePicker.css +44 -0
- package/style/editor.css +3 -0
- package/style/index.css +1 -0
@@ -9,7 +9,7 @@ import {
|
|
9
9
|
setMapTopOptions,
|
10
10
|
setMapGlobalOptions,
|
11
11
|
setMapDataOptions,
|
12
|
-
|
12
|
+
initBindCorrelationSetting
|
13
13
|
} from '../utils';
|
14
14
|
import {echartsTypeMap} from '../../../static';
|
15
15
|
|
@@ -67,8 +67,9 @@ export function echarts(ctx, node) {
|
|
67
67
|
echartsData.div.style.transformOrigin = '0 0';
|
68
68
|
if(node.data.params) node.data.params.tabCorrelationType = echartsData.tabCorrelationType || ''; // 统计图与Tab关联
|
69
69
|
const isLocked = currentStore.data.locked;
|
70
|
-
|
71
|
-
|
70
|
+
const echartsOptionsData = currentStore.echartsOptionsPool[node.id];
|
71
|
+
if (!isLocked || !echartsOptionsData) {
|
72
|
+
const tabData = initBindCorrelationSetting(node); // 初始化图表与其他组件关联的配置数据
|
72
73
|
// 【未锁定(编辑)状态, options未初始化的状态】
|
73
74
|
if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
|
74
75
|
// 公共配置 Top排行榜散点图跳过公共属性配置
|
@@ -87,8 +88,10 @@ export function echarts(ctx, node) {
|
|
87
88
|
if (appearance.type.includes('TOP')) setMapTopOptions(option, node);
|
88
89
|
//option.title = appearance.title;
|
89
90
|
option.backgroundColor = appearance.backgroundColor;
|
91
|
+
const correlationData = echartsOptionsData && echartsOptionsData.correlationData || null;
|
90
92
|
currentStore.echartsOptionsPool[node.id] = {
|
91
93
|
option: JSON.parse(JSON.stringify(option)),
|
94
|
+
correlationData,
|
92
95
|
data: {
|
93
96
|
TID: node.TID,
|
94
97
|
appearance,
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export declare function setRingChartText<T>(textData: T): void;
|
2
2
|
export declare function setRingPreSeriesOptions<T>(option: T, appearance: T): void;
|
3
3
|
export declare function setRingProSeriesOptions<T>(option: T, appearance: T): void;
|
4
|
+
export declare function set3DPieOptions<T>(option: T, appearance: T, labelLineData: any, realData: any): {};
|
4
5
|
export declare function setChartLegendData<T>(legend: T, appearance: T): void;
|
5
6
|
export declare function setChartXAxisData<T>(xAxis: [], appearance: T): void;
|
6
7
|
export declare function setChartYAxisData<T>(yAxis: [], appearance: T): void;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
// 初始化图例数据和图例配置数据
|
2
2
|
import {
|
3
|
-
echartsLegendDefaultData,
|
4
3
|
echartsXAxisDefaultStyleData,
|
5
4
|
echartsYAxisDefaultStyleData,
|
6
5
|
echartsLineSeriesStyleData,
|
7
6
|
echartsColorData
|
8
7
|
} from '../../../static';
|
8
|
+
import {getPie3D} from './surfaceParametricConversion';
|
9
9
|
|
10
10
|
// 配置环形图中间区域文字样式
|
11
11
|
export function setRingChartText(textData) {
|
@@ -63,6 +63,20 @@ export function setRingProSeriesOptions(option, appearance) {
|
|
63
63
|
seriesLastChildNode.radius = appearance.inner.radius;
|
64
64
|
seriesLastChildNode.itemStyle.normal.color.colorStops[0].color = appearance.inner.borderColor;
|
65
65
|
}
|
66
|
+
|
67
|
+
// 3D饼图 | 环形图 属性配置
|
68
|
+
export function set3DPieOptions(option, appearance, labelLineData, realData){
|
69
|
+
let type = appearance.type.includes('pie') ? 'pie' : 'ring';
|
70
|
+
const {legendData, series, node, total, boxHeight} = getPie3D(appearance.grid.internalDiameterRatio, type, appearance, labelLineData, realData);
|
71
|
+
option.grid3D.boxHeight = boxHeight;
|
72
|
+
option.legend.data = legendData;
|
73
|
+
option.series = series;
|
74
|
+
return {
|
75
|
+
node,
|
76
|
+
total
|
77
|
+
};
|
78
|
+
}
|
79
|
+
|
66
80
|
// 图表X轴数据
|
67
81
|
export function setChartXAxisData(xAxis, appearance) {
|
68
82
|
for (let i = 0; i < xAxis.length; i++) {
|
@@ -172,7 +186,6 @@ export function setChartYAxisData(yAxis, appearance) {
|
|
172
186
|
|
173
187
|
// 图表图例数据
|
174
188
|
export function setChartLegendData(legend, appearance) {
|
175
|
-
if (!legend.formatter) legend.formatter = ['{a|{name}}'].join('\n');
|
176
189
|
// 设置默认图例文字配置,如果想改变初始化文字属性,在 appearance中配置即可
|
177
190
|
if (!legend.textStyle) legend.textStyle = {
|
178
191
|
color: '#fff',
|
@@ -184,39 +197,32 @@ export function setChartLegendData(legend, appearance) {
|
|
184
197
|
verticalAlign: 'bottom',
|
185
198
|
}
|
186
199
|
};
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
legend.bottom = bottom || 'auto';
|
214
|
-
legend.left = left || 'auto';
|
215
|
-
legend.padding = padding || [5, 5, 5, 5];
|
216
|
-
legend.textStyle.color = color || '';
|
217
|
-
legend.textStyle.height = height || 8;
|
218
|
-
legend.textStyle.rich.a = fontSize || 12;
|
219
|
-
}
|
200
|
+
const {
|
201
|
+
icon,
|
202
|
+
itemWidth,
|
203
|
+
itemHeight,
|
204
|
+
itemGap,
|
205
|
+
top,
|
206
|
+
right,
|
207
|
+
bottom,
|
208
|
+
left,
|
209
|
+
padding,
|
210
|
+
color,
|
211
|
+
height,
|
212
|
+
fontSize
|
213
|
+
} = appearance.legend;
|
214
|
+
legend.icon = icon || '';
|
215
|
+
legend.itemWidth = itemWidth || 12;
|
216
|
+
legend.itemHeight = itemHeight || 12;
|
217
|
+
legend.itemGap = itemGap || 8;
|
218
|
+
legend.top = top || 'auto';
|
219
|
+
legend.right = right || 'auto';
|
220
|
+
legend.bottom = bottom || 'auto';
|
221
|
+
legend.left = left || 'auto';
|
222
|
+
legend.padding = padding || [5, 5, 5, 5];
|
223
|
+
legend.textStyle.color = color || '';
|
224
|
+
legend.textStyle.height = height || 8;
|
225
|
+
legend.textStyle.rich.a = fontSize || 12;
|
220
226
|
//return legend;
|
221
227
|
}
|
222
228
|
|
@@ -6,7 +6,7 @@ interface echartsOptions {
|
|
6
6
|
tooltip: null
|
7
7
|
}
|
8
8
|
export declare function getXYAxisLabelVal(index: number, intervalNum: number, value: any): string;
|
9
|
-
export declare function
|
9
|
+
export declare function initBindCorrelationSetting(node: any): string;
|
10
10
|
export declare function setMapScatterOptions(option: echartsOptions, node: any): void;
|
11
11
|
export declare function setMapLineBarOptions(option: echartsOptions, node: any): void;
|
12
12
|
export declare function setMapGaugeOptions(option: echartsOptions, node: any): void;
|
@@ -8,7 +8,9 @@ import {
|
|
8
8
|
setLineSeriesStyleData,
|
9
9
|
setRingPreSeriesOptions,
|
10
10
|
setRingProSeriesOptions,
|
11
|
-
|
11
|
+
set3DPieOptions,
|
12
|
+
mapFormatterSet,
|
13
|
+
set3DPieMouseHover
|
12
14
|
} from '../utils';
|
13
15
|
import {
|
14
16
|
gaugeNormalAuto,
|
@@ -31,11 +33,13 @@ export function getXYAxisLabelVal(index, intervalNum, value) {
|
|
31
33
|
}
|
32
34
|
|
33
35
|
/**
|
34
|
-
*
|
36
|
+
* 初始化图表与其他组件关联的配置数据
|
35
37
|
* @param node 元件节点
|
36
38
|
*/
|
37
|
-
export function
|
39
|
+
export function initBindCorrelationSetting(node) {
|
40
|
+
if(!node.data.params || node.data.params.staticForType !== 'OTHER') return null;
|
38
41
|
const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
|
42
|
+
if(!tabStaticKey) return null; // 与tabs关联?
|
39
43
|
const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
|
40
44
|
if(switchTabData) {
|
41
45
|
const tabNode = Object.values(switchTabData)[0];
|
@@ -47,7 +51,6 @@ export function initBindTabSetting(node) {
|
|
47
51
|
data: tabNode.tabData
|
48
52
|
};
|
49
53
|
}
|
50
|
-
return null;
|
51
54
|
}
|
52
55
|
|
53
56
|
// 自动滑动展示数据
|
@@ -169,14 +172,53 @@ export function setMapRingOptions(option, node) {
|
|
169
172
|
//const chartOption = JSON.parse(JSON.stringify(option));
|
170
173
|
const appearance = node.appearance;
|
171
174
|
if(appearance.type === 'ringPre'){
|
172
|
-
|
175
|
+
//环形‘设备告警统计图’节点展示配置
|
173
176
|
setRingPreSeriesOptions(option, appearance);
|
174
177
|
|
175
178
|
}else if(appearance.type === 'ringPro'){
|
176
|
-
|
179
|
+
//环形‘内存、硬盘、CPU指标占比统计’节点展示配置
|
177
180
|
setRingProSeriesOptions(option, appearance);
|
178
181
|
|
182
|
+
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
183
|
+
// 3D饼图配置
|
184
|
+
option.backgroundColor = appearance.backgroundColor;
|
185
|
+
option.grid3D = {
|
186
|
+
show: false,
|
187
|
+
top: appearance.grid.top,
|
188
|
+
left: appearance.grid.left,
|
189
|
+
right: appearance.grid.right,
|
190
|
+
bottom: appearance.grid.bottom,
|
191
|
+
viewControl: {
|
192
|
+
alpha: appearance.grid.alpha, //角度
|
193
|
+
distance: appearance.grid.distance, //调整视角到主体的距离,类似调整zoom
|
194
|
+
rotateSensitivity: 0, //设置为0无法旋转
|
195
|
+
zoomSensitivity: 0, //设置为0无法缩放
|
196
|
+
panSensitivity: 0, //设置为0无法平移
|
197
|
+
autoRotate: false, //自动旋转
|
198
|
+
}
|
199
|
+
};
|
200
|
+
if(appearance.grid.beta) option.grid3D.viewControl.beta = appearance.grid.beta;
|
201
|
+
Object.assign(option.legend, appearance.legend);
|
202
|
+
if(appearance.labelLine && appearance.labelLine.show) set3DPieLabelLine(option, appearance.labelLine, node.TID, node.id);
|
203
|
+
if(appearance.legendTextStyle) {
|
204
|
+
const {fontSize, align, color, width, data} = appearance.legendTextStyle;
|
205
|
+
const rich = {
|
206
|
+
a: {
|
207
|
+
color,
|
208
|
+
width
|
209
|
+
}
|
210
|
+
}
|
211
|
+
for (let i = 0; i < data.length; i++) {
|
212
|
+
rich[`b${i}`] = data[i];
|
213
|
+
}
|
214
|
+
option.legend.textStyle = {
|
215
|
+
fontSize,
|
216
|
+
align,
|
217
|
+
rich
|
218
|
+
}
|
219
|
+
}
|
179
220
|
}else {
|
221
|
+
// 基础图表的配置
|
180
222
|
const seriesNode = option.series[0];
|
181
223
|
if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
|
182
224
|
appearance.label = {
|
@@ -225,6 +267,66 @@ export function setMapRingOptions(option, node) {
|
|
225
267
|
}
|
226
268
|
}
|
227
269
|
|
270
|
+
function getItemNode(color, fontSize, fontWeight, padding) {
|
271
|
+
return {
|
272
|
+
color,
|
273
|
+
fontSize,
|
274
|
+
fontWeight,
|
275
|
+
padding
|
276
|
+
}
|
277
|
+
}
|
278
|
+
|
279
|
+
// 设置3D饼图引线样式
|
280
|
+
function set3DPieLabelLine(option, labelLine, TID, id){
|
281
|
+
const rich = {};
|
282
|
+
const { data, color, lengthWidth, startAngle, clockwise, center, radius } = labelLine;
|
283
|
+
const lineData = [];
|
284
|
+
for (let i = 0; i < data.length; i ++){
|
285
|
+
const {
|
286
|
+
length,
|
287
|
+
length2,
|
288
|
+
nameFontSize,
|
289
|
+
nameFontWeight,
|
290
|
+
nameColor,
|
291
|
+
namePadding,
|
292
|
+
valueFontSize,
|
293
|
+
valueFontWeight,
|
294
|
+
valueColor,
|
295
|
+
valuePadding,
|
296
|
+
unitFontSize,
|
297
|
+
unitFontWeight,
|
298
|
+
unitColor,
|
299
|
+
unitPadding
|
300
|
+
} = data[i];
|
301
|
+
rich[`name${i+1}`] = getItemNode(nameColor, nameFontSize, nameFontWeight, namePadding);
|
302
|
+
rich[`unit${i+1}`] = getItemNode(unitColor, unitFontSize, unitFontWeight, unitPadding);
|
303
|
+
rich[`value${i+1}`] = getItemNode(valueColor, valueFontSize, valueFontWeight, valuePadding);
|
304
|
+
lineData.push({
|
305
|
+
minTurnAngle: 90,
|
306
|
+
length: length,
|
307
|
+
length2: length2,
|
308
|
+
lineStyle: {
|
309
|
+
width: lengthWidth
|
310
|
+
}
|
311
|
+
})
|
312
|
+
}
|
313
|
+
commonStore[TID].echartsDataPool[id].labelLineData = {
|
314
|
+
name: 'pie2d',
|
315
|
+
type: 'pie',
|
316
|
+
hoverAnimation: false,
|
317
|
+
label: {
|
318
|
+
opacity: 1,
|
319
|
+
color,
|
320
|
+
rich
|
321
|
+
},
|
322
|
+
startAngle, //起始角度,支持范围[0, 360]。
|
323
|
+
clockwise, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
324
|
+
radius, // 两个值设置成相同的,环形就隐藏了
|
325
|
+
center, //指示线的位置
|
326
|
+
data: lineData
|
327
|
+
};
|
328
|
+
}
|
329
|
+
|
228
330
|
// 自动配置3D柱状图的节点数据
|
229
331
|
export function setMap3dBarOptions(option, node) {
|
230
332
|
// 取消注册自定义形状
|
@@ -286,7 +388,7 @@ export function setMapGlobalOptions(option, node) {
|
|
286
388
|
// const chartOption = JSON.parse(JSON.stringify(option));
|
287
389
|
const appearance = node.appearance;
|
288
390
|
// 图表网格数据
|
289
|
-
if (appearance.grid) {
|
391
|
+
if (appearance.grid && !appearance.grid.distance) {
|
290
392
|
|
291
393
|
option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
|
292
394
|
|
@@ -296,14 +398,15 @@ export function setMapGlobalOptions(option, node) {
|
|
296
398
|
// 图表Y轴数据
|
297
399
|
if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
|
298
400
|
// 图表图例数据
|
299
|
-
|
401
|
+
if (appearance.legend) setChartLegendData(option.legend, appearance);
|
300
402
|
// 曲线样式数据
|
301
403
|
if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
|
302
404
|
}
|
303
405
|
|
304
406
|
// 实时改变图表data值
|
305
407
|
export function setMapDataOptions(option, node) {
|
306
|
-
const
|
408
|
+
const currentStore = commonStore[node.TID];
|
409
|
+
let optionNode = currentStore.echartsOptionsPool[node.id].option;
|
307
410
|
const appearance = node.appearance;
|
308
411
|
const params = node.params;
|
309
412
|
// 3d 柱状图
|
@@ -323,6 +426,7 @@ export function setMapDataOptions(option, node) {
|
|
323
426
|
// 日,周,月,年,实时类型,不与分组统计一起使用
|
324
427
|
staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
|
325
428
|
}
|
429
|
+
let dataDictionary = {};
|
326
430
|
// 实时数据加载
|
327
431
|
if(staticTypeData) {
|
328
432
|
|
@@ -360,6 +464,16 @@ export function setMapDataOptions(option, node) {
|
|
360
464
|
}else if(appearance.type === 'ringPro'){
|
361
465
|
// 按照百分比统计设备配置情况
|
362
466
|
pieRingProportionAuto(optionNode, pieData, appearance.proportion);
|
467
|
+
|
468
|
+
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
469
|
+
for (let i = 0; i < pieData.length; i++){
|
470
|
+
pieData[i].itemOpacity = 0.9;
|
471
|
+
pieData[i].itemColor = appearance.chartData[i] && appearance.chartData[i].itemColor || echartsColorData[i];
|
472
|
+
}
|
473
|
+
// 3D饼图图例更新
|
474
|
+
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
475
|
+
dataDictionary = set3DPieOptions(optionNode, appearance, labelLineData, pieData);
|
476
|
+
|
363
477
|
}else {
|
364
478
|
|
365
479
|
pieRingNormalAuto(optionNode, pieData);
|
@@ -396,16 +510,23 @@ export function setMapDataOptions(option, node) {
|
|
396
510
|
}
|
397
511
|
}
|
398
512
|
}
|
399
|
-
if
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
513
|
+
if(option.series[0] && option.series[0].pieData) {
|
514
|
+
// 3D饼图图例初始化
|
515
|
+
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
516
|
+
dataDictionary = set3DPieOptions(option, appearance, labelLineData);
|
517
|
+
optionNode = option;
|
518
|
+
}else {
|
519
|
+
if (option.series) {
|
520
|
+
for (let i = 0; i < option.series.length; i++) {
|
521
|
+
const item = option.series[i];
|
522
|
+
if(item.name) optionNode.series[i].name = item.name;
|
523
|
+
optionNode.series[i].data = item.data;
|
524
|
+
}
|
404
525
|
}
|
405
526
|
}
|
406
527
|
}
|
407
528
|
|
408
|
-
mapFormatterSet(appearance, optionNode, staticTypeData);
|
529
|
+
mapFormatterSet(appearance, optionNode, staticTypeData, dataDictionary);
|
409
530
|
|
410
531
|
const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
|
411
532
|
const mapChart = currentChartNode.chart;
|
@@ -427,6 +548,13 @@ export function setMapDataOptions(option, node) {
|
|
427
548
|
return mapChart.setOption(chartNode);
|
428
549
|
})
|
429
550
|
}
|
551
|
+
// 鼠标hover状态,用于3D饼图
|
552
|
+
if(appearance.mouseHoverState) {
|
553
|
+
mapChart.off('mouseover');
|
554
|
+
mapChart.off('globalout');
|
555
|
+
let type = appearance.type.includes('pie') ? 'pie' : 'ring';
|
556
|
+
set3DPieMouseHover(mapChart, type, option, appearance.seriesStyleData);
|
557
|
+
}
|
430
558
|
mapChart.setOption(optionNode);
|
431
559
|
mapChart.resize();
|
432
560
|
}
|
@@ -1 +1 @@
|
|
1
|
-
export declare function mapFormatterSet(appearance: object, option: any, data: any): void;
|
1
|
+
export declare function mapFormatterSet(appearance: object, option: any, data: any, dataDictionary: any): void;
|
@@ -1,12 +1,14 @@
|
|
1
1
|
import {rankingTopColorList} from '../../../static';
|
2
2
|
|
3
|
-
export function mapFormatterSet(appearance, options, data) {
|
3
|
+
export function mapFormatterSet(appearance, options, data, dataDictionary) {
|
4
4
|
if(appearance.type.includes('ring') || appearance.type.includes('pie')) {
|
5
5
|
const seriesNode = options.series[0];
|
6
6
|
if(seriesNode.label && seriesNode.label.normal &&!seriesNode.label.normal.formatter) {
|
7
7
|
setMapRingOptionsFormatter(appearance, seriesNode);
|
8
8
|
}
|
9
9
|
}
|
10
|
+
if(appearance.type === 'ring3d') setMapRing3DFormatter(appearance, options, dataDictionary);
|
11
|
+
if(appearance.type === 'pie3d') setMapPie3DFormatter(appearance, options);
|
10
12
|
if(appearance.type.includes('line') || appearance.type.includes('bar')) setMapLineBarFormatter(appearance, options);
|
11
13
|
if(appearance.type.includes('lineTwins')) setMapLineTwinsFormatter(appearance, options);
|
12
14
|
if(appearance.type.includes('scatter')) setMapScatterFormatter(options);
|
@@ -42,32 +44,20 @@ function setMapLineBarFormatter(appearance, options){
|
|
42
44
|
const item = param[i];
|
43
45
|
const unit = getTooltipUnit(i, appearance);
|
44
46
|
const dott = getTooltipDott(param[i].color);
|
45
|
-
data += `<br>${dott}${item.seriesName}:${item.value} ${unit}`;
|
47
|
+
data += `<br>${dott}${item.seriesName}:${appearance.total && appearance.total[item.dataIndex].value || item.value} ${unit}`;
|
46
48
|
}
|
47
49
|
return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${data}`;
|
48
50
|
}
|
49
51
|
}
|
50
52
|
}
|
51
53
|
function getTooltipUnit(index, appearance) {
|
52
|
-
|
53
|
-
return appearance.tooltipUnit[index];
|
54
|
+
return appearance.tooltipUnit && appearance.tooltipUnit[index] || appearance.series && appearance.series[index] && appearance.series[index].labelUnit || '';
|
54
55
|
}
|
55
56
|
function getTooltipDott(color) {
|
56
57
|
return `<span style="display: inline-block;margin-right: 8px;border: 5px solid ${color};border-radius: 100%"></span>`;
|
57
58
|
}
|
58
59
|
// 堆叠统计
|
59
60
|
function setMapBarPileStaticFormatter(appearance, options) {
|
60
|
-
if(!options.tooltip.formatter){
|
61
|
-
options.tooltip.formatter = function(param) {
|
62
|
-
let data = `${param[0].seriesName}:${param[0].value} ${appearance.series[0] && appearance.series[0].labelUnit || ''}`;
|
63
|
-
for (let i = 1; i < param.length; i++){
|
64
|
-
const item = param[i];
|
65
|
-
const series = appearance.series[i];
|
66
|
-
data += `<br>${item.seriesName}:${appearance.total && appearance.total[item.dataIndex].value || item.value} ${series && series.labelUnit || ''}`;
|
67
|
-
}
|
68
|
-
return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${data}`;
|
69
|
-
}
|
70
|
-
}
|
71
61
|
for (let i = 0; i < options.series.length; i++) {
|
72
62
|
const item = options.series[i];
|
73
63
|
const setItem = appearance.series[i];
|
@@ -167,4 +157,50 @@ function setMapRingOptionsFormatter(appearance, seriesNode) {
|
|
167
157
|
}
|
168
158
|
}
|
169
159
|
}
|
160
|
+
}
|
161
|
+
// 环形3D图自定义展示配置
|
162
|
+
function setMapRing3DFormatter(appearance, options, data) {
|
163
|
+
if(!options.tooltip.formatter) {
|
164
|
+
options.tooltip.formatter = (params) => {
|
165
|
+
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
166
|
+
const pieData = options.series[params.seriesIndex].pieData;
|
167
|
+
const pv = (pieData.endRatio - pieData.startRatio) *100;
|
168
|
+
let bfb = Math.round(pv);
|
169
|
+
return `${
|
170
|
+
params.seriesName
|
171
|
+
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
172
|
+
params.color
|
173
|
+
};"></span>${bfb}${appearance.unit}`;
|
174
|
+
}
|
175
|
+
}
|
176
|
+
}
|
177
|
+
options.legend.formatter = (name) => {
|
178
|
+
const legendItem = data.node[name];
|
179
|
+
const pv = (legendItem.value / data.total) * 100;
|
180
|
+
const p = Math.round(pv)+'%';
|
181
|
+
return `{a|${name}}{b${legendItem.order}|${legendItem.value}}{b${legendItem.order}|${p}}`;
|
182
|
+
}
|
183
|
+
}
|
184
|
+
// 饼图3D图自定义展示配置
|
185
|
+
function setMapPie3DFormatter(appearance, options) {
|
186
|
+
if(!options.tooltip.formatter) {
|
187
|
+
options.tooltip.formatter = (params) => {
|
188
|
+
if (params.seriesName !== 'mouseoutSeries') {
|
189
|
+
const pieData = options.series[params.seriesIndex].pieData;
|
190
|
+
if(!pieData) return; // 先退出,后期若有hover引线时,图形联动的需求时再做逻辑处理
|
191
|
+
return `${
|
192
|
+
params.seriesName
|
193
|
+
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
194
|
+
params.color
|
195
|
+
};"></span>${pieData.value}${appearance.unit}`;
|
196
|
+
}
|
197
|
+
}
|
198
|
+
}
|
199
|
+
const lastSeriesNode = options.series[options.series.length - 1];
|
200
|
+
if(appearance.labelLine.show && !lastSeriesNode.label.formatter) {
|
201
|
+
lastSeriesNode.label.formatter = (params) => {
|
202
|
+
const dataIndex = params.dataIndex + 1;
|
203
|
+
return `{name${dataIndex}|${params.name}}{value${dataIndex}|${params.value}}{unit${dataIndex}|${appearance.unit}}`;
|
204
|
+
}
|
205
|
+
}
|
170
206
|
}
|
@@ -18,61 +18,52 @@ export function lineBarDataAuto(option, params, data, appearance) {
|
|
18
18
|
if(realSeriesNode.name) seriesNodes[0].name = realSeriesNode.name;
|
19
19
|
return;
|
20
20
|
}
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
}
|
21
|
+
const realSeriesData = data.seriesData;
|
22
|
+
// 双轴曲线间距配置
|
23
|
+
if(option.yAxis.length > 1 && appearance.yAxisValueAuto) {
|
24
|
+
if(!appearance.yAxisMaxIntervalue) appearance.yAxisMaxIntervalue = 1;
|
25
|
+
// 双轴曲线,且曲线值为自适应
|
26
|
+
const dataGroup = {
|
27
|
+
data1: realSeriesData[0] && realSeriesData[0].data || [],
|
28
|
+
data2: realSeriesData[1] && realSeriesData[1].data || []
|
29
|
+
};
|
30
|
+
const newData = [...dataGroup.data1, ...dataGroup.data2];
|
31
|
+
let min = Math.min(...newData);
|
32
|
+
let max = Math.max(...newData);
|
33
|
+
const power = Math.floor(Math.log10(min));
|
34
|
+
for (let i = 0; i < option.yAxis.length; i++) {
|
35
|
+
const currentData = dataGroup[`data${i + 1}`];
|
36
|
+
if(min < 0 && Math.max(...currentData) < max) max *= appearance.yAxisMaxIntervalue;
|
37
|
+
if(min > 0 && Math.max(...currentData) < max) min = Math.pow(10, power);
|
38
|
+
option.yAxis[i].min = Math.ceil(min);
|
39
|
+
option.yAxis[i].max = Math.ceil(max);
|
41
40
|
}
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
if(seriesItem) {
|
63
|
-
currSeriesNode = seriesItem;
|
64
|
-
}else {
|
65
|
-
const newSeriesItem = JSON.parse(JSON.stringify(seriesNodes[0]));
|
66
|
-
newSeriesItem.itemStyle.normal.lineStyle.color = echartsColorData[i];
|
67
|
-
newSeriesItem.itemStyle.normal.color = echartsColorData[i];
|
68
|
-
currSeriesNode = newSeriesItem;
|
69
|
-
}
|
70
|
-
if(realSeriesNode.name) currSeriesNode.name = realSeriesNode.name;
|
71
|
-
currSeriesNode.data = realSeriesNode.data;
|
72
|
-
seriesData.push(currSeriesNode);
|
41
|
+
}
|
42
|
+
let legendChange = false;
|
43
|
+
let seriesData = [];
|
44
|
+
const legendData = [];
|
45
|
+
for (let i = 0; i < realSeriesData.length; i++){
|
46
|
+
const realSeriesNode = realSeriesData[i];
|
47
|
+
let currSeriesNode = {};
|
48
|
+
const seriesItem = seriesNodes[i];
|
49
|
+
if(seriesItem) {
|
50
|
+
currSeriesNode = seriesItem;
|
51
|
+
}else {
|
52
|
+
const newSeriesItem = JSON.parse(JSON.stringify(seriesNodes[0]));
|
53
|
+
newSeriesItem.itemStyle.normal.lineStyle.color = echartsColorData[i];
|
54
|
+
newSeriesItem.itemStyle.normal.color = echartsColorData[i];
|
55
|
+
currSeriesNode = newSeriesItem;
|
56
|
+
}
|
57
|
+
if(realSeriesNode.name) {
|
58
|
+
currSeriesNode.name = realSeriesNode.name;
|
59
|
+
legendData.push(realSeriesNode.name);
|
60
|
+
legendChange = true;
|
73
61
|
}
|
74
|
-
|
62
|
+
currSeriesNode.data = realSeriesNode.data;
|
63
|
+
seriesData.push(currSeriesNode);
|
75
64
|
}
|
65
|
+
if(option.legend && legendChange) option.legend.data = legendData; // 为角标数据赋值
|
66
|
+
option.series = seriesData;
|
76
67
|
}
|
77
68
|
|
78
69
|
export function barPileStaticDataAuto(option, data, appearance) {
|
@@ -0,0 +1,3 @@
|
|
1
|
+
export declare function getPie3D(internalDiameterRatio: Number, type: String, appearance: {}, labelLineData: any, realData: any): {};
|
2
|
+
export declare function getParametricEquation(startRatio: Number, endRatio: Number, isSelected: Boolean, isHovered: Boolean, k: any, h: Number): {};
|
3
|
+
export declare function set3DPieMouseHover(myChart: object, type: String, option: {}, valueData: any): void;
|