feat--地图系列更新

report-ui/src/assets/iconfont2/demo_index.html

@@ -55,15 +55,9 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe60e;</span>
+              <span class="icon iconfont">&#xe627;</span>
                 <div class="name">地图</div>
-                <div class="code-name">&amp;#xe60e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe884;</span>
-                <div class="name">地图</div>
-                <div class="code-name">&amp;#xe884;</div>
+                <div class="code-name">&amp;#xe627;</div>
               </li>
           
           </ul>
@@ -84,9 +78,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1702535676905') format('woff2'),
-       url('iconfont.woff?t=1702535676905') format('woff'),
-       url('iconfont.ttf?t=1702535676905') format('truetype');
+  src: url('iconfont.woff2?t=1702540060096') format('woff2'),
+       url('iconfont.woff?t=1702540060096') format('woff'),
+       url('iconfont.ttf?t=1702540060096') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -113,20 +107,11 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
-            <span class="icon iconfont icon-03"></span>
+            <span class="icon iconfont icon-ditu1"></span>
             <div class="name">
               地图
             </div>
-            <div class="code-name">.icon-03
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-ditu"></span>
-            <div class="name">
-              地图
-            </div>
-            <div class="code-name">.icon-ditu
+            <div class="code-name">.icon-ditu1
             </div>
           </li>
           
@@ -159,18 +144,10 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-03"></use>
-                </svg>
-                <div class="name">地图</div>
-                <div class="code-name">#icon-03</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-ditu"></use>
+                  <use xlink:href="#icon-ditu1"></use>
                 </svg>
                 <div class="name">地图</div>
-                <div class="code-name">#icon-ditu</div>
+                <div class="code-name">#icon-ditu1</div>
             </li>
           
           </ul>

report-ui/src/assets/iconfont2/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4369261 */
-  src: url('iconfont.woff2?t=1702535676905') format('woff2'),
-       url('iconfont.woff?t=1702535676905') format('woff'),
-       url('iconfont.ttf?t=1702535676905') format('truetype');
+  src: url('iconfont.woff2?t=1702540060096') format('woff2'),
+       url('iconfont.woff?t=1702540060096') format('woff'),
+       url('iconfont.ttf?t=1702540060096') format('truetype');
 }
 
 .iconfont {
@@ -13,11 +13,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-03:before {
-  content: "\e60e";
-}
-
-.icon-ditu:before {
-  content: "\e884";
+.icon-ditu1:before {
+  content: "\e627";
 }
 

report-ui/src/assets/iconfont2/iconfont.json

@@ -6,18 +6,11 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "1236837",
+      "icon_id": "7463933",
       "name": "地图",
-      "font_class": "03",
-      "unicode": "e60e",
-      "unicode_decimal": 58894
-    },
-    {
-      "icon_id": "2076231",
-      "name": "地图",
-      "font_class": "ditu",
-      "unicode": "e884",
-      "unicode_decimal": 59524
+      "font_class": "ditu1",
+      "unicode": "e627",
+      "unicode_decimal": 58919
     }
   ]
 }

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

@@ -3,7 +3,7 @@ export const widgetBarMap = {
   type: 'mapChart',
   tabName: '地图',
   label: '柱形地图',
-  icon: 'iconzhongguoditu',
+  icon: 'icon-ditu1',
   options: {
     // 配置
     setup: [
@@ -30,42 +30,42 @@ export const widgetBarMap = {
         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: '浙江' },
+          {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'
       },
@@ -276,10 +276,10 @@ export const widgetBarMap = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'bold', name: '粗体' },
-                { code: 'bolder', name: '特粗体' },
-                { code: 'lighter', name: '细体' }
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
               ],
               value: 'normal'
             },
@@ -310,6 +310,22 @@ export const widgetBarMap = {
               ],
               value: 'sans-serif'
             },
+            {
+              type: 'vue-color',
+              label: '0%渐变色',
+              name: 'fontColor0',
+              required: false,
+              placeholder: '',
+              value: '#073684'
+            },
+            {
+              type: 'vue-color',
+              label: '100%渐变色',
+              name: 'fontColor100',
+              required: false,
+              placeholder: '',
+              value: '#061E3D'
+            },
             {
               type: 'el-input-number',
               label: '边界线宽度',
@@ -326,60 +342,76 @@ export const widgetBarMap = {
               placeholder: '',
               value: '#fff'
             },
-          ]
-        },
-        {
-          name: '柱形设置',
-          list: [
             {
-              type: 'el-input-number',
-              label: '高度比',
-              name: 'heightRate',
+              type: 'el-select',
+              label: '边界线类型',
+              name: 'borderType',
               required: false,
               placeholder: '',
-              value: 5,
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '斑点'},
+              ],
+              value: 'solid'
             },
             {
-              type: 'el-input-number',
-              label: '柱体宽度',
-              name: 'barWidth',
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'shadowColor',
               required: false,
               placeholder: '',
-              value: 20,
+              value: 'rgba(10,76,139,1)'
             },
             {
               type: 'el-input-number',
-              label: '柱底外圆大小',
-              name: 'barBottomOutSymbolSize',
+              label: '阴影模糊系数',
+              name: 'shadowBlur',
               required: false,
               placeholder: '',
-              value: 30,
+              value: 10
             },
