feat: AntV组合图支持多指标

#6853

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

@@ -97,7 +97,7 @@
               @editItemCompare="showQuotaEditCompare"
               @editItemFilter="showQuotaEditFilter"
               @onNameEdit="showRename"
-            @onQuotaItemChange="quotaItemChange"
+              @onQuotaItemChange="quotaExtItemChange"
               @onQuotaItemRemove="quotaItemRemove"
               @valueFormatter="valueFormatter"
           />
@@ -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) {

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

@@ -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) => {
+      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) => {
-
-        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);
+            return _.map(t.data, (v) => {
-
-        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 {
                 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) => {
+      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) => {
-
-        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);
+            return _.map(t.data, (v) => {
-
-        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,
+                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,
+          ...yData,
-          ..._dataExt
+          ...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) {