feat--柱形地图优化，支持配置项选择省市区

report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js

@@ -1,7 +1,7 @@
 export const widgetBarMap = {
   code: 'widgetBarMap',
   type: 'mapChart',
-  tabName: '中国地图',
+  tabName: '地图',
   label: '柱形地图',
   icon: 'iconzhongguoditu',
   options: {
@@ -13,7 +13,7 @@ export const widgetBarMap = {
         name: 'layerName',
         required: false,
         placeholder: '',
-        value: '中国地图-柱形图',
+        value: '柱形图',
       },
       {
         type: 'vue-color',
@@ -23,6 +23,52 @@ export const widgetBarMap = {
         placeholder: '',
         value: ''
       },
+      {
+        type: 'el-select',
+        label: '地图名称',
+        name: 'mapName',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          { code: 'world', name: '世界' },
+          { code: 'china', name: '中国' },
+          { code: '安徽', name: '安徽' },
+          { code: '澳门', name: '澳门' },
+          { code: '北京', name: '北京' },
+          { code: '重庆', name: '重庆' },
+          { code: '福建', name: '福建' },
+          { code: '甘肃', name: '甘肃' },
+          { code: '广东', name: '广东' },
+          { code: '广西', name: '广西' },
+          { code: '贵州', name: '贵州' },
+          { code: '海南', name: '海南' },
+          { code: '河北', name: '河北' },
+          { code: '黑龙江', name: '黑龙江' },
+          { code: '河南', name: '河南' },
+          { code: '湖北', name: '湖北' },
+          { code: '湖南', name: '湖南' },
+          { code: '江苏', name: '江苏' },
+          { code: '江西', name: '江西' },
+          { code: '吉林', name: '吉林' },
+          { code: '辽宁', name: '辽宁' },
+          { code: '内蒙古', name: '内蒙古' },
+          { code: '宁夏', name: '宁夏' },
+          { code: '青海', name: '青海' },
+          { code: '山东', name: '山东' },
+          { code: '上海', name: '上海' },
+          { code: '山西', name: '山西' },
+          { code: '陕西', name: '陕西' },
+          { code: '四川', name: '四川' },
+          { code: '台湾', name: '台湾' },
+          { code: '天津', name: '天津' },
+          { code: '香港', name: '香港' },
+          { code: '新疆', name: '新疆' },
+          { code: '西藏', name: '西藏' },
+          { code: '云南', name: '云南' },
+          { code: '浙江', name: '浙江' },
+        ],
+        value: 'china'
+      },
       [
         {
           name: '标题设置',
@@ -30,7 +76,7 @@ export const widgetBarMap = {
             {
               type: 'el-switch',
               label: '标题显示',
-              name: 'isNoTitle',
+              name: 'isShowTitle',
               required: false,
               placeholder: '',
               value: true,
@@ -38,7 +84,7 @@ export const widgetBarMap = {
             {
               type: 'el-input-text',
               label: '标题名',
-              name: 'titleText',
+              name: 'text',
               required: false,
               placeholder: '',
               value: '',
@@ -88,21 +134,22 @@ export const widgetBarMap = {
             },
             {
               type: 'el-select',
-              label: '字体位置',
-              name: 'textAlign',
+              label: '字体系列',
+              name: 'textFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [
-                {code: 'center', name: '居中'},
-                {code: 'left', name: '左对齐'},
-                {code: 'right', name: '右对齐'},
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
               ],
-              value: 'center'
+              value: 'sans-serif'
             },
             {
               type: 'el-input-text',
               label: '副标题名',
-              name: 'subText',
+              name: 'subtext',
               required: false,
               placeholder: '',
               value: ''
@@ -110,7 +157,7 @@ export const widgetBarMap = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'subtextColor',
               required: false,
               placeholder: '',
               value: 'rgba(30, 144, 255, 1)'
@@ -118,7 +165,7 @@ export const widgetBarMap = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'subTextFontSize',
+              name: 'subtextFontSize',
               required: false,
               placeholder: '',
               value: 20
@@ -126,7 +173,7 @@ export const widgetBarMap = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'subTextFontWeight',
+              name: 'subtextFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -140,7 +187,7 @@ export const widgetBarMap = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'subTextFontStyle',
+              name: 'subtextFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -150,6 +197,49 @@ export const widgetBarMap = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'subtextFontFamily',
+              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'
+            },
+            {
+              type: 'el-select',
+              label: '左右位置',
+              name: 'titleLeft',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-slider',
+              label: '上下间距',
+              name: 'titleTop',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-input-number',
+              label: '主副标题间距',
+              name: 'titleItemGap',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
           ],
         },
         {
@@ -157,66 +247,86 @@ export const widgetBarMap = {
           list: [
             {
               type: 'el-switch',
-              label: '省市区显示',
+              label: '文字显示',
               name: 'isShowMap',
               required: false,
               placeholder: '',
-              value: false,
+              value: false
             },
             {
               type: 'el-input-number',
               label: '文字大小',
-              name: 'fontSizeMap',
+              name: 'fontSize',
               required: false,
               placeholder: '',
-              value: 20,
+              value: 12,
             },
             {
               type: 'vue-color',
               label: '文字颜色',
-              name: 'colorMap',
+              name: 'fontColor',
               required: false,
               placeholder: '',
-              value: '#53D9FF'
-            }
-          ]
-        },
-        {
-          name: '地图块颜色',
-          list: [
+              value: '#D4EEFF'
+            },
             {
-              type: 'vue-color',
-              label: '0%处颜色',
-              name: 'font0PreColor',
+              type: 'el-select',
+              label: '文字粗细',
+              name: 'fontWeight',
               required: false,
               placeholder: '',
-              value: '#073684'
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
             },
             {
-              type: 'vue-color',
-              label: '100%颜色',
-              name: 'font100PreColor',
+              type: 'el-select',
+              label: '文字风格',
+              name: 'fontStyle',
               required: false,
               placeholder: '',
-              value: '#061E3D'
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
             },
             {
-              type: 'vue-color',
-              label: '高亮渐变色',
-              name: 'fontHighlightColor',
+              type: 'el-select',
+              label: '文字字体',
+              name: 'fontFamily',
               required: false,
               placeholder: '',
-              value: '#2B91B7'
+              selectOptions: [
+                {code: 'sans-serif', name: 'sans-serif'},
+                {code: 'serif', name: 'serif'},
+                {code: 'Arial', name: 'Arial'},
+                {code: 'Courier New', name: 'Courier New'},
+              ],
+              value: 'sans-serif'
+            },
+            {
+              type: 'el-input-number',
+              label: '边界线宽度',
+              name: 'borderWidth',
+              required: false,
+              placeholder: '',
+              value: 0
             },
             {
               type: 'vue-color',
-              label: '边界颜色',
+              label: '边界线颜色',
               name: 'borderColor',
               required: false,
               placeholder: '',
-              value: '#061E3D'
+              value: '#fff'
             },
-          ],
+          ]
         },
         {
           name: '柱形设置',
@@ -264,7 +374,7 @@ export const widgetBarMap = {
               name: 'fontTextSize',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 16,
             },
             {
               type: 'el-select',
@@ -282,7 +392,7 @@ export const widgetBarMap = {
             },
             {
               type: 'el-select',
-              label: '字体风格',
+              label: '文字风格',
               name: 'fontTextStyle',
               required: false,
               placeholder: '',
@@ -293,6 +403,20 @@ export const widgetBarMap = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '文字字体',
+              name: 'fontTextFamily',
+              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'
+            },
             {
               type: 'el-switch',
               label: '数值显示',
@@ -307,7 +431,7 @@ export const widgetBarMap = {
               name: 'fontDataSize',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 16,
             },
             {
               type: 'el-select',
@@ -336,15 +460,66 @@ export const widgetBarMap = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '数值字体',
+              name: 'fontDataFamily',
+              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'
+            },
+          ],
+        },
+        {
+          name: '地图块颜色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%处颜色',
+              name: 'font0PreColor',
+              required: false,
+              placeholder: '',
+              value: '#073684'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'font100PreColor',
+              required: false,
+              placeholder: '',
+              value: '#061E3D'
+            },
+            {
+              type: 'vue-color',
+              label: '高亮渐变色',
+              name: 'fontHighlightColor',
+              required: false,
+              placeholder: '',
+              value: '#2B91B7'
+            },
           ],
         },
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'tipsFontSize',
+              name: 'tooltipFontSize',
               required: false,
               placeholder: '',
               value: 16
@@ -352,11 +527,52 @@ export const widgetBarMap = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'tipsColor',
+              name: 'tooltipColor',
               required: false,
               placeholder: '',
               value: '#00FEFF'
             },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'tooltipFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'tooltipFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'tooltipFontFamily',
+              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'
+            },
           ],
         },
         {
@@ -471,7 +687,7 @@ export const widgetBarMap = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 400,
+        value: 450,
       },
     ]
   }

