From 4fe718bb452f876d1fd737e0fa18e3528a083539 Mon Sep 17 00:00:00 2001 From: junjun Date: Mon, 23 May 2022 10:23:36 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shape-attr/ColorSelectorExt.vue | 416 ++++++++++++++++++ frontend/src/views/chart/view/ChartEdit.vue | 5 +- frontend/src/views/chart/view/ChartStyle.vue | 17 +- 3 files changed, 436 insertions(+), 2 deletions(-) create mode 100644 frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue new file mode 100644 index 0000000000..902097eaed --- /dev/null +++ b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue @@ -0,0 +1,416 @@ + + + + + diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index f0f1952b0c..4bcd1e3fd8 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -1587,6 +1587,7 @@ export default { const view = this.buildParam(true, 'chart', false, switchType) if (!view) return viewEditSave(this.panelInfo.id, view).then(() => { + this.getData(this.param.id) bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id }) }) }, @@ -2369,7 +2370,7 @@ export default { resetViewCacheCallBack(_this.param.id, _this.panelInfo.id, function(rsp) { _this.changeEditStatus(false) _this.getChart(_this.param.id, 'panel') - // _this.getData(_this.param.id) + _this.getData(_this.param.id) bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id }) }) }, @@ -2405,6 +2406,8 @@ export default { this.view.customAttr.label.position = 'middle' } } + // reset custom colors + this.view.customAttr.color.seriesColors = [] }, valueFormatter(item) { diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue index 974e803a1f..642688bd79 100644 --- a/frontend/src/views/chart/view/ChartStyle.vue +++ b/frontend/src/views/chart/view/ChartStyle.vue @@ -30,7 +30,15 @@ {{ $t('chart.shape_attr') }} + import PluginCom from '@/views/system/plugin/PluginCom' import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector' +import ColorSelectorExt from '@/views/chart/components/shape-attr/ColorSelectorExt' import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector' import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV' import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector' @@ -295,7 +304,13 @@ export default { TotalCfg, TooltipSelectorAntV, TooltipSelector, - LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom + LabelSelectorAntV, + LabelSelector, + SizeSelectorAntV, + SizeSelector, + ColorSelector, + PluginCom, + ColorSelectorExt }, props: { chart: { From 0c25b5f55384d291e774ff29a585b3bdbd0f4ef7 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 23 May 2022 10:38:16 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=B0=94=E6=B3=A1=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E5=A2=9E=E5=8A=A0=E6=A0=87=E7=AD=BE=E5=AD=97=E6=AE=B5?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../service/chart/ChartViewService.java | 74 ++++++++++--------- frontend/src/views/chart/group/Group.vue | 1 + frontend/src/views/chart/view/ChartEdit.vue | 7 ++ frontend/src/views/chart/view/ChartStyle.vue | 10 ++- 4 files changed, 56 insertions(+), 36 deletions(-) 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 f8d10b09be..d4ec1cfd96 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java @@ -54,6 +54,7 @@ import org.springframework.transaction.annotation.Propagation; import org.springframework.transaction.annotation.Transactional; import javax.annotation.Resource; +import java.lang.reflect.Type; import java.math.BigDecimal; import java.math.RoundingMode; import java.text.SimpleDateFormat; @@ -128,6 +129,9 @@ public class ChartViewService { } public ChartViewWithBLOBs newOne(ChartViewWithBLOBs chartView) { + if (StringUtils.isBlank(chartView.getViewFields())) { + chartView.setViewFields("[]"); + } long timestamp = System.currentTimeMillis(); chartView.setUpdateTime(timestamp); chartView.setId(UUID.randomUUID().toString()); @@ -300,23 +304,23 @@ public class ChartViewService { if (ObjectUtils.isEmpty(view)) { throw new RuntimeException(Translator.get("i18n_chart_delete")); } - List xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken>() { + List xAxis = gson.fromJson(view.getXAxis(), new TypeToken>() { }.getType()); if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) { - List xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken>() { + List xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken>() { }.getType()); xAxis.addAll(xAxisExt); } - List yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken>() { + List yAxis = gson.fromJson(view.getYAxis(), new TypeToken>() { }.getType()); if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) { - List yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken>() { + List yAxisExt = gson.fromJson(view.getYAxisExt(), new TypeToken>() { }.getType()); yAxis.addAll(yAxisExt); } - List extStack = new Gson().fromJson(view.getExtStack(), new TypeToken>() { + List extStack = gson.fromJson(view.getExtStack(), new TypeToken>() { }.getType()); - List extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken>() { + List extBubble = gson.fromJson(view.getExtBubble(), new TypeToken>() { }.getType()); List fieldCustomFilter = new ArrayList(); List drill = new ArrayList(); @@ -401,7 +405,7 @@ public class ChartViewService { // 如果是插件视图 走插件内部的逻辑 if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) { Map> fieldMap = new HashMap<>(); - List xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken>() { + List xAxisExt = gson.fromJson(view.getXAxisExt(), new TypeToken>() { }.getType()); fieldMap.put("xAxisExt", xAxisExt); fieldMap.put("xAxis", xAxis); @@ -434,7 +438,7 @@ public class ChartViewService { } // DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType()); datasourceRequest.setDatasource(ds); - DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType()); if (StringUtils.equalsIgnoreCase(table.getType(), "db")) { datasourceRequest.setTable(dataTableInfoDTO.getTable()); @@ -462,7 +466,7 @@ public class ChartViewService { datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view)); } } else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) { - DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); List list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId()); String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds); if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) { @@ -477,7 +481,7 @@ public class ChartViewService { datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view)); } } else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) { - DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); Map sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds); String sql = (String) sqlMap.get("sql"); @@ -538,28 +542,30 @@ public class ChartViewService { if (ObjectUtils.isEmpty(view)) { throw new RuntimeException(Translator.get("i18n_chart_delete")); } - List xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken>() { - }.getType()); + Type tokenType = new TypeToken>() {}.getType(); + Type filterTokenType = new TypeToken>() {}.getType(); + + List viewFields = gson.fromJson(view.getViewFields(), tokenType); + Map> extFieldsMap = null; + if (CollectionUtils.isNotEmpty(viewFields)) { + extFieldsMap = viewFields.stream().collect(Collectors.groupingBy(ChartViewFieldDTO::getBusiType)); + } + + + List xAxis = gson.fromJson(view.getXAxis(), tokenType); if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")) { - List xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken>() { - }.getType()); + List xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType); xAxis.addAll(xAxisExt); } - List yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken>() { - }.getType()); + List yAxis = gson.fromJson(view.getYAxis(), tokenType); if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) { - List yAxisExt = new Gson().fromJson(view.getYAxisExt(), new TypeToken>() { - }.getType()); + List yAxisExt = gson.fromJson(view.getYAxisExt(), tokenType); yAxis.addAll(yAxisExt); } - List extStack = new Gson().fromJson(view.getExtStack(), new TypeToken>() { - }.getType()); - List extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken>() { - }.getType()); - List fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken>() { - }.getType()); - List drill = new Gson().fromJson(view.getDrillFields(), new TypeToken>() { - }.getType()); + List extStack = gson.fromJson(view.getExtStack(), tokenType); + List extBubble = gson.fromJson(view.getExtBubble(), tokenType); + List fieldCustomFilter = gson.fromJson(view.getCustomFilter(), filterTokenType); + List drill = gson.fromJson(view.getDrillFields(), tokenType); DatasetTableField datasetTableFieldObj = DatasetTableField.builder().tableId(view.getTableId()).checked(Boolean.TRUE).build(); @@ -741,14 +747,12 @@ public class ChartViewService { // 如果是插件视图 走插件内部的逻辑 if (ObjectUtils.isNotEmpty(view.getIsPlugin()) && view.getIsPlugin()) { - Map> fieldMap = new HashMap<>(); - List xAxisExt = new Gson().fromJson(view.getXAxisExt(), new TypeToken>() { - }.getType()); - fieldMap.put("xAxisExt", xAxisExt); - fieldMap.put("xAxis", xAxis); + Map> fieldMap = ObjectUtils.isEmpty(extFieldsMap) ? new HashMap<>() : extFieldsMap; + fieldMap.put("yAxis", yAxis); fieldMap.put("extStack", extStack); fieldMap.put("extBubble", extBubble); + fieldMap.put("xAxis", xAxis); PluginViewParam pluginViewParam = buildPluginParam(fieldMap, fieldCustomFilter, extFilterList, ds, table, view); String sql = pluginViewSql(pluginViewParam, view); if (StringUtils.isBlank(sql)) { @@ -775,7 +779,7 @@ public class ChartViewService { } // DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType()); datasourceRequest.setDatasource(ds); - DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dataTableInfoDTO = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType()); if (StringUtils.equalsIgnoreCase(table.getType(), "db")) { datasourceRequest.setTable(dataTableInfoDTO.getTable()); @@ -803,7 +807,7 @@ public class ChartViewService { datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, fieldCustomFilter, extFilterList, view)); } } else if (StringUtils.equalsIgnoreCase(table.getType(), "custom")) { - DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); List list = dataSetTableUnionService.listByTableId(dt.getList().get(0).getTableId()); String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds); if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType()) || StringUtils.equalsIgnoreCase("liquid", view.getType())) { @@ -818,7 +822,7 @@ public class ChartViewService { datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, fieldCustomFilter, extFilterList, view)); } } else if (StringUtils.equalsIgnoreCase(table.getType(), "union")) { - DataTableInfoDTO dt = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class); + DataTableInfoDTO dt = gson.fromJson(table.getInfo(), DataTableInfoDTO.class); Map sqlMap = dataSetTableService.getUnionSQLDatasource(dt, ds); String sql = (String) sqlMap.get("sql"); @@ -1376,7 +1380,7 @@ public class ChartViewService { public List getFieldData(String id, ChartExtRequest requestList, boolean cache, String fieldId) throws Exception { ChartViewDTO view = getOne(id, requestList.getQueryFrom()); List sqlData = sqlData(view, requestList, cache, fieldId); - List xAxis = new Gson().fromJson(view.getXAxis(), new TypeToken>() { + List xAxis = gson.fromJson(view.getXAxis(), new TypeToken>() { }.getType()); DatasetTableField field = dataSetTableFieldsService.get(fieldId); diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 6fe4be270c..43097c1a5f 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -822,6 +822,7 @@ export default { view.customFilter = JSON.stringify([]) view.drillFields = JSON.stringify([]) view.extBubble = JSON.stringify([]) + view.viewFields = JSON.stringify([]) this.setChartDefaultOptions(view) const _this = this post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 0df0e9a70d..0f45add0e1 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -657,6 +657,8 @@ :view="view" :chart="chart" :properties="chartProperties" + :dimension-data="dimensionData" + :quota-data="quotaData" @calcStyle="calcStyle" @onColorChange="onColorChange" @onSizeChange="onSizeChange" @@ -1082,6 +1084,7 @@ export default { yaxisExt: [], extStack: [], drillFields: [], + viewFields: [], extBubble: [], show: true, type: 'bar', @@ -1527,6 +1530,7 @@ export default { this.view = JSON.parse(JSON.stringify(view)) // stringify json param view.xaxis = JSON.stringify(view.xaxis) + view.viewFields = JSON.stringify(view.viewFields) view.xaxisExt = JSON.stringify(view.xaxisExt) view.yaxis = JSON.stringify(view.yaxis) view.yaxisExt = JSON.stringify(view.yaxisExt) @@ -1594,6 +1598,7 @@ export default { // 将视图传入echart...组件 const view = JSON.parse(JSON.stringify(this.view)) view.xaxis = JSON.stringify(this.view.xaxis) + view.viewFields = JSON.stringify(this.view.viewFields) view.xaxisExt = JSON.stringify(this.view.xaxisExt) view.yaxis = JSON.stringify(this.view.yaxis) view.yaxisExt = JSON.stringify(this.view.yaxisExt) @@ -1658,6 +1663,7 @@ export default { }).then(response => { this.initTableData(response.data.tableId) this.view = JSON.parse(JSON.stringify(response.data)) + this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : [] this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : [] this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : [] this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : [] @@ -1708,6 +1714,7 @@ export default { this.initTableData(response.data.tableId) } this.view = JSON.parse(JSON.stringify(response.data)) + this.view.viewFields = this.view.viewFields ? JSON.parse(this.view.viewFields) : [] this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : [] this.view.xaxisExt = this.view.xaxisExt ? JSON.parse(this.view.xaxisExt) : [] this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : [] diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue index 81ff79bcb3..9eb228f17a 100644 --- a/frontend/src/views/chart/view/ChartStyle.vue +++ b/frontend/src/views/chart/view/ChartStyle.vue @@ -5,7 +5,7 @@ style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style theme-border-class" :component-name="view.type + '-style'" - :obj="{view, param, chart}" + :obj="{view, param, chart, dimensionData, quotaData}" />
Date: Mon, 23 May 2022 11:08:02 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=B5=8F?= =?UTF-8?q?=E8=A7=88=E5=99=A8console=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/view/ChartEdit.vue | 8 ++++---- frontend/src/views/chart/view/ChartStyle.vue | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 11b50fd4f2..932d6c9595 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -652,7 +652,7 @@ item.render === _this.chart.render && item.value === _this.chart.type) if (viewConfig && viewConfig.length) { - return viewConfig[0].properties + return viewConfig[0].properties || [] } else { - return null + return [] } } else { - return null + return [] } }, chartType() { diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue index 2b7c58a532..0e786a4854 100644 --- a/frontend/src/views/chart/view/ChartStyle.vue +++ b/frontend/src/views/chart/view/ChartStyle.vue @@ -354,7 +354,7 @@ export default { }, methods: { showProperties(property) { - return this.properties.includes(property) + return this.properties && this.properties.length && this.properties.includes(property) }, showPropertiesCollapse(propertiesInfo) { let includeCount = 0 From 3889eff052849999fa1737d41a914f405f4f536b Mon Sep 17 00:00:00 2001 From: junjun Date: Mon, 23 May 2022 11:15:44 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/chart/chart/bar/bar_antv.js | 5 + .../views/chart/chart/funnel/funnel_antv.js | 3 + .../src/views/chart/chart/line/line_antv.js | 5 + .../src/views/chart/chart/pie/pie_antv.js | 5 + .../src/views/chart/chart/radar/radar_antv.js | 4 + .../views/chart/chart/scatter/scatter_antv.js | 3 + frontend/src/views/chart/chart/util.js | 123 +++++++++++++++++- 7 files changed, 147 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js index d84248628c..96e127edac 100644 --- a/frontend/src/views/chart/chart/bar/bar_antv.js +++ b/frontend/src/views/chart/chart/bar/bar_antv.js @@ -10,6 +10,7 @@ import { getSlider, getAnalyse } from '@/views/chart/chart/common/common_antv' +import { antVCustomColor } from '@/views/chart/chart/util' export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) { // theme @@ -98,6 +99,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta } else { delete options.isStack } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { @@ -198,6 +201,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt } else { delete options.isStack } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/funnel/funnel_antv.js b/frontend/src/views/chart/chart/funnel/funnel_antv.js index 0d940e4a4a..eaa588f6da 100644 --- a/frontend/src/views/chart/chart/funnel/funnel_antv.js +++ b/frontend/src/views/chart/chart/funnel/funnel_antv.js @@ -1,5 +1,6 @@ import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' import { Funnel } from '@antv/g2plot' +import { antVCustomColor } from '@/views/chart/chart/util' export function baseFunnelOptionAntV(plot, container, chart, action) { // theme @@ -62,6 +63,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) { const s = JSON.parse(JSON.stringify(customAttr.size)) } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js index eb7d0eacc0..d4017b2d44 100644 --- a/frontend/src/views/chart/chart/line/line_antv.js +++ b/frontend/src/views/chart/chart/line/line_antv.js @@ -10,6 +10,7 @@ import { getSlider, getAnalyse } from '@/views/chart/chart/common/common_antv' +import { antVCustomColor } from '@/views/chart/chart/util' export function baseLineOptionAntV(plot, container, chart, action) { // theme @@ -90,6 +91,8 @@ export function baseLineOptionAntV(plot, container, chart, action) { } } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { @@ -184,6 +187,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) { } } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js index d66180b364..7eb3c42d40 100644 --- a/frontend/src/views/chart/chart/pie/pie_antv.js +++ b/frontend/src/views/chart/chart/pie/pie_antv.js @@ -7,6 +7,7 @@ import { } from '@/views/chart/chart/common/common_antv' import { Pie, Rose } from '@antv/g2plot' +import { antVCustomColor } from '@/views/chart/chart/util' export function basePieOptionAntV(plot, container, chart, action) { // theme @@ -84,6 +85,8 @@ export function basePieOptionAntV(plot, container, chart, action) { options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100) } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { @@ -165,6 +168,8 @@ export function basePieRoseOptionAntV(plot, container, chart, action) { options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100) } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/radar/radar_antv.js b/frontend/src/views/chart/chart/radar/radar_antv.js index a4f25b2ac4..115a336276 100644 --- a/frontend/src/views/chart/chart/radar/radar_antv.js +++ b/frontend/src/views/chart/chart/radar/radar_antv.js @@ -1,5 +1,6 @@ import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' import { Radar } from '@antv/g2plot' +import { antVCustomColor } from '@/views/chart/chart/util' export function baseRadarOptionAntV(plot, container, chart, action) { // theme @@ -132,6 +133,9 @@ export function baseRadarOptionAntV(plot, container, chart, action) { options.xAxis = xAxis options.yAxis = yAxis + // custom color + options.color = antVCustomColor(chart) + // 开始渲染 if (plot) { plot.destroy() diff --git a/frontend/src/views/chart/chart/scatter/scatter_antv.js b/frontend/src/views/chart/chart/scatter/scatter_antv.js index 77fd43d137..6bfc0529a6 100644 --- a/frontend/src/views/chart/chart/scatter/scatter_antv.js +++ b/frontend/src/views/chart/chart/scatter/scatter_antv.js @@ -11,6 +11,7 @@ import { } from '@/views/chart/chart/common/common_antv' import { Scatter } from '@antv/g2plot' +import { antVCustomColor } from '@/views/chart/chart/util' export function baseScatterOptionAntV(plot, container, chart, action) { // theme @@ -86,6 +87,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) { options.shape = s.scatterSymbol } } + // custom color + options.color = antVCustomColor(chart) // 开始渲染 if (plot) { diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 86e3662b45..fa5bf140bc 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -397,7 +397,7 @@ export const TYPE_CONFIGS = [ 'color-selector', 'size-selector', 'label-selector', - 'title-selector', + 'title-selector' ] }, @@ -665,3 +665,124 @@ export function customSort(custom, data) { return joinArr.concat(subArr) } + +export function customColor(custom, res, colors) { + const result = [] + for (let i = 0; i < res.length; i++) { + const r = res[i] + let flag = false + for (let j = 0; j < custom.length; j++) { + const c = custom[j] + if (r.name === c.name) { + flag = true + result.push(c) + } + } + if (!flag) { + result.push(r) + } + } + return result +} + +export function getColors(chart, colors, reset) { + // 自定义颜色，先按照没有设定的情况，并排好序，当做最终结果 + let seriesColors = [] + let series + if (chart.type.includes('stack')) { + if (chart.data) { + const data = chart.data.datas + const stackData = [] + for (let i = 0; i < data.length; i++) { + const s = data[i] + stackData.push(s.category) + } + const sArr = stackData.filter(function(item, index, stackData) { + return stackData.indexOf(item, 0) === index + }) + + for (let i = 0; i < sArr.length; i++) { + const s = sArr[i] + seriesColors.push({ + name: s, + color: colors[i % colors.length], + isCustom: false + }) + } + } + } else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar')) { + if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') { + series = JSON.parse(JSON.stringify(chart.yaxis)) + } else { + series = JSON.parse(chart.yaxis) + } + for (let i = 0; i < series.length; i++) { + const s = series[i] + seriesColors.push({ + name: s.name, + color: colors[i % colors.length], + isCustom: false + }) + } + } else { + if (chart.data) { + const data = chart.data.datas + // data 的维度值，需要根据自定义顺序排序 + // let customSortData + // if (Object.prototype.toString.call(chart.customSort) === '[object Array]') { + // customSortData = JSON.parse(JSON.stringify(chart.customSort)) + // } else { + // customSortData = JSON.parse(chart.customSort) + // } + // if (customSortData && customSortData.length > 0) { + // data = customSort(customSortData, data) + // } + + for (let i = 0; i < data.length; i++) { + const s = data[i] + seriesColors.push({ + name: s.field, + color: colors[i % colors.length], + isCustom: false + }) + } + } + } + // 如果有自定义，则与上述中的结果合并。 + // res，custom，以custom为准，去掉res中不存在的，并将custom中name一样的color赋值给res，不存在的name，即新增值，使用i % colors.length，从配色方案中选 + if (!reset) { + let sc = null + if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') { + sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors + } else { + sc = JSON.parse(chart.customAttr).color.seriesColors + } + if (sc && sc.length > 0) { + seriesColors = customColor(sc, seriesColors) + } + // 根据isCustom字段，修正color + for (let i = 0; i < seriesColors.length; i++) { + if (!seriesColors[i].isCustom) { + seriesColors[i].color = colors[i % colors.length] + } + } + } + return seriesColors +} + +export function antVCustomColor(chart) { + const colors = [] + if (chart.customAttr) { + const customAttr = JSON.parse(chart.customAttr) + // color + if (customAttr.color) { + const c = JSON.parse(JSON.stringify(customAttr.color)) + + const customColors = getColors(chart, c.colors, false) + for (let i = 0; i < customColors.length; i++) { + colors.push(hexColorToRGBA(customColors[i].color, c.alpha)) + } + } + } + return colors +}