feat--新增中国地图-柱形地图-静态

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

@@ -0,0 +1,510 @@
+export const widgetBarMap = {
+  code: 'widgetBarMap',
+  type: 'mapChart',
+  tabName: '中国地图',
+  label: '柱形地图',
+  icon: 'iconzhongguoditu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '中国地图-柱形图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题显示',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题名',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              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: 'textFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题名',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'subTextFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'italic', name: 'italic斜体'},
+                {code: 'oblique', name: 'oblique斜体'},
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '地图设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '省市区显示',
+              name: 'isShowMap',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '文字大小',
+              name: 'fontSizeMap',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'colorMap',
+              required: false,
+              placeholder: '',
+              value: '#53D9FF'
+            }
+          ]
+        },
+        {
+          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'
+            },
+            {
+              type: 'vue-color',
+              label: '边界颜色',
+              name: 'borderColor',
+              required: false,
+              placeholder: '',
+              value: '#061E3D'
+            },
+          ],
+        },
+        {
+          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: 'vue-color',
+              label: '柱体颜色',
+              name: 'barColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(22,255,255, 1)'
+            },*/
+            {
+              type: 'el-input-number',
+              label: '柱底外圆大小',
+              name: 'barBottomOutSymbolSize',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+/*            {
+              type: 'vue-color',
+              label: '柱底外圆颜色',
+              name: 'barBottomOutColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(22,255,255, 1)'
+            },*/
+          ],
+        },
+        {
+          name: '数值设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '文字显示',
+              name: 'isShowFontText',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              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-select',
+              label: '字体风格',
+              name: 'fontTextStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-switch',
+              label: '数值显示',
+              name: 'isShowFontData',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              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'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'fontDataStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tipsColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+            },
+          ],
+        },
+      ],
+    ],
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 600000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {name: "北京仓库", latitude: 116.4073, longitude: 39.9041, value: 70,},
+          {name: "天津仓库", latitude: 117.2015, longitude: 39.0853, value: 20,},
+          {name: "上海仓库", latitude: 121.4648, longitude: 31.2891, value: 150,},
+          {name: "重庆仓库", latitude: 107.7539, longitude: 30.1904, value: 75,},
+          {name: "河南仓库", latitude: 113.753, longitude: 34.767, value: 83,},
+          {name: "云南仓库", latitude: 102.7093, longitude: 25.0464, value: 50,},
+          {name: "安徽仓库", latitude: 117.3301, longitude: 31.7345, value: 36,},
+          {name: "山东仓库", latitude: 117.0207, longitude: 36.6702, value: 39,},
+          {name: "江西仓库", latitude: 115.8165, longitude: 28.6372, value: 23,},
+          {name: "青海仓库", latitude: 101.7804, longitude: 36.6225, value: 27,},
+          {name: "四川仓库", latitude: 104.0764, longitude: 30.6516, value: 46,},
+          {name: "海南仓库", latitude: 110.3487, longitude: 20.0186, value: 16,},
+          {name: "西藏仓库", latitude: 91.1174, longitude: 29.6486, value: 31,},
+          {name: "宁夏仓库", latitude: 106.2588, longitude: 38.4722, value: 47,},
+          {name: "新疆仓库", latitude: 87.6285, longitude: 43.7933, value: 42,},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'MAP_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ]
+  }
+}

report-ui/src/views/bigscreenDesigner/designer/tools/main.js

@@ -47,6 +47,7 @@ import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxi
 import {widgetBorder} from "./configure/styleWidget/widget-border";
 import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
 import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
+import {widgetBarMap} from "./configure/mapCharts/widget-bar-map";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -90,4 +91,5 @@ export const widgetTool = [
   // widgetInput,
   widgetFormTime,
   widgetBarDoubleYaxis,
+  widgetBarMap
 ]

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

