feat: S2 Event

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -305,10 +305,10 @@ public class ChartViewService {
                         filterRequest.setFieldId(fId);
 
                         DatasetTableField datasetTableField = dataSetTableFieldsService.get(fId);
-                        if(datasetTableField == null){
+                        if (datasetTableField == null) {
                             continue;
                         }
-                        if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                        if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                             filterRequest.setDatasetTableField(datasetTableField);
                             if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                                 if (CollectionUtils.isNotEmpty(filterRequest.getViewIds())) {
@@ -329,7 +329,7 @@ public class ChartViewService {
         if (ObjectUtils.isNotEmpty(requestList.getLinkageFilters())) {
             for (ChartExtFilterRequest request : requestList.getLinkageFilters()) {
                 DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
-                if(!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())){
+                if (!desensitizationList.contains(datasetTableField.getDataeaseName()) && dataeaseNames.contains(datasetTableField.getDataeaseName())) {
                     request.setDatasetTableField(datasetTableField);
                     if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
                         if (CollectionUtils.isNotEmpty(request.getViewIds())) {
@@ -814,6 +814,38 @@ public class ChartViewService {
                 }
             }
 
+            if (StringUtils.containsIgnoreCase(view.getType(), "table")) {
+                for (int i = 0; i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+                    axisChartDataDTO.setName(a.toString());
+
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    if (j > -1) {
+                        ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                        chartQuotaDTO.setId(yAxis.get(j).getId());
+                        quotaList.add(chartQuotaDTO);
+                        axisChartDataDTO.setQuotaList(quotaList);
+                        try {
+                            axisChartDataDTO.setValue(StringUtils.isEmpty(row[i]) ? null : new BigDecimal(row[i]));
+                        } catch (Exception e) {
+                            axisChartDataDTO.setValue(new BigDecimal(0));
+                        }
+                    }
+                    datas.add(axisChartDataDTO);
+                }
+            } else {
                 for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
                     AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
                     axisChartDataDTO.setField(a.toString());
@@ -840,10 +872,10 @@ public class ChartViewService {
                     } catch (Exception e) {
                         axisChartDataDTO.setValue(new BigDecimal(0));
                     }
-                axisChartDataDTO.setCategory(yAxis.get(j).getName());
                     datas.add(axisChartDataDTO);
                 }
             }
+        }
         map.put("datas", datas);
         return map;
     }

frontend/src/views/chart/chart/table/table-info.js

-import { TableSheet } from '@antv/s2'
+import { TableSheet, S2Event } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 
 export function baseTableInfo(s2, container, chart, action, tableData) {
@@ -47,6 +47,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
   }
   s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
 
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
   // theme
   const customTheme = getCustomTheme(chart)
   s2.setThemeCfg({ theme: customTheme })

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -207,17 +207,44 @@ export default {
     },
 
     antVAction(param) {
-      console.log(param)
-      if (this.chart.type === 'treemap') {
-        this.pointParam = param.data.data
-      } else {
-        this.pointParam = param.data
+      const cell = this.myChart.getCell(param.target)
+      const meta = cell.getMeta()
+      console.log(meta)
+      // if (this.chart.type === 'treemap') {
+      //   this.pointParam = param.data.data
+      // } else {
+      //   this.pointParam = param.data
+      // }
+      // if (this.trackMenu.length < 2) { // 只有一个事件直接调用
+      //   this.trackClick(this.trackMenu[0])
+      // } else { // 视图关联多个事件
+      //   this.trackBarStyle.left = param.x + 'px'
+      //   this.trackBarStyle.top = (param.y + 10) + 'px'
+      //   this.$refs.viewTrack.trackButtonClick()
+      // }
+
+      let xAxis = []
+      if (this.chart.xaxis) {
+        xAxis = JSON.parse(this.chart.xaxis)
+      }
+      let field = {}
+      if (meta.colIndex < xAxis.length) {
+        field = xAxis[meta.colIndex]
       }
+      const dimensionList = []
+      dimensionList.push({ id: field.id, value: meta.fieldValue })
+      this.pointParam = {
+        data: {
+          dimensionList: dimensionList
+        }
+      }
+      console.log(this.pointParam)
+
       if (this.trackMenu.length < 2) { // 只有一个事件直接调用
         this.trackClick(this.trackMenu[0])
       } else { // 视图关联多个事件
-        this.trackBarStyle.left = param.x + 'px'
-        this.trackBarStyle.top = (param.y + 10) + 'px'
+        this.trackBarStyle.left = 50 + 'px'
+        this.trackBarStyle.top = (50 + 10) + 'px'
         this.$refs.viewTrack.trackButtonClick()
       }
     },

frontend/src/views/chart/view/ChartEdit.vue

@@ -483,7 +483,7 @@
                     </div>
                   </el-row>
                   <el-row
-                    v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
+                    v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
                     class="padding-lr"
                     style="margin-top: 6px;"
                   >
@@ -1325,7 +1325,7 @@ export default {
         view.customAttr.label.show = true
       }
       if (view.type === 'liquid' ||
-          view.type.includes('table') ||
+          (view.type.includes('table') && view.render === 'echarts') ||
           view.type.includes('text') ||
           view.type.includes('gauge')) {
         view.drillFields = []