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) {