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.
Files changed (63) hide show
  1. package/chart-diagram/src/echarts/index.js +6 -3
  2. package/chart-diagram/src/utils/changeOptions.d.ts +1 -0
  3. package/chart-diagram/src/utils/changeOptions.js +41 -35
  4. package/chart-diagram/src/utils/conversion.d.ts +1 -1
  5. package/chart-diagram/src/utils/conversion.js +143 -15
  6. package/chart-diagram/src/utils/formatter.d.ts +1 -1
  7. package/chart-diagram/src/utils/formatter.js +51 -15
  8. package/chart-diagram/src/utils/index.d.ts +1 -0
  9. package/chart-diagram/src/utils/index.js +1 -0
  10. package/chart-diagram/src/utils/render.js +43 -52
  11. package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +3 -0
  12. package/chart-diagram/src/utils/surfaceParametricConversion.js +252 -0
  13. package/core/src/common.js +24 -15
  14. package/core/src/core.d.ts +2 -0
  15. package/core/src/core.js +75 -23
  16. package/core/src/element/common.d.ts +2 -1
  17. package/core/src/element/common.js +27 -18
  18. package/core/src/element/datePicker.d.ts +3 -0
  19. package/core/src/element/datePicker.js +44 -0
  20. package/core/src/element/index.d.ts +2 -1
  21. package/core/src/element/index.js +3 -1
  22. package/core/src/element/select.d.ts +1 -1
  23. package/core/src/element/select.js +15 -5
  24. package/core/src/element/tab.js +6 -9
  25. package/core/src/element/time.d.ts +3 -0
  26. package/core/src/element/time.js +44 -0
  27. package/core/src/healps/changeData.js +61 -41
  28. package/core/src/middles/default.js +53 -43
  29. package/core/src/middles/nodes/formDatePicker.d.ts +2 -0
  30. package/core/src/middles/nodes/formDatePicker.js +107 -0
  31. package/core/src/middles/nodes/formselect.js +20 -4
  32. package/core/src/middles/nodes/index.d.ts +4 -1
  33. package/core/src/middles/nodes/index.js +4 -0
  34. package/core/src/middles/nodes/switchs.d.ts +2 -0
  35. package/core/src/middles/nodes/switchs.js +46 -0
  36. package/core/src/middles/nodes/time.d.ts +2 -0
  37. package/core/src/middles/nodes/time.js +98 -0
  38. package/core/src/models/line.js +7 -7
  39. package/core/src/models/node.js +88 -74
  40. package/core/src/models/pen.js +11 -11
  41. package/core/src/offscreen.js +19 -19
  42. package/core/src/preview.d.ts +1 -0
  43. package/core/src/preview.js +44 -11
  44. package/core/src/store/data.d.ts +7 -0
  45. package/core/src/store/data.js +15 -2
  46. package/core/src/utils/assignment.d.ts +2 -1
  47. package/core/src/utils/assignment.js +55 -12
  48. package/core/src/utils/construction.d.ts +24 -0
  49. package/core/src/utils/construction.js +22 -1
  50. package/core/src/utils/conversion.d.ts +4 -0
  51. package/core/src/utils/conversion.js +151 -0
  52. package/core/src/utils/math.d.ts +0 -1
  53. package/core/src/utils/math.js +0 -3
  54. package/core/src/utils/onmousevent.js +1 -1
  55. package/core/src/utils/params.d.ts +1 -0
  56. package/core/src/utils/params.js +80 -4
  57. package/package.json +1 -1
  58. package/store/default.js +22 -0
  59. package/store/index.js +2 -1
  60. package/style/common.css +0 -3
  61. package/style/datePicker.css +44 -0
  62. package/style/editor.css +3 -0
  63. package/style/index.css +1 -0
@@ -9,7 +9,7 @@ import {
9
9
  setMapTopOptions,
10
10
  setMapGlobalOptions,
11
11
  setMapDataOptions,
12
- initBindTabSetting
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
- if (!isLocked || !currentStore.echartsOptionsPool[node.id]) {
71
- const tabData = initBindTabSetting(node); // 初始化Tabs数据配置
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
- if (!appearance.legend) {
188
- appearance.legend = JSON.parse(JSON.stringify(echartsLegendDefaultData));
189
- Object.assign(appearance.legend, legend);
190
- delete appearance.legend['data'];
191
- delete appearance.legend['textStyle'];
192
- } else {
193
- const {
194
- icon,
195
- itemWidth,
196
- itemHeight,
197
- itemGap,
198
- top,
199
- right,
200
- bottom,
201
- left,
202
- padding,
203
- color,
204
- height,
205
- fontSize
206
- } = appearance.legend;
207
- legend.icon = icon || '';
208
- legend.itemWidth = itemWidth || 12;
209
- legend.itemHeight = itemHeight || 12;
210
- legend.itemGap = itemGap || 8;
211
- legend.top = top || 'auto';
212
- legend.right = right || 'auto';
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 initBindTabSetting(node: any): string;
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
- mapFormatterSet
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
- * 初始化图表与tabs关联的配置数据
36
+ * 初始化图表与其他组件关联的配置数据
35
37
  * @param node 元件节点
36
38
  */
37
- export function initBindTabSetting(node) {
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
- //if (option.legend) setChartLegendData(option.legend, appearance);
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 optionNode = commonStore[node.TID].echartsOptionsPool[node.id].option;
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 (option.series) {
400
- for (let i = 0; i < option.series.length; i++) {
401
- const item = option.series[i];
402
- if(item.name) optionNode.series[i].name = item.name;
403
- optionNode.series[i].data = item.data;
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
- if(!(appearance.tooltipUnit && appearance.tooltipUnit[index])) return '';
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
  }
@@ -2,3 +2,4 @@ export * from './conversion';
2
2
  export * from './drawGraphic';
3
3
  export * from './changeOptions';
4
4
  export * from './formatter';
5
+ export * from './surfaceParametricConversion';
@@ -2,3 +2,4 @@ export * from './conversion';
2
2
  export * from './drawGraphic';
3
3
  export * from './changeOptions';
4
4
  export * from './formatter';
5
+ export * from './surfaceParametricConversion';
@@ -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
- if(seriesNodes.length > 1 || params && params.curveNum > 1){
22
- // 双曲线|柱状
23
- if(option.yAxis.length > 1 && appearance.yAxisValueAuto) {
24
- if(!appearance.yAxisMaxIntervalue) appearance.yAxisMaxIntervalue = 1;
25
- // 双轴曲线,且曲线值为自适应
26
- const dataGroup = {
27
- data1: data.seriesData[0] && data.seriesData[0].data || [],
28
- data2: data.seriesData[1] && data.seriesData[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);
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
- const legendData = [];
43
- let legendChange = false;
44
- seriesNodes.map((item, index) => {
45
- const seriesItem = data.seriesData[index];
46
- item.data = seriesItem ? seriesItem.data : [];
47
- // 获取角标数据
48
- if(seriesItem && seriesItem.name) {
49
- item.name = seriesItem.name;
50
- legendData.push(seriesItem.name);
51
- legendChange = true;
52
- }
53
- });
54
- if(option.legend && legendChange) option.legend.data = legendData; // 为角标数据赋值
55
- }else{
56
- if(!data.seriesData.length) return;
57
- let seriesData = [];
58
- for (let i = 0; i < data.seriesData.length; i++){
59
- const realSeriesNode = data.seriesData[i];
60
- let currSeriesNode = {};
61
- const seriesItem = seriesNodes[i];
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
- option.series = seriesData;
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;