-          ],
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'opacity',
+              required: false,
+              placeholder: '',
+              value: 100
+            },
+          ]
         },
         {
-          name: '数值设置',
+          name: '地图高亮设置',
           list: [
             {
               type: 'el-switch',
               label: '文字显示',
-              name: 'isShowFontText',
+              name: 'isShowEmphasisLabel',
               required: false,
               placeholder: '',
-              value: true,
+              value: true
             },
             {
               type: 'el-input-number',
               label: '文字大小',
-              name: 'fontTextSize',
+              name: 'emphasisLabelFontSize',
               required: false,
               placeholder: '',
-              value: 16,
+              value: 12,
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'emphasisLabelFontColor',
+              required: false,
+              placeholder: '',
+              value: '#D4EEFF'
             },
             {
               type: 'el-select',
               label: '文字粗细',
-              name: 'fontTextWeight',
+              name: 'emphasisLabelFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -393,20 +425,20 @@ export const widgetBarMap = {
             {
               type: 'el-select',
               label: '文字风格',
-              name: 'fontTextStyle',
+              name: 'emphasisLabelFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'italic', name: 'italic斜体' },
-                { code: 'oblique', name: 'oblique斜体' },
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
               ],
               value: 'normal'
             },
             {
               type: 'el-select',
               label: '文字字体',
-              name: 'fontTextFamily',
+              name: 'emphasisLabelFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -417,26 +449,76 @@ export const widgetBarMap = {
               ],
               value: 'sans-serif'
             },
+            {
+              type: 'vue-color',
+              label: '0%渐变色',
+              name: 'emphasisLabelFontColor0',
+              required: false,
+              placeholder: '',
+              value: '#073684'
+            },
+            {
+              type: 'vue-color',
+              label: '100%渐变色',
+              name: 'emphasisLabelFontColor100',
+              required: false,
+              placeholder: '',
+              value: 'rgba(199, 21, 133, 1)'
+            },
+          ]
+        },
+        {
+          name: '柱形设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '高度比',
+              name: 'heightRate',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-input-number',
+              label: '柱体宽度',
+              name: 'barWidth',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-input-number',
+              label: '柱底外圆大小',
+              name: 'barBottomOutSymbolSize',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+          ],
+        },
+        {
+          name: '数值设置',
+          list: [
             {
               type: 'el-switch',
-              label: '数值显示',
-              name: 'isShowFontData',
+              label: '文字显示',
+              name: 'isShowFontText',
               required: false,
               placeholder: '',
               value: true,
             },
             {
               type: 'el-input-number',
-              label: '数值大小',
-              name: 'fontDataSize',
+              label: '文字大小',
+              name: 'fontTextSize',
               required: false,
               placeholder: '',
               value: 16,
             },
             {
               type: 'el-select',
-              label: '数值粗细',
-              name: 'fontDataWeight',
+              label: '文字粗细',
+              name: 'fontTextWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -449,21 +531,21 @@ export const widgetBarMap = {
             },
             {
               type: 'el-select',
-              label: '字体风格',
-              name: 'fontDataStyle',
+              label: '文字风格',
+              name: 'fontTextStyle',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'normal', name: '正常' },
-                { code: 'italic', name: 'italic斜体' },
-                { code: 'oblique', name: 'oblique斜体' },
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
               ],
               value: 'normal'
             },
             {
               type: 'el-select',
-              label: '数值字体',
-              name: 'fontDataFamily',
+              label: '文字字体',
+              name: 'fontTextFamily',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -474,68 +556,26 @@ export const widgetBarMap = {
               ],
               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',
+              label: '数值显示',
+              name: 'isShowFontData',
               required: false,
               placeholder: '',
-              value: true
+              value: true,
             },
             {
               type: 'el-input-number',
-              label: '字体字号',
-              name: 'tooltipFontSize',
-              required: false,
-              placeholder: '',
-              value: 16
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'tooltipColor',
+              label: '数值大小',
+              name: 'fontDataSize',
               required: false,
               placeholder: '',
-              value: '#00FEFF'
+              value: 16,
             },
             {
               type: 'el-select',
-              label: '字体粗细',
-              name: 'tooltipFontWeight',
+              label: '数值粗细',
+              name: 'fontDataWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -549,7 +589,7 @@ export const widgetBarMap = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'tooltipFontStyle',
+              name: 'fontDataStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -561,8 +601,8 @@ export const widgetBarMap = {
             },
             {
               type: 'el-select',
-              label: '字体系列',
-              name: 'tooltipFontFamily',
+              label: '数值字体',
+              name: 'fontDataFamily',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -583,7 +623,7 @@ export const widgetBarMap = {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+              value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
             },
           ],
         },

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