report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue

@@ -7,6 +7,42 @@
 import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 import "../../../../../../node_modules/echarts/map/js/china.js";
+import "../../../../../../node_modules/echarts/map/js/world.js";
+import "../../../../../../node_modules/echarts/map/js/province/anhui";
+import "../../../../../../node_modules/echarts/map/js/province/aomen";
+import "../../../../../../node_modules/echarts/map/js/province/beijing";
+import "../../../../../../node_modules/echarts/map/js/province/chongqing";
+import "../../../../../../node_modules/echarts/map/js/province/fujian";
+import "../../../../../../node_modules/echarts/map/js/province/gansu";
+import "../../../../../../node_modules/echarts/map/js/province/guangxi";
+import "../../../../../../node_modules/echarts/map/js/province/guizhou";
+import "../../../../../../node_modules/echarts/map/js/province/hainan";
+import "../../../../../../node_modules/echarts/map/js/province/hebei";
+import "../../../../../../node_modules/echarts/map/js/province/heilongjiang";
+import "../../../../../../node_modules/echarts/map/js/province/henan";
+import "../../../../../../node_modules/echarts/map/js/province/hubei";
+import "../../../../../../node_modules/echarts/map/js/province/hunan";
+import "../../../../../../node_modules/echarts/map/js/province/jiangsu";
+import "../../../../../../node_modules/echarts/map/js/province/jiangxi";
+import "../../../../../../node_modules/echarts/map/js/province/jilin";
+import "../../../../../../node_modules/echarts/map/js/province/liaoning";
+import "../../../../../../node_modules/echarts/map/js/province/neimenggu";
+import "../../../../../../node_modules/echarts/map/js/province/ningxia";
+import "../../../../../../node_modules/echarts/map/js/province/qinghai";
+import "../../../../../../node_modules/echarts/map/js/province/shandong";
+import "../../../../../../node_modules/echarts/map/js/province/shanghai";
+import "../../../../../../node_modules/echarts/map/js/province/shanxi";
+import "../../../../../../node_modules/echarts/map/js/province/shanxi1";
+import "../../../../../../node_modules/echarts/map/js/province/sichuan";
+import "../../../../../../node_modules/echarts/map/js/province/taiwan";
+import "../../../../../../node_modules/echarts/map/js/province/tianjin";
+import "../../../../../../node_modules/echarts/map/js/province/xianggang";
+import "../../../../../../node_modules/echarts/map/js/province/xinjiang";
+import "../../../../../../node_modules/echarts/map/js/province/xizang";
+import "../../../../../../node_modules/echarts/map/js/province/yunnan";
+import "../../../../../../node_modules/echarts/map/js/province/zhejiang";
+
+
 import {conversionProvince} from "@/utils/china";
 import echarts from "echarts";
 
