center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #10192 from ulleo/dev-v2

Browse Source 
feat(图表): 柱线组合图支持设置多条折线
This commit is contained in:
ulleo 2024-06-11 17:24:52 +08:00 committed by GitHub
commit fc81760f2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 109 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
View File

@ -139,6 +139,8 @@ public class ChartDataManage {
view2.getSenior().put("assistLineCfg", assistLineCfg2);
}
}
view2.setXAxisExt(view2.getExtBubble());
view2.setExtBubble(new ArrayList<>());
ChartViewDTO right = calcData(view2, chartExtRequest, allFields, viewFields);
data.put("right", right.getData());
@ -164,6 +166,7 @@ public class ChartDataManage {
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
|| StringUtils.equalsIgnoreCase(view.getType(), "sankey")
|| StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")
) {
xAxis.addAll(xAxisExt);
}
@ -825,17 +828,18 @@ public class ChartDataManage {
|| StringUtils.containsIgnoreCase(view.getType(), "gauge")
|| StringUtils.equalsIgnoreCase("liquid", view.getType())) {
mapChart = ChartDataBuild.transNormalChartData(xAxis, yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")
|| StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
} else if (StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
|| StringUtils.containsIgnoreCase(view.getType(), "progress-bar")) {
mapChart = ChartDataBuild.transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "label")) {
mapChart = ChartDataBuild.transLabelChartData(xAxis, yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "quadrant")) {
mapChart = ChartDataBuild.transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
} else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-range")) {
mapChart = ChartDataBuild.transBarRangeDataAntV(skipBarRange, barRangeDate, xAxisBase, xAxis, yAxis, view, data, isDrill);
} else if(StringUtils.equalsIgnoreCase(view.getType(), "heat-map")){
} else if (StringUtils.equalsIgnoreCase(view.getType(), "heat-map")) {
mapChart = ChartDataBuild.transHeatMapChartDataAntV(xAxisBase, xAxis, yAxis, view, data, isDrill);
} else {
mapChart = ChartDataBuild.transChartDataAntV(xAxis, yAxis, view, data, isDrill);

19
core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java
View File

@ -515,7 +515,7 @@ public class ChartDataBuild {
}
// antV组合图形
public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis,List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
Map<String, Object> map = new HashMap<>();
List<Series> series = new ArrayList<>();
@ -540,14 +540,23 @@ public class ChartDataBuild {
if (isDrill) {
a.append(d[xAxis.size() - 1]);
} else {
for (int ii = 0; ii < xAxis.size(); ii++) {
if (ii == xAxis.size() - 1) {
for (int ii = 0; ii < xAxisBase.size(); ii++) {
if (ii == xAxisBase.size() - 1) {
a.append(d[ii]);
} else {
a.append(d[ii]).append("\n");
}
}
}
StringBuilder b = new StringBuilder();
for (int ii = xAxisBase.size(); ii < xAxisBase.size() + xAxisExt.size(); ii++) {
if (ii == xAxisBase.size() + xAxisExt.size() - 1) {
b.append(d[ii]);
} else {
b.append(d[ii]).append("\n");
}
}
axisChartDataDTO.setName(a.toString());
axisChartDataDTO.setField(a.toString());
@ -572,7 +581,9 @@ public class ChartDataBuild {
} catch (Exception e) {
axisChartDataDTO.setValue(new BigDecimal(0));
}
axisChartDataDTO.setCategory(StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName()));
axisChartDataDTO.setCategory(
StringUtils.defaultIfBlank(b.toString(),
StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName())));
buildDynamicValue(view, axisChartDataDTO, d, size, extSize);
series.get(j).getData().add(axisChartDataDTO);
}

2
core/core-frontend/src/locales/zh-CN.ts
View File

@ -843,6 +843,8 @@ export default {
chart_data: '数据',
chart_style: '样式',
drag_block_type_axis: '类别轴',
drag_block_type_axis_left: '左子类别',
drag_block_type_axis_right: '右子类别',
drag_block_type_axis_start: '源',
drag_block_type_axis_end: '目的',
drag_block_value_axis: '值轴',

1
core/core-frontend/src/models/chart/editor.d.ts vendored
View File

@ -40,6 +40,7 @@ declare type AxisType =
| 'xAxis'
| 'yAxis'
| 'xAxisExt'
| 'xAxisExtRight'
| 'yAxisExt'
| 'extBubble'
| 'drill'

69
core/core-frontend/src/views/chart/components/editor/index.vue
View File

@ -371,6 +371,8 @@ const dimensionItemRemove = item => {
view.value.yAxis.splice(item.index, 1)
} else if (item.removeType === 'quotaExt') {
view.value.yAxisExt.splice(item.index, 1)
} else if (item.removeType === 'xAxisExtRight') {
view.value.extBubble.splice(item.index, 1)
}
}
@ -462,6 +464,13 @@ const onExtCustomSort = item => {
customSort()
}
const onExtCustomRightSort = item => {
recordSnapshotInfo('render')
state.customSortField = view.value.extBubble[item.index]
customSortAxis.value = 'extBubble'
customSort()
}
const onMove = e => {
recordSnapshotInfo('calcData')
state.moveId = e.draggedContext.element.id
@ -1023,6 +1032,7 @@ const saveRename = ref => {
ref.validate(valid => {
if (valid) {
const { renameType, index, chartShowName } = state.itemForm
console.log(renameType)
let axisType, axis
switch (renameType) {
case 'quota':
@ -1041,6 +1051,9 @@ const saveRename = ref => {
case 'dimensionExt':
view.value.xAxisExt[index].chartShowName = chartShowName
break
case 'xAxisExtRight':
view.value.extBubble[index].chartShowName = chartShowName
break
case 'dimensionStack':
view.value.extStack[index].chartShowName = chartShowName
break
@ -1863,6 +1876,62 @@ const deleteChartFieldItem = id => {
<drag-placeholder :drag-list="view.yAxis" />
</div>
</el-row>
<!-- xAxisExtRight -->
<el-row class="padding-lr drag-data" v-if="showAxis('xAxisExtRight')">
<div class="form-draggable-title">
<span>
{{ chartViewInstance.axisConfig.extBubble.name }}
</span>
<el-tooltip
:effect="toolTip"
placement="top"
:content="t('common.delete')"
>
<el-icon
class="remove-icon"
:class="{ 'remove-icon--dark': themes === 'dark' }"
size="14px"
@click="removeItems('extBubble')"
>
<Icon class-name="inner-class" name="icon_delete-trash_outlined" />
</el-icon>
</el-tooltip>
</div>
<div
@drop="$event => drop($event, 'extBubble')"
@dragenter="dragEnter"
@dragover="$event => dragOver($event)"
>
<draggable
:list="view.extBubble"
:move="onMove"
item-key="id"
group="drag"
animation="300"
class="drag-block-style"
:class="{ dark: themes === 'dark' }"
@add="addExtBubble"
@change="e => onAxisChange(e, 'extBubble')"
>
<template #item="{ element, index }">
<dimension-item
:dimension-data="state.dimension"
:quota-data="state.quota"
:chart="view"
:item="element"
:index="index"
:themes="props.themes"
type="xAxisExtRight"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@onNameEdit="showRename"
@onCustomSort="onExtCustomRightSort"
/>
</template>
</draggable>
<drag-placeholder :drag-list="view.extBubble" />
</div>
</el-row>
<!--yAxisExt-->
<el-row class="padding-lr drag-data" v-if="showAxis('yAxisExt')">
<div class="form-draggable-title">

20
core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
View File

@ -39,7 +39,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
'seriesTooltipFormatter'
]
}
axis: AxisType[] = [...CHART_MIX_AXIS_TYPE, 'yAxisExt']
axis: AxisType[] = [...CHART_MIX_AXIS_TYPE, 'xAxisExtRight', 'yAxisExt']
axisConfig = {
...this['axisConfig'],
yAxis: {
@ -47,6 +47,12 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
limit: 1,
type: 'q'
},
extBubble: {
//用这个字段存放右轴分类
name: `${t('chart.drag_block_type_axis_right')} / ${t('chart.dimension')}`,
limit: 1,
type: 'd'
},
yAxisExt: {
name: `${t('chart.drag_block_value_axis_right')} / ${t('chart.line_quota')}`,
limit: 1,
@ -66,6 +72,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
const data1Type = 'column'
const data2Type = 'line'
const seriesField2 = chart.extBubble?.length > 0 ? 'category' : undefined
const data1 = defaultTo(left[0]?.data, [])
const data2 = map(defaultTo(right[0]?.data, []), d => {
return {
@ -100,7 +108,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
},
{
geometry: data2Type,
color: color[1]
color: seriesField2 ? color : color[1],
seriesField: seriesField2
}
],
interactions: [
@ -335,7 +344,6 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
tooltip: false
}
}
const xAxisExt = chart.xAxisExt
const formatterMap = tooltipAttr.seriesTooltipFormatter
?.filter(i => i.show)
.reduce((pre, next) => {
@ -360,10 +368,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
.forEach(item => {
const formatter = formatterMap[item.data.quotaList[0].id]
const value = valueFormatter(parseFloat(item.value as string), formatter.formatterCfg)
let name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
if (xAxisExt?.length > 0) {
name = item.data.category
}
const name = item.data.category
result.push({ ...item, name, value })
})
head.data.dynamicTooltipValue?.forEach(item => {