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

Merge pull request #7011 from ulleo/dev

Browse Source 
AntV组合图支持多指标
This commit is contained in:
ulleo 2023-12-05 16:01:36 +08:00 committed by GitHub
commit 71b411430f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 194 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/data.vue
View File

@ -97,7 +97,7 @@
@editItemCompare="showQuotaEditCompare"
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@onQuotaItemChange="quotaItemChange"
@onQuotaItemChange="quotaExtItemChange"
@onQuotaItemRemove="quotaItemRemove"
@valueFormatter="valueFormatter"
/>
@ -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,8 +232,19 @@ 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) {
/*listenLists: function(val) {
if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) {
return
}
@ -243,7 +257,7 @@ export default {
this.view.yaxisExt = [this.view.yaxisExt[0]]
}
this.calcData(true)
}
}*/
},
methods: {
executeAxios(url, type, data, callBack) {
@ -284,20 +298,29 @@ 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)
for (let i = 0; i < this.view.yaxis.length; i++) {
this.view.yaxis[i].chartType = this.yChartType
}
//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)
for (let i = 0; i < this.view.yaxisExt.length; i++) {
this.view.yaxisExt[i].chartType = this.yExtChartType;
}
//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 +362,17 @@ export default {
},
quotaItemChange(item) {
this.yChartType = item.chartType;
for (let i = 0; i < this.view.yaxis.length; i++) {
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 = this.yExtChartType
}
this.calcData(true)
},
quotaItemRemove(item) {
@ -391,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)) {

270
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
View File

@ -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,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);
}
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'
}
});
}
) : [];
names.push(t.name);
const yData = [this.getYData(flatten(yChartData), labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtList.length)];
const _chartType = this.getChartType(yaxisList[_index].chartType);
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);
if (_labelSetting) {
if (_chartType === "column") {
_labelSetting.position = labelPosition;
} else {
_labelSetting.position = undefined;
}
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'
}
})
}
) : [];
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 {
quotaList: v.quotaList,
dimensionList: v.dimensionList,
key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"),
value: v.value,
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 _labelSetting = _.cloneDeep(labelSetting);
if (_labelSetting && yaxisExtList[_index].formatterCfg) {
_labelSetting.formatter = function (x) {
return valueFormatter(x.value, yaxisExtList[_index].formatterCfg);
}
}
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 {
quotaList: v.quotaList,
dimensionList: v.dimensionList,
key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"),
value: v.value,
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
]
};
@ -471,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;
@ -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) {