@@ -73,7 +109,7 @@ export default {
                   ],
                   false
                 ),
-                borderWidth: 3,
+                borderWidth: 1,
                 shadowColor: "rgba(10,76,139,1)",
                 shadowOffsetY: 0,
                 shadowBlur: 60,
@@ -318,6 +354,7 @@ export default {
     // 修改图标options属性
     editorOptions() {
       this.setOptionsTitle();
+      this.setOptionsGeo();
       this.setOptionsTooltip();
       this.setOptionsMap();
       this.setOptionsData();
@@ -325,22 +362,27 @@ export default {
     // 标题设置
     setOptionsTitle() {
       const optionsSetup = this.optionsSetup;
-      const title = {};
-      title.text = optionsSetup.titleText;
-      title.show = optionsSetup.isNoTitle;
-      title.left = optionsSetup.textAlign;
-      title.textStyle = {
-        color: optionsSetup.textColor,
-        fontSize: optionsSetup.textFontSize,
-        fontWeight: optionsSetup.textFontWeight,
-        fontStyle: optionsSetup.textFontStyle,
-      };
-      title.subtext = optionsSetup.subText;
-      title.subtextStyle = {
-        color: optionsSetup.subTextColor,
-        fontWeight: optionsSetup.subTextFontWeight,
-        fontSize: optionsSetup.subTextFontSize,
-        fontStyle: optionsSetup.subTextFontStyle,
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
       };
       this.options.title = title;
     },
@@ -349,11 +391,13 @@ export default {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
-        show: true,
-        enterable: true,
+        show: optionsSetup.isShowTooltip,
         textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
         },
         formatter: function (params) {
           if (params.seriesType == 'scatter') {
@@ -365,6 +409,10 @@ export default {
       };
       this.options.tooltip = tooltip;
     },
+    setOptionsGeo(){
+      this.options.geo[0]['map'] = this.optionsSetup.mapName == ''? "china" : this.optionsSetup.mapName;
+      this.options.series[0]['map'] = this.optionsSetup.mapName == ''? "china" : this.optionsSetup.mapName;
+    },
     // 地图设置
     setOptionsMap() {
       const optionsSetup = this.optionsSetup;
@@ -374,8 +422,11 @@ export default {
           position: "right",
           // 地图省市区显隐
           show: optionsSetup.isShowMap,
-          color: optionsSetup.colorMap,
-          fontSize: optionsSetup.fontSizeMap,
+          color: optionsSetup.fontColor,
+          fontSize: optionsSetup.fontSize,
+          fontWeight: optionsSetup.fontWeight,
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
         },
         emphasis: {
           show: false,
@@ -401,7 +452,7 @@ export default {
             ],
           },
           borderColor: optionsSetup.borderColor,
-          borderWidth: 1,
+          borderWidth: optionsSetup.borderWidth,
         },
         //鼠标放置颜色加深
         emphasis: {
@@ -500,6 +551,7 @@ export default {
               },
               fontWeight: optionsSetup.fontDataWeight,
               fontStyle: optionsSetup.fontDataStyle,
+              fontFamily: optionsSetup.fontDataFamily,
             },
           },
           position: "top"
@@ -538,6 +590,7 @@ export default {
           },
           fontWeight: optionsSetup.fontTextWeight,
           fontStyle: optionsSetup.fontTextStyle,
+          fontFamily: optionsSetup.fontTextFamily,
           distance: 10,
         },
         symbol: 'circle',
@@ -653,7 +706,6 @@ export default {
       for (const i in val) {
         arrColor.push(customColor[i % customColor.length].color)
       }
-
       this.options.series[1] = this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate);
       this.options.series[2] = this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate);
       this.options.series[3] = this.getOptionsBarBottom(optionsSetup, arrColor, allData);
@@ -711,11 +763,10 @@ export default {
       for (const i in val) {
         arrColor.push(customColor[i % customColor.length].color)
       }
-
-      this.$set(this.options.series,1,this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate))
-      this.$set(this.options.series,2,this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate))
-      this.$set(this.options.series,3,this.getOptionsBarBottom(optionsSetup, arrColor, allData))
-      this.$set(this.options.series,4,this.getOptionsBarBottomOut(optionsSetup, arrColor, allData))
+      this.$set(this.options.series, 1, this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate))
+      this.$set(this.options.series, 2, this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate))
+      this.$set(this.options.series, 3, this.getOptionsBarBottom(optionsSetup, arrColor, allData))
+      this.$set(this.options.series, 4, this.getOptionsBarBottomOut(optionsSetup, arrColor, allData))
     },
   },
 };