feat--饼图联动

doc/docs/guide/chartsLinkage.md

@@ -1,4 +1,5 @@
 ## 简要说明
+
 现有系统联动的本质是数据集查询参数“示例值”的替换， 现在联动有两种。<br>
 
 - 表单联动 <br>
@@ -7,6 +8,9 @@
 - 图表联动：<br>
   目前联动主要集中在柱状图、折线图、饼图等这种二维图表，二维图表是指图表只支持2个字段的数据集，当然并不是说需要3个字段的堆叠图（柱状/折线）不支持联动，而是这种三维图表去联动二维图表会带来一些问题，反之二维的去联动三维的同样存在问题，因此目前源代码中只添加了部分二维图表的联动。<br>
 
+**注：**
+没有多级联动，联动都是一对一的。例如，时间筛选器绑定了A柱图，A柱图绑定了B饼图，当使用时间筛选器更改时间后，只会更新绑定的A柱图，A绑定的B饼图并不会更新数据。<br>
+
 ## 表单联动
 
 ### 下拉框
@@ -169,8 +173,6 @@ function doHandleMonth(month) {
 }
 ```
 
-
-
 ## 图表联动
 
 - 简介 <br>
@@ -181,7 +183,8 @@ function doHandleMonth(month) {
   ![img11](../picture/chartsLinkage/img_11.png) <br>
 
 - **注意事项！！！** <br>
-  1、用于被联动的动态数据集比如上面的示例数据集，查询参数在sql里面需要用 '' 或者 ""，因为时间筛选器格式传递的数据中间有空格的。当然，如果不绑定时间筛选器那么sql里面直接使用数据库时间函数就行，例如DATE_FORMAT。<br>
+  1、用于被联动的动态数据集比如上面的示例数据集，查询参数在sql里面需要用 '' 或者 ""
+  ，因为时间筛选器格式传递的数据中间有空格的。当然，如果不绑定时间筛选器那么sql里面直接使用数据库时间函数就行，例如DATE_FORMAT。<br>
   2、联动与被联动的图表必须有相同的数据格式。理论上多维向低维填充数据是没问题的，但实际操作时带来的问题会很多，因此当前版本高维图表都不支持图表组件联动。<br>
   3、被联动的图表的动态数据集必须得有查询参数。说的简单一点就是联动始终都是数据集参数的传递，图表只是数据的载体表象。<br>
   4、使用后的情况和表单组件使用后情况一致。<br>

report-ui/src/views/bigscreenDesigner/designer/linkageLogic.js

@@ -43,6 +43,16 @@ export const lickageParamsConfig = [
     code: 'widgetPiePercentageChart',
     paramsKey: ['value']
   },
+  {
+    name: '饼图',
+    code: 'widget-piechart',
+    paramsKey: ['name', 'value']
+  },
+  {
+    name: '南丁格尔玫瑰图',
+    code: 'WidgetPieNightingaleRoseArea',
+    paramsKey: ['name', 'value']
+  },
 ]
 
 export const getOneConfigByCode = function (code) {

report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js

@@ -338,6 +338,18 @@ export const widgetPieNightingale = {
             },
           ],
         },
+        {
+          name: '组件联动',
+          list: [
+            {
+              type: 'componentLinkage',
+              label: '',
+              name: 'componentLinkage',
+              required: false,
+              value: []
+            }
+          ]
+        }
       ],
     ],
     // 数据

report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -1,16 +1,22 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize />
   </div>
 </template>
 
 <script>
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
   components: {},
   props: {
     value: Object,
     ispreview: Boolean,
+    flagInter: null,
   },
   data() {
     return {
@@ -55,6 +61,9 @@ export default {
         background: this.optionsSetup.background,
       };
     },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
@@ -74,6 +83,8 @@ export default {
     this.optionsCollapse = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+    originWidgetLinkageLogic(this); // 联动-源组件逻辑
   },
   methods: {
     // 修改图标options属性
@@ -195,8 +206,25 @@ export default {
       this.options = Object.assign({}, this.options);
     },
     // 数据解析
-    setOptionsData() {
+    setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      // 联动接收者逻辑开始
+      optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
+      const myDynamicData = optionsData.dynamicData;
+      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
+      if (
+        e &&
+        optionsData.dataType !== "staticData" &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        const keyArr = Object.keys(myDynamicData.contextData);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);