调整词云图，引入echarts-wordcloud插件

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",

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'
+            },
           ],
         },
         {

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

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",