From 69485759e3ff73df22fb1c280e2953511fa2f7d9 Mon Sep 17 00:00:00 2001
From: qianming <isqianmin@163.com>
Date: Wed, 8 Jan 2025 10:17:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=8D=E4=BA=91=E5=9B=BE?=
 =?UTF-8?q?=EF=BC=8C=E5=BC=95=E5=85=A5echarts-wordcloud=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/package.json                        |  2 +
 .../wordcloudCharts/widget-word-cloud.js      | 35 +++++++--
 .../widget/wordcloud/widgetWordCloud.vue      | 78 ++++++++++++-------
 .../wordcloudCharts/widgetWordCloud.vue       |  2 +-
 4 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/report-ui/package.json b/report-ui/package.json
index 28a9914f..c08b434a 100644
--- a/report-ui/package.json
+++ b/report-ui/package.json
@@ -21,6 +21,8 @@
     "crypto-js": "^3.1.9-1",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
+    "echarts-wordcloud": "^2.1.0",
     "element-ui": "^2.15.14",
     "js-cookie": "2.2.0",
     "jsbarcode": "^3.11.4",
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
index bf8e5998..4e469019 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
@@ -197,7 +197,7 @@ export const widgetWordCloud = {
           ],
         },
         {
-          name: '词云范围',
+          name: '词云设置',
           list: [
             {
               type: 'el-input-number',
@@ -215,11 +215,6 @@ export const widgetWordCloud = {
               placeholder: '',
               value: 2
             },
-          ],
-        },
-        {
-          name: '词云角度',
-          list: [
             {
               type: 'el-input-number',
               label: '最大角度',
@@ -236,6 +231,34 @@ export const widgetWordCloud = {
               placeholder: '',
               value: -45
             },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'textFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
           ],
         },
         {
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
index 1a41a729..e91a3acf 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/wordcloud/widgetWordCloud.vue
@@ -1,10 +1,11 @@
 <template>
-  <div :style="styleObj">
+  <div :style="styleObj" :ref="word-cloud" class="flex can-class">
     <v-chart ref="myVChart" :option="options" autoresize />
   </div>
 </template>
 <script>
-import wordCloud from "../../../../../../static/wordCloud/echarts-wordcloud.min.js";
+import * as echarts from "echarts";
+import 'echarts-wordcloud';
 import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 export default {
@@ -34,18 +35,16 @@ export default {
               minSize: 6,
             },
             textStyle: {
-              normal: {
-                color: function () {
-                  return (
-                    "rgb(" +
-                    [
-                      Math.round(Math.random() * 160),
-                      Math.round(Math.random() * 160),
-                      Math.round(Math.random() * 160),
-                    ].join(",") +
-                    ")"
-                  );
-                },
+              fontFamily: 'sans-serif',
+              color: function () {
+                return (
+                  'rgb(' +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(',') + ')'
+                );
               },
             },
             data: [],
@@ -97,8 +96,7 @@ export default {
     // 修改图标options属性
     editorOptions() {
       this.setOptionsTitle();
-      this.setOptionsSizeRange();
-      this.setOptionsRotationRange();
+      this.setOptionsWordCloud();
       this.setOptionsTooltip();
       this.setOptionsData();
     },
@@ -129,21 +127,41 @@ export default {
       };
       this.options.title = title;
     },
-    // 词云字体范围
-    setOptionsSizeRange() {
+    // 词云设置
+    setOptionsWordCloud() {
       const optionsSetup = this.optionsSetup;
-      this.options.series[0].sizeRange = [
-        optionsSetup.minRangeSize,
-        optionsSetup.maxRangeSize,
-      ];
-    },
-    // 文字角度
-    setOptionsRotationRange() {
-      const optionsSetup = this.optionsSetup;
-      this.options.series[0].rotationRange = [
-        optionsSetup.minRotationRange,
-        optionsSetup.maxRotationRange,
-      ];
+      const series = {
+        type: "wordCloud",
+        size: ["9%", "99%"],
+        sizeRange: [
+          optionsSetup.minRangeSize,
+          optionsSetup.maxRangeSize,
+        ],
+        textRotation: [0, 45, 90, -45],
+        rotationRange: [
+          optionsSetup.minRotationRange,
+          optionsSetup.maxRotationRange,
+        ],
+        shape: "circle",
+        textPadding: 0,
+        autoSize: {
+          enable: true,
+          minSize: 6,
+        },
+        textStyle: {
+          fontWeight: optionsSetup.textFontWeight,
+          color: function () {
+            return (
+              'rgb(' +
+              [
+                Math.round(Math.random() * 160),
+                Math.round(Math.random() * 160),
+                Math.round(Math.random() * 160),
+              ].join(',') + ')'
+            );
+          },
+        },
+      }
     },
     // tooltip 设置
     setOptionsTooltip() {
diff --git a/report-ui/src/views/screenDesigner/widget/wordcloudCharts/widgetWordCloud.vue b/report-ui/src/views/screenDesigner/widget/wordcloudCharts/widgetWordCloud.vue
index 892f963a..08a90114 100644
--- a/report-ui/src/views/screenDesigner/widget/wordcloudCharts/widgetWordCloud.vue
+++ b/report-ui/src/views/screenDesigner/widget/wordcloudCharts/widgetWordCloud.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import wordCloud from "../../../../../static/wordCloud/echarts-wordcloud.min.js";
+import 'echarts-wordcloud';
 
 export default {
   name: "widgetWordCloud",