@@ -0,0 +1,850 @@
+<template>
+  <div :style="styleObj">
+    <v-chart ref="myVChart" :options="options" autoresize/>
+  </div>
+</template>
+<script>
+import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
+
+import "../../../../../../node_modules/echarts/map/js/china.js";
+import {conversionProvince} from "@/utils/china";
+import echarts from "echarts";
+
+let geoCoordMap = conversionProvince;
+let data = [
+  {
+    name: "北京市",
+    value: 70,
+  },
+  {
+    name: "天津市",
+    value: 20,
+  },
+  {
+    name: "上海市",
+    value: 150,
+  },
+  {
+    name: "重庆市",
+    value: 75,
+  },
+  {
+    name: "河北省",
+    value: 40,
+  },
+  {
+    name: "河南省",
+    value: 83,
+  },
+  {
+    name: "云南省",
+    value: 50,
+  },
+  {
+    name: "辽宁省",
+    value: 49,
+  },
+  {
+    name: "黑龙江省",
+    value: 25,
+  },
+  {
+    name: "湖南省",
+    value: 69,
+  },
+  {
+    name: "安徽省",
+    value: 36,
+  },
+  {
+    name: "山东省",
+    value: 39,
+  },
+  {
+    name: "新疆维吾尔自治区",
+    value: 42,
+  },
+  {
+    name: "江苏省",
+    value: 42,
+  },
+  {
+    name: "浙江省",
+    value: 56,
+  },
+  {
+    name: "江西省",
+    value: 23,
+  },
+  {
+    name: "湖北省",
+    value: 98,
+  },
+  {
+    name: "广西壮族自治区",
+    value: 33,
+  },
+  {
+    name: "宁夏回族自治区",
+    value: 47,
+  },
+  {
+    name: "山西省",
+    value: 18,
+  },
+  {
+    name: "内蒙古自治区",
+    value: 57,
+  },
+  {
+    name: "陕西省",
+    value: 22,
+  },
+  {
+    name: "吉林省",
+    value: 44,
+  },
+  {
+    name: "福建省",
+    value: 36,
+  },
+  {
+    name: "贵州省",
+    value: 39,
+  },
+  {
+    name: "广东省",
+    value: 96,
+  },
+  {
+    name: "青海省",
+    value: 27,
+  },
+  {
+    name: "西藏自治区",
+    value: 31,
+  },
+  {
+    name: "四川省",
+    value: 46,
+  }
+];
+let convertData = function (data) {
+  let res = [];
+  for (let i = 0; i < data.length; i++) {
+    let geoCoord = geoCoordMap[data[i].name];
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value),
+      });
+    }
+  }
+  return res;
+};
+
+export default {
+  name: "widgetBarMap",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          show: true,
+        },
+        //backgroundColor: '#131C38',
+        tooltip: {
+          trigger: 'item',
+          show: true,
+          enterable: true,
+          textStyle: {
+            fontSize: 20,
+            color: '#fff'
+          },
+          backgroundColor: 'rgba(0,2,89,0.8)',
+          formatter: function (params, ticket, callback) {
+            if (params.seriesType == "scatter") {
+              return params.data.name + "" + params.data.value[2];
+            } else {
+              return params.name;
+            }
+          },
+        },
+        geo: [
+          {
+            map: "china",
+            show: true,
+            roam: false,
+            layoutSize: "80%",
+            label: {
+              emphasis: {
+                show: true,
+                color: "white",
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#00F6FF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#53D9FF",
+                    },
+                  ],
+                  false
+                ),
+                borderWidth: 3,
+                shadowColor: "rgba(10,76,139,1)",
+                shadowOffsetY: 0,
+                shadowBlur: 60,
+              },
+            },
+          }
+        ],
+        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: data
+          },
+          // 柱状体的主干
+          {
+            type: 'lines',
+            zlevel: 1,
+            effect: {
+              show: false,
+              symbolSize: 5 // 图标大小
+            },
+            lineStyle: {
+              width: 20, // 尾迹线条宽度
+              color: 'rgb(22,255,255, .6)',
+              opacity: 1, // 尾迹线条透明度
+              curveness: 0 // 尾迹线条曲直度
+            },
+            silent: true,
+            data: this.lineData(data)
+          },
+          // 柱状体的顶部
+          {
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            //geoIndex: 0,
+            zlevel: 1,
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            label: {
+              show: true,
+              formatter: function (params) {
+                return "{cnNum|" + params.data[2] + "}";
+              },
+              rich: {
+                cnNum: {
+                  // 数值字号
+                  fontSize: 13,
+                  color: "#D4EEFF",
+                },
+              },
+              position: "top"
+            },
+            symbol: 'circle',
+            symbolSize: [20, 10],
+            itemStyle: {
+              color: 'rgb(22,255,255, 1)',
+              opacity: 1
+            },
+            silent: true,
+            data: this.scatterData(data)
+          },
+          // 柱状体的底部
+          {
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            //geoIndex: 0,
+            zlevel: 1,
+            label: {
+              // 这儿是处理的
+              formatter: '{b}',
+              position: 'bottom',
+              color: '#fff',
+              fontSize: 12,
+              distance: 10,
+              show: true
+            },
+            symbol: 'circle',
+            symbolSize: [20, 10],
+            itemStyle: {
+              // color: '#F7AF21',
+              color: 'rgb(22,255,255, 1)',
+              opacity: 1
+            },
+            silent: true,
+            data: this.scatterData2(data)
+          },
+          // 底部外框
+          {
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            //geoIndex: 0,
+            rippleEffect: {
+              brushType: "stroke",
+            },
+            zlevel: 1,
+            label: {
+              show: false
+            },
+            symbol: 'circle',
+            symbolSize: [40, 20],
+            itemStyle: {
+              color: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.5,
+                colorStops: [
+                  {
+                    offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色
+                  },
+                  {
+                    offset: .75, color: 'rgb(22,255,255, 0)' // 100% 处的颜色
+                  },
+                  {
+                    offset: .751, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
+                  },
+                  {
+                    offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              },
+              opacity: 1
+            },
+            silent: true,
+            data: convertData(data)
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+      flagInter: null,
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background,
+      };
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsMap();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+    },
+    // 标题设置
+    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,
+      };
+      this.options.title = title;
+    },
+    // 地图设置
+    setOptionsMap() {
+      const optionsSetup = this.optionsSetup;
+      const label = {
+        normal: {
+          //调整数值
+          position: "right",
+          // 地图省市区显隐
+          show: optionsSetup.isShowMap,
+          color: optionsSetup.colorMap,
+          fontSize: optionsSetup.fontSizeMap,
+        },
+        emphasis: {
+          show: true,
+        },
+      }
+      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% 处的颜色
+              },
+            ],
+          },
+          borderColor: optionsSetup.borderColor,
+          borderWidth: 1,
+        },
+        //鼠标放置颜色加深
+        emphasis: {
+          areaColor: {
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#073684", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: optionsSetup.fontHighlightColor, // 100% 处的颜色
+              },
+            ],
+          },
+        },
+      }
+      this.options.series[0]['label'] = label;
+      this.options.series[0]['itemStyle'] = itemStyle;
+    },
+    // 柱形设置
+    setOptionsBarTrunk() {
+      const optionsSetup = this.optionsSetup;
+      const lineStyle = {
+        width: optionsSetup.barWidth,
+        color: optionsSetup.barColor,
+        opacity: 1, // 尾迹线条透明度
+        curveness: 0 // 尾迹线条曲直度
+      }
+      this.options.series[1]['lineStyle'] = lineStyle;
+    },
+    setOptionsBarTop() {
+      const optionsSetup = this.optionsSetup;
+      // this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10];
+    },
+    setOptionsBarBottom() {
+      const optionsSetup = this.optionsSetup;
+      /*      const label = {
+              // 这儿是处理的
+              show: optionsSetup.isShowFontText,
+              formatter: '{b}',
+              position: 'bottom',
+              fontSize: optionsSetup.fontTextSize,
+              color: optionsSetup.fontTextColor,
+              fontWeight: optionsSetup.fontTextWeight,
+              fontStyle: optionsSetup.fontTextStyle,
+              distance: 10,
+            };
+            this.options.series[3]['label'] = label;*/
+      //this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10];
+    },
+    setOptionsBarBottomOut() {
+      const optionsSetup = this.optionsSetup;
+      // this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10];
+      const itemStyle = {
+        color: {
+          type: 'radial',
+          x: 0.5,
+          y: 0.5,
+          r: 0.5,
+          colorStops: [
+            {
+              offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色
+            },
+            {
+              offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色
+            },
+            {
+              offset: .751, color: optionsSetup.barBottomOutColor // 100% 处的颜色
+            },
+            {
+              offset: 1, color: optionsSetup.barBottomOutColor // 100% 处的颜色
+            }
+          ],
+          global: false // 缺省为 false
+        },
+        opacity: 1
+      };
+      this.options.series[4]['itemStyle'] = itemStyle;
+    },
+    // 计算柱图的高度比例
+    lineMaxHeight(val, heightRate) {
+      const maxValue = Math.max.apply(null, val.map(item => item.value))
+      return heightRate / maxValue;
+    },
+    // 柱体的主干
+    lineData(val, heightRate) {
+      return val.map((item) => {
+        return {
+          coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate)]]
+        }
+      })
+    },
+    // 柱体顶部
+    scatterData(val, heightRate) {
+      return val.map((item) => {
+        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate), item.value]
+      })
+    },
+    // 柱体的底部
+    scatterData2(val) {
+      return val.map((item) => {
+        return {
+          name: item.name,
+          value: geoCoordMap[item.name]
+        }
+      })
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        enterable: true,
+        textStyle: {
+          color: optionsSetup.tipsColor,
+          fontSize: optionsSetup.tipsFontSize,
+        },
+        formatter: function (params) {
+          if (params.seriesType == 'scatter') {
+            return params.data.name + "" + params.data.value[2];
+          } else {
+            return params.name;
+          }
+        },
+      };
+      this.options.tooltip = tooltip;
+    },
+    //数据解析
+    setOptionsData(e, paramsConfig) {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      // 联动接收者逻辑开始
+      optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
+      const myDynamicData = optionsData.dynamicData;
+      clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
+      if (
+        e &&
+        optionsData.dataType !== "staticData" &&
+        Object.keys(myDynamicData.contextData).length
+      ) {
+        const keyArr = Object.keys(myDynamicData.contextData);
+        paramsConfig.forEach((conf) => {
+          if (keyArr.includes(conf.targetKey)) {
+            myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
+          }
+        });
+      }
+      // 联动接收者逻辑结束
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      let name = [];
+      let latitude = [];
+      let longitude = [];
+      let value = [];
+      for (const i in val) {
+        name[i] = val[i].name;
+        latitude[i] = val[i].latitude;
+        longitude[i] = val[i].longitude;
+        value[i] = val[i].value;
+      }
+      // console.log(Object.keys(val[0]))
+      let allData = [];
+      for (const i in name) {
+        geoCoordMap[name[i]] = [latitude[i], longitude[i]]
+        const obj = {
+          name: name[i],
+          value: value[i]
+        }
+        allData.push(obj)
+      }
+      const optionsSetup = this.optionsSetup;
+      const heightRate = optionsSetup.heightRate;
+      // 颜色设置
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (const i in val) {
+        arrColor.push(customColor[i % customColor.length].color)
+      }
+      const itemStyle = {
+        color: (params) => {
+          //console.log(params)
+          return arrColor[params.dataIndex];
+        },
+        opacity: 1,
+      };
+      const lineStyle = {
+        width: optionsSetup.barWidth,
+        color: (params) => {
+          //console.log(params)
+          return arrColor[params.dataIndex];
+        },
+        opacity: 1, // 尾迹线条透明度
+        curveness: 0 // 尾迹线条曲直度
+      }
+
+      const labelTop = {
+        show: optionsSetup.isShowFontData,
+        formatter: function (params) {
+          return "{cnNum|" + params.data[2] + "}";
+        },
+        rich: {
+          cnNum: {
+            // 数值字号
+            fontSize: optionsSetup.fontDataSize,
+            color: (params) => {
+              return arrColor[params.dataIndex];
+            },
+            fontWeight: optionsSetup.fontDataWeight,
+            fontStyle: optionsSetup.fontDataStyle,
+          },
+        },
+        position: "top"
+      };
+      const labelBottom = {
+        // 这儿是处理的
+        show: optionsSetup.isShowFontText,
+        formatter: '{b}',
+        position: 'bottom',
+        fontSize: optionsSetup.fontTextSize,
+        color: (params) => {
+          return arrColor[params.dataIndex];
+        },
+        fontWeight: optionsSetup.fontTextWeight,
+        fontStyle: optionsSetup.fontTextStyle,
+        distance: 10,
+      };
+      // 渐变
+      const itemStyle4 = {
+        color: (params) => {
+          return {
+            type: 'radial',
+            x: 0.5,
+            y: 0.5,
+            r: 0.5,
+            colorStops: [
+              {
+                offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色
+              },
+              {
+                offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色
+              },
+              {
+                offset: .751, color: arrColor[params.dataIndex] // 100% 处的颜色
+              },
+              {
+                offset: 1, color: arrColor[params.dataIndex] // 100% 处的颜色
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        },
+        opacity: 1,
+      }
+      this.options.series[1]['lineStyle'] = lineStyle;
+      this.options.series[1].data = this.lineData(allData, heightRate);
+
+      this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10];
+      this.options.series[2]['itemStyle'] = itemStyle;
+      this.options.series[2]['label'] = labelTop;
+      this.options.series[2].data = this.scatterData(allData, heightRate);
+
+      this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10];
+      this.options.series[3]['itemStyle'] = itemStyle;
+      this.options.series[3]['label'] = labelBottom;
+      this.options.series[3].data = convertData(allData);
+
+      this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10];
+      this.options.series[4]['itemStyle'] = itemStyle4;
+      console.log(this.options)
+      this.options.series[4].data = convertData(allData);
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then((res) => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.series[0]["data"] = val;
+      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,
+          },
+        },
+      };
+      const data = convertData(val);
+      this.options.series[1]["data"] = data;
+      label["normal"] = normal;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.echartMap {
+  width: 100%;
+  height: 100%;
+}
+
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue

@@ -49,6 +49,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
 import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
 import widgetBorder from "./styleWidget/widgetBorder.vue";
 import widgetDecoration from "./styleWidget/widgetDecoration.vue";
+import widgetBarMap from "./map/widgetBarMap.vue";
 
 export default {
   name: "WidgetTemp",
@@ -92,6 +93,7 @@ export default {
     //widgetInput,
     widgetFormTime,
     widgetBarDoubleYaxisChart,
+    widgetBarMap
   },
   model: {
     prop: "value",

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

@@ -56,6 +56,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
 import widgetBorder from "./styleWidget/widgetBorder.vue";
 import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
 import widgetDecoration from "./styleWidget/widgetDecoration.vue";
+import widgetBarMap from "./map/widgetBarMap.vue";
 
 export default {
   name: "Widget",
@@ -99,6 +100,7 @@ export default {
     //widgetInput,
     widgetFormTime,
     widgetBarDoubleYaxisChart,
+    widgetBarMap
   },
   model: {
     prop: "value",