!146 update 1.2.0

Merge pull request !146 from Foming/dev

doc/docs/.vuepress/config.js

@@ -35,6 +35,7 @@ module.exports = {
                     children: [
                         {title: 'V1.0.0', path: '/guide/releases/1.0.0'},
                         {title: 'V1.1.0', path: '/guide/releases/1.1.0'},
+                        {title: 'V1.2.0', path: '/guide/releases/1.2.0'},
                     ]
                 },
                 {

doc/docs/guide/charts.md

@@ -6,9 +6,6 @@
 
 ### 文本框
 
-![img_3.png](../picture/dashboard/img_3.png) <br>
-![img_4.png](../picture/dashboard/img_4.png) <br>
-![img_5.png](../picture/dashboard/img_5.png) <br>
 ![img_6.png](../picture/dashboard/img_6.png) <br>
 
 #### 数据格式
@@ -60,6 +57,10 @@
 
 ![img42](../picture/charts/img_42.png) <br>
 
+### 流光直线
+
+![img44](../picture/charts/img_44.png) <br>
+
 ### 装饰
 
 ![img43](../picture/charts/img_43.png) <br>
@@ -279,6 +280,16 @@
 
 **如有问题，请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
 
+### 柱形地图
+
+底层解析增加了经纬度，字典值为“地址名称”、“经度坐标”、“维度坐标”、“数值” ，相对于气泡地图可在地图上显示非省会坐标。<br>
+![img45](../picture/charts/img_45.png) 
+
+#### 数据格式
+
+可参考静态数据，目前也是全国总览。
+![img46](../picture/charts/img_46.png) <br>
+
 ## 词云图
 
 ### 词云图

doc/docs/guide/chartsConfig.md

@@ -3,84 +3,116 @@
 图表配置项的中文名称基本都是直接使用Echarts图表组件对应定义的名称，非Echarts图表组件则根据功能进行命名。<br>
 每个图表组件的配置项都不尽相同，配置项的作用在于调整图表、数据的展示样式，这里着重说明一些共有的配置项和特殊的配置项，因为并不是按照一个图表一个配置项介绍的，没有介绍的部分请自行尝试了。
 
-## 图层名称
+## 通用配置项
 
-**定义：** 顾名思义，定义该组件在图层中显示的名称。<br>
-**使用建议：** 因为图层名称是可以重复的，所以在图层中无法准确判断该图层具体对应哪个组件，且在大屏画布中有的图表组件因为置底或者上层覆盖了别的组件，导致很难选到这个图表，如果修改了图层名称，则可以通过图层快速定位并选中该组件。
+### 图层名称
 
-## 文本框--文本内容
+定义：定义该组件在图层中显示的名称。<br>
+使用建议：
+- 因为图层名称是可以重复的，所以在图层中无法准确判断该图层具体对应哪个组件，且在大屏画布中有的图表组件因为置底或者上层覆盖了别的组件，导致很难选到这个图表，如果修改了图层名称，则可以通过图层快速定位并选中该组件。<br>
 
-文本框和滚动文本这两个组件，修改数据--静态数据，是不会生效的，文本内容配置项中写的内容才是真正的静态数据。<br>
+![img](../picture/chartsConfig/img.png)
 
-## 超链接--跳转方式
+### 标题设置
 
-**使用建议：** 默认的跳转方式是本窗口，实际使用还是请选择新窗口。<br>
+定义：给图表组件添加标题/表头/title。 <br>
+使用建议：
+- 一般没有图例功能的图表组件可以直接使用这个功能，因为可能会和图例重叠。有图例的图表组件要定义图表的话，可用文本框拖动到图表上方，作为标题。<br>
 
-## 图片地址
+![img1](../picture/chartsConfig/img_1.png)
 
-**定义：** 图片对应的url链接 <br>
-**使用建议：**
-这里图片的url因为只要是链接能打开就行了，所以适用性范围很广，但一般考虑到网络传输、安全性等问题，建议自行上传图片，然后用系统生成的链接地址；注意目前系统赞不支持svg图片，因此图片可能存在畸变，要注意缩放比例。
+### 柱体设置
 
-## 表格--滚动间隔
+定义：修改柱体的形状等，涉及柱状图、柱线图 <br>
+使用建议：
+
+- 当数据条目数很少时，比如默认的静态数据是5条，放大宽度，柱体变得更粗，搭配"竖展示"配置项，可以得到更好的展示效果；当只有一个值的时候，通过XY不展示，可以得到单独的一根柱子。
+- V1.2.0版本增加配置项“背景显示”，可达到类似进度条的效果。<br>
+
+![img2](../picture/chartsConfig/img_2.png)
+
+### 折线设置
+
+定义：修改点/折线的展示效果，涉及折线图、柱线图 <br>
+使用建议：
+- 当折线的量少的时候，可以选择拉大"面积厚度"，折线多了，就会相关覆盖，效果反而不好。<br>
+
+![img3](../picture/chartsConfig/img_3.png)
+
+### X轴设置
+
+定义：定义坐标轴中的X轴的相关设置项。<br>
+使用建议：
+- 可以修改坐标轴的颜色，因为默认是纯白色，所以部分浏览器可能显示不出来；可以设置坐标名（柱状对比图不存在此配置项）；如果数值相对密集的话，可以调整"数值间隔"。
+- V1.2.0版本默认X轴数值自动换行，X轴的label能显示的值的量是估算的，因此给了“数值行数”配置项方便进行调整。当“数值行数”有值时，默认的自动换行规则不会生效。<br>
 
-**定义：** 表格数据滚动的间隔，受到"开启滚动"、"动效时间"、"滚动个数"、"数据--动态数据--刷新时间"影响 <br>
-**使用建议：**
-表格动态数据默认是5s请求一次数据，因此每隔5s图表就会刷新一次，这时就会重置滚动时间，会出现滚动到某个值时回到开头重新滚动。想让表格把每个值都滚动显示到的话，可以减少滚动间隔时间，去掉动效时间，增大滚动个数，提高动态数据刷新时间。<br>
+![img4](../picture/chartsConfig/img_4.png)
 
-## 柱体设置
+### Y轴设置
 
-**定义：** 修改柱体的形状等，涉及柱状图、柱线图 <br>
-**使用建议：** 当数据条目数很少时，比如默认的静态数据是5条，放大宽度，柱体变得更粗，搭配"竖展示"
-配置项，可以得到更好的展示效果；当只有一个值的时候，通过XY不展示，可以得到单独的一根柱子。<br>
+定义：定义坐标轴中的Y轴的相关设置项。 <br>
+使用建议：
+- 可以修改坐标轴的颜色，因为默认是纯白色，所以部分浏览器可能显示不出来；如果数值相对密集的话，可以调整"均分"。注意"缩放"配置项只会对那些数据差距较大时才会生效。
+- V1.2.0版本新增“最大值”配置项，注意“最大值”配置项，目前只有柱状图相关的图表中有这个配置项。<br>
 
-## 折线设置
+![img5](../picture/chartsConfig/img_5.png)
 
-**定义：** 修改点/折线的展示效果，涉及折线图、柱线图 <br>
-**使用建议：** 当折线的量少的时候，可以选择拉大"面积厚度"，折线多了，就会相关覆盖，效果反而不好。<br>
+### 图例操作
 
-## 标题设置
+定义：图例的直接来源是数据中的数值，比如在堆叠图中，图例的值就是"动态数据-Y轴字段"字典选择的字段数值，可以简单的认为是“数据分类”。<br>
+使用建议：
+- 填写图例名称，修改图例的值，使用"|"进行分隔，相当于别名。<br>
 
-**定义：** 给图表组件添加标题/表头/title。 <br>
-**使用建议：**
-一般没有图例功能的图表组件可以直接使用这个功能，因为可能会和图例重叠。有图例的图表组件要定义图表的话，可用文本框拖动到图表上方，作为标题。<br>
+![img6](../picture/chartsConfig/img_6.png)
 
-## X轴设置
+### 数值设定
 
-**定义：** 定义坐标轴中的X轴的相关设置项。 <br>
-**使用建议：**
-可以修改坐标轴的颜色，因为默认是纯白色，所以部分浏览器可能显示不出来；可以设置坐标名（柱状对比图不存在此配置项）；如果数值相对密集的话，可以调整"
-数值间隔"。
+定义：设定数据在图表中的显示配置。<br>
+使用建议：
+- 对于堆叠图、柱线图等等柱体、折线数据多的，不建议显示。<br>
 
-## Y轴设置
+![img7](../picture/chartsConfig/img_7.png)
 
-**定义：** 定义坐标轴中的Y轴的相关设置项。 <br>
-**使用建议：** 可以修改坐标轴的颜色，因为默认是纯白色，所以部分浏览器可能显示不出来；如果数值相对密集的话，可以调整"均分"
-；注意"缩放"配置项只会对那些数据差距较大时才会生效。
+### 提示语设置
 
-## 图例操作
+定义：设定提示，主要用于当鼠标选中/滑动时，显示数据对应的值。<br>
+使用建议：
+- 设定和对应图表相反的颜色，鼠标滑动时则会醒目；注意此配置项必须保存预览鼠标选中后才能看到效果，在画布设计是看不到效果的。<br>
 
-**定义：** 图例的直接来源是数据中的数值，比如在堆叠图中，图例的值就是"动态数据-Y轴字段"
-字典选择的字段数值，可以简单的认为是“数据分类”。<br>
-**使用建议：** 填写图例名称，修改图例的值，使用"|"进行分隔，相当于别名。<br>
+![img8](../picture/chartsConfig/img_8.png)
 
-## 数值设定
+### 自定义配色
 
-**定义：** 设定数据在图表中的显示配置。<br>
-**使用建议：** 对于堆叠图、柱线图等等柱体、折线多的，不建议显示。<br>
+使用建议：如果不设置的话，默认就是大红色；默认按顺序给数值赋予颜色。<br>
 
-## 提示语设置
 
-**定义：** 设定提示，主要用于当鼠标选中/滑动时，显示数据对应的值。<br>
-**使用建议：**
-设定和对应图表相反的颜色，鼠标滑动时则会醒目；注意此配置项必须保存预览鼠标选中后才能看到效果，在画布设计是看不到效果的。<br>
+## 专用配置项
 
-## 自定义配色
+### 文本框--文本内容
+
+文本框和滚动文本这两个组件，修改数据--静态数据，是不会生效的，文本内容配置项中写的内容才是真正的静态数据。<br>
+
+## 超链接--跳转方式
+
+使用建议：
+- 默认的跳转方式是本窗口，实际使用还是请选择新窗口。<br>
+
+## 图片/图片地址
+
+定义：图片对应的url链接 <br>
+使用建议：
+- 这里图片的url因为只要是链接能打开就行了，所以适用性范围很广，但一般考虑到网络传输、安全性等问题，建议自行上传图片，然后用系统生成的链接地址；注意目前系统赞不支持svg图片，因此图片可能存在畸变，要注意缩放比例。
+- V1.2.0版本支持.svg格式图片上传。 <br>
+
+## 表格--滚动间隔
 
-**使用建议：** 如果不设置的话，默认就是大红色；默认按顺序给数值赋予颜色。<br>
+定义：表格数据滚动的间隔，受到"开启滚动"、"动效时间"、"滚动个数"、"数据--动态数据--刷新时间"影响 <br>
+使用建议：
+- 表格动态数据默认是5s请求一次数据，因此每隔5s图表就会刷新一次，这时就会重置滚动时间，会出现滚动到某个值时回到开头重新滚动。想让表格把每个值都滚动显示到的话，可以减少滚动间隔时间，去掉动效时间，增大滚动个数，提高动态数据刷新时间。<br>
 
 ## 饼图样式/模式
 
-**定义：** 定义饼图显示的样式、模式，涉及饼图、南丁格尔玫瑰图。<br>
-**使用建议：** 按数据量多少进行选择样式。<br>
+定义：定义饼图显示的样式、模式，涉及饼图、南丁格尔玫瑰图。<br>
+使用建议：
+- 按数据量多少进行选择样式。<br>
 

doc/docs/guide/dataset.md

@@ -149,3 +149,12 @@ function dataTransform(data) {
 ### 数据预览
 
 针对此次数据集，进行数据预览，尽量不要使用 select * from table <br>
+
+## URL传参
+
+写法就是就URL链接后面拼接参数，唯一要注意的就是**参数名**要和数据集配置的**查询参数名**一致，多个参数则用 & 号。
+
+例如：原始的大屏链接
+https://xxx.xxx.xxx/index.html#/bigscreen/viewer?reportCode=testForm
+假设大屏里面部分数据集查询参数名是 startTime 
+https://xxx.xxx.xxx/index.html#/bigscreen/viewer?reportCode=testForm&startTime=2023-05-05

doc/docs/guide/excel.md

@@ -12,7 +12,7 @@ Excel报表基于Luckysheet开发，[Luckysheet](https://gitee.com/mengshukeji/L
 ![img](../picture/excel/img.png) <br>
 
 进入大屏设计方法2： <br>
-从大屏报表模块选择需要设计的大屏，按图示进入大屏设计界面。 <br>
+从表格报表模块选择需要设计的大屏，按图示进入大屏设计界面。 <br>
 ![img2](../picture/excel/img_1.png) <br>
 
 ## 设计界面

doc/docs/guide/releases/1.0.0.md

@@ -5,9 +5,9 @@
 
 - 1.0版本调整了底层sql，具体位置是：report-core/src/main/resource/db.migration，
   删除了过往所有的sql，现在此目录下sql仅包含aj_report基础信息库的相关sql，sql文件的命名也会和版本号保持一致，
-  提供的示例数据（aj_report_init数据库的sql），aj_report_init.sql 文件放置在 doc/example目录下。
+  提供的示例数据（aj_report_init数据库的sql），aj_report_init_example.sql 文件放置在 doc/example目录下。
 
-- 如果需要将之前版本的示例数据删除，delete_aj_report_init.sql 文件放置在 doc/example目录下。
+- 如果需要将之前版本的示例数据删除，delete_aj_report_init_example.sql 文件放置在 doc/example目录下。
 
 - 对于从之前版本升级到1.0.0版本，必须解决新旧sql的冲突问题，因为V1.0.0版本同样默认启用flyway，如果不解决冲突，代码启动flyway就会报错，
   从0.9.9版本更新到1.0.0版本的更新sql，请参照下面的步骤内容进行操作，

doc/docs/guide/releases/1.1.0.md

@@ -22,3 +22,11 @@
 ## 其他
 
 - 1、文档更新
+
+## 示例数据
+
+- 从1.0版本调整了底层sql，具体位置是：report-core/src/main/resource/db.migration，
+  删除了过往所有的sql，现在此目录下sql仅包含aj_report基础信息库的相关sql，sql文件的命名也会和版本号保持一致，
+  提供的示例数据（aj_report_init数据库的sql），aj_report_init_example.sql 文件放置在 doc/example目录下。
+
+- 如果需要将之前版本的示例数据删除，delete_aj_report_init_example.sql 文件放置在 doc/example目录下。

doc/docs/guide/releases/1.2.0.md

@@ -0,0 +1,41 @@
+## 注意事项
+
+- 本次更新bootstrap.yml相关配置文件有更新，根据部署方式的不同，注意不要遗漏此文件的更新
+- 本次更新有新增SQL（V1.2.0__update.sql），没有启用flyway的情况下别忘记手动执行更新sql
+- 之前版本更新至本版本时，可能会遇到图表不显示静态、动态数据，需删除该图表重新配置；如果已对旧版本进行二次开发，请谨慎更新。<br>
+  跨版本更新可查对应版本的[releases](https://gitee.com/anji-plus/report/releases)。<br>
+
+## 新增
+
+- 1、新增中国地图-柱形地图
+- 2、新增样式组件-流光直线 --贡献人：陈旭光@chen-xuguang
+- 3、支持URL传参(具体解释与使用请查看数据集)
+- 4、支持上传SVG格式图片 --贡献人：陈旭光@chen-xuguang
+
+## 优化
+
+- 1、大屏-柱状图支持多柱，折线图支持多折线（柱状图-渐变色不支持多柱）
+- 2、大屏-柱线堆叠图、多柱线图柱体增加堆叠样式
+- 3、大屏图表配置项-数值设定，增加是否显示百分号 --贡献人：Mr.Z@sillycoder
+- 4、大屏-柱状图增加柱体背景等配置项（具体解释与使用请查看图表配置项）
+- 5、大屏-X轴数值长度超长自动换行（具体解释与使用请查看图表配置项）
+
+## 修复
+
+- 1、样式组件保存后预览不生效问题 --贡献人：luoxuancong@luoxuancong
+- 2、Excel数据渲染重复查询问题
+- 3、雷达图动态数据刷新后预览不自动刷新图表问题
+
+## 其他
+
+- 1、文档更新
+- 2、增加了新中国地图解析方法V2--可显示非省市区以外的经纬度地址，需配合柱形地图使用，其他地图暂时不使用，可参考柱形地图来修改其他代码
+- 3、bootstrap.yml配置文件更新
+
+## 示例数据
+
+- 从1.0版本调整了底层sql，具体位置是：report-core/src/main/resource/db.migration，
+  删除了过往所有的sql，现在此目录下sql仅包含aj_report基础信息库的相关sql，sql文件的命名也会和版本号保持一致，
+  提供的示例数据（aj_report_init数据库的sql），aj_report_init_example.sql 文件放置在 doc/example目录下。
+
+- 如果需要将之前版本的示例数据删除，delete_aj_report_init_example.sql 文件放置在 doc/example目录下。

report-core/pom.xml

@@ -14,7 +14,7 @@
 
     <groupId>com.anji-plus</groupId>
     <artifactId>aj-report</artifactId>
-    <version>1.1.0.RELEASE</version>
+    <version>1.2.0.RELEASE</version>
 
     <properties>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/file/service/impl/GaeaFileServiceImpl.java

@@ -12,6 +12,7 @@ import com.anjiplus.template.gaea.business.code.ResponseCode;
 import com.anjiplus.template.gaea.business.modules.file.dao.GaeaFileMapper;
 import com.anjiplus.template.gaea.business.modules.file.entity.GaeaFile;
 import com.anjiplus.template.gaea.business.modules.file.service.GaeaFileService;
+import com.anjiplus.template.gaea.business.util.ResponseUtil2;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import lombok.extern.slf4j.Slf4j;
@@ -159,7 +160,7 @@ public class GaeaFileServiceImpl implements GaeaFileService {
             byte[] fileBytes = gaeaOSSTemplate.downloadFile(fileObjectName);
 
             // 根据文件后缀来判断，是显示图片\视频\音频，还是下载文件
-            return ResponseUtil.writeBody(originalFilename, fileBytes, isIEBrowser);
+            return ResponseUtil2.writeBody(originalFilename, fileBytes, isIEBrowser);
         } catch (Exception e) {
             log.error("file download error", e);
             throw BusinessExceptionBuilder.build(ResponseCode.FILE_OPERATION_FAILED, e.getMessage());

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/reportexcel/service/impl/ReportExcelServiceImpl.java

@@ -27,16 +27,15 @@ import com.anjiplus.template.gaea.business.modules.reportexcel.util.CellType;
 import com.anjiplus.template.gaea.business.modules.reportexcel.util.XlsUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.itextpdf.text.*;
-import com.itextpdf.text.Font;
 import com.itextpdf.text.pdf.BaseFont;
 import com.itextpdf.text.pdf.PdfPCell;
 import com.itextpdf.text.pdf.PdfPTable;
 import com.itextpdf.text.pdf.PdfWriter;
-import com.itextpdf.tool.xml.XMLWorkerHelper;
-import com.lowagie.text.DocumentException;
-import io.swagger.models.auth.In;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.poi.ss.usermodel.*;
+import org.apache.poi.ss.usermodel.Cell;
+import org.apache.poi.ss.usermodel.Row;
+import org.apache.poi.ss.usermodel.Sheet;
+import org.apache.poi.ss.usermodel.Workbook;
 import org.apache.poi.xssf.usermodel.XSSFWorkbook;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -44,14 +43,15 @@ import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
-import org.xhtmlrenderer.pdf.ITextRenderer;
 
-import java.io.*;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.IOException;
+import java.io.OutputStream;
 import java.nio.file.Files;
 import java.nio.file.Paths;
-import java.util.*;
 import java.util.List;
-import java.util.Map;
+import java.util.*;
 import java.util.stream.Collectors;
 
 /**
@@ -422,10 +422,11 @@ public class ReportExcelServiceImpl implements ReportExcelService {
         }
 
     private String getStringValue(Cell cell) {
-        if (cell == null)
+        if (cell == null) {
             return "";
-        else
+        } else {
             return cell.toString();
+        }
     }
     /**
      * 解析报表数据，动态插入列表数据和对象数据
@@ -436,9 +437,11 @@ public class ReportExcelServiceImpl implements ReportExcelService {
         String setParam = reportExcelDto.getSetParam();
         List<JSONObject> dbObjectList = (List<JSONObject>) JSON.parse(jsonStr);
 
-        if (dbObjectList != null && dbObjectList.size() > 0) {
+        if (dbObjectList != null && !dbObjectList.isEmpty()) {
+            //数据集数据缓存
+            Map<String, OriginalDataDto> setMap = new HashMap<>();
             for (int x = 0; x < dbObjectList.size(); x++) {
-                analysisSheetCellData(dbObjectList.get(x), setParam);
+                analysisSheetCellData(dbObjectList.get(x), setParam, setMap);
             }
         }
         //fastjson $ref 循环引用
@@ -511,7 +514,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      *
      * @param dbObject
      */
-    private void analysisSheetCellData(JSONObject dbObject, String setParam) {
+    private void analysisSheetCellData(JSONObject dbObject, String setParam, Map<String, OriginalDataDto> setMap) {
         //清空data值
         dbObject.remove("data");
         //celldata是一个一维数组
@@ -525,7 +528,9 @@ public class ReportExcelServiceImpl implements ReportExcelService {
             dbObject.getJSONArray("celldata").clear();
             //获取配置项中的合并属性
             JSONObject merge = dbObject.getJSONObject("config").getJSONObject("merge");
-            if(merge != null) merge.clear();
+            if(merge != null) {
+                merge.clear();
+            }
             //定义存储每一列动态扩展的行数
             Map<Integer,Integer> colAddCntMap = new HashMap<>();
             // 遍历已存在的单元格，查看是否存在动态参数
@@ -534,7 +539,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                 JSONObject cellObj = celldata.get(i);
                 //fastjson深拷贝问题
                 String cellStr = cellObj.toJSONString();
-                analysisCellData(cellObj,setParam,colAddCntMap,cellStr,merge, dbObject,cellDataMap);
+                analysisCellData(cellObj,setParam,colAddCntMap,cellStr,merge, dbObject,cellDataMap, setMap);
             }
         }
     }
@@ -544,7 +549,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      * @param cellObject
      */
     public void analysisCellData(JSONObject cellObject,String setParam,Map<Integer,Integer> colAddCntMap,String cellStr,
-                                 JSONObject merge,JSONObject dbObject,Map<String,JSONObject> cellDataMap){
+                                 JSONObject merge,JSONObject dbObject,Map<String,JSONObject> cellDataMap, Map<String, OriginalDataDto> setMap){
         //获取行号
         Integer cellR = cellObject.getInteger("r");
         //获取列数
@@ -562,11 +567,11 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                 //处理动态单元格
                 String v = cellObject.getJSONObject("v").getString("v");
                 DataSetDto dataSet = getDataSet(v, setParam);
-                handleDynamicCellObject(dataSet,v,cellStr,cnt,cellR,cellC,merge,dbObject,colAddCntMap);
+                handleDynamicCellObject(dataSet,v,cellStr,cnt,cellR,cellC,merge,dbObject,colAddCntMap, setMap);
                 break;
             default:
                 //处理静态单元格
-                handleStaticCellObject(cellStr,dbObject,cnt,cellR,cellC,cellDataMap,setParam,merge,colAddCntMap,cellType);
+                handleStaticCellObject(cellStr,dbObject,cnt,cellR,cellC,cellDataMap,setParam,merge,colAddCntMap,cellType, setMap);
                 break;
         }
     }
@@ -584,9 +589,15 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      * @param colAddCntMap
      */
     public void handleDynamicCellObject(DataSetDto dataSet,String v,String cellStr,int cnt,int r,int c,
-                                        JSONObject merge,JSONObject dbObject,Map<Integer,Integer> colAddCntMap){
+                                        JSONObject merge,JSONObject dbObject,Map<Integer,Integer> colAddCntMap, Map<String, OriginalDataDto> setMap){
         //获取动态数据
-        OriginalDataDto originalDataDto = dataSetService.getData(dataSet);
+        OriginalDataDto originalDataDto;
+        if (dataSet != null && setMap.containsKey(dataSet.getSetCode())) {
+            originalDataDto = setMap.get(dataSet.getSetCode());
+        }else {
+            originalDataDto = dataSetService.getData(dataSet);
+            setMap.put(dataSet.getSetCode(), originalDataDto);
+        }
         List<JSONObject> cellDynamicData = originalDataDto.getData();
 
         if(cellDynamicData != null){
@@ -643,7 +654,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      */
     public void handleStaticCellObject(String cellStr,JSONObject dbObject,int cnt,int r,int c,
                                        Map<String,JSONObject> cellDataMap,String setParam,
-                                       JSONObject merge,Map<Integer,Integer> colAddCntMap,CellType cellType){
+                                       JSONObject merge,Map<Integer,Integer> colAddCntMap,CellType cellType,Map<String, OriginalDataDto> setMap){
         //转字符串，解决深拷贝问题
         JSONObject addCellData = JSONObject.parseObject(cellStr);
         int rows = 0;
@@ -655,7 +666,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                 break;
             case STATIC_AUTO:
                 //获取静态单元格右侧动态单元格的总行数
-                rows = getRightDynamicCellRows(addCellData,cellDataMap,setParam,rows,cellType);
+                rows = getRightDynamicCellRows(addCellData,cellDataMap,setParam,rows,cellType, setMap);
                 initCellPosition(addCellData,cnt,merge);
                 if(rows > 1){
                     //需要把这个静态扩展单元格 改变为 静态合并扩展单元格，就是增加合并属性 mc 以及merge配置
@@ -673,7 +684,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                 break;
             case STATIC_MERGE_AUTO:
                 //获取静态单元格右侧动态单元格的总行数
-                rows = getRightDynamicCellRows(addCellData,cellDataMap,setParam,rows,cellType);
+                rows = getRightDynamicCellRows(addCellData, cellDataMap, setParam, rows, cellType, setMap);
                 initCellPosition(addCellData,cnt,merge);
                 if(rows > 0){
                     //需要修改单元格mc中的rs
@@ -724,7 +735,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      * @param cellType
      * @return
      */
-    public int getRightDynamicCellRows(JSONObject addCellData,Map<String,JSONObject> cellDataMap,String setParam,int sumRows,CellType cellType){
+    public int getRightDynamicCellRows(JSONObject addCellData,Map<String,JSONObject> cellDataMap,String setParam,int sumRows,CellType cellType,Map<String, OriginalDataDto> setMap){
         //1、获取此单元格右侧关联的所有单元格
         List<JSONObject> rightCellList = getRightDynamicCell(addCellData,cellDataMap,cellType);
         //2、循环获取每个单元格的扩展行数
@@ -735,7 +746,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                 case STATIC_AUTO:
                 case STATIC_MERGE_AUTO:
                     //递归查找
-                    sumRows = getRightDynamicCellRows(rightCell,cellDataMap,setParam,sumRows,rightCellType);
+                    sumRows = getRightDynamicCellRows(rightCell,cellDataMap,setParam,sumRows,rightCellType, setMap);
                     break;
                 case BLACK:
                 case STATIC:
@@ -745,7 +756,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
                     sumRows += rightCell.getJSONObject("v").getJSONObject("mc").getInteger("rs");
                     break;
                 default:
-                    List<JSONObject> cellDynamicData = getDynamicDataList(rightCell.getJSONObject("v").getString("v"),setParam);
+                    List<JSONObject> cellDynamicData = getDynamicDataList(rightCell.getJSONObject("v").getString("v"),setParam, setMap);
                     if(cellDynamicData != null && cellDynamicData.size() > 1){
                         int size = cellDynamicData.size();
                         sumRows += size;
@@ -880,13 +891,18 @@ public class ReportExcelServiceImpl implements ReportExcelService {
      * @param setParam
      * @return
      */
-    private List<JSONObject> getDynamicDataList(String v, String setParam){
+    private List<JSONObject> getDynamicDataList(String v, String setParam, Map<String, OriginalDataDto> setMap){
         if(StringUtils.isNotBlank(v)){
             DataSetDto dataSet = getDataSet(v,setParam);
             if(dataSet != null){
-                OriginalDataDto originalDataDto = dataSetService.getData(dataSet);
-                List<JSONObject> cellDynamicData = originalDataDto.getData();
-                return cellDynamicData;
+                OriginalDataDto originalDataDto;
+                if (setMap.containsKey(dataSet.getSetCode())) {
+                    originalDataDto = setMap.get(dataSet.getSetCode());
+                }else {
+                    originalDataDto = dataSetService.getData(dataSet);
+                    setMap.put(dataSet.getSetCode(), originalDataDto);
+                }
+                return originalDataDto.getData();
             }else{
                 return null;
             }
@@ -907,7 +923,7 @@ public class ReportExcelServiceImpl implements ReportExcelService {
             // 查询条件
             if (setParamJson.containsKey(dto.getSetCode())) {
                 JSONObject paramCondition = setParamJson.getJSONObject(dto.getSetCode());
-                paramCondition.forEach(map::put);
+                map.putAll(paramCondition);
             }
             dto.setContextData(map);
         }

report-core/src/main/java/com/anjiplus/template/gaea/business/util/ResponseUtil2.java

@@ -0,0 +1,60 @@
+package com.anjiplus.template.gaea.business.util;
+
+import com.anji.plus.gaea.oss.exceptions.GaeaOSSException;
+import com.anji.plus.gaea.oss.utils.ResponseUtil;
+import com.anji.plus.gaea.oss.utils.StringPatternUtil;
+import org.springframework.http.CacheControl;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.util.StringUtils;
+
+import java.net.URLEncoder;
+
+public class ResponseUtil2 extends ResponseUtil {
+    /**
+     * 根据文件后缀来判断，是显示图片\视频\音频，还是下载文件
+     * @param fileObjectName 文件原始名称，如：订单导入.xls banner.png
+     * @param fileBytes 文件字节流
+     * @param isIEBrowser 是否是IE浏览器
+     * @return
+     */
+    public static ResponseEntity<byte[]> writeBody(String fileObjectName, byte[] fileBytes, boolean isIEBrowser){
+        try{
+            if(StringUtils.isEmpty(fileObjectName) || !fileObjectName.contains(".")){
+                throw new GaeaOSSException("original file name or type is empty");
+            }
+            // 文件后缀名
+            String fileSuffixName = fileObjectName.substring(fileObjectName.lastIndexOf("."));
+
+            // 初始化响应体
+            ResponseEntity.BodyBuilder builder = ResponseEntity.ok();
+            builder.contentLength(fileBytes.length);
+
+            // 判断文件是图片视频还是文件
+            String pattern1 = "(.png|.jpg|.jpeg|.bmp|.gif|.icon|.svg)";
+            String pattern2 = "(.flv|.swf|.mkv|.avi|.rm|.rmvb|.mpeg|.mpg|.ogg|.ogv|.mov|.wmv|.mp4|.webm|.wav|.mid|.mp3|.aac)";
+            if (StringPatternUtil.StringMatchIgnoreCase(fileSuffixName, pattern1)) {
+                if (fileSuffixName.equalsIgnoreCase(".svg")) {
+                    builder.cacheControl(CacheControl.noCache()).contentType(MediaType.parseMediaType("image/svg+xml"));
+                } else {
+                    builder.cacheControl(CacheControl.noCache()).contentType(MediaType.IMAGE_PNG);
+                }
+            } else if (StringPatternUtil.StringMatchIgnoreCase(fileSuffixName, pattern2)) {
+                builder.header("Content-Type", "video/mp4; charset=UTF-8");
+            } else {
+                //application/octet-stream 二进制数据流（最常见的文件下载）
+                builder.contentType(MediaType.APPLICATION_OCTET_STREAM);
+                fileObjectName = URLEncoder.encode(fileObjectName, "UTF-8");
+                if (isIEBrowser) {
+                    builder.header("Content-Disposition", "attachment; filename=" + fileObjectName);
+                } else {
+                    builder.header("Content-Disposition", "attacher; filename*=UTF-8''" + fileObjectName);
+                }
+            }
+            return builder.body(fileBytes);
+        }catch (Exception e){
+            e.printStackTrace();
+            return null;
+        }
+    }
+}

report-core/src/main/resources/bootstrap-dev.yml

@@ -9,7 +9,7 @@ spring:
       oss: #文件存储
         enabled: true
         ##允许上传的文件后缀
-        file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg
+        file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg|.aaa|.svg
         # 用于文件上传成功后，生成文件的下载公网完整URL
         downloadPath: http://127.0.0.1:9095/file/download
         nfs:

report-core/src/main/resources/bootstrap.yml

@@ -52,11 +52,11 @@ spring:
       oss: #文件存储 都配置的情况下优先级minio->amazonS3->nfs
         enabled: true
         ##允许上传的文件后缀
-        file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg|.aaa
+        file-type-while-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi|.jpeg|.aaa|.svg
         # 用于文件上传成功后，生成文件的下载公网完整URL，http://serverip:9095/file/download，注意填写IP必须填写后端服务所在的机器IP
         downloadPath: http://10.108.26.197:9095/file/download
         nfs:
-          #上传对应本地全路径，目录必须是真实存在的，注意 Win是 \ 且有盘符，linux是 / 无盘符
+          #上传对应本地全路径，注意目录不会自动创建，注意 Win是 \ 且有盘符，linux是 / 无盘符，注意目录权限问题
           path: /app/disk/upload/
         #若要使用minio文件存储，请启用以下配置
         #minio:

report-core/src/main/resources/db/migration/V1.2.0__update.sql

@@ -0,0 +1,7 @@
+-- 增加地图解析属性
+INSERT INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('地图经纬度属性', 'MAP_V2_PROPERTIES', '地图属性', 'admin', '2021-04-29 10:28:15', 'admin', '2021-06-23 10:47:20', 1);
+
+INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('MAP_V2_PROPERTIES', '地址名称', 'name', NULL, 1, 'zh', NULL, 1, 'admin', '2021-08-20 10:41:00', 'admin', '2021-08-20 10:41:00', 1);
+INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('MAP_V2_PROPERTIES', '经度坐标', 'longitude', NULL, 1, 'zh', NULL, 1, 'admin', '2021-08-20 10:41:00', 'admin', '2021-08-20 10:41:00', 1);
+INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('MAP_V2_PROPERTIES', '维度坐标', 'latitude', NULL, 1, 'zh', NULL, 1, 'admin', '2021-08-20 10:41:00', 'admin', '2021-08-20 10:41:00', 1);
+INSERT INTO `aj_report`.`gaea_dict_item`(`dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('MAP_V2_PROPERTIES', '数值', 'value', NULL, 1, 'zh', NULL, 1, 'admin', '2021-08-20 10:41:00', 'admin', '2021-08-20 10:41:00', 1);

report-ui/src/mixins/queryform.js

@@ -1,5 +1,6 @@
 import miment from 'miment'
-import { getData } from '@/api/bigscreen'
+import {getData} from '@/api/bigscreen'
+
 export default {
   data() {
     return {
@@ -95,13 +96,55 @@ export default {
     },
     // 查询echarts 数据
     queryEchartsData(params) {
+      const queryParams = this.toEchartsDataQueryParams(params)
       return new Promise(async (resolve) => {
-        const { code, data } = await getData(params);
+        const { code, data } = await getData(queryParams);
         if (code != 200) return
         const analysisData = this.analysisChartsData(params, data);
         resolve(analysisData)
       })
     },
+    /**
+     * 将url参数解析到图表参数中
+     * 1. tenantCode=aaa
+     * 2. [setCode].tenantCode=aaa
+     * 判断是否有点(.)
+     *  a. 没有 -> 把所有的参数全部给插入contextData
+     *  b. 有 ->   点前缀的值去匹配相同的值再把对应的值插入contextData
+     *
+     * **/
+    toEchartsDataQueryParams(params) {
+      const queryParams = this.deepClone(params)
+      const query = this.$route.query
+      if(!this.isIncludePoints(query)) {
+        queryParams.contextData = { ...queryParams.contextData, ...query }
+      } else {
+        Object.keys(query).forEach(item => {
+          if(item.indexOf('.') > -1) {
+            const obj = {}
+            const key1 = item.split('.')[0]
+            const key2 = item.split('.')[1]
+            obj[key2] = query[item]
+            if (queryParams.setCode == key1) {
+              const newObj = { ...queryParams.contextData, ...obj }
+              queryParams.contextData = newObj
+            }
+          }
+        })
+      }
+
+      return queryParams
+    },
+    // 判断对象是否包含点
+    isIncludePoints(query) {
+      let isPoints = false
+      Object.keys(query).forEach(item => {
+        if(item.indexOf('.') > -1) {
+          isPoints = true
+        }
+      })
+      return isPoints
+    },
     // 解析不同图标的数据
     analysisChartsData(params, data) {
       // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图
@@ -138,6 +181,8 @@ export default {
         return this.radarChartFn(params.chartProperties, data)
       } else if (chartType == "widget-select") {
         return this.selectChartFn(params.chartProperties, data)
+      } else if (chartType == "widget-mapv2chart") {
+        return this.mapLLChartFn(params.chartProperties, data)
       } else {
         return data
       }
@@ -297,7 +342,7 @@ export default {
       return analysisData;
     },
     // 下拉框
-    selectChartFn(chartProperties, data){
+    selectChartFn(chartProperties, data) {
       let valueField;
       let labelField;
       for (const key in chartProperties) {
@@ -323,6 +368,27 @@ export default {
       }
       return analysisData;
     },
+    // 地图带经纬度数据解析
+    mapLLChartFn(chartProperties, data) {
+      const analysisData = [];
+      for (let i = 0; i < data.length; i++) {
+        const obj = {};
+        for (const key in chartProperties) {
+          const value = chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
+          } else if (value === "longitude") {
+            obj["longitude"] = Number(data[i][key]);
+          } else if (value === "latitude") {
+            obj["latitude"] = Number(data[i][key]);
+          } else {
+            obj["value"] = data[i][key];
+          }
+        }
+        analysisData.push(obj);
+      }
+      return analysisData;
+    },
     setUnique(arr) {
       let newArr = [];
       arr.forEach(item => {

report-ui/src/utils/china.js

@@ -407,4 +407,402 @@ export const conversionCity = {
   通化市: [125.9397, 41.7283]
 }
 
-
+export const conversionChina = {
+  新疆维吾尔自治区: [87.6285, 43.7933],
+  湖北省: [114.3415, 30.5462],
+  辽宁省: [123.435, 41.8367],
+  广东省: [113.2668, 23.1333],
+  内蒙古自治区: [111.7652, 40.8182],
+  黑龙江省: [126.6619, 45.7422],
+  河南省: [113.753, 34.767],
+  山东省: [117.0207, 36.6702],
+  陕西省: [108.9539, 34.2666],
+  贵州省: [106.7052, 26.6003],
+  上海市: [121.4648, 31.2891],
+  重庆市: [107.7539, 30.1904],
+  西藏自治区: [91.1174, 29.6486],
+  安徽省: [117.3301, 31.7345],
+  福建省: [119.2961, 26.101],
+  湖南省: [112.9829, 28.116],
+  海南省: [110.3487, 20.0186],
+  江苏省: [118.7635, 32.0613],
+  青海省: [101.7804, 36.6225],
+  广西壮族自治区: [108.3275, 22.8166],
+  宁夏回族自治区: [106.2588, 38.4722],
+  浙江省: [120.1525, 30.2666],
+  河北省: [114.5303, 38.0377],
+  台湾省: [121.509, 25.0443],
+  甘肃省: [103.8267, 36.0606],
+  四川省: [104.0764, 30.6516],
+  天津市: [117.2015, 39.0853],
+  江西省: [115.8165, 28.6372],
+  云南省: [102.7093, 25.0464],
+  山西省: [112.5787, 37.8139],
+  北京市: [116.4073, 39.9041],
+  吉林省: [125.3258, 43.8969],
+  铁门关市: [85.6702, 41.8629],
+  双河市: [82.3536, 44.8405],
+  北屯市: [87.8344, 47.3267],
+  博尔塔拉蒙古自治州: [82.0663, 44.906],
+  昌吉回族自治州: [87.3089, 44.011],
+  阿勒泰地区: [88.1412, 47.8449],
+  塔城地区: [82.9803, 46.7453],
+  可克达拉市: [80.9941, 43.9403],
+  昆玉市: [79.2701, 37.2153],
+  石河子市: [86.0803, 44.3053],
+  和田地区: [79.9216, 37.1144],
+  五家渠市: [87.5428, 44.1664],
+  巴音郭楞蒙古自治州: [86.1452, 41.7641],
+  伊犁哈萨克自治州: [81.3236, 43.9171],
+  哈密市: [93.515, 42.8193],
+  喀什地区: [75.9897, 39.4704],
+  阿克苏地区: [80.265, 41.1707],
+  克孜勒苏柯尔克孜自治州: [76.1673, 39.7147],
+  阿拉尔市: [81.2805, 40.5472],
+  图木舒克市: [79.0749, 39.8677],
+  克拉玛依市: [84.8892, 45.5777],
+  胡杨河市: [84.8275, 44.6928],
+  乌鲁木齐市: [87.6168, 43.8253],
+  吐鲁番市: [89.1903, 42.9507],
+  襄阳市: [112.1217, 32.0101],
+  十堰市: [110.7989, 32.629],
+  宜昌市: [111.2869, 30.6921],
+  武汉市: [114.3045, 30.5933],
+  荆门市: [112.1990, 31.0354],
+  潜江市: [112.9002, 30.4019],
+  天门市: [113.1665, 30.6637],
+  咸宁市: [114.3226, 29.8413],
+  仙桃市: [113.4429, 30.3284],
+  孝感市: [113.9569, 30.9183],
+  黄冈市: [114.8724, 30.4537],
+  荆州市: [112.2414, 30.3362],
+  恩施土家族苗族自治州: [109.488, 30.2721],
+  神农架林区: [110.6758, 31.7451],
+  随州市: [113.3823, 31.6902],
+  黄石市: [115.0389, 30.201],
+  鄂州市: [114.8949, 30.3914],
+  锦州市: [121.1268, 41.0961],
+  大连市: [121.6147, 38.9139],
+  营口市: [122.2191, 40.625],
+  葫芦岛市: [120.8367, 40.7109],
+  抚顺市: [123.957, 41.88131],
+  沈阳市: [123.4646, 41.6775],
+  丹东市: [124.3544, 40.0006],
+  铁岭市: [123.726, 42.2237],
+  阜新市: [121.670, 42.022],
+  本溪市: [123.6849, 41.4868],
+  鞍山市: [122.9941, 41.1082],
+  辽阳市: [123.2396, 41.2673],
+  盘锦市: [122.1707, 40.7195],
+  朝阳市: [120.4888, 41.6018],
+  汕头市: [116.6819, 23.3541],
+  佛山市: [113.1215, 23.0213],
+  肇庆市: [112.4652, 23.0477],
+  惠州市: [114.4155, 23.1123],
+  深圳市: [114.0579, 22.5435],
+  珠海市: [113.5768, 22.2716],
+  湛江市: [110.3575, 21.2701],
+  揭阳市: [116.3727, 23.5509],
+  阳江市: [111.9834, 21.8568],
+  潮州市: [116.6219, 23.6576],
+  河源市: [114.7002, 23.7442],
+  云浮市: [112.0445, 22.9151],
+  汕尾市: [115.3755, 22.7872],
+  韶关市: [113.5973, 24.8109],
+  江门市: [113.0815, 22.5789],
+  茂名市: [110.9255, 21.6627],
+  清远市: [113.056, 23.682],
+  梅州市: [116.1220, 24.2888],
+  广州市: [113.2644, 23.13],
+  中山市: [113.3925, 22.517],
+  东莞市: [113.7518, 23.021],
+  包头市: [109.9531, 40.6213],
+  呼伦贝尔市: [119.7784, 49.1665],
+  巴彦淖尔市: [107.3877, 40.7429],
+  乌海市: [106.7941, 39.655],
+  阿拉善盟: [105.7291, 38.8515],
+  通辽市: [122.2433, 43.6535],
+  兴安盟: [122.0377, 46.0823],
+  锡林郭勒盟: [116.0473, 43.9332],
+  呼和浩特市: [111.7488, 40.8421],
+  乌兰察布市: [113.1322, 40.9945],
+  鄂尔多斯市: [109.7824, 39.6087],
+  赤峰市: [118.8876, 42.2568],
+  鹤岗市: [130.2976, 47.3506],
+  大兴安岭地区: [124.1178, 50.4112],
+  七台河市: [131.003, 45.7711],
+  哈尔滨市: [126.535, 45.8029],
+  佳木斯市: [130.3189, 46.8],
+  双鸭山市: [131.1415, 46.6761],
+  黑河市: [127.5282, 50.2448],
+  牡丹江市: [129.6329, 44.5514],
+  齐齐哈尔市: [123.9181, 47.3548],
+  鸡西市: [130.9693, 45.295],
+  大庆市: [125.104, 46.5894],
+  绥化市: [126.9687, 46.6541],
+  伊春市: [128.8408, 47.7283],
+  洛阳市: [112.4538, 34.6197],
+  三门峡市: [111.2004, 34.7731],
+  漯河市: [114.0166, 33.5803],
+  许昌市: [113.852, 34.0373],
+  南阳市: [112.5285, 32.9902],
+  信阳市: [114.091, 32.1486],
+  济源市: [112.6023, 35.069],
+  濮阳市: [115.0292, 35.7627],
+  鹤壁市: [114.2973, 35.7483],
+  郑州市: [113.6253, 34.7463],
+  焦作市: [113.2419, 35.2157],
+  安阳市: [114.3924, 36.0987],
+  开封市: [114.3142, 34.798],
+  商丘市: [115.6563, 34.4151],
+  新乡市: [113.9267, 35.3035],
+  驻马店市: [114.0219, 33.014],
+  周口市: [114.7012, 33.6346],
+  平顶山市: [113.1925, 33.7665],
+  威海市: [122.1205, 37.5133],
+  淄博市: [118.0549, 36.8137],
+  青岛市: [120.3826, 36.0669],
+  烟台市: [121.4477, 37.4645],
+  聊城市: [115.9852, 36.4558],
+  东营市: [118.6746, 37.4339],
+  滨州市: [117.9707, 37.3826],
+  日照市: [119.5268, 35.4169],
+  潍坊市: [119.1617, 36.7076],
+  济南市: [117.1201, 36.652],
+  泰安市: [117.0869, 36.2017],
+  枣庄市: [117.3237, 34.8108],
+  德州市: [116.3592, 37.4364],
+  济宁市: [116.5871, 35.4151],
+  临沂市: [118.3564, 35.1037],
+  菏泽市: [115.4796, 35.2343],
+  汉中市: [107.0231, 33.0663],
+  商洛市: [109.9186, 33.8733],
+  榆林市: [109.7341, 38.2857],
+  铜川市: [108.9451, 34.8971],
+  延安市: [109.4946, 36.6501],
+  西安市: [108.9396, 34.3432],
+  宝鸡市: [107.2376, 34.3628],
+  安康市: [109.029, 32.6854],
+  咸阳市: [108.7088, 34.3298],
+  渭南市: [109.4709, 34.5206],
+  黔东南苗族侗族自治州: [107.9828, 26.5837],
+  遵义市: [107.0319, 27.7219],
+  六盘水市: [104.8303, 26.5925],
+  铜仁市: [109.1895, 27.7315],
+  黔西南布依族苗族自治州: [104.9064, 25.0877],
+  安顺市: [105.9476, 26.2531],
+  黔南布依族苗族自治州: [107.5223, 26.2531],
+  毕节市: [105.2915, 27.2836],
+  贵阳市: [106.6282, 26.6466],
+  林芝市: [94.3614, 29.6487],
+  昌都市: [97.1704, 31.1428],
+  那曲市: [92.0515, 31.4779],
+  拉萨市: [91.1719, 29.6534],
+  阿里地区: [80.1057, 32.5009],
+  山南市: [91.7714, 29.2377],
+  日喀则市: [88.8804, 29.2668],
+  马鞍山市: [118.506, 31.6687],
+  阜阳市: [115.8142, 32.891],
+  铜陵市: [117.8112, 30.9452],
+  池州市: [117.4956, 30.6742],
+  黄山市: [118.3376, 29.7148],
+  安庆市: [117.1153, 30.5318],
+  淮南市: [117.0186, 32.5853],
+  蚌埠市: [117.3885, 32.9168],
+  亳州市: [115.7785, 33.8462],
+  宣城市: [118.7591, 30.9392],
+  六安市: [116.5197, 31.7358],
+  芜湖市: [118.4330, 31.3526],
+  宿州市: [116.9641, 33.6472],
+  淮北市: [116.7983, 33.9562],
+  合肥市: [117.2272, 31.8205],
+  滁州市: [118.3334, 32.2559],
+  福州市: [119.2964, 26.0742],
+  宁德市: [119.5477, 26.6662],
+  莆田市: [119.0076, 25.4542],
+  南平市: [118.0813, 27.3828],
+  厦门市: [118.0889, 24.4796],
+  泉州市: [118.6757, 24.8744],
+  漳州市: [117.6472, 24.5152],
+  三明市: [117.6389, 26.2634],
+  龙岩市: [117.0173, 25.0758],
+  岳阳市: [113.1289, 29.3564],
+  湘西土家族苗族自治州: [109.7374, 28.3125],
+  长沙市: [112.9388, 28.2283],
+  常德市: [111.699, 29.0314],
+  张家界市: [110.4788, 29.1173],
+  怀化市: [110.0015, 27.5698],
+  湘潭市: [112.9454, 27.8313],
+  株洲市: [113.1327, 27.8288],
+  邵阳市: [111.4678, 27.2395],
+  郴州市: [113.0155, 25.7701],
+  娄底市: [111.9944, 27.6998],
+  益阳市: [112.3559, 28.5548],
+  衡阳市: [112.572, 26.8942],
+  永州市: [111.6134, 26.4198],
+  临高县: [109.6905, 19.9120],
+  定安县: [110.3580, 19.6812],
+  琼海市: [110.4745, 19.2591],
+  陵水黎族自治县: [110.0375, 18.506],
+  白沙黎族自治县: [109.4429, 19.2216],
+  屯昌县: [110.1016, 19.3516],
+  东方市: [108.6518, 19.0951],
+  乐东黎族自治县: [109.1733, 18.75],
+  昌江黎族自治县: [109.0557, 19.2981],
+  万宁市: [110.3926, 18.7936],
+  琼中黎族苗族自治县: [109.8384, 19.0332],
+  三沙市: [112.3386, 16.831],
+  澄迈县: [110.0074, 19.7388],
+  文昌市: [110.7974, 19.5442],
+  三亚市: [109.5117, 18.2528],
+  儋州市: [109.5808, 19.5209],
+  海口市: [110.1984, 20.0458],
+  保亭黎族苗族自治县: [109.7002, 18.6403],
+  五指山市: [109.5167, 18.7748],
+  连云港市: [119.2214, 34.5966],
+  南通市: [120.8945, 31.9812],
+  宿迁市: [118.2752, 33.9631],
+  南京市: [118.7966, 32.0593],
+  淮安市: [119.1131, 33.5514],
+  常州市: [119.9740, 31.8113],
+  镇江市: [119.4244, 32.1881],
+  泰州市: [119.9228, 32.4566],
+  盐城市: [120.1626, 33.3481],
+  扬州市: [119.4128, 32.3944],
+  无锡市: [120.3118, 31.491],
+  苏州市: [120.5852, 31.2997],
+  徐州市: [117.2837, 34.2042],
+  海西蒙古族藏族自治州: [97.3319, 37.3481],
+  海南藏族自治州: [100.6226, 36.2963],
+  海东市: [102.4106, 36.4734],
+  玉树藏族自治州: [97.0062, 33.0063],
+  黄南藏族自治州: [102.0153, 35.5193],
+  果洛藏族自治州: [100.2451, 34.4721],
+  西宁市: [101.7777, 36.6166],
+  海北藏族自治州: [100.9009, 36.9546],
+  柳州市: [109.4280, 24.3264],
+  钦州市: [108.6543, 21.9808],
+  北海市: [109.1202, 21.4813],
+  百色市: [106.6186, 23.903],
+  梧州市: [111.279, 23.4767],
+  桂林市: [110.1797, 25.2356],
+  贺州市: [111.5672, 24.4041],
+  来宾市: [109.2212, 23.7501],
+  河池市: [108.0852, 24.6929],
+  玉林市: [110.1809, 22.654],
+  南宁市: [108.3664, 22.8177],
+  崇左市: [107.3649, 22.3771],
+  贵港市: [109.5989, 23.1118],
+  防城港市: [108.3546, 21.6867],
+  固原市: [106.2426, 36.0162],
+  中卫市: [105.1967, 37.5001],
+  石嘴山市: [106.3827, 38.9846],
+  银川市: [106.2309, 38.4877],
+  吴忠市: [106.1986, 37.9977],
+  宁波市: [121.6245, 29.8602],
+  温州市: [120.6992, 27.9938],
+  嘉兴市: [120.7556, 30.7468],
+  舟山市: [122.2073, 29.9855],
+  台州市: [121.4207, 28.6557],
+  丽水市: [119.9232, 28.4676],
+  金华市: [119.6472, 29.0791],
+  衢州市: [118.8593, 28.9702],
+  湖州市: [120.0868, 30.8941],
+  杭州市: [120.2107, 30.2460],
+  绍兴市: [120.5828, 30.0515],
+  唐山市: [118.1801, 39.6306],
+  秦皇岛市: [119.5202, 39.8882],
+  邯郸市: [114.5391, 36.6258],
+  廊坊市: [116.6835, 39.5383],
+  沧州市: [116.8387, 38.3046],
+  邢台市: [114.4974, 37.0602],
+  衡水市: [115.6689, 37.7393],
+  张家口市: [114.8858, 40.7689],
+  石家庄市: [114.5149, 38.0420],
+  保定市: [115.4645, 38.8744],
+  承德市: [117.9627, 40.9529],
+  香港: [114.1733, 22.32],
+  澳门: [113.549, 22.1989],
+  嘉峪关市: [98.2882, 39.7732],
+  酒泉市: [98.4943, 39.7334],
+  兰州市: [103.8342, 36.0607],
+  金昌市: [102.1879, 38.5214],
+  白银市: [104.1388, 36.5451],
+  平凉市: [106.6649, 35.5424],
+  张掖市: [100.4498, 38.9247],
+  庆阳市: [107.6434, 35.7094],
+  武威市: [102.6378, 37.9289],
+  甘南藏族自治州: [102.9117, 34.9832],
+  临夏回族自治州: [103.2103, 35.6017],
+  定西市: [104.5923, 35.6079],
+  天水市: [105.7248, 34.5815],
+  陇南市: [104.9602, 33.3701],
+  广元市: [105.844, 32.4357],
+  南充市: [106.1105, 30.8372],
+  绵阳市: [104.6791, 31.4676],
+  巴中市: [106.7475, 31.8678],
+  德阳市: [104.3977, 31.1274],
+  成都市: [104.0663, 30.5729],
+  内江市: [105.0579, 29.5802],
+  自贡市: [104.7793, 29.3392],
+  广安市: [106.6326, 30.4563],
+  资阳市: [104.6272, 30.1292],
+  达州市: [107.4677, 31.2092],
+  遂宁市: [105.5926, 30.5326],
+  乐山市: [103.7660, 29.5522],
+  泸州市: [105.4418, 28.8709],
+  眉山市: [103.8484, 30.0771],
+  宜宾市: [104.6428, 28.7523],
+  凉山彝族自治州: [102.2677, 27.8813],
+  攀枝花市: [101.7184, 26.5824],
+  甘孜藏族自治州: [101.9623, 30.0495],
+  阿坝藏族羌族自治州: [102.2245, 31.8994],
+  雅安市: [103.0415, 30.0099],
+  赣州市: [114.9334, 25.8311],
+  景德镇市: [117.1848, 29.2744],
+  萍乡市: [113.8871, 27.6587],
+  新余市: [114.9166, 27.8185],
+  吉安市: [114.9668, 27.0912],
+  上饶市: [117.9430, 28.4551],
+  南昌市: [115.8579, 28.6829],
+  抚州市: [116.3580, 27.9489],
+  鹰潭市: [117.0395, 28.2720],
+  九江市: [115.95356, 29.661],
+  宜春市: [114.4168, 27.8162],
+  曲靖市: [103.7962, 25.4908],
+  昭通市: [103.7170, 27.3381],
+  红河哈尼族彝族自治州: [103.3748, 23.3631],
+  怒江傈僳族自治州: [98.8566, 25.8175],
+  西双版纳傣族自治州: [100.797, 22.009],
+  丽江市: [100.2259, 26.8551],
+  文山壮族苗族自治州: [104.2156, 23.4009],
+  玉溪市: [102.5266, 24.3467],
+  普洱市: [100.9660, 22.8252],
+  保山市: [99.1614, 25.112],
+  大理白族自治州: [100.2676, 25.6065],
+  楚雄彝族自治州: [101.5283, 25.0456],
+  迪庆藏族自治州: [99.7021, 27.8191],
+  临沧市: [100.0888, 23.8841],
+  昆明市: [102.8336, 24.8814],
+  德宏傣族景颇族自治州: [98.5856, 24.4331],
+  太原市: [112.5496, 37.8704],
+  阳泉市: [113.5804, 37.8570],
+  吕梁市: [111.1445, 37.5189],
+  晋中市: [112.7526, 37.688],
+  长治市: [113.1173, 36.1951],
+  临汾市: [111.5193, 36.0885],
+  运城市: [111.0070, 35.0266],
+  忻州市: [112.7341, 38.4159],
+  朔州市: [112.4329, 39.3317],
+  大同市: [113.3667, 40.0971],
+  晋城市: [112.8520, 35.4913],
+  松原市: [124.8253, 45.1419],
+  长春市: [125.3236, 43.8169],
+  吉林市: [126.5497, 43.8381],
+  白城市: [122.8381, 45.6201],
+  辽源市: [125.1446, 42.8879],
+  四平市: [124.3505, 43.1667],
+  延边朝鲜族自治州: [129.4706, 42.9094],
+  白山市: [126.4142, 41.9441],
+  通化市: [125.9397, 41.7283],
+}

report-ui/src/views/bigScreenReport/aj/index.vue

@@ -43,7 +43,7 @@ export default {
   methods: {
     async handleOpen() {
       const url = window.location.href;
-      const shareCode = url.substring(url.lastIndexOf("/") + 1);
+      const shareCode = url.split('?')[0].substring(url.lastIndexOf("/") + 1);
       const { code, data } = await reportShareDetailByCode(shareCode);
       if (code != "200") return;
       this.reportCode = data.reportCode;
@@ -66,13 +66,20 @@ export default {
     },
     pushAj() {
       setShareToken(this.shareToken);
+      const url = window.location.href;
+      const urlParamsObj = this.toUrlParamsMap(url.split('?')[1])
+      const queryParams = { ...urlParamsObj, reportCode: this.reportCode }
       this.$router.push({
         path: "/bigscreen/viewer",
-        query: {
-          reportCode: this.reportCode
-        }
+        query: queryParams
       });
     },
+    toUrlParamsMap(params) {
+      if(!params) return {}
+      const urlObj = {}
+      params.split("&").map(item => urlObj[item.split("=")[0]] = item.split("=")[1])
+      return urlObj
+    },
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then(_ => {

report-ui/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue

@@ -58,7 +58,7 @@ export default {
   props: {
     chartType: String,
     dictKey: String,
-    formData: Object
+    formData: Object | String
   },
   data() {
     return {
@@ -122,7 +122,11 @@ export default {
       this.$emit("change", params);
     },
     selectParams(val, key) {
-      this.chartProperties[key] = val;
+      if (!val) {
+        delete this.chartProperties[key]
+      } else {
+        this.chartProperties[key] = val;
+      }
     },
     getDictKey() {
       return this.dictKey == null ? "CHART_PROPERTIES" : this.dictKey;

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js

@@ -51,6 +51,75 @@ export const widgetBarCompare = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -274,6 +343,14 @@ export const widgetBarCompare = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxXLeft',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -395,6 +472,14 @@ export const widgetBarCompare = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxXRight',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js

@@ -52,6 +52,75 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: 0,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -315,6 +384,14 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -392,6 +469,14 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxYLeft',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -517,6 +602,14 @@ export const widgetBarDoubleYaxis = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxYRight',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js

@@ -71,6 +71,75 @@ export const widgetBarStack = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -334,6 +403,14 @@ export const widgetBarStack = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -411,6 +488,14 @@ export const widgetBarStack = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -536,6 +621,14 @@ export const widgetBarStack = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSign',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -550,7 +643,7 @@ export const widgetBarStack = {
               name: 'dataColor',
               required: false,
               placeholder: '',
-              value: '#fff'
+              value: ''
             },
             {
               type: 'el-select',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js

@@ -67,6 +67,87 @@ export const widgetBarchart = {
               placeholder: '',
               value: 0,
             },
+            {
+              type: 'el-select',
+              label: '堆叠样式',
+              name: 'stackStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'leftRight', name: '左右堆叠' },
+                { code: 'upDown', name: '上下堆叠' },
+              ],
+              value: 'leftRight'
+            },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'solid', name: '实线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '斑点' },
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -197,6 +278,88 @@ export const widgetBarchart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '名称( | 分隔)',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'legendWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'top', name: '顶部' },
+                { code: 'bottom', name: '底部' },
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'vertical', name: '竖排' },
+                { code: 'horizontal', name: '横排' },
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
@@ -248,6 +411,14 @@ export const widgetBarchart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -325,6 +496,14 @@ export const widgetBarchart = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -450,6 +629,14 @@ export const widgetBarchart = {
               placeholder: '',
               value: true
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSign',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '距离',
@@ -472,7 +659,7 @@ export const widgetBarchart = {
               name: 'dataColor',
               required: false,
               placeholder: '',
-              value: '#fff'
+              value: ''
             },
             {
               type: 'el-select',
@@ -548,6 +735,18 @@ export const widgetBarchart = {
         {
           name: '自定义配色',
           list: [
+            {
+              type: 'el-select',
+              label: '配色样式',
+              name: 'colorStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'same', name: '同色' },
+                { code: 'unsame', name: '异色' },
+              ],
+              value: 'same'
+            },
             {
               type: 'customColor',
               label: '',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js

@@ -59,6 +59,75 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-switch',
+              label: '背景显示',
+              name: 'isShowBackground',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'backgroundStyleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(180, 180, 180, 0.2)',
+            },
+            {
+              type: 'vue-color',
+              label: '描边颜色',
+              name: 'backgroundStyleBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#000',
+            },
+            {
+              type: 'el-input-number',
+              label: '描边宽度',
+              name: 'backgroundStyleBorderWidth',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-select',
+              label: '描边类型',
+              name: 'backgroundStyleBorderType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'solid', name: '实线'},
+                {code: 'dashed', name: '虚线'},
+                {code: 'dotted', name: '斑点'},
+              ],
+              value: 'dashed'
+            },
+            {
+              type: 'el-input-number',
+              label: '阴影模糊',
+              name: 'backgroundStyleShadowBlur',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'backgroundStyleShadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 0, 0, 0.5)',
+            },
+            {
+              type: 'el-slider',
+              label: '透明度',
+              name: 'backgroundStyleOpacity',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
           ],
         },
         {
@@ -103,10 +172,10 @@ export const widgetGradientBarchart = {
               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'
             },
@@ -117,9 +186,9 @@ export const widgetGradientBarchart = {
               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'
             },
@@ -130,9 +199,9 @@ export const widgetGradientBarchart = {
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
               ],
               value: 'center'
             },
@@ -167,10 +236,10 @@ export const widgetGradientBarchart = {
               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'
             },
@@ -181,9 +250,9 @@ export const widgetGradientBarchart = {
               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'
             },
@@ -240,6 +309,14 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -317,6 +394,14 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '最大值',
+              name: 'maxY',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-text',
               label: '坐标名',
@@ -426,6 +511,14 @@ export const widgetGradientBarchart = {
               placeholder: '',
               value: true
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSign',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '距离',
@@ -457,10 +550,10 @@ export const widgetGradientBarchart = {
               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'
             },
@@ -538,7 +631,7 @@ export const widgetGradientBarchart = {
               name: 'bar100color',
               required: false,
               placeholder: '',
-              value: 'rgba(0,77,167,1)'
+              value: 'rgba(255, 69, 0, 1)'
             },
             {
               type: 'vue-color',
@@ -610,11 +703,11 @@ export const widgetGradientBarchart = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          { "axis": "苹果", "data": 1000 },
-          { "axis": "三星", "data": 2229 },
-          { "axis": "小米", "data": 3879 },
-          { "axis": "oppo", "data": 2379 },
-          { "axis": "vivo", "data": 4079 },
+          {"axis": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
         ],
       },
       {

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js

@@ -47,6 +47,18 @@ export const widgetBarLineStack = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-select',
+              label: '堆叠样式',
+              name: 'stackStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'leftRight', name: '左右堆叠' },
+                { code: 'upDown', name: '上下堆叠' },
+              ],
+              value: 'leftRight'
+            },
           ],
         },
         {
@@ -359,6 +371,14 @@ export const widgetBarLineStack = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -685,6 +705,14 @@ export const widgetBarLineStack = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignBar',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '距离',
@@ -736,6 +764,14 @@ export const widgetBarLineStack = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignLine',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '距离',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js

@@ -387,6 +387,14 @@ export const widgetBarlinechart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -703,12 +711,20 @@ export const widgetBarlinechart = {
           ],
         },
         {
-          name: '折线数值设定',
+          name: '柱体数值设定',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShowLine',
+              name: 'isShowBar',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignBar',
               required: false,
               placeholder: '',
               value: false
@@ -716,7 +732,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-input-number',
               label: '距离',
-              name: 'distanceLine',
+              name: 'distanceBar',
               required: false,
               placeholder: '',
               value: 5
@@ -724,7 +740,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'fontSizeLine',
+              name: 'fontSizeBar',
               required: false,
               placeholder: '',
               value: 14
@@ -732,7 +748,7 @@ export const widgetBarlinechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColorLine',
+              name: 'subTextColorBar',
               required: false,
               placeholder: '',
               value: '#fff'
@@ -740,7 +756,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'fontWeightLine',
+              name: 'fontWeightBar',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -754,12 +770,20 @@ export const widgetBarlinechart = {
           ],
         },
         {
-          name: '柱体数值设定',
+          name: '折线数值设定',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShowBar',
+              name: 'isShowLine',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignLine',
               required: false,
               placeholder: '',
               value: false
@@ -767,7 +791,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-input-number',
               label: '距离',
-              name: 'distanceBar',
+              name: 'distanceLine',
               required: false,
               placeholder: '',
               value: 5
@@ -775,7 +799,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'fontSizeBar',
+              name: 'fontSizeLine',
               required: false,
               placeholder: '',
               value: 14
@@ -783,7 +807,7 @@ export const widgetBarlinechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColorBar',
+              name: 'subTextColorLine',
               required: false,
               placeholder: '',
               value: '#fff'
@@ -791,7 +815,7 @@ export const widgetBarlinechart = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'fontWeightBar',
+              name: 'fontWeightLine',
               required: false,
               placeholder: '',
               selectOptions: [

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js

@@ -51,6 +51,18 @@ export const widgetMoreBarLine = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-select',
+              label: '堆叠样式',
+              name: 'stackStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'leftRight', name: '左右堆叠' },
+                { code: 'upDown', name: '上下堆叠' },
+              ],
+              value: 'leftRight'
+            },
           ],
         },
         {
@@ -379,6 +391,14 @@ export const widgetMoreBarLine = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -695,12 +715,20 @@ export const widgetMoreBarLine = {
           ],
         },
         {
-          name: '折线数值设定',
+          name: '柱体数值设定',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShowLine',
+              name: 'isShowBar',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignBar',
               required: false,
               placeholder: '',
               value: false
@@ -708,7 +736,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-number',
               label: '距离',
-              name: 'distanceLine',
+              name: 'distanceBar',
               required: false,
               placeholder: '',
               value: 5
@@ -716,7 +744,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'fontSizeLine',
+              name: 'fontSizeBar',
               required: false,
               placeholder: '',
               value: 14
@@ -724,7 +752,7 @@ export const widgetMoreBarLine = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColorLine',
+              name: 'subTextColorBar',
               required: false,
               placeholder: '',
               value: '#fff'
@@ -732,7 +760,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'fontWeightLine',
+              name: 'fontWeightBar',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -746,12 +774,20 @@ export const widgetMoreBarLine = {
           ],
         },
         {
-          name: '柱体数值设定',
+          name: '折线数值设定',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'isShowBar',
+              name: 'isShowLine',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSignLine',
               required: false,
               placeholder: '',
               value: false
@@ -759,7 +795,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-number',
               label: '距离',
-              name: 'distanceBar',
+              name: 'distanceLine',
               required: false,
               placeholder: '',
               value: 5
@@ -767,7 +803,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'fontSizeBar',
+              name: 'fontSizeLine',
               required: false,
               placeholder: '',
               value: 14
@@ -775,7 +811,7 @@ export const widgetMoreBarLine = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColorBar',
+              name: 'subTextColorLine',
               required: false,
               placeholder: '',
               value: '#fff'
@@ -783,7 +819,7 @@ export const widgetMoreBarLine = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'fontWeightBar',
+              name: 'fontWeightLine',
               required: false,
               placeholder: '',
               selectOptions: [

report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js

@@ -366,6 +366,14 @@ export const widgetLineStack = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -568,6 +576,14 @@ export const widgetLineStack = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSign',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js

@@ -225,6 +225,88 @@ export const widgetLinechart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '名称( | 分隔)',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'legendWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'top', name: '顶部' },
+                { code: 'bottom', name: '底部' },
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'vertical', name: '竖排' },
+                { code: 'horizontal', name: '横排' },
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
@@ -276,6 +358,14 @@ export const widgetLinechart = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-text',
+              label: '数值行数',
+              name: 'textRowsNum',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
               type: 'el-input-number',
               label: '数值间隔',
@@ -478,6 +568,14 @@ export const widgetLinechart = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-switch',
+              label: '百分比符号显示',
+              name: 'percentSign',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -576,7 +674,7 @@ export const widgetLinechart = {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{ color: '#1E90FF' }],
+              value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
             },
           ],
         },

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

@@ -291,6 +291,27 @@ export const widgetAirbubbleMap = {
             },
           ],
         },
+        {
+          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'
+            },
+          ],
+        },
       ],
     ],
     data: [

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

@@ -0,0 +1,478 @@
+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: 'el-input-number',
+              label: '柱底外圆大小',
+              name: 'barBottomOutSymbolSize',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+          ],
+        },
+        {
+          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: '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: '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-mapv2chart',
+        dictKey: 'MAP_V2_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/configure/percentCharts/widget-gauge.js

@@ -31,6 +31,14 @@ export const widgetGauge = {
         placeholder: '',
         value: ''
       },
+      {
+        type: 'el-input-number',
+        label: '最大值',
+        name: 'maxValue',
+        require: false,
+        placeholder: '',
+        value: 100,
+      },
       [
         {
           name: "圆环设置",

report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decorate-flow-line.js

@@ -0,0 +1,123 @@
+/**
+ * author:chenxg
+ * date:2023-08-24
+ */
+export const widgetDecorateFlowLine =  {
+    code: 'widget-decorate-flow-line',
+    type: 'border',
+    tabName: '样式组件',
+    label: '流光直线',
+    icon: 'icontupian1',
+    options: {
+      // 配置
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '流光直线',
+        },
+        {
+          type: 'vue-color',
+          label: '背景颜色',
+          name: 'background',
+          required: false,
+          placeholder: '',
+          value: ''
+        },
+        {
+          type: 'vue-color',
+          label: '流光颜色',
+          name: 'lightColor',
+          required: false,
+          placeholder: '',
+          value: '#fff'
+        },
+        {
+          type: 'el-select',
+          label: '流动方向',
+          name: 'flowDirection',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            { code: 'left', name: '自左向右' },
+            { code: 'right', name: '自右向左' },
+          ],
+          value: 'left'
+        },
+        {
+          type: 'el-select',
+          label: '流动速度',
+          name: 'flowingLightSpeed',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            { code: 'low', name: '低' },
+            { code: 'medium', name: '中' },
+            { code: 'high', name: '高' },
+          ],
+          value: 'medium'
+        },
+        {
+          type: 'el-select',
+          label: '旋转中心',
+          name: 'flowingLightRotationCenter',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            { code: 'left', name: '左' },
+            { code: 'center', name: '中' },
+            { code: 'right', name: '右' },
+          ],
+          value: 'center'
+        },
+        {
+          type: 'el-input-number',
+          label: '旋转角度',
+          name: 'rotationAngle',
+          required: false,
+          placeholder: '',
+          value: '0'
+        },
+      ],
+      // 数据
+      data: [],
+      // 坐标
+      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: 400,
+        },
+        {
+          type: 'el-input-number',
+          label: '高度',
+          name: 'height',
+          required: false,
+          placeholder: '该容器在1080px大屏中的高度',
+          value: 4,
+        },
+      ],
+    }
+  }

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

@@ -45,12 +45,15 @@ import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertic
 import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
 import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
 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类型的组件
   widgetText,
   widgetBorder,
+  widgetDecorateFlowLine,
   widgetDecoration,
   widgetMarquee,
   widgetHref,
@@ -88,4 +91,5 @@ export const widgetTool = [
   // widgetInput,
   widgetFormTime,
   widgetBarDoubleYaxis,
+  widgetBarMap
 ]

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

@@ -324,6 +324,7 @@ export default {
     setOptionsXLeft() {
       const optionsSetup = this.optionsSetup;
       const xAxisLeft = {
+        max: optionsSetup.maxXLeft !== "" ? optionsSetup.maxXLeft : null,
         splitNumber: optionsSetup.splitNumberLeft,
         type: "value",
         show: optionsSetup.hideXLeft,
@@ -363,6 +364,7 @@ export default {
     setOptionsXRight() {
       const optionsSetup = this.optionsSetup;
       const xAxisRight = {
+        max: optionsSetup.maxXRight !== "" ? optionsSetup.maxXRight : null,
         gridIndex: 2,
         splitNumber: optionsSetup.splitNumberRight,
         show: optionsSetup.hideXRight,
@@ -426,39 +428,48 @@ export default {
     setOptionsTop() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
+      series[0].label = {
+        normal: {
+          show: optionsSetup.isShow,
+          position: "insideLeft",
+          textStyle: {
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+        },
+        emphasis: {
+          show: false,
+        },
+      };
+      series[1].label = {
+        normal: {
+          show: optionsSetup.isShow,
+          color: "red",
+          position: "insideRight",
+          textStyle: {
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+        },
+        emphasis: {
+          show: false,
+        },
+      };
       for (const key in series) {
-        if (series[key].type == "bar") {
-          (series[0].label = {
-            normal: {
-              show: optionsSetup.isShow,
-              position: "insideLeft",
-              textStyle: {
-                fontSize: optionsSetup.fontSize,
-                color: optionsSetup.dataColor,
-                fontWeight: optionsSetup.fontWeight,
-              },
-            },
-            emphasis: {
-              show: false,
-            },
-          }),
-            (series[1].label = {
-              normal: {
-                show: optionsSetup.isShow,
-                color: "red",
-                position: "insideRight",
-                textStyle: {
-                  fontSize: optionsSetup.fontSize,
-                  color: optionsSetup.dataColor,
-                  fontWeight: optionsSetup.fontWeight,
-                },
-              },
-              emphasis: {
-                show: false,
-              },
-            }),
-            (series[key].barWidth = optionsSetup.maxWidth);
-        }
+        series[key].barWidth = optionsSetup.maxWidth;
+        //柱体背景属性
+        series[key].showBackground = optionsSetup.isShowBackground;
+        series[key].backgroundStyle = {
+          color: optionsSetup.backgroundStyleColor,
+          borderColor: optionsSetup.backgroundStyleBorderColor,
+          borderWidth: optionsSetup.backgroundStyleBorderWidth,
+          borderType: optionsSetup.backgroundStyleBorderType,
+          shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+          shadowColor: optionsSetup.backgroundStyleShadowColor,
+          opacity: optionsSetup.backgroundStyleOpacity / 100,
+        };
       }
       this.options.series = series;
     },

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -185,18 +185,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -219,6 +207,7 @@ export default {
       const optionsSetup = this.optionsSetup;
       const yAxis = [
         {
+          max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
           type: "value",
           // 均分
           splitNumber: optionsSetup.splitNumberLeft,
@@ -261,6 +250,7 @@ export default {
           },
         },
         {
+          max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
           type: "value",
           // 均分
           splitNumber: optionsSetup.splitNumberRight,
@@ -322,6 +312,17 @@ export default {
           series[key].barWidth = optionsSetup.maxWidth;
           series[key].barMinHeight = optionsSetup.minHeight;
           series[key].itemStyle.barBorderRadius = optionsSetup.radius;
+          //柱体背景属性
+          series[key].showBackground = optionsSetup.isShowBackground;
+          series[key].backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          };
         }
       }
       this.options.series = series;
@@ -421,6 +422,7 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       let axis = [];
       let bar1 = [];
@@ -439,6 +441,30 @@ export default {
       const legendName = [];
       legendName.push("bar1");
       legendName.push("bar2");
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -460,18 +486,44 @@ export default {
       });
     },
     renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
       this.options.xAxis.data = val.xAxis;
       // series
       const series = this.options.series;
       const legendName = [];
       let k = 0;
-      for (const i in val.series){
+      for (const i in val.series) {
         if (val.series[i].type == "bar") {
           series[k]['data'] = val.series[i].data;
           k++
           legendName.push(val.series[i].name);
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -144,18 +144,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -177,6 +165,7 @@ export default {
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -302,10 +291,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
     },
     //去重
     setUnique(arr) {
@@ -369,6 +358,7 @@ export default {
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
           },
           //颜色，圆角属性
           itemStyle: {
@@ -377,6 +367,17 @@ export default {
               barBorderRadius: optionsSetup.radius,
             },
           },
+          //柱体背景属性
+          showBackground: optionsSetup.isShowBackground,
+          backgroundStyle: {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          }
         });
         legendName.push(yAxisList[i]);
       }
@@ -392,6 +393,30 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -450,6 +475,7 @@ export default {
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,
+              formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
             },
             //颜色，圆角属性
             itemStyle: {
@@ -458,10 +484,46 @@ export default {
                 barBorderRadius: optionsSetup.radius,
               },
             },
+            //柱体背景属性
+            showBackground: optionsSetup.isShowBackground,
+            backgroundStyle: {
+              color: optionsSetup.backgroundStyleColor,
+              borderColor: optionsSetup.backgroundStyleBorderColor,
+              borderWidth: optionsSetup.backgroundStyleBorderWidth,
+              borderType: optionsSetup.backgroundStyleBorderType,
+              shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+              shadowColor: optionsSetup.backgroundStyleShadowColor,
+              opacity: optionsSetup.backgroundStyleOpacity / 100,
+            }
           });
         }
         legendName.push(val.series[i].name);
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -9,6 +9,7 @@ import {
   originWidgetLinkageLogic,
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetBarchart",
   components: {},
@@ -108,10 +109,9 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      this.setOptionsTop();
+      this.setOptionsLegend();
       this.setOptionsTooltip();
       this.setOptionsMargin();
-      this.setOptionsColor();
       this.setOptionsData();
     },
     // 标题修改
@@ -151,18 +151,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -184,6 +172,7 @@ export default {
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -225,36 +214,6 @@ export default {
       };
       this.options.yAxis = yAxis;
     },
-    // 数值设定 or 柱体设置
-    setOptionsTop() {
-      const optionsSetup = this.optionsSetup;
-      const series = this.options.series;
-      if (series[0].type == "bar") {
-        if (optionsSetup.verticalShow) {
-          series[0].label = {
-            show: optionsSetup.isShow,
-            position: "right",
-            distance: optionsSetup.distance,
-            textStyle: {
-              fontSize: optionsSetup.fontSize,
-              color: optionsSetup.dataColor,
-              fontWeight: optionsSetup.fontWeight,
-            },
-          };
-        } else {
-          series[0].label = {
-            show: optionsSetup.isShow,
-            position: "top",
-            distance: optionsSetup.distance,
-            fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
-            fontWeight: optionsSetup.fontWeight,
-          };
-        }
-      }
-      series[0].barWidth = optionsSetup.maxWidth;
-      series[0].barMinHeight = optionsSetup.minHeight;
-    },
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
@@ -280,33 +239,62 @@ export default {
       };
       this.options.grid = grid;
     },
-    // 图例颜色修改
-    setOptionsColor() {
+    // 图例
+    setOptionsLegend() {
       const optionsSetup = this.optionsSetup;
-      const customColor = optionsSetup.customColor;
-      if (!customColor) return;
-      const arrColor = [];
-      for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color);
-      }
-      const itemStyle = {
-        normal: {
-          color: (params) => {
-            return arrColor[params.dataIndex];
-          },
-          barBorderRadius: optionsSetup.radius,
-        },
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.legendColor,
+        fontSize: optionsSetup.legendFontSize,
       };
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "bar") {
-          this.options.series[key].itemStyle = itemStyle;
+      legend.itemWidth = optionsSetup.legendWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == "") {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
         }
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend["data"] = arr;
+      }
+    },
+    //获取堆叠样式
+    getStackStyle() {
+      const optionsSetup = this.optionsSetup;
+      let style = "";
+      if (optionsSetup.stackStyle == "upDown") {
+        style = "total";
       }
-      this.options = Object.assign({}, this.options);
+      return style;
+    },
+    // 获得位置
+    getOptionsPosition() {
+      const optionsSetup = this.optionsSetup;
+      let position = "";
+      if (optionsSetup.verticalShow) {
+        position = "right";
+      } else {
+        position = "top";
+      }
+      return position;
     },
     // 数据解析
     setOptionsData(e, paramsConfig) {
-      const optionsSetup = this.optionsSetup;
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       // 联动接收者逻辑开始
       optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
@@ -332,6 +320,12 @@ export default {
     // 静态数据
     staticDataFn(val) {
       const optionsSetup = this.optionsSetup;
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
       const series = this.options.series;
       let axis = [];
       let data = [];
@@ -339,6 +333,8 @@ export default {
         axis[i] = val[i].axis;
         data[i] = val[i].data;
       }
+      const legendName = [];
+      legendName.push("bar");
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
@@ -351,9 +347,79 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      if (series[0].type == "bar") {
-        series[0].data = data;
+      for (const i in series) {
+        if (series[i].type == "bar") {
+          series[i].type = "bar";
+          series[i].barGap = "0%";
+          series[i].barWidth = optionsSetup.maxWidth;
+          series[i].barMinHeight = optionsSetup.minHeight;
+          series[i].label = {
+            show: optionsSetup.isShow,
+            position: this.getOptionsPosition(),
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          };
+          // 获取颜色样式
+          if (optionsSetup.colorStyle == 'same') {
+            series[i].itemStyle = {
+              normal: {
+                color: arrColor[i],
+                barBorderRadius: optionsSetup.radius,
+              },
+            };
+          } else {
+            series[i].itemStyle = {
+              normal: {
+                color: (params) => {
+                  return arrColor[params.dataIndex];
+                },
+                barBorderRadius: optionsSetup.radius,
+              },
+            };
+          }
+          //柱体背景属性
+          series[i].showBackground = optionsSetup.isShowBackground;
+          series[i].backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          };
+          series[i].data = data;
+        }
+      }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX)
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
       }
+      this.options.xAxis.axisLabel = axisLabel;
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(refreshTime) {
@@ -377,6 +443,14 @@ export default {
       });
     },
     renderingFn(optionsSetup, val) {
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      const series = [];
+      const legendName = [];
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
@@ -389,13 +463,85 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      // series
-      const series = this.options.series;
-      for (const i in series) {
-        if (series[i].type == "bar") {
-          series[i].data = val.series[i].data;
+      for (const i in val.series) {
+        legendName.push(val.series[i].name);
+        const obj = {};
+        if (val.series[i].type == "bar") {
+          obj.type = "bar";
+          obj.barGap = "0%";
+          obj.stack = this.getStackStyle();
+          obj.barWidth = optionsSetup.maxWidth;
+          obj.barMinHeight = optionsSetup.minHeight;
+          obj.label = {
+            show: optionsSetup.isShow,
+            position: this.getOptionsPosition(),
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          };
+          // 获取颜色样式
+          if (optionsSetup.colorStyle == 'same') {
+            obj.itemStyle = {
+              normal: {
+                color: arrColor[i],
+                barBorderRadius: optionsSetup.radius,
+              },
+            };
+          } else {
+            obj.itemStyle = {
+              normal: {
+                color: (params) => {
+                  return arrColor[params.dataIndex];
+                },
+                barBorderRadius: optionsSetup.radius,
+              },
+            };
+          }
+          //柱体背景属性
+          obj.showBackground = optionsSetup.isShowBackground;
+          obj.backgroundStyle = {
+            color: optionsSetup.backgroundStyleColor,
+            borderColor: optionsSetup.backgroundStyleBorderColor,
+            borderWidth: optionsSetup.backgroundStyleBorderWidth,
+            borderType: optionsSetup.backgroundStyleBorderType,
+            shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+            shadowColor: optionsSetup.backgroundStyleShadowColor,
+            opacity: optionsSetup.backgroundStyleOpacity / 100,
+          }
+          obj.data = val.series[i].data;
+          series.push(obj);
+        }
+      }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
         }
       }
+      this.options.xAxis.axisLabel = axisLabel;
+      this.options.series = series;
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
     },
   },
 };

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart"  :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -10,13 +10,13 @@ import {
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
 import echarts from "echarts";
+
 export default {
   name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
   components: {},
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
     widgetIndex: {
       type: Number,
       default: 0,
@@ -227,18 +227,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -260,6 +248,7 @@ export default {
     setOptionsY() {
       const optionsSetup = this.optionsSetup;
       const yAxis = {
+        max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
         type: "value",
         scale: optionsSetup.scale,
         // 均分
@@ -314,6 +303,7 @@ export default {
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
           };
         } else {
           series[0].label = {
@@ -323,9 +313,21 @@ export default {
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
           };
         }
         series[0].barWidth = optionsSetup.maxWidth;
+        //柱体背景属性
+        series[0].showBackground = optionsSetup.isShowBackground;
+        series[0].backgroundStyle = {
+          color: optionsSetup.backgroundStyleColor,
+          borderColor: optionsSetup.backgroundStyleBorderColor,
+          borderWidth: optionsSetup.backgroundStyleBorderWidth,
+          borderType: optionsSetup.backgroundStyleBorderType,
+          shadowBlur: optionsSetup.backgroundStyleShadowBlur,
+          shadowColor: optionsSetup.backgroundStyleShadowColor,
+          opacity: optionsSetup.backgroundStyleOpacity / 100,
+        };
       }
     },
     // tooltip 提示语设置
@@ -360,7 +362,7 @@ export default {
       let normal = {};
       if (optionsSetup.verticalShow) {
         normal = {
-          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
             {
               offset: 0,
               color: optionsSetup.bar0color, // 0% 处的颜色
@@ -376,7 +378,7 @@ export default {
         };
       } else {
         normal = {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
             {
               offset: 0,
               color: optionsSetup.bar0color, // 0% 处的颜色
@@ -395,7 +397,6 @@ export default {
     },
     // 数据解析
     setOptionsData(e, paramsConfig) {
-      const optionsSetup = this.optionsSetup;
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       // 联动接收者逻辑开始
       optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
@@ -443,6 +444,30 @@ export default {
       if (series[0].type == "bar") {
         series[0].data = data;
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
     },
     // 动态数据
     dynamicDataFn(refreshTime) {
@@ -478,14 +503,35 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-
-      // series
       const series = this.options.series;
-      for (const i in series) {
-        if (series[i].type == "bar") {
-          series[i].data = val.series[i].data;
+      if (series[0].type == "bar") {
+        series[0].data = val.series[0].data;
+      }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
         }
       }
+      this.options.xAxis.axisLabel = axisLabel;
     },
   },
 };

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

@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -180,18 +179,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -359,6 +346,15 @@ export default {
         this.options.legend["data"] = arr;
       }
     },
+    //获取堆叠样式
+    getStackStyle() {
+      const optionsSetup = this.optionsSetup;
+      let style = "";
+      if (optionsSetup.stackStyle == "upDown") {
+        style = "total";
+      }
+      return style;
+    },
     // 数据解析
     setOptionsData(e, paramsConfig) {
       const optionsSetup = this.optionsSetup;
@@ -440,6 +436,7 @@ export default {
           type: "bar",
           data: bar,
           barGap: "0%",
+          stack : this.getStackStyle(),
           barWidth: optionsSetup.maxWidth,
           label: {
             show: optionsSetup.isShowBar,
@@ -448,6 +445,7 @@ export default {
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
             fontWeight: optionsSetup.fontWeightBar,
+            formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
           },
           //颜色，圆角属性
           itemStyle: {
@@ -491,9 +489,34 @@ export default {
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
+            formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
           },
         });
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.xAxis.data = xAxisList;
       this.options.yAxis.data = [];
@@ -544,6 +567,7 @@ export default {
           type: "bar",
           data: bar,
           barGap: "0%",
+          stack : this.getStackStyle(),
           barWidth: optionsSetup.maxWidth,
           label: {
             show: optionsSetup.isShowBar,
@@ -552,6 +576,7 @@ export default {
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
             fontWeight: optionsSetup.fontWeightBar,
+            formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
           },
           //颜色，圆角属性
           itemStyle: {
@@ -594,9 +619,35 @@ export default {
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
+            formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
           },
         });
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -13,7 +13,6 @@ export default {
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -187,18 +186,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -337,6 +324,7 @@ export default {
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
+            formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
           };
         }
       }
@@ -355,6 +343,7 @@ export default {
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
             fontWeight: optionsSetup.fontWeightBar,
+            formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
           };
           series[key].barWidth = optionsSetup.maxWidth;
           series[key].barMinHeight = optionsSetup.minHeight;
@@ -480,6 +469,31 @@ export default {
       const legendName = [];
       legendName.push("bar");
       legendName.push("line");
+      const optionsSetup = this.optionsSetup;
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -513,6 +527,32 @@ export default {
           }
         }
       }
+      const optionsSetup = this.optionsSetup;
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -8,13 +8,13 @@
 import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 import echarts from "echarts";
+
 export default {
   name: "widgetMoreBarLineChart",
   components: {},
   props: {
     value: Object,
     ispreview: Boolean,
-    flagInter: null,
   },
   data() {
     return {
@@ -246,18 +246,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -424,6 +412,15 @@ export default {
         this.options.legend["data"] = arr;
       }
     },
+    //获取堆叠样式
+    getStackStyle() {
+      const optionsSetup = this.optionsSetup;
+      let style = "";
+      if (optionsSetup.stackStyle == "upDown") {
+        style = "total";
+      }
+      return style;
+    },
     // 数据处理
     setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -478,6 +475,7 @@ export default {
         if (series[i].type == "bar") {
           series[i].name = legendName[i];
           series[i].type = "bar";
+          series[i].stack = this.getStackStyle();
           series[i].label = {
             show: optionsSetup.isShowBar,
             position: "top",
@@ -485,6 +483,7 @@ export default {
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
             fontWeight: optionsSetup.fontWeightBar,
+            formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
           };
           series[i].barWidth = optionsSetup.maxWidth;
           series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
@@ -522,12 +521,37 @@ export default {
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
+            formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
           };
         }
       }
       series[0].data = bar1;
       series[1].data = bar2;
       series[2].data = line;
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -565,6 +589,7 @@ export default {
         if (val.series[i].type == "bar") {
           obj.name = val.series[i].name;
           obj.type = val.series[i].type;
+          obj.stack = this.getStackStyle();
           obj.label = {
             show: optionsSetup.isShowBar,
             position: "top",
@@ -572,6 +597,7 @@ export default {
             fontSize: optionsSetup.fontSizeBar,
             color: optionsSetup.subTextColorBar,
             fontWeight: optionsSetup.fontWeightBar,
+            formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
           };
           obj.barWidth = optionsSetup.maxWidth;
           obj.itemStyle = {
@@ -615,11 +641,37 @@ export default {
             fontSize: optionsSetup.fontSizeLine,
             color: optionsSetup.subTextColorLine,
             fontWeight: optionsSetup.fontWeightLine,
+            formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
           };
           obj.data = val.series[i].data;
           series.push(obj);
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -20,6 +20,7 @@ import {
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
 import miment from 'miment'
+
 export default {
   name: "WidgetFormTime",
   props: {
@@ -37,7 +38,7 @@ export default {
       optionsData: {},
       optionsSetup: {},
       //日期时间快捷选项
-      datetimeRangePickerOptions:{
+      datetimeRangePickerOptions: {
         shortcuts: [{
           text: '今天',
           onClick(picker) {
@@ -45,20 +46,20 @@ export default {
             const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
             picker.$emit('pick', [start, end]);
           }
-        },{
+        }, {
           text: '昨天',
           onClick(picker) {
-            const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
-            const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
+            const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
+            const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
             picker.$emit('pick', [start, end]);
           }
-        },{
+        }, {
           text: '最近一周',
           onClick(picker) {
             const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date(new Date(new Date().getTime()+24*60*60*1000));
+            const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
             start.setTime(miment().add(-6, 'DD').stamp());
-            new Date(start.setHours(0,0,0,0));
+            new Date(start.setHours(0, 0, 0, 0));
             picker.$emit('pick', [start, end]);
           }
         }, {
@@ -67,7 +68,7 @@ export default {
             const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
             const start = new Date();
             start.setTime(miment().add(-1, 'MM').stamp());
-            new Date(start.setHours(0,0,0,0));
+            new Date(start.setHours(0, 0, 0, 0));
             picker.$emit('pick', [start, end]);
           }
         }, {
@@ -76,7 +77,25 @@ export default {
             const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
             const start = new Date();
             start.setTime(miment().add(-3, 'MM').stamp());
-            new Date(start.setHours(0,0,0,0));
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近半年',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-6, 'MM').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一年',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-1, 'YY').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
             picker.$emit('pick', [start, end]);
           }
         }],
@@ -144,6 +163,7 @@ export default {
       height: 100%;
       background: inherit;
       color: inherit;
+
       &::placeholder {
         color: inherit;
       }

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -144,18 +144,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -329,10 +317,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
     },
     //去重
     setUnique(arr) {
@@ -400,6 +388,7 @@ export default {
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
           },
         });
         legendName.push(yAxisList[i]);
@@ -416,6 +405,30 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
     },
@@ -488,11 +501,37 @@ export default {
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,
+              formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
             },
           });
         }
         legendName.push(val.series[i].name);
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
       this.options.series = series;
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -9,6 +9,7 @@ import {
   originWidgetLinkageLogic,
   targetWidgetLinkageLogic,
 } from "@/views/bigscreenDesigner/designer/linkageLogic";
+
 export default {
   name: "WidgetLinechart",
   components: {},
@@ -115,11 +116,10 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      this.setOptionsTop();
+      this.setOptionsLegend();
       this.setOptionsTooltip();
       this.setOptionsData();
       this.setOptionsMargin();
-      this.setOptionsColor();
     },
     // 标题修改
     setOptionsTitle() {
@@ -158,18 +158,6 @@ export default {
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
-        axisLabel: {
-          show: true,
-          // 文字间隔
-          interval: optionsSetup.textInterval,
-          // 文字角度
-          rotate: optionsSetup.textAngleX,
-          textStyle: {
-            // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
-          },
-        },
         axisLine: {
           show: true,
           lineStyle: {
@@ -232,40 +220,6 @@ export default {
       };
       this.options.yAxis = yAxis;
     },
-    // 折线设置
-    setOptionsTop() {
-      const optionsSetup = this.optionsSetup;
-      const series = this.options.series;
-      for (const key in series) {
-        if (series[key].type == "line") {
-          series[key].symbol = optionsSetup.symbol;
-          series[key].showSymbol = optionsSetup.markPoint;
-          series[key].symbolSize = optionsSetup.pointSize;
-          series[key].smooth = optionsSetup.smoothCurve;
-          if (optionsSetup.area) {
-            series[key].areaStyle = {
-              opacity: optionsSetup.areaThickness / 100,
-            };
-          } else {
-            series[key].areaStyle = {
-              opacity: 0,
-            };
-          }
-          series[key].lineStyle = {
-            width: optionsSetup.lineWidth,
-          };
-          series[key].label = {
-            show: optionsSetup.isShow,
-            position: "top",
-            distance: 10,
-            fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
-            fontWeight: optionsSetup.fontWeight,
-          };
-        }
-      }
-      this.options.series = series;
-    },
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
@@ -291,23 +245,42 @@ export default {
       };
       this.options.grid = grid;
     },
-    // 图例颜色修改
-    setOptionsColor() {
+    // 图例
+    setOptionsLegend() {
       const optionsSetup = this.optionsSetup;
-      const customColor = optionsSetup.customColor;
-      if (!customColor) return;
-      const arrColor = [];
-      for (let i = 0; i < customColor.length; i++) {
-        arrColor.push(customColor[i].color);
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
+      legend.bottom = optionsSetup.longitudinalPosition;
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.legendColor,
+        fontSize: optionsSetup.legendFontSize,
+      };
+      legend.itemWidth = optionsSetup.legendWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == "") {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend["data"] = name;
+      } else {
+        const arr = legendName.split("|");
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend["data"] = arr;
       }
-      this.options.color = arrColor;
-      this.options = Object.assign({}, this.options);
     },
     // 处理数据
     setOptionsData(e, paramsConfig) {
-      console.log("ces", e);
-      console.log("ces", paramsConfig);
-
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
       const myDynamicData = optionsData.dynamicData;
@@ -324,12 +297,18 @@ export default {
           }
         });
       }
-      console.log(myDynamicData);
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
       const series = this.options.series;
       let axis = [];
       let data = [];
@@ -337,14 +316,73 @@ export default {
         axis[i] = val[i].axis;
         data[i] = val[i].data;
       }
+      const legendName = [];
+      legendName.push("line");
       // x轴
       this.options.xAxis.data = axis;
       // series
       for (const i in series) {
         if (series[i].type == "line") {
+          series[i].symbol = optionsSetup.symbol;
+          series[i].showSymbol = optionsSetup.markPoint;
+          series[i].symbolSize = optionsSetup.pointSize;
+          series[i].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[i].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100,
+            };
+          } else {
+            series[i].areaStyle = {
+              opacity: 0,
+            };
+          }
+          series[i].itemStyle = {
+            normal: {
+              color: arrColor[i],
+            },
+          };
+          series[i].lineStyle = {
+            color: arrColor[i],
+            width: optionsSetup.lineWidth,
+          };
+          series[i].label = {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: 10,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          };
           series[i].data = data;
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -364,15 +402,85 @@ export default {
       });
     },
     renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
       // x轴
       this.options.xAxis.data = val.xAxis;
-      // series
-      const series = this.options.series;
-      for (const i in series) {
-        if (series[i].type == "line") {
-          series[i].data = val.series[i].data;
+      const series = [];
+      const legendName = [];
+      for (const i in val.series) {
+        legendName.push(val.series[i].name);
+        const obj = {};
+        if (val.series[i].type == 'line') {
+          obj.type = 'line';
+          obj.symbol = optionsSetup.symbol;
+          obj.showSymbol = optionsSetup.markPoint;
+          obj.symbolSize = optionsSetup.pointSize;
+          obj.smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            obj.areaStyle = {
+              opacity: optionsSetup.areaThickness / 100,
+            };
+          } else {
+            obj.areaStyle = {
+              opacity: 0,
+            };
+          }
+          obj.itemStyle = {
+            normal: {
+              color: arrColor[i],
+            },
+          };
+          obj.lineStyle = {
+            color: arrColor[i],
+            width: optionsSetup.lineWidth,
+          };
+          obj.label = {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: 10,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.dataColor,
+            fontWeight: optionsSetup.fontWeight,
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          };
+          obj.data = val.series[i].data;
+          series.push(obj);
         }
       }
+      // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
+      const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const axisLabel = {
+        show: true,
+        interval: optionsSetup.textInterval,
+        // 文字角度
+        rotate: optionsSetup.textAngleX,
+        textStyle: {
+          // 坐标文字颜色
+          color: optionsSetup.colorX,
+          fontSize: optionsSetup.fontSizeX,
+        },
+        // 自动换行
+        formatter: function (value, index) {
+          const strs = value.split('');
+          let str = ''
+          for (let i = 0, s; s = strs[i++];) {
+            str += s;
+            if (!(i % rowsNum)) str += '\n';
+          }
+          return str
+        }
+      }
+      this.options.xAxis.axisLabel = axisLabel;
+      this.options.series = series;
+      this.options.legend["data"] = legendName;
+      this.setOptionsLegendName(legendName);
     },
   },
 };

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

@@ -448,7 +448,8 @@ export default {
       //this.setOptionDataValue();
       this.setOptionsData();
       this.setOptionAirSize();
-      this.setOptionMapBlocak();
+      this.setOptionsTooltip();
+      this.setOptionMapBlock();
     },
     // 标题设置
     setOptionsTitle() {
@@ -484,7 +485,7 @@ export default {
       };
       label["normal"] = normal;
     },
-    setOptionMapBlocak() {
+    setOptionMapBlock() {
       const optionsSetup = this.optionsSetup;
       const itemStyle = this.options.series[0]["itemStyle"];
       const normal = {
@@ -534,6 +535,26 @@ export default {
       maxSize4Pin = this.optionsSetup.fontmaxSize4Pin;
       minSize4Pin = this.optionsSetup.fontminSize4Pin;
     },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.tipsColor,
+          fontSize: optionsSetup.tipsFontSize,
+        },
+        formatter: function (params) {
+          if (params.value.length > 1) {
+            return params.data.name + "" + params.data.value[2];
+          } else {
+            return params.name;
+          }
+        },
+      };
+      this.options.tooltip = tooltip;
+    },
     //数据解析
     setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态

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

@@ -0,0 +1,734 @@
+<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;
+
+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: false,
+                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: []
+          },
+          // 柱状体的主干
+          {
+            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: []
+          },
+          // 柱状体的顶部
+          {
+            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: []
+          },
+          // 柱状体的底部
+          {
+            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: []
+          },
+          // 底部外框
+          {
+            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: []
+          }
+        ]
+      },
+      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.setOptionsTooltip();
+      this.setOptionsMap();
+      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;
+    },
+    // 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;
+    },
+    // 地图设置
+    setOptionsMap() {
+      const optionsSetup = this.optionsSetup;
+      const label = {
+        normal: {
+          //调整数值
+          position: "right",
+          // 地图省市区显隐
+          show: optionsSetup.isShowMap,
+          color: optionsSetup.colorMap,
+          fontSize: optionsSetup.fontSizeMap,
+        },
+        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% 处的颜色
+              },
+            ],
+          },
+          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;
+    },
+    // 计算柱图的高度比例
+    calMaxHeight(val, heightRate) {
+      const maxValue = Math.max.apply(null, val.map(item => item.value))
+      return heightRate / maxValue;
+    },
+    // 计算柱体的主干
+    calScatterTrunk(val, heightRate) {
+      return val.map((item) => {
+        return {
+          coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate)]]
+        }
+      })
+    },
+    // 计算柱体顶部
+    calScatterTop(val, heightRate) {
+      return val.map((item) => {
+        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate), item.value]
+      })
+    },
+    // 计算柱体的底部
+    calScatterBottom(val) {
+      return val.map((item) => {
+        return {
+          name: item.name,
+          value: geoCoordMap[item.name]
+        }
+      })
+    },
+    // 柱体主干
+    getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate) {
+      const barTrunk = {
+        type: 'lines',
+        zlevel: 1,
+        effect: {
+          show: false,
+          symbolSize: 5 // 图标大小
+        },
+        lineStyle: {
+          width: optionsSetup.barWidth, // 尾迹线条宽度
+          color: (params) => {
+            return arrColor[params.dataIndex];
+          },
+          opacity: 1, // 尾迹线条透明度
+          curveness: 0 // 尾迹线条曲直度
+        },
+        silent: true,
+        data: this.calScatterTrunk(allData, heightRate),
+      };
+      return barTrunk;
+    },
+    // 柱体顶
+    getOptionsBarTop(optionsSetup, arrColor, allData, heightRate) {
+      const barTop = {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        //geoIndex: 0,
+        zlevel: 1,
+        rippleEffect: {
+          brushType: "stroke",
+        },
+        label: {
+          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"
+        },
+        symbol: 'circle',
+        symbolSize: [optionsSetup.barWidth, 10],
+        itemStyle: {
+          color: (params) => {
+            return arrColor[params.dataIndex];
+          },
+          opacity: 1
+        },
+        silent: true,
+        data: this.calScatterTop(allData, heightRate)
+      }
+      return barTop;
+    },
+    // 柱底
+    getOptionsBarBottom(optionsSetup, arrColor, allData) {
+      const batBottom = {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        rippleEffect: {
+          brushType: "stroke",
+        },
+        //geoIndex: 0,
+        zlevel: 1,
+        label: {
+          // 这儿是处理的
+          show: optionsSetup.isShowFontText,
+          formatter: '{b}',
+          position: 'bottom',
+          fontSize: optionsSetup.fontTextSize,
+          color: (params) => {
+            return arrColor[params.dataIndex];
+          },
+          fontWeight: optionsSetup.fontTextWeight,
+          fontStyle: optionsSetup.fontTextStyle,
+          distance: 10,
+        },
+        symbol: 'circle',
+        symbolSize: [optionsSetup.barWidth, 10],
+        itemStyle: {
+          color: (params) => {
+            return arrColor[params.dataIndex];
+          },
+          opacity: 1,
+        },
+        silent: true,
+        data: this.calScatterBottom(allData),
+      }
+      return batBottom;
+    },
+    // 柱底外圆
+    getOptionsBarBottomOut(optionsSetup, arrColor, allData) {
+      const barBottomOut = {
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        //geoIndex: 0,
+        rippleEffect: {
+          brushType: "stroke",
+        },
+        zlevel: 1,
+        label: {
+          show: false
+        },
+        symbol: 'circle',
+        symbolSize: [optionsSetup.barBottomOutSymbolSize, 10],
+        // 渐变色
+        itemStyle: {
+          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,
+        },
+        silent: true,
+        data: this.calScatterBottom(allData),
+      }
+      return barBottomOut;
+    },
+    //数据解析
+    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;
+      }
+      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)
+      }
+
+      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);
+      this.options.series[4] = this.getOptionsBarBottomOut(optionsSetup, arrColor, 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) {
+      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;
+      }
+      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;
+      }
+      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)
+      }
+
+      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))
+    },
+  },
+};
+</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/percent/widgetGauge.vue

@@ -111,7 +111,11 @@ export default {
             },
             detail: {
               valueAnimation: true,
-              formatter: "{value} %",
+              formatter: function(value) {
+                const max = series[0].max; // 获取最大值
+                const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
+                return formattedValue + ' %'; // 拼接百分号
+              },
               color: "white",
               fontSize: 18,
             },
@@ -263,7 +267,11 @@ export default {
         };
         const detail = {
           valueAnimation: true,
-          formatter: "{value} %",
+          formatter: function(value) {
+            const max = series[0].max; // 获取最大值
+            const formattedValue = (value / max * 100).toFixed(0); // 计算格式化后的数值
+            return formattedValue + ' %'; // 拼接百分号
+          },
           color: optionsSetup.detailColor,
           fontSize: optionsSetup.detailFontSize,
           fontWeight: optionsSetup.detailFontWeight,
@@ -274,6 +282,7 @@ export default {
         series[0].splitLine = splitLine;
         series[0].axisLabel = axisLabel;
         series[0].detail = detail;
+        series[0].max = optionsSetup.maxValue;
       }
     },
     setOptionsData(e, paramsConfig) {

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 <script>
@@ -8,6 +8,7 @@ import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linka
 
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
+
 vue.use(VueSuperSlide);
 export default {
   props: {
@@ -345,7 +346,7 @@ export default {
         });
         legendName.push(name[i]);
       }
-      this.options.series[0] = {
+      const series0 = {
         type: "radar",
         data: data,
         symbolSize: optionsSetup.symbolSize,
@@ -354,10 +355,10 @@ export default {
             opacity: optionsSetup.opacity / 100,
           },
         },
-      };
+      }
+      this.$set(this.options.series, 0, series0);
       this.options.legend["data"] = legendName;
       this.setOptionsLegendName(legendName);
-      console.log(this.options.series)
     },
   },
 };

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

@@ -29,6 +29,7 @@ export default ({
         this.optionsSetup = val.setup;
       },
       deep: true,
+      immediate: true
     },
   },
   computed: {

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

@@ -0,0 +1,153 @@
+<template>
+  <div :style="styleObj">
+    <div :style="containerStyle" class="container">
+      <div :style="progressBarStyle" class="progress-bar">
+        <div :style="flowingLightStyle" class="flowing-light"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default ({
+  name: "widgetFlowLine",
+  components: {},
+  data() {
+    return {
+      optionsStyle: {}, // 样式
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+      direction: 'left', // 控制流光的方向，可选值: 'left' 和 'right'
+      background: 'red', // 控制底色的值
+      containerWidth: '400px',
+      containerHeight: '4px',
+      rotationAngle: 0, // 旋转的角度
+      flowingLightColor: null,
+      flowingLightSpeed: 'medium',
+      flowingLightRotationCenter: 'center',
+    }
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  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();
+  },
+  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",
+      };
+    },
+    containerStyle() {
+      return {
+        width: this.containerWidth + "px",
+      }
+    },
+    progressBarStyle() {
+      return {
+        background: this.background,
+        width: '100%',
+        height: this.containerHeight + "px",
+        position: 'relative',
+        overflow: 'hidden',
+        flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', // 根据流光方向设置进度条的方向
+        transform: `rotate(${this.rotationAngle}deg)`, // 添加旋转角度
+        transformOrigin: this.flowingLightRotationCenter, // 设置旋转中心
+      }
+    },
+    flowingLightStyle() {
+      let duration = 0; // 初始化动画持续时间
+
+      if (this.flowingLightSpeed === 'low') {
+        duration = 8; // 低速持续时间
+      } else if (this.flowingLightSpeed === 'medium') {
+        duration = 4; // 中速持续时间
+      } else if (this.flowingLightSpeed === 'high') {
+        duration = 2; // 高速持续时间
+      }
+      return {
+        height: '4px',
+        width: '80px',
+        background: 'linear-gradient(to right, transparent,' + this.flowingLightColor + ')',
+        position: 'absolute',
+        animation: this.direction === 'right' ? `right_to_left ${duration}s 0s infinite` : `left_to_right ${duration}s 0s infinite` // 根据流光方向设置动画
+      }
+    },
+  },
+  methods: {
+    editorOptions() {
+      const optionsSetup = this.optionsSetup;
+      const optionsStyle = this.optionsStyle;
+      this.background = optionsSetup.background;
+      this.direction = optionsSetup.flowDirection;
+      this.rotationAngle = optionsSetup.rotationAngle;
+      this.containerWidth = optionsStyle.width;
+      this.containerHeight = optionsStyle.height;
+      this.flowingLightColor = optionsSetup.lightColor;
+      this.flowingLightSpeed = optionsSetup.flowingLightSpeed;
+      this.flowingLightRotationCenter = optionsSetup.flowingLightRotationCenter;
+    },
+  }
+})
+</script>
+<style>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 100%;
+}
+
+.flowling-light {
+  height: 4px;
+  width: 80px;
+  background: linear-gradient(to right, transparent, #fff);
+  position: absolute;
+}
+
+@keyframes left_to_right {
+  0% {
+    left: -80px;
+  }
+
+  100% {
+    left: calc(100% + 80px);
+  }
+}
+
+@keyframes right_to_left {
+  0% {
+    right: -80px;
+  }
+
+  100% {
+    right: calc(100% + 80px);
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div :style="styleObj">
+  <div>
     <component :is="value.setup.showtype" :value="value" :style="styleObj"/>
   </div>
 </template>
@@ -29,6 +29,7 @@ export default ({
         this.optionsSetup = val.setup;
       },
       deep: true,
+      immediate: true
     },
   },
   computed: {

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

@@ -46,8 +46,10 @@ import widgetFormTime from "./form/widgetFormTime.vue";
 import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
 import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 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",
@@ -55,6 +57,7 @@ export default {
     widgetHref,
     widgetText,
     widgetBorder,
+    widgetDecorateFlowLine,
     widgetDecoration,
     WidgetMarquee,
     widgetTime,
@@ -90,6 +93,7 @@ export default {
     //widgetInput,
     widgetFormTime,
     widgetBarDoubleYaxisChart,
+    widgetBarMap
   },
   model: {
     prop: "value",

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

@@ -1,7 +1,7 @@
 <template>
   <iframe
     :style="styleColor"
-    :src="styleColor.iframeAdress"
+    :src="this.toGetUrl(styleColor.iframeAdress)"
     width="100%"
     height="100%"
   />
@@ -47,7 +47,24 @@ export default {
   mounted() {
     this.options = this.value;
   },
-  methods: {}
+  methods: {
+    toGetUrl(url) {
+      if (url.indexOf('{') < 0 && url.indexOf('}' < 0)) {
+        return url
+      }
+      const reg = /{[a-zA-Z0-9]*\}/g
+      const list = url.match(reg)
+      console.log(list)
+      let result = url
+      const query = this.$route.query
+      for (let i = 0; i < list.length; i++) {
+        const sub = list[i]
+        const key = sub.replace('{', '').replace('}', '')
+        result = result.replace(sub, query[key])
+      }
+      return result
+    }
+  }
 };
 </script>
 

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

@@ -54,7 +54,9 @@ import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
 import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 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",
@@ -62,6 +64,7 @@ export default {
     widgetHref,
     widgetText,
     widgetBorder,
+    widgetDecorateFlowLine,
     widgetDecoration,
     WidgetMarquee,
     widgetTime,
@@ -97,6 +100,7 @@ export default {
     //widgetInput,
     widgetFormTime,
     widgetBarDoubleYaxisChart,
+    widgetBarMap
   },
   model: {
     prop: "value",

report-ui/src/views/layout/components/Sidebar/index.vue

@@ -3,7 +3,7 @@
     <div class="admin-title" @click="goBigScreen">
       <div class="con">
         <img src="../../../../../static/logo-dp.png" width="50" />
-        <span class="version">V1.1.0</span>
+        <span class="version">V1.2.0</span>
       </div>
     </div>
     <el-menu