Parcourir la source

气泡地图功能菜单增加

qianming il y a 4 ans
Parent
commit
05c26a2a85

+ 115 - 0
report-ui/src/views/report/bigscreen/designer/tools.js

@@ -5819,6 +5819,121 @@ const widgetTools = [
               },
             ],
           },
+          {
+            name: '字体设置',
+            list: [
+              {
+                type: 'el-input-number',
+                label: '文字大小',
+                name: 'fontTextSize',
+                required: false,
+                placeholder: '',
+                value: 15,
+              },
+              {
+                type: 'vue-color',
+                label: '文字颜色',
+                name: 'fontTextColor',
+                required: false,
+                placeholder: '',
+                value: '#D4EEFF'
+              },
+              {
+                type: 'el-select',
+                label: '文字粗细',
+                name: 'fontTextWeight',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'normal', name: '正常'},
+                  {code: 'bold', name: '粗体'},
+                  {code: 'bolder', name: '特粗体'},
+                  {code: 'lighter', name: '细体'}
+                ],
+                value: 'normal'
+              },
+              {
+                type: 'el-input-number',
+                label: '数值大小',
+                name: 'fontDataSize',
+                required: false,
+                placeholder: '',
+                value: 15,
+              },
+              {
+                type: 'vue-color',
+                label: '数值颜色',
+                name: 'fontDataColor',
+                required: false,
+                placeholder: '',
+                value: '#D4EEFF'
+              },
+              {
+                type: 'el-select',
+                label: '数值粗细',
+                name: 'fontDataWeight',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'normal', name: '正常'},
+                  {code: 'bold', name: '粗体'},
+                  {code: 'bolder', name: '特粗体'},
+                  {code: 'lighter', name: '细体'}
+                ],
+                value: 'normal'
+              },
+            ],
+          },
+          {
+            name: '气泡设置',
+            list: [
+              {
+                type: 'el-input-number',
+                label: '气泡大小',
+                name: 'fontAirSize',
+                required: false,
+                placeholder: '',
+                value: 20,
+              },
+              /*{
+                type: 'vue-color',
+                label: '气泡颜色',
+                name: 'fontPieColor',
+                required: false,
+                placeholder: '',
+                value: ''
+              },*/
+            ],
+          },
+          {
+            name: '地图块颜色',
+            list: [
+              {
+                type: 'vue-color',
+                label: '0%处颜色',
+                name: 'font0PreColor',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '100%颜色',
+                name: 'font100PreColor',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '高亮颜色',
+                name: 'fontHighlightColor',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+            ],
+          },
           /*{
             name: '自定义配色',
             list: [

+ 49 - 11
report-ui/src/views/report/bigscreen/designer/widget/map/widgetAirBubbleMap.vue

@@ -255,12 +255,11 @@ export default {
             map: 'china',
             aspectScale: 0.75,
             label: {
-              normal: {
-                //formatter: '{b}',
+              normal: {//调整数值
                 position: 'right',
                 show: true,
                 color: '#53D9FF',
-                fontSize: 15
+                fontSize: 20
               },
               emphasis: {
                 show: true,
@@ -354,7 +353,8 @@ export default {
             symbolSize: function (val) {
               if (val[2] == 0) {
                 return 0;
-              };
+              }
+              ;
               return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2;
             },
             data: convertData(data),
@@ -402,6 +402,10 @@ export default {
     // 修改图标options属性
     editorOptions() {
       this.setOptionsTitle();
+      this.setOptionTextValue();
+      this.setOptionDataValue();
+      this.setOptionsData();
+      this.setOptionAirSize();
     },
     // 标题设置
     setOptionsTitle() {
@@ -423,20 +427,54 @@ export default {
       };
       this.options.title = title;
     },
+    setOptionTextValue() {
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[0]['label'];
+      const normal = {
+        position: 'right',
+        show: true,
+        color: optionsSetup.fontTextColor,
+        fontSize: optionsSetup.fontTextSize,
+        fontWeight: optionsSetup.fontTextWeight,
+      };
+      label['normal'] = normal;
+    },
+    setOptionDataValue(){
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[1]['label'];
+      const normal = {
+        show: true,
+        color: '#fff',
+        fontWeight: 'bold',
+        position: 'inside',
+        formatter: function (para) {
+          return '{cnNum|' + para.data.value[2] + '}'
+        },
+        rich: {
+          cnNum: {
+            fontSize: optionsSetup.fontDataSize,
+            color: optionsSetup.fontDataColor,
+            fontWeight:optionsSetup.fontDataWeight,
+          }
+        }
+      };
+      label['normal'] = normal;
+    },
+    setOptionAirSize(){
+      minSize4Pin = this.optionsSetup.fontAirSize
+    },
     //数据解析
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
-        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime
+        );
     },
     staticDataFn(val) {
-      const staticData = JSON.parse(val);
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "china") {
-          this.options.series[key].data = staticData;
-        }
-      }
+
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;