dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AntV组合图支持多指标

Browse Source 
#6853
This commit is contained in:
ulleo 2023-12-04 17:59:26 +08:00
parent 4570877539
commit 9764929ead
2 changed files with 259 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,30 +6,30 @@
<span>{{ $t('plugin_view_chartmix.source') }}</span>/<span>{{ $t('chart.dimension') }}</span> <span>{{ $t('plugin_view_chartmix.source') }}</span>/<span>{{ $t('chart.dimension') }}</span>
</span> </span>
<draggable <draggable
v-model="view.xaxis" v-model="view.xaxis"
:move="onMove" :move="onMove"
animation="300" animation="300"
class="drag-block-style" class="drag-block-style"
group="drag" group="drag"
@add="addXaxis" @add="addXaxis"
@update="calcData(true)" @update="calcData(true)"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<dimension-item <dimension-item
v-for="(item,index) in view.xaxis" v-for="(item,index) in view.xaxis"
:key="index" :key="index"
:bus="bus" :bus="bus"
:chart="chart" :chart="chart"
:dimension-data="dimension" :dimension-data="dimension"
:index="0" :index="0"
:item="item" :item="item"
:param="param" :param="param"
:quota-data="quotaData" :quota-data="quotaData"
dimension-name="dimension" dimension-name="dimension"
@editItemFilter="showDimensionEditFilter" @editItemFilter="showDimensionEditFilter"
@onDimensionItemChange="dimensionItemChange" @onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove" @onDimensionItemRemove="dimensionItemRemove"
@onNameEdit="showRename" @onNameEdit="showRename"
/> />
</transition-group> </transition-group>
</draggable> </draggable>
@ -43,28 +43,28 @@
<span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span> <span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
</span> </span>
<draggable <draggable
v-model="view.yaxis" v-model="view.yaxis"
:move="onMove" :move="onMove"
animation="300" animation="300"
class="drag-block-style" class="drag-block-style"
group="drag" group="drag"
@add="addYaxis" @add="addYaxis"
@update="calcData(true)" @update="calcData(true)"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<quota-item <quota-item
v-for="(item,index) in view.yaxis" v-for="(item,index) in view.yaxis"
:key="item.id" :key="item.id"
:chart="chart" :chart="chart"
:dimension-data="dimension" :dimension-data="dimension"
:index="index" :index="index"
:item="item" :param="param" :quota-data="quota" :item="item" :param="param" :quota-data="quota"
@editItemCompare="showQuotaEditCompare" @editItemCompare="showQuotaEditCompare"
@editItemFilter="showQuotaEditFilter" @editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename" @onNameEdit="showRename"
@onQuotaItemChange="quotaItemChange" @onQuotaItemChange="quotaItemChange"
@onQuotaItemRemove="quotaItemRemove" @onQuotaItemRemove="quotaItemRemove"
@valueFormatter="valueFormatter" @valueFormatter="valueFormatter"
/> />
</transition-group> </transition-group>
</draggable> </draggable>
@ -78,28 +78,28 @@
<span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span> <span>{{ $t('plugin_view_chartmix.mark_size') }}</span>/<span>{{ $t('chart.quota') }}</span>
</span> </span>
<draggable <draggable
v-model="view.yaxisExt" v-model="view.yaxisExt"
:move="onMove" :move="onMove"
animation="300" animation="300"
class="drag-block-style" class="drag-block-style"
group="drag" group="drag"
@add="addYaxisExt" @add="addYaxisExt"
@update="calcData(true)" @update="calcData(true)"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<quota-ext-item <quota-ext-item
v-for="(item,index) in view.yaxisExt" v-for="(item,index) in view.yaxisExt"
:key="item.id" :key="item.id"
:chart="chart" :chart="chart"
:dimension-data="dimension" :dimension-data="dimension"
:index="index" :index="index"
:item="item" :param="param" :quota-data="quota" :item="item" :param="param" :quota-data="quota"
@editItemCompare="showQuotaEditCompare" @editItemCompare="showQuotaEditCompare"
@editItemFilter="showQuotaEditFilter" @editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename" @onNameEdit="showRename"
@onQuotaItemChange="quotaItemChange" @onQuotaItemChange="quotaExtItemChange"
@onQuotaItemRemove="quotaItemRemove" @onQuotaItemRemove="quotaItemRemove"
@valueFormatter="valueFormatter" @valueFormatter="valueFormatter"
/> />
</transition-group> </transition-group>
</draggable> </draggable>
@ -114,27 +114,27 @@
<span>{{ $t('chart.result_filter') }}</span> <span>{{ $t('chart.result_filter') }}</span>
<draggable <draggable
v-model="view.customFilter" v-model="view.customFilter"
:move="onMove" :move="onMove"
animation="300" animation="300"
class="theme-item-class" class="theme-item-class"
group="drag" group="drag"
style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;" style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
@add="addCustomFilter" @add="addCustomFilter"
@update="calcData(true)" @update="calcData(true)"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<filter-item <filter-item
v-for="(item,index) in view.customFilter" v-for="(item,index) in view.customFilter"
:key="item.id" :key="item.id"
:bus="bus" :bus="bus"
:dimension-data="dimension" :dimension-data="dimension"
:index="index" :index="index"
:item="item" :item="item"
:param="param" :param="param"
:quota-data="quota" :quota-data="quota"
@editItemFilter="showEditFilter" @editItemFilter="showEditFilter"
@onFilterItemRemove="filterItemRemove" @onFilterItemRemove="filterItemRemove"
/> />
</transition-group> </transition-group>
</draggable> </draggable>
@ -230,7 +230,7 @@ export default {
this.$emit('on-add-languages', messages) this.$emit('on-add-languages', messages)
}, },
watch: { watch: {
listenLists: function(val) { /*listenLists: function(val) {
if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) { if (this.listenLists[0] <= 1 && this.listenLists[1] <= 1) {
return return
} }
@ -243,7 +243,7 @@ export default {
this.view.yaxisExt = [this.view.yaxisExt[0]] this.view.yaxisExt = [this.view.yaxisExt[0]]
} }
this.calcData(true) this.calcData(true)
} }*/
}, },
methods: { methods: {
executeAxios(url, type, data, callBack) { executeAxios(url, type, data, callBack) {
@ -284,20 +284,41 @@ export default {
this.multiAdd(e, this.view.yaxis) this.multiAdd(e, this.view.yaxis)
this.dragMoveDuplicate(this.view.yaxis, e) this.dragMoveDuplicate(this.view.yaxis, e)
this.dragCheckType(this.view.yaxis, 'q') 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) { addYaxisExt(e) {
this.multiAdd(e, this.view.yaxisExt) this.multiAdd(e, this.view.yaxisExt)
this.dragMoveDuplicate(this.view.yaxisExt, e) this.dragMoveDuplicate(this.view.yaxisExt, e)
this.dragCheckType(this.view.yaxisExt, 'q') 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) { calcData(cache) {
console.log(cache)
//this.view.xaxis = [...this.source, ...this.target] //this.view.xaxis = [...this.source, ...this.target]
this.$emit('plugin-call-back', { this.$emit('plugin-call-back', {
@ -339,6 +360,15 @@ export default {
}, },
quotaItemChange(item) { 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) this.calcData(true)
}, },
quotaItemRemove(item) { quotaItemRemove(item) {

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

@ -6,23 +6,23 @@
@trackClick="trackClick"/> @trackClick="trackClick"/>
<span <span
v-if="chart.type && antVRenderStatus" v-if="chart.type && antVRenderStatus"
v-show="title_show" v-show="title_show"
ref="title" ref="title"
:style="titleClass" :style="titleClass"
style="cursor: default;display: block;" style="cursor: default;display: block;"
> >
<div style="padding:4px 4px 0;margin: 0;"> <div style="padding:4px 4px 0;margin: 0;">
<chart-title-update <chart-title-update
:title-class="titleClass" :title-class="titleClass"
:chart-info="chartInfo" :chart-info="chartInfo"
:bus="bus" :bus="bus"
:axios-request="axiosRequest" :axios-request="axiosRequest"
/> />
<title-remark <title-remark
v-if="remarkCfg.show" v-if="remarkCfg.show"
style="text-shadow: none!important;margin-left: 4px;" style="text-shadow: none!important;margin-left: 4px;"
:remark-cfg="remarkCfg" :remark-cfg="remarkCfg"
/> />
</div> </div>
</span> </span>
@ -310,135 +310,54 @@ export default {
const names = []; 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) => { 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; return _index < yaxisCount;
}), (t, _index) => { }), (t, _index) => {
names.push(t.name);
const _labelSetting = _.cloneDeep(labelSetting); return _.map(t.data, (v) => {
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 { return {
quotaList: v.quotaList, quotaList: v.quotaList,
dimensionList: v.dimensionList, dimensionList: v.dimensionList,
key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"),
value: v.value, value: v.value,
name: t.name,
i: _index, i: _index,
t: 'yaxis' 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) => { const yData = [this.getYData(_.flatten(yChartData), labelSetting, labelPosition, yaxisList, colors, gradient, alpha, xAxis, yAxis, yaxisExtList.length)];
return _index >= yaxisCount;
}), (t, _index) => {
const _labelSetting = _.cloneDeep(labelSetting); const yExtChartData = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
if (_labelSetting && yaxisExtList[_index].formatterCfg) { return _index >= yaxisCount;
_labelSetting.formatter = function (x) { }), (t, _index) => {
return valueFormatter(x.value, yaxisExtList[_index].formatterCfg); names.push(t.name);
}
}
names.push(t.name); return _.map(t.data, (v) => {
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 { return {
quotaList: v.quotaList, quotaList: v.quotaList,
dimensionList: v.dimensionList, dimensionList: v.dimensionList,
key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"), key: _.join(_.map(v.dimensionList, (d) => d.value), "\n"),
value: v.value, value: v.value,
name: t.name,
i: _index, i: _index,
t: 'yaxisExt' 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 = { const params = {
tooltip: false, tooltip: false,
syncViewPadding: true, syncViewPadding: true,
plots: [ plots: [
..._data, ...yData,
..._dataExt ...yExtData
] ]
}; };
@ -489,7 +408,8 @@ export default {
params.annotations = this.getAnalyse(this.chart); params.annotations = this.getAnalyse(this.chart);
params.legend = this.getLegend(this.chart); //两个轴只能展示一个轴的图例，所以隐藏
//params.legend = this.getLegend(this.chart);
return params; return params;
}, },
@ -755,6 +675,116 @@ export default {
return axis 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) { setSizeSetting(setting) {
let customAttr = undefined; let customAttr = undefined;
if (this.chart.customAttr) { if (this.chart.customAttr) {
@ -1044,7 +1074,7 @@ export default {
}, },
checkSelected(param) { checkSelected(param) {
return (this.linkageActiveParam.name === param.name || (this.linkageActiveParam.name === 'NO_DATA' && !param.name)) && 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) { trackClick(trackAction) {