From ed034e59f43c44af03915d3012304d7a3c28d79d Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 9 Aug 2021 16:37:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9F=A9=E5=BD=A2=E6=A0=91=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../service/chart/ChartViewService.java | 41 +++++++++++++ frontend/src/icons/svg/treemap.svg | 1 + frontend/src/lang/en.js | 6 +- frontend/src/lang/tw.js | 6 +- frontend/src/lang/zh.js | 6 +- frontend/src/views/chart/chart/chart.js | 36 +++++++++++ .../src/views/chart/chart/funnel/funnel.js | 4 +- .../src/views/chart/chart/treemap/treemap.js | 53 +++++++++++++++++ .../views/chart/components/ChartComponent.vue | 8 ++- frontend/src/views/chart/view/ChartEdit.vue | 59 +++++++++++-------- 10 files changed, 188 insertions(+), 32 deletions(-) create mode 100644 frontend/src/icons/svg/treemap.svg create mode 100644 frontend/src/views/chart/chart/treemap/treemap.js diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java index e9507c1796..68fa644ab0 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java @@ -367,6 +367,9 @@ public class ChartViewService { mapChart = transScatterData(xAxis, yAxis, view, data, extBubble); } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) { mapChart = transRadarChartData(xAxis, yAxis, view, data); + } else if (StringUtils.containsIgnoreCase(view.getType(), "text") + || StringUtils.containsIgnoreCase(view.getType(), "gauge")) { + mapChart = transNormalChartData(xAxis, yAxis, view, data); } else { mapChart = transChartData(xAxis, yAxis, view, data); } @@ -476,6 +479,44 @@ public class ChartViewService { return map; } + // 常规图形 + private Map transNormalChartData(List xAxis, List yAxis, ChartViewWithBLOBs view, List data) { + Map map = new HashMap<>(); + + List x = new ArrayList<>(); + List series = new ArrayList<>(); + for (ChartViewFieldDTO y : yAxis) { + Series series1 = new Series(); + series1.setName(y.getName()); + series1.setType(view.getType()); + series1.setData(new ArrayList<>()); + series.add(series1); + } + for (String[] d : data) { + StringBuilder a = new StringBuilder(); + for (int i = 0; i < xAxis.size(); i++) { + if (i == xAxis.size() - 1) { + a.append(d[i]); + } else { + a.append(d[i]).append("\n"); + } + } + x.add(a.toString()); + for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) { + int j = i - xAxis.size(); + try { + series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i])); + } catch (Exception e) { + series.get(j).getData().add(new BigDecimal(0)); + } + } + } + + map.put("x", x); + map.put("series", series); + return map; + } + // radar图 private Map transRadarChartData(List xAxis, List yAxis, ChartViewWithBLOBs view, List data) { Map map = new HashMap<>(); diff --git a/frontend/src/icons/svg/treemap.svg b/frontend/src/icons/svg/treemap.svg new file mode 100644 index 0000000000..e0fcce2b30 --- /dev/null +++ b/frontend/src/icons/svg/treemap.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index cee7d5cd93..5bd6a93874 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -832,7 +832,11 @@ export default { axis_label_rotate: 'Label Rotate', chart_scatter_bubble: 'Bubble', chart_scatter: 'Scatter', - bubble_size: 'Bubble Size' + bubble_size: 'Bubble Size', + chart_treemap: 'Tree Map', + drill: 'Drill', + drag_block_treemap_label: 'Color Label', + drag_block_treemap_size: 'Color Size' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 521eea1bc6..bd2899e2ce 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -832,7 +832,11 @@ export default { axis_label_rotate: '標簽角度', chart_scatter_bubble: '氣泡圖', chart_scatter: '散點圖', - bubble_size: '氣泡大小' + bubble_size: '氣泡大小', + chart_treemap: '矩形樹圖', + drill: '鉆取', + drag_block_treemap_label: '色塊標簽', + drag_block_treemap_size: '色塊大小' }, dataset: { sheet_warn: '有多個sheet頁面，默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 025f3f854c..29c62fea14 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -832,7 +832,11 @@ export default { axis_label_rotate: '标签角度', chart_scatter_bubble: '气泡图', chart_scatter: '散点图', - bubble_size: '气泡大小' + bubble_size: '气泡大小', + chart_treemap: '矩形树图', + drill: '钻取', + drag_block_treemap_label: '色块标签', + drag_block_treemap_size: '色块大小' }, dataset: { sheet_warn: '有多个 Sheet 页，默认抽取第一个', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 1363562f7f..90e7c5134f 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -689,3 +689,39 @@ export const BASE_SCATTER = { } ] } + +export const BASE_TREEMAP = { + title: { + text: '', + textStyle: { + fontWeight: 'normal' + } + }, + grid: { + containLabel: true + }, + tooltip: {}, + legend: { + show: true, + type: 'scroll', + itemWidth: 10, + itemHeight: 10, + icon: 'rect' + }, + series: [ + { + // name: '', + type: 'treemap', + // radius: ['0%', '60%'], + // avoidLabelOverlap: false, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)' + // } + // }, + data: [] + } + ] +} diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js index 736820378e..522016ecfe 100644 --- a/frontend/src/views/chart/chart/funnel/funnel.js +++ b/frontend/src/views/chart/chart/funnel/funnel.js @@ -31,8 +31,6 @@ export function baseFunnelOption(chart_option, chart) { chart_option.series[0].label = customAttr.label } const valueArr = chart.data.series[0].data - // max value - chart_option.series[0].max = Math.max.apply(Math, valueArr) for (let i = 0; i < valueArr.length; i++) { // const y = { // name: chart.data.x[i], @@ -44,7 +42,7 @@ export function baseFunnelOption(chart_option, chart) { y.itemStyle = { color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) } - y.type = 'funnel' + // y.type = 'funnel' chart_option.series[0].data.push(y) } } diff --git a/frontend/src/views/chart/chart/treemap/treemap.js b/frontend/src/views/chart/chart/treemap/treemap.js new file mode 100644 index 0000000000..5ecca3ca82 --- /dev/null +++ b/frontend/src/views/chart/chart/treemap/treemap.js @@ -0,0 +1,53 @@ +import { hexColorToRGBA } from '@/views/chart/chart/util' +import { componentStyle } from '../common/common' + +export function baseTreemapOption(chart_option, chart) { + // 处理shape attr + let customAttr = {} + if (chart.customAttr) { + customAttr = JSON.parse(chart.customAttr) + if (customAttr.color) { + chart_option.color = customAttr.color.colors + } + // tooltip + if (customAttr.tooltip) { + const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip)) + const reg = new RegExp('\n', 'g') + tooltip.formatter = tooltip.formatter.replace(reg, '
') + chart_option.tooltip = tooltip + } + } + // 处理data + if (chart.data) { + chart_option.title.text = chart.title + if (chart.data.series.length > 0) { + // chart_option.series[0].name = chart.data.series[0].name + // size + if (customAttr.size) { + // chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%'] + } + // label + if (customAttr.label) { + // chart_option.series[0].label = customAttr.label + } + const valueArr = chart.data.series[0].data + for (let i = 0; i < valueArr.length; i++) { + // const y = { + // name: chart.data.x[i], + // value: valueArr[i] + // } + const y = valueArr[i] + y.name = chart.data.x[i] + // color + y.itemStyle = { + color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha) + } + // y.type = 'treemap' + chart_option.series[0].data.push(y) + } + } + } + // console.log(chart_option); + componentStyle(chart_option, chart) + return chart_option +} diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 276ff69e26..4c2bb4803e 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -5,7 +5,7 @@