dcim-topology2d 2.0.8 → 2.1.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/utils/changeOptions.d.ts +1 -0
- package/chart-diagram/src/utils/changeOptions.js +41 -35
- package/chart-diagram/src/utils/conversion.js +140 -13
- 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 +13 -5
- package/core/src/core.d.ts +2 -0
- package/core/src/core.js +61 -23
- package/core/src/element/common.d.ts +2 -1
- package/core/src/element/common.js +15 -15
- package/core/src/element/datePicker.d.ts +3 -0
- package/core/src/element/datePicker.js +47 -0
- package/core/src/element/index.d.ts +2 -1
- package/core/src/element/index.js +3 -1
- package/core/src/element/select.js +14 -2
- package/core/src/element/tab.js +8 -6
- package/core/src/element/time.d.ts +3 -0
- package/core/src/element/time.js +44 -0
- package/core/src/middles/default.js +8 -2
- package/core/src/middles/nodes/formDatePicker.d.ts +2 -0
- package/core/src/middles/nodes/formDatePicker.js +66 -0
- package/core/src/middles/nodes/formselect.js +7 -0
- package/core/src/middles/nodes/index.d.ts +3 -1
- package/core/src/middles/nodes/index.js +3 -0
- package/core/src/middles/nodes/time.d.ts +2 -0
- package/core/src/middles/nodes/time.js +98 -0
- package/core/src/models/node.js +12 -0
- package/core/src/preview.d.ts +1 -0
- package/core/src/preview.js +29 -5
- package/core/src/store/data.d.ts +5 -0
- package/core/src/store/data.js +9 -2
- package/core/src/utils/assignment.d.ts +2 -1
- package/core/src/utils/assignment.js +23 -11
- package/core/src/utils/conversion.d.ts +2 -0
- package/core/src/utils/conversion.js +43 -1
- package/core/src/utils/params.js +5 -0
- package/package.json +1 -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
@@ -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
|
|
@@ -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,
|
@@ -41,7 +43,7 @@ export function initBindTabSetting(node) {
|
|
41
43
|
const tabNode = Object.values(switchTabData)[0];
|
42
44
|
const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
|
43
45
|
const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
|
44
|
-
node.data.params.staticForType = tabStaticType;
|
46
|
+
if(node.data.params) node.data.params.staticForType = tabStaticType;
|
45
47
|
return {
|
46
48
|
type: tabStaticType,
|
47
49
|
data: tabNode.tabData
|
@@ -169,14 +171,53 @@ export function setMapRingOptions(option, node) {
|
|
169
171
|
//const chartOption = JSON.parse(JSON.stringify(option));
|
170
172
|
const appearance = node.appearance;
|
171
173
|
if(appearance.type === 'ringPre'){
|
172
|
-
|
174
|
+
//环形‘设备告警统计图’节点展示配置
|
173
175
|
setRingPreSeriesOptions(option, appearance);
|
174
176
|
|
175
177
|
}else if(appearance.type === 'ringPro'){
|
176
|
-
|
178
|
+
//环形‘内存、硬盘、CPU指标占比统计’节点展示配置
|
177
179
|
setRingProSeriesOptions(option, appearance);
|
178
180
|
|
181
|
+
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
182
|
+
// 3D饼图配置
|
183
|
+
option.backgroundColor = appearance.backgroundColor;
|
184
|
+
option.grid3D = {
|
185
|
+
show: false,
|
186
|
+
top: appearance.grid.top,
|
187
|
+
left: appearance.grid.left,
|
188
|
+
right: appearance.grid.right,
|
189
|
+
bottom: appearance.grid.bottom,
|
190
|
+
viewControl: {
|
191
|
+
alpha: appearance.grid.alpha, //角度
|
192
|
+
distance: appearance.grid.distance, //调整视角到主体的距离,类似调整zoom
|
193
|
+
rotateSensitivity: 0, //设置为0无法旋转
|
194
|
+
zoomSensitivity: 0, //设置为0无法缩放
|
195
|
+
panSensitivity: 0, //设置为0无法平移
|
196
|
+
autoRotate: false, //自动旋转
|
197
|
+
}
|
198
|
+
};
|
199
|
+
if(appearance.grid.beta) option.grid3D.viewControl.beta = appearance.grid.beta;
|
200
|
+
Object.assign(option.legend, appearance.legend);
|
201
|
+
if(appearance.labelLine && appearance.labelLine.show) set3DPieLabelLine(option, appearance.labelLine, node.TID, node.id);
|
202
|
+
if(appearance.legendTextStyle) {
|
203
|
+
const {fontSize, align, color, width, data} = appearance.legendTextStyle;
|
204
|
+
const rich = {
|
205
|
+
a: {
|
206
|
+
color,
|
207
|
+
width
|
208
|
+
}
|
209
|
+
}
|
210
|
+
for (let i = 0; i < data.length; i++) {
|
211
|
+
rich[`b${i}`] = data[i];
|
212
|
+
}
|
213
|
+
option.legend.textStyle = {
|
214
|
+
fontSize,
|
215
|
+
align,
|
216
|
+
rich
|
217
|
+
}
|
218
|
+
}
|
179
219
|
}else {
|
220
|
+
// 基础图表的配置
|
180
221
|
const seriesNode = option.series[0];
|
181
222
|
if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
|
182
223
|
appearance.label = {
|
@@ -225,6 +266,66 @@ export function setMapRingOptions(option, node) {
|
|
225
266
|
}
|
226
267
|
}
|
227
268
|
|
269
|
+
function getItemNode(color, fontSize, fontWeight, padding) {
|
270
|
+
return {
|
271
|
+
color,
|
272
|
+
fontSize,
|
273
|
+
fontWeight,
|
274
|
+
padding
|
275
|
+
}
|
276
|
+
}
|
277
|
+
|
278
|
+
// 设置3D饼图引线样式
|
279
|
+
function set3DPieLabelLine(option, labelLine, TID, id){
|
280
|
+
const rich = {};
|
281
|
+
const { data, color, lengthWidth, startAngle, clockwise, center, radius } = labelLine;
|
282
|
+
const lineData = [];
|
283
|
+
for (let i = 0; i < data.length; i ++){
|
284
|
+
const {
|
285
|
+
length,
|
286
|
+
length2,
|
287
|
+
nameFontSize,
|
288
|
+
nameFontWeight,
|
289
|
+
nameColor,
|
290
|
+
namePadding,
|
291
|
+
valueFontSize,
|
292
|
+
valueFontWeight,
|
293
|
+
valueColor,
|
294
|
+
valuePadding,
|
295
|
+
unitFontSize,
|
296
|
+
unitFontWeight,
|
297
|
+
unitColor,
|
298
|
+
unitPadding
|
299
|
+
} = data[i];
|
300
|
+
rich[`name${i+1}`] = getItemNode(nameColor, nameFontSize, nameFontWeight, namePadding);
|
301
|
+
rich[`unit${i+1}`] = getItemNode(unitColor, unitFontSize, unitFontWeight, unitPadding);
|
302
|
+
rich[`value${i+1}`] = getItemNode(valueColor, valueFontSize, valueFontWeight, valuePadding);
|
303
|
+
lineData.push({
|
304
|
+
minTurnAngle: 90,
|
305
|
+
length: length,
|
306
|
+
length2: length2,
|
307
|
+
lineStyle: {
|
308
|
+
width: lengthWidth
|
309
|
+
}
|
310
|
+
})
|
311
|
+
}
|
312
|
+
commonStore[TID].echartsDataPool[id].labelLineData = {
|
313
|
+
name: 'pie2d',
|
314
|
+
type: 'pie',
|
315
|
+
hoverAnimation: false,
|
316
|
+
label: {
|
317
|
+
opacity: 1,
|
318
|
+
color,
|
319
|
+
rich
|
320
|
+
},
|
321
|
+
startAngle, //起始角度,支持范围[0, 360]。
|
322
|
+
clockwise, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
323
|
+
radius, // 两个值设置成相同的,环形就隐藏了
|
324
|
+
center, //指示线的位置
|
325
|
+
data: lineData
|
326
|
+
};
|
327
|
+
}
|
328
|
+
|
228
329
|
// 自动配置3D柱状图的节点数据
|
229
330
|
export function setMap3dBarOptions(option, node) {
|
230
331
|
// 取消注册自定义形状
|
@@ -286,7 +387,7 @@ export function setMapGlobalOptions(option, node) {
|
|
286
387
|
// const chartOption = JSON.parse(JSON.stringify(option));
|
287
388
|
const appearance = node.appearance;
|
288
389
|
// 图表网格数据
|
289
|
-
if (appearance.grid) {
|
390
|
+
if (appearance.grid && !appearance.grid.distance) {
|
290
391
|
|
291
392
|
option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
|
292
393
|
|
@@ -296,14 +397,15 @@ export function setMapGlobalOptions(option, node) {
|
|
296
397
|
// 图表Y轴数据
|
297
398
|
if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
|
298
399
|
// 图表图例数据
|
299
|
-
|
400
|
+
if (appearance.legend) setChartLegendData(option.legend, appearance);
|
300
401
|
// 曲线样式数据
|
301
402
|
if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
|
302
403
|
}
|
303
404
|
|
304
405
|
// 实时改变图表data值
|
305
406
|
export function setMapDataOptions(option, node) {
|
306
|
-
const
|
407
|
+
const currentStore = commonStore[node.TID];
|
408
|
+
let optionNode = currentStore.echartsOptionsPool[node.id].option;
|
307
409
|
const appearance = node.appearance;
|
308
410
|
const params = node.params;
|
309
411
|
// 3d 柱状图
|
@@ -323,6 +425,7 @@ export function setMapDataOptions(option, node) {
|
|
323
425
|
// 日,周,月,年,实时类型,不与分组统计一起使用
|
324
426
|
staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
|
325
427
|
}
|
428
|
+
let dataDictionary = {};
|
326
429
|
// 实时数据加载
|
327
430
|
if(staticTypeData) {
|
328
431
|
|
@@ -360,6 +463,16 @@ export function setMapDataOptions(option, node) {
|
|
360
463
|
}else if(appearance.type === 'ringPro'){
|
361
464
|
// 按照百分比统计设备配置情况
|
362
465
|
pieRingProportionAuto(optionNode, pieData, appearance.proportion);
|
466
|
+
|
467
|
+
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
468
|
+
for (let i = 0; i < pieData.length; i++){
|
469
|
+
pieData[i].itemOpacity = 0.9;
|
470
|
+
pieData[i].itemColor = appearance.chartData[i] && appearance.chartData[i].itemColor || echartsColorData[i];
|
471
|
+
}
|
472
|
+
// 3D饼图图例更新
|
473
|
+
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
474
|
+
dataDictionary = set3DPieOptions(optionNode, appearance, labelLineData, pieData);
|
475
|
+
|
363
476
|
}else {
|
364
477
|
|
365
478
|
pieRingNormalAuto(optionNode, pieData);
|
@@ -396,16 +509,23 @@ export function setMapDataOptions(option, node) {
|
|
396
509
|
}
|
397
510
|
}
|
398
511
|
}
|
399
|
-
if
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
512
|
+
if(option.series[0].pieData) {
|
513
|
+
// 3D饼图图例初始化
|
514
|
+
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
515
|
+
dataDictionary = set3DPieOptions(option, appearance, labelLineData);
|
516
|
+
optionNode = option;
|
517
|
+
}else {
|
518
|
+
if (option.series) {
|
519
|
+
for (let i = 0; i < option.series.length; i++) {
|
520
|
+
const item = option.series[i];
|
521
|
+
if(item.name) optionNode.series[i].name = item.name;
|
522
|
+
optionNode.series[i].data = item.data;
|
523
|
+
}
|
404
524
|
}
|
405
525
|
}
|
406
526
|
}
|
407
527
|
|
408
|
-
mapFormatterSet(appearance, optionNode, staticTypeData);
|
528
|
+
mapFormatterSet(appearance, optionNode, staticTypeData, dataDictionary);
|
409
529
|
|
410
530
|
const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
|
411
531
|
const mapChart = currentChartNode.chart;
|
@@ -427,6 +547,13 @@ export function setMapDataOptions(option, node) {
|
|
427
547
|
return mapChart.setOption(chartNode);
|
428
548
|
})
|
429
549
|
}
|
550
|
+
// 鼠标hover状态,用于3D饼图
|
551
|
+
if(appearance.mouseHoverState) {
|
552
|
+
mapChart.off('mouseover');
|
553
|
+
mapChart.off('globalout');
|
554
|
+
let type = appearance.type.includes('pie') ? 'pie' : 'ring';
|
555
|
+
set3DPieMouseHover(mapChart, type, option, appearance.seriesStyleData);
|
556
|
+
}
|
430
557
|
mapChart.setOption(optionNode);
|
431
558
|
mapChart.resize();
|
432
559
|
}
|
@@ -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;
|