From 9764929eade90038473ab8a3c0df374a3ccddeb2 Mon Sep 17 00:00:00 2001 From: ulleo Date: Mon, 4 Dec 2023 17:59:26 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20AntV=E7=BB=84=E5=90=88=E5=9B=BE?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E6=8C=87=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #6853 --- .../src/views/antv/chartmix/data.vue | 198 +++++++------ .../src/views/antv/chartmix/index.vue | 260 ++++++++++-------- 2 files changed, 259 insertions(+), 199 deletions(-) diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue index d4ec306f10..116b222248 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue @@ -6,30 +6,30 @@ {{ $t('plugin_view_chartmix.source') }}/{{ $t('chart.dimension') }} @@ -43,28 +43,28 @@ {{ $t('plugin_view_chartmix.mark_size') }}/{{ $t('chart.quota') }} @@ -78,28 +78,28 @@ {{ $t('plugin_view_chartmix.mark_size') }}/{{ $t('chart.quota') }} @@ -114,27 +114,27 @@ {{ $t('chart.result_filter') }} @@ -230,7 +230,7 @@ export default { this.$emit('on-add-languages', messages) }, watch: { - listenLists: function(val) { + /*listenLists: function(val) { if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) { return } @@ -243,7 +243,7 @@ export default { this.view.yaxisExt = [this.view.yaxisExt[0]] } this.calcData(true) - } + }*/ }, methods: { executeAxios(url, type, data, callBack) { @@ -284,20 +284,41 @@ export default { this.multiAdd(e, this.view.yaxis) this.dragMoveDuplicate(this.view.yaxis, e) this.dragCheckType(this.view.yaxis, 'q') - if (this.view.yaxis.length <= 1) { - this.calcData(true) + + if (this.view.yaxis.length > 1) { + for (let i = 0; i < this.view.yaxis.length; i++) { + if (i === e.newDraggableIndex) { + continue + } + this.view.yaxis[e.newDraggableIndex].chartType = this.view.yaxis[i].chartType; + break + } } + + //if (this.view.yaxis.length <= 1) { + this.calcData(true) + //} }, addYaxisExt(e) { this.multiAdd(e, this.view.yaxisExt) this.dragMoveDuplicate(this.view.yaxisExt, e) this.dragCheckType(this.view.yaxisExt, 'q') - if (this.view.yaxisExt.length <= 1) { - this.calcData(true) + + if (this.view.yaxisExt.length > 1) { + for (let i = 0; i < this.view.yaxisExt.length; i++) { + if (i === e.newDraggableIndex) { + continue + } + this.view.yaxisExt[e.newDraggableIndex].chartType = this.view.yaxisExt[i].chartType; + break + } } + + //if (this.view.yaxisExt.length <= 1) { + this.calcData(true) + //} }, calcData(cache) { - console.log(cache) //this.view.xaxis = [...this.source, ...this.target] this.$emit('plugin-call-back', { @@ -339,6 +360,15 @@ export default { }, quotaItemChange(item) { + for (let i = 0; i < this.view.yaxis.length; i++) { + this.view.yaxis[i].chartType = item.chartType + } + this.calcData(true) + }, + quotaExtItemChange(item) { + for (let i = 0; i < this.view.yaxisExt.length; i++) { + this.view.yaxisExt[i].chartType = item.chartType + } this.calcData(true) }, quotaItemRemove(item) { diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue index f058656ee9..07aba04106 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue @@ -6,23 +6,23 @@ @trackClick="trackClick"/>
@@ -310,135 +310,54 @@ export default { const names = []; - let _data = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { - return _index < yaxisCount; - }), (t, _index) => { + const yChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { + return _index < yaxisCount; + }), (t, _index) => { + names.push(t.name); - const _labelSetting = _.cloneDeep(labelSetting); - if (_labelSetting && yaxisList[_index].formatterCfg) { - _labelSetting.formatter = function (x) { - return valueFormatter(x.value, yaxisList[_index].formatterCfg); - } - } - - names.push(t.name); - - const _chartType = this.getChartType(yaxisList[_index].chartType); - - if (_labelSetting) { - if (_chartType === "column") { - _labelSetting.position = labelPosition; - } else { - _labelSetting.position = undefined; - } - } - - let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined; - if (color && gradient) { - color = setGradientColor(color, true, 270) - } - - const setting = { - type: _chartType, - name: t.name, - options: { - data: _.map(t.data, (v) => { + return _.map(t.data, (v) => { return { quotaList: v.quotaList, dimensionList: v.dimensionList, key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), value: v.value, + name: t.name, i: _index, t: 'yaxis' } - }), - xField: 'key', - yField: 'value', - meta: { - key: { - sync: true, - }, - value: { - alias: t.name, - }, - }, - color: color, - label: _labelSetting, - xAxis: xAxis, - yAxis: yAxis, + }); } - } - return this.setSizeSetting(setting); - }) : []; + ) : []; - let _dataExt = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { - return _index >= yaxisCount; - }), (t, _index) => { + const yData = [this.getYData(_.flatten(yChartData), labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtList.length)]; - const _labelSetting = _.cloneDeep(labelSetting); - if (_labelSetting && yaxisExtList[_index].formatterCfg) { - _labelSetting.formatter = function (x) { - return valueFormatter(x.value, yaxisExtList[_index].formatterCfg); - } - } + const yExtChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { + return _index >= yaxisCount; + }), (t, _index) => { + names.push(t.name); - names.push(t.name); - - const _chartType = this.getChartType(yaxisExtList[_index].chartType); - - if (_labelSetting) { - if (_chartType === "column") { - _labelSetting.position = labelPosition; - } else { - _labelSetting.position = undefined; - } - } - - let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined; - if (color && gradient) { - color = setGradientColor(color, true, 270) - } - - const setting = { - type: _chartType, - name: t.name, - options: { - data: _.map(t.data, (v) => { + return _.map(t.data, (v) => { return { quotaList: v.quotaList, dimensionList: v.dimensionList, key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), value: v.value, + name: t.name, i: _index, t: 'yaxisExt' } - }), - xField: 'key', - yField: 'value', - meta: { - key: { - sync: true, - }, - value: { - alias: t.name, - }, - }, - color: color, - label: _labelSetting, - xAxis: false, - yAxis: yAxisExt, + }) } - } - return this.setSizeSetting(setting); - }) : []; + ) : []; + const yExtData = [this.getYExtData(_.flatten(yExtChartData), labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)]; const params = { tooltip: false, syncViewPadding: true, plots: [ - ..._data, - ..._dataExt + ...yData, + ...yExtData ] }; @@ -489,7 +408,8 @@ export default { params.annotations = this.getAnalyse(this.chart); - params.legend = this.getLegend(this.chart); + //两个轴只能展示一个轴的图例，所以隐藏 + //params.legend = this.getLegend(this.chart); return params; }, @@ -755,6 +675,116 @@ export default { return axis }, + getYData(data, labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtCount) { + + const _labelSetting = _.cloneDeep(labelSetting); + if (_labelSetting) { + _labelSetting.formatter = function (x) { + for (let i = 0; i < yaxisList.length; i++) { + if (i === x.i && yaxisList[i].formatterCfg) { + return valueFormatter(x.value, yaxisList[i].formatterCfg); + } + } + return x.value; + } + } + + const _chartType = this.getChartType(yaxisList && yaxisList.length > 0 ? yaxisList[0].chartType : undefined); + + if (_labelSetting) { + if (_chartType === "column") { + _labelSetting.position = labelPosition; + } else { + _labelSetting.position = undefined; + } + } + + const color = []; + for (let i = 0; i < yaxisList.length; i++) { + if (gradient) { + color.push(setGradientColor(hexColorToRGBA(colors[i % colors.length], alpha), true, 270)) + } else { + color.push(hexColorToRGBA(colors[i % colors.length], alpha)) + } + } + + const setting = { + type: _chartType, + options: { + data: data, + xField: 'key', + yField: 'value', + seriesField: 'name', + colorField: 'name', + isGroup: true, + meta: { + key: { + sync: true, + }, + }, + color: color, + label: _labelSetting, + xAxis: yaxisList.length > 0 || yaxisExtCount === 0 ? xAxis : false, + yAxis: yAxis, + } + } + return this.setSizeSetting(setting); + }, + + getYExtData(data, labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount) { + const _labelSetting = _.cloneDeep(labelSetting); + if (_labelSetting) { + _labelSetting.formatter = function (x) { + for (let i = 0; i < yaxisExtList.length; i++) { + if (i === x.i && yaxisExtList[i].formatterCfg) { + return valueFormatter(x.value, yaxisExtList[i].formatterCfg); + } + } + return x.value; + } + } + + const _chartType = this.getChartType(yaxisExtList && yaxisExtList.length > 0 ? yaxisExtList[0].chartType : undefined); + + if (_labelSetting) { + if (_chartType === "column") { + _labelSetting.position = labelPosition; + } else { + _labelSetting.position = undefined; + } + } + + const color = []; + for (let i = yaxisCount; i < yaxisExtList.length + yaxisCount; i++) { + if (gradient) { + color.push(setGradientColor(hexColorToRGBA(colors[i % colors.length], alpha), true, 270)) + } else { + color.push(hexColorToRGBA(colors[i % colors.length], alpha)) + } + } + + const setting = { + type: _chartType, + options: { + data: data, + xField: 'key', + yField: 'value', + seriesField: 'name', + isGroup: true, + meta: { + key: { + sync: true, + }, + }, + color: color, + label: _labelSetting, + xAxis: yaxisCount > 0 || yaxisExtList.length === 0 ? false : xAxis, + yAxis: yAxisExt, + } + } + return this.setSizeSetting(setting); + }, + setSizeSetting(setting) { let customAttr = undefined; if (this.chart.customAttr) { @@ -1044,7 +1074,7 @@ export default { }, checkSelected(param) { return (this.linkageActiveParam.name === param.name || (this.linkageActiveParam.name === 'NO_DATA' && !param.name)) && - (this.linkageActiveParam.category === param.category) + (this.linkageActiveParam.category === param.category) }, trackClick(trackAction) { From ba9852a9e8ee45b8f95585edb9a1fa97fb099426 Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 5 Dec 2023 15:59:45 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20AntV=E7=BB=84=E5=90=88=E5=9B=BE?= =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=8B=96=E6=8B=BD=E6=8C=87=E6=A0=87=EF=BC=8C?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=B1=BB=E5=9E=8B=E4=B8=8D=E6=AD=A3=E7=A1=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/antv/chartmix/data.vue | 198 +++++++++--------- .../src/views/antv/chartmix/index.vue | 102 ++++----- 2 files changed, 152 insertions(+), 148 deletions(-) diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue index 116b222248..e2173d0fe6 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue @@ -6,30 +6,30 @@ {{ $t('plugin_view_chartmix.source') }}/{{ $t('chart.dimension') }} @@ -43,28 +43,28 @@ {{ $t('plugin_view_chartmix.mark_size') }}/{{ $t('chart.quota') }} @@ -78,28 +78,28 @@ {{ $t('plugin_view_chartmix.mark_size') }}/{{ $t('chart.quota') }} @@ -114,27 +114,27 @@ {{ $t('chart.result_filter') }} @@ -152,6 +152,7 @@ import QuotaItem from '../../../components/views/QuotaItem' import QuotaExtItem from '../../../components/views/QuotaExtItem' import FilterItem from '../../../components/views/FilterItem' import messages from '@/de-base/lang/messages' +import {defaultTo} from "lodash-es" export default { props: { @@ -174,6 +175,8 @@ export default { }, data() { return { + yChartType: undefined, + yExtChartType: undefined, widgets: [], places: [], moveId: -1, @@ -229,6 +232,17 @@ export default { created() { this.$emit('on-add-languages', messages) }, + mounted() { + if (this.view.yaxis && this.view.yaxis[0]) { + this.yChartType = this.view.yaxis[0].chartType + } + if (this.view.yaxisExt && this.view.yaxisExt[0]) { + this.yExtChartType = this.view.yaxisExt[0].chartType + } + this.yChartType = defaultTo(this.yChartType, 'bar'); + this.yExtChartType = defaultTo(this.yExtChartType, 'line'); + + }, watch: { /*listenLists: function(val) { if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) { @@ -285,14 +299,8 @@ export default { this.dragMoveDuplicate(this.view.yaxis, e) this.dragCheckType(this.view.yaxis, 'q') - if (this.view.yaxis.length > 1) { - for (let i = 0; i < this.view.yaxis.length; i++) { - if (i === e.newDraggableIndex) { - continue - } - this.view.yaxis[e.newDraggableIndex].chartType = this.view.yaxis[i].chartType; - break - } + for (let i = 0; i < this.view.yaxis.length; i++) { + this.view.yaxis[i].chartType = this.yChartType } //if (this.view.yaxis.length <= 1) { @@ -304,14 +312,8 @@ export default { this.dragMoveDuplicate(this.view.yaxisExt, e) this.dragCheckType(this.view.yaxisExt, 'q') - if (this.view.yaxisExt.length > 1) { - for (let i = 0; i < this.view.yaxisExt.length; i++) { - if (i === e.newDraggableIndex) { - continue - } - this.view.yaxisExt[e.newDraggableIndex].chartType = this.view.yaxisExt[i].chartType; - break - } + for (let i = 0; i < this.view.yaxisExt.length; i++) { + this.view.yaxisExt[i].chartType = this.yExtChartType; } //if (this.view.yaxisExt.length <= 1) { @@ -360,14 +362,16 @@ export default { }, quotaItemChange(item) { + this.yChartType = item.chartType; for (let i = 0; i < this.view.yaxis.length; i++) { - this.view.yaxis[i].chartType = item.chartType + this.view.yaxis[i].chartType = this.yChartType } this.calcData(true) }, quotaExtItemChange(item) { + this.yExtChartType = item.chartType; for (let i = 0; i < this.view.yaxisExt.length; i++) { - this.view.yaxisExt[i].chartType = item.chartType + this.view.yaxisExt[i].chartType = this.yExtChartType } this.calcData(true) }, @@ -421,8 +425,8 @@ export default { newItems = groupDie ? this.selectedDimension : this.selectedQuota } const preIds = list - .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length) - .map(i => i.id) + .filter((_, i) => i < e.newDraggableIndex || i >= e.newDraggableIndex + newItems.length) + .map(i => i.id) // 倒序删除 for (let i = e.newDraggableIndex + newItems.length - 1; i >= e.newDraggableIndex; i--) { if (preIds.includes(list[i].id)) { diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue index 07aba04106..ba7bc6ec09 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue @@ -6,23 +6,23 @@ @trackClick="trackClick"/>
@@ -43,7 +43,7 @@ import { getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE } from '../../../utils/map'; import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate'; -import _ from 'lodash'; +import {map, filter, join, flatten, cloneDeep} from 'lodash-es'; import {clear} from 'size-sensor' import {valueFormatter} from '../../../utils/formatter' @@ -310,47 +310,47 @@ export default { const names = []; - const yChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { - return _index < yaxisCount; - }), (t, _index) => { - names.push(t.name); + const yChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? map(filter(this.chart.data.data, (c, _index) => { + return _index < yaxisCount; + }), (t, _index) => { + names.push(t.name); - return _.map(t.data, (v) => { - return { - quotaList: v.quotaList, - dimensionList: v.dimensionList, - key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), - value: v.value, - name: t.name, - i: _index, - t: 'yaxis' - } - }); - } + return map(t.data, (v) => { + return { + quotaList: v.quotaList, + dimensionList: v.dimensionList, + key: join(map(v.dimensionList, (d) => d.value), "\n"), + value: v.value, + name: t.name, + i: _index, + t: 'yaxis' + } + }); + } ) : []; - const yData = [this.getYData(_.flatten(yChartData), labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtList.length)]; + const yData = [this.getYData(flatten(yChartData), labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtList.length)]; - const yExtChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { - return _index >= yaxisCount; - }), (t, _index) => { - names.push(t.name); + const yExtChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? map(filter(this.chart.data.data, (c, _index) => { + return _index >= yaxisCount; + }), (t, _index) => { + names.push(t.name); - return _.map(t.data, (v) => { - return { - quotaList: v.quotaList, - dimensionList: v.dimensionList, - key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), - value: v.value, - name: t.name, - i: _index, - t: 'yaxisExt' - } - }) - } + return map(t.data, (v) => { + return { + quotaList: v.quotaList, + dimensionList: v.dimensionList, + key: join(map(v.dimensionList, (d) => d.value), "\n"), + value: v.value, + name: t.name, + i: _index, + t: 'yaxisExt' + } + }) + } ) : []; - const yExtData = [this.getYExtData(_.flatten(yExtChartData), labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)]; + const yExtData = [this.getYExtData(flatten(yExtChartData), labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount)]; const params = { tooltip: false, @@ -390,7 +390,7 @@ export default { item.value = valueFormatter(item.data.value, yaxisExtList[item.data.i].formatterCfg) } }) - return _.filter(originalItems, (item) => { + return filter(originalItems, (item) => { const v = item.data.key; if (item.title === v && item.title === item.value && item.name === "key" || !names.includes(item.name)) { return false; @@ -677,7 +677,7 @@ export default { getYData(data, labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtCount) { - const _labelSetting = _.cloneDeep(labelSetting); + const _labelSetting = cloneDeep(labelSetting); if (_labelSetting) { _labelSetting.formatter = function (x) { for (let i = 0; i < yaxisList.length; i++) { @@ -732,7 +732,7 @@ export default { }, getYExtData(data, labelSetting, labelPosition, yaxisExtList, colors, gradient, alpha, xAxis, yAxisExt, yaxisCount) { - const _labelSetting = _.cloneDeep(labelSetting); + const _labelSetting = cloneDeep(labelSetting); if (_labelSetting) { _labelSetting.formatter = function (x) { for (let i = 0; i < yaxisExtList.length; i++) { @@ -1074,7 +1074,7 @@ export default { }, checkSelected(param) { return (this.linkageActiveParam.name === param.name || (this.linkageActiveParam.name === 'NO_DATA' && !param.name)) && - (this.linkageActiveParam.category === param.category) + (this.linkageActiveParam.category === param.category) }, trackClick(trackAction) {