@@ -79,7 +79,7 @@ export default {
         geo: {
           map: "china",
           show: true,
-          roam: false,
+          roam: true,
           layoutSize: "80%",
           label: {
             emphasis: {
@@ -114,75 +114,6 @@ export default {
           },
         },
         series: [
-          {
-            aspectScale: 0.75,
-            type: 'map',
-            map: 'china',
-            //roam: true,
-            effect: {
-              show: false,
-              period: 6,
-              trailLength: 0.7,
-              color: "#fff",
-              symbolSize: 3,
-            },
-            label: {
-              normal: {
-                //调整数值
-                position: "right",
-                // 地图省市区显隐
-                show: false,
-                color: "#53D9FF",
-                fontSize: 20,
-              },
-              emphasis: {
-                show: true,
-              },
-            },
-            itemStyle: {
-              normal: {
-                //地图块颜色
-                areaColor: {
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#073684", // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "#061E3D", // 100% 处的颜色
-                    },
-                  ],
-                },
-                borderColor: "#215495",
-                borderWidth: 1,
-              },
-              //鼠标放置颜色加深
-              emphasis: {
-                areaColor: {
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#073684", // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: "#2B91B7", // 100% 处的颜色
-                    },
-                  ],
-                },
-              },
-            },
-            data: []
-          },
           // 柱状体的主干
           {
             type: 'lines',
@@ -351,8 +282,6 @@ export default {
     editorOptions() {
       this.setOptionsTitle();
       this.setOptionsGeo();
-      this.setOptionsTooltip();
-      this.setOptionsMap();
       this.setOptionsData();
     },
     // 标题设置
@@ -382,40 +311,15 @@ export default {
       };
       this.options.title = title;
     },
-    // tooltip 设置
-    setOptionsTooltip() {
-      const optionsSetup = this.optionsSetup;
-      const tooltip = {
-        trigger: "item",
-        show: optionsSetup.isShowTooltip,
-        textStyle: {
-          color: optionsSetup.tooltipColor,
-          fontSize: optionsSetup.tooltipFontSize,
-          fontWeight: optionsSetup.tooltipFontWeight,
-          fontStyle: optionsSetup.tooltipFontStyle,
-          fontFamily: optionsSetup.tooltipFontFamily,
-        },
-        formatter: function (params) {
-          if (params.seriesType == 'scatter') {
-            return params.data.name + "" + params.data.value[2];
-          } else {
-            return params.name;
-          }
-        },
-      };
-      this.options.tooltip = tooltip;
-    },
     setOptionsGeo() {
-      this.options.geo['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;
-      const label = {
-        normal: {
+      const geo = {
+        map: this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName,
+        show: true,
+        roam: true,
+        layoutSize: "80%",
+        label: {
           //调整数值
-          position: "right",
           // 地图省市区显隐
           show: optionsSetup.isShowMap,
           color: optionsSetup.fontColor,
@@ -424,54 +328,64 @@ export default {
           fontStyle: optionsSetup.fontStyle,
           fontFamily: optionsSetup.fontFamily,
         },
-        emphasis: {
-          show: false,
-        },
-      }
-      const itemStyle = {
-        normal: {
-          //地图块颜色
-          areaColor: {
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: optionsSetup.font0PreColor, // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: optionsSetup.font100PreColor, // 100% 处的颜色
-              },
-            ],
+        itemStyle: {
+          normal: {
+            //地图块颜色
+            areaColor: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: optionsSetup.fontColor0, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: optionsSetup.fontColor100, // 100% 处的颜色
+                },
+              ],
+            },
+            borderType: optionsSetup.borderType,
+            borderColor: optionsSetup.borderColor,
+            borderWidth: optionsSetup.borderWidth,
+            shadowColor: optionsSetup.shadowColor,
+            shadowBlur: optionsSetup.shadowBlur,
+            opacity: optionsSetup.opacity / 100,
           },
-          borderColor: optionsSetup.borderColor,
-          borderWidth: optionsSetup.borderWidth,
         },
         //鼠标放置颜色加深
         emphasis: {
-          areaColor: {
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "#073684", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: optionsSetup.fontHighlightColor, // 100% 处的颜色
-              },
-            ],
+          label: {
+            show: optionsSetup.isShowEmphasisLabel,
+            color: optionsSetup.emphasisLabelFontColor,
+            fontSize: optionsSetup.emphasisLabelFontSize,
+            fontWeight: optionsSetup.emphasisLabelFontWeight,
+            fontStyle: optionsSetup.emphasisLabelFontStyle,
+            fontFamily: optionsSetup.emphasisLabelFontFamily,
+          },
+          itemStyle: {
+            areaColor: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: optionsSetup.emphasisLabelFontColor0, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: optionsSetup.emphasisLabelFontColor100, // 100% 处的颜色
+                },
+              ],
+            },
           },
         },
       }
-      this.options.series[0]['label'] = label;
-      this.options.series[0]['itemStyle'] = itemStyle;
+      this.options.geo = geo;
     },
     // 计算柱图的高度比例
     calMaxHeight(val, heightRate) {