!33 update 0.9.5

Merge pull request !33 from Foming/dev

README.md

@@ -1,7 +1,7 @@
 ## 简介
 
 &emsp; &emsp; AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。<br>
-&emsp; &emsp; 多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。<br>
+&emsp; &emsp; 多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。<br>
 &emsp; &emsp; 三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
 
 ## 在线体验
@@ -65,8 +65,8 @@
 
 ### 依赖
 
-- [Mysql] 5.7+
-- [Jdk] 1.8+
+- [Mysql] 5.7
+- [Jdk] 1.8
 
 ### 后端
 
@@ -93,9 +93,9 @@
 
 在Linux上先准备好maven、node.js、jdk
 
-- [Apache Maven] 3.5 +<br>
-- [Node.js] v14.16.0+<br>
-- [Jdk] 1.8+
+- [Apache Maven] 3.5 <br>
+- [Node.js] v14.16.0 <br>
+- [Jdk] 1.8
 
 ```
 git clone https://gitee.com/anji-plus/report.git
@@ -113,6 +113,8 @@ bin/start.bat Windows修改第4行的JAVA_HOME后(去掉rem注释)，双击启
 http://serverip:9095
 ```
 
+**开发环境参考文档：** <br>
+https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html <br>
 **源码编译部署参考文档：** <br>
 https://report.anji-plus.com/report-doc/guide/quicklySource.html <br>
 **发行版部署参考文档：** <br>
@@ -143,6 +145,7 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra
 <a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a> <br>
 <a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
 
+
 ## 未来计划
 
 - 增加装饰图、省市区地图等图
@@ -151,6 +154,7 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra
 - http数据源调整
 - 大屏工具栏使用二级菜单显示
 - Execl报表功能增加与bug修复
+- 使用vue3 + ts
 
 ## 已知问题
 
@@ -165,9 +169,6 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra
 - Jdk 11
 - Mysql 8.0（8.0.23/26版本没有问题，8.0.21版本存在问题）
 
-AJ-Report 使用Druid，版本为1.2.6，如果你觉得你配置都是正常但是数据源测试不过，请尝试修改pom文件降低Druid版本。 <br>
-例如：MSSQLSERVER 2014，请将Druid版本降低为1.2.1以下（需要修改源码）。 <br>
-
 常见问题：https://report.anji-plus.com/report-doc/guide/question.html <br>
 
 ## 商业授权
@@ -191,6 +192,5 @@ AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2.
 个人企业微信：<br>
 <img src="https://images.gitee.com/uploads/images/2021/0729/130901_1672e6c5_7492051.jpeg" width = "200" height = "200" align=left/>
 
-
 #### 开源不易，劳烦各位star ☺
 

doc/docs/guide/README.md

@@ -1,31 +1,41 @@
-&emsp;  &emsp;  AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。<br>
-&emsp;  &emsp;  多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。<br>
-&emsp;  &emsp;  三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
+&emsp; &emsp; AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。<br>
+&emsp; &emsp; 多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。<br>
+&emsp; &emsp; 三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
 
 ## 系统特性
+
 1. 最新最稳定的技术栈；
 2. 支持多数据源配置
 3. 丰富的大屏组件。拖拽配置实现动态大屏
 
 ## 在线体验
-#### &emsp;  电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  &emsp;体验账号：guest  密码：guest
-#### &emsp;  在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")<br>
-#### &emsp;  在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")<br>
+
+#### &emsp; 电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  &emsp;体验账号：guest 密码：guest
+
+#### &emsp; 在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")<br>
+
+#### &emsp; 在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")<br>
 
 ## 发行版本
-#### &emsp;  下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")<br>
+
+#### &emsp; 下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")<br>
 
 ## 功能概述
-#### &emsp;  组件介绍
-&emsp;&emsp; 大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。
-内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。<br>
+
+#### &emsp; 组件介绍
+
+&emsp;&emsp; 大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。<br>
 **在线案例还在努力创造中，敬请期待！！！**
 ![操作](../picture/shipin.gif)
 
+![更多案例](https://report.anji-plus.com/report-doc/static/Rhea.mp4) <br>
+
 ## 数据流程图
+
 ![流程.png](../picture/liucheng.png)
 
 ## 打包目录
+
 ```
 ├── bin                                           启动命令脚本
 │   ├── restart.sh
@@ -40,6 +50,7 @@
 ```
 
 ## 系统目录
+
 ```
 ├── doc                                           文档源码
 │   ├── docs

doc/docs/guide/briefUsing.md

@@ -4,4 +4,5 @@
 <a href='https://www.yunstech.cn/'><img src="https://www.yunstech.cn/images/logo.png" width = "130" height = "50" /> </a>
 <a href='http://www.fgkb.net/'><img src="https://report.anji-plus.com/file/download/9ee5b709-5033-4cd5-a784-ebd2877fd373" width = "130" height = "50" /> </a>
 <a href='http://www.turingoal.com/'><img src="https://report.anji-plus.com/file/download/cda7bf68-376b-45dc-9a55-c52b21e4a8c8" width = "130" height = "50" /> </a>
+<a href='http://www.plian.net/'><img src="https://report.anji-plus.com/file/download/7838f2c2-fdce-4ca7-8373-14d13dcda5cc" width = "130" height = "50" /> </a>
 <a href='https://www.gykjweb.com/'><img src="https://report.anji-plus.com/file/download/d13b03f5-0c20-4878-9a79-f3c76b44bfd9" width = "130" height = "130" /> </a>

doc/docs/guide/dataset.md

@@ -1,11 +1,43 @@
-## Mysql数据集
-在数据源处添加了mysql的数据源后，即可使用。
-![img_1.png](../picture/dateset/img_1.png)
-**注**：目前，查询参数和数据转化功能待补全中，建议等完善了再使用。
+![img5](../picture/dateset/img_5.png)
 
-## ES数据集
-**注**：es是通过调用xpack-sql，注意写法
-![es.png](../picture/dateset/img.png)
+## SQL数据集
 
-## Kudu数据集
-![kudu.png](../picture/dateset/img_2.png)
+### Mysql数据集
+
+在数据源处添加了mysql的数据源后，即可使用。<br>
+![img_1.png](../picture/dateset/img_1.png) <br>
+
+### ES数据集
+
+**注**：es是通过调用xpack-sql，注意写法 <br>
+![es.png](../picture/dateset/img.png) <br>
+
+### Kudu数据集
+
+![kudu.png](../picture/dateset/img_2.png) <br>
+
+## 功能栏
+
+**可以看在线环境，有示例参考** <br>
+
+### 查询参数
+
+![img3](../picture/dateset/img_3.png) <br>
+注意参数名要和sql(请求体)中变量名保持一致，sql(请求体)中的变量用 ${} 表示 <br>
+高级规则是用js进行数据装换。
+
+### 数据转换
+
+#### js脚本
+
+**注**：这里的JS是java的scriptengine执行的，很多es6的语法不支持 <br>
+![img4](../picture/dateset/img_4.png) <br>
+入参是data，返回值也必须是data，中间是JS的处理过程，注意入参返回都是List<JSONObject>，记得保存。 <br>
+
+#### 字典项
+
+场景有限，待补充。
+
+## HTTP数据集
+
+即原有http数据源的功能，原有http数据源不动

doc/docs/guide/question.md

@@ -29,7 +29,6 @@
 
 - 数据源数据集用法总结 <br>
   [链接](https://my.oschina.net/u/4517014/blog/5270828) <br>
-  **注**：http数据源未来会挪到数据集那边 <br>
 
 ### 执行源码编译脚本（build.sh）报错
 
@@ -48,6 +47,14 @@
 - 使用IDEA进行源码编译时提示：“*** openjdk-***” <br>
   请使用jdk1.8
 
+### 启动服务报错
+
+- 提示“xxx The driver has not received any packets from the server” <br>
+  连不上mysql。<br>
+  1、确保软件打包正常 <br>
+  2、mysql版本不兼容，详细看上面关于版本兼容性 <br>
+  3、bootstrap.yml中配置的mysql地址ip不对 <br>
+
 
 
 

doc/docs/guide/quicklySeparate.md

@@ -20,11 +20,11 @@ npm run build
 
 ### 编译环境
 
-- [Apache Maven] 3.5 +<br>
-- [Node.js] v14.16.0+<br>
+- [Apache Maven] 3.5 <br>
+- [Node.js] v14.16.0 <br>
 - [Jdk] 1.8 <br>
   请在你的Windows上先准备好maven、node.js、jdk <br>
-  **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类 <br>
+  **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类 <br>
 
 ### 克隆源码
 

doc/docs/guide/quicklySource.md

@@ -17,10 +17,10 @@ http://serverip:9095
 
 请在Linux上先准备好maven、node.js、jdk
 
-- [Apache Maven] 3.5 + <br>
-- [Node.js] v14.16.0 + <br>
+- [Apache Maven] 3.5 <br>
+- [Node.js] v14.16.0 <br>
 - [Jdk] 1.8 <br>
-  **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类 <br>
+  **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类 <br>
 
 ## 克隆源码
 

report-core/pom.xml

@@ -79,7 +79,7 @@
         <dependency>
             <groupId>com.alibaba</groupId>
             <artifactId>druid</artifactId>
-            <version>1.2.6</version>
+            <version>1.2.0</version>
         </dependency>
         <dependency>
             <groupId>org.flywaydb</groupId>

report-core/src/main/java/com/anjiplus/template/gaea/business/enums/SetTypeEnum.java

@@ -0,0 +1,56 @@
+package com.anjiplus.template.gaea.business.enums;
+
+public enum SetTypeEnum {
+    SQL("sql", "sql"),
+    HTTP("http", "http"),
+    ;
+
+    private String codeValue;
+    private String codeDesc;
+
+    private SetTypeEnum(String codeValue, String codeDesc) {
+        this.codeValue = codeValue;
+        this.codeDesc = codeDesc;
+    }
+
+    public String getCodeValue() {
+        return this.codeValue;
+    }
+
+    public String getCodeDesc() {
+        return this.codeDesc;
+    }
+
+    //根据codeValue获取枚举
+    public static SetTypeEnum parseFromCodeValue(String codeValue) {
+        for (SetTypeEnum e : SetTypeEnum.values()) {
+            if (e.codeValue == codeValue) {
+                return e;
+            }
+        }
+        return null;
+    }
+
+    //根据codeValue获取描述
+    public static String getCodeDescByCodeBalue(String codeValue) {
+        SetTypeEnum enumItem = parseFromCodeValue(codeValue);
+        return enumItem == null ? "" : enumItem.getCodeDesc();
+    }
+
+    //验证codeValue是否有效
+    public static boolean validateCodeValue(String codeValue) {
+        return parseFromCodeValue(codeValue) != null;
+    }
+
+    //列出所有值字符串
+    public static String getString() {
+        StringBuffer buffer = new StringBuffer();
+        for (SetTypeEnum e : SetTypeEnum.values()) {
+            buffer.append(e.codeValue).append("--").append(e.getCodeDesc()).append(", ");
+        }
+        buffer.deleteCharAt(buffer.lastIndexOf(","));
+        return buffer.toString().trim();
+    }
+
+
+}

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/dto/DataSetDto.java

@@ -29,6 +29,10 @@ public class DataSetDto extends GaeaBaseDTO implements Serializable {
     /** 数据集描述 */
      private String setDesc;
 
+    /** 数据集类型 */
+    private String setType;
+
+
     /** 数据源编码 */
      private String sourceCode;
 

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetParam.java

@@ -27,4 +27,8 @@ public class DataSetParam extends PageParam implements Serializable{
     /** 数据源编码 */
     @Query(QueryEnum.EQ)
     private String sourceCode;
+
+    /** 数据集类型 */
+    @Query(QueryEnum.EQ)
+    private String setType;
 }

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/controller/param/DataSetTestTransformParam.java

@@ -19,12 +19,14 @@ import java.util.List;
 public class DataSetTestTransformParam implements Serializable{
 
     /** 数据源编码 */
-    @NotBlank(message = "sourceCode not empty")
     private String sourceCode;
 
     /** 动态查询sql或者接口中的请求体 */
     private String dynSentence;
 
+    /** 数据集类型 */
+    private String setType;
+
     /** 请求参数集合 */
     private List<DataSetParamDto> dataSetParamDtoList;
 

report-core/src/main/java/com/anjiplus/template/gaea/business/modules/dataset/dao/entity/DataSet.java

@@ -26,6 +26,9 @@ public class DataSet extends GaeaBaseEntity {
     @ApiModelProperty(value = "数据集描述")
     private String setDesc;
 
+    @ApiModelProperty(value = "数据集类型")
+    private String setType;
+
     @ApiModelProperty(value = "数据源编码")
     private String sourceCode;
 

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

@@ -8,6 +8,7 @@ import com.anji.plus.gaea.curd.mapper.GaeaBaseMapper;
 import com.anji.plus.gaea.exception.BusinessExceptionBuilder;
 import com.anji.plus.gaea.utils.GaeaBeanUtils;
 import com.anjiplus.template.gaea.business.code.ResponseCode;
+import com.anjiplus.template.gaea.business.enums.SetTypeEnum;
 import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.OriginalDataDto;
 import com.anjiplus.template.gaea.business.modules.dataset.controller.dto.DataSetDto;
 import com.anjiplus.template.gaea.business.modules.dataset.dao.DataSetMapper;
@@ -22,6 +23,7 @@ import com.anjiplus.template.gaea.business.modules.datasettransform.service.Data
 import com.anjiplus.template.gaea.business.modules.datasource.controller.dto.DataSourceDto;
 import com.anjiplus.template.gaea.business.modules.datasource.dao.entity.DataSource;
 import com.anjiplus.template.gaea.business.modules.datasource.service.DataSourceService;
+import com.anjiplus.template.gaea.business.util.JdbcConstants;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
@@ -218,12 +220,31 @@ public class DataSetServiceImpl implements DataSetService {
      */
     @Override
     public OriginalDataDto getData(DataSetDto dto) {
+
         OriginalDataDto originalDataDto = new OriginalDataDto();
         String setCode = dto.getSetCode();
         //1.获取数据集、参数替换、数据转换
         DataSetDto dataSetDto = detailSet(setCode);
+        String dynSentence = dataSetDto.getDynSentence();
         //2.获取数据源
-        DataSource dataSource = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
+        DataSource dataSource;
+        if (StringUtils.isNotBlank(dataSetDto.getSetType())
+                && dataSetDto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) {
+            //http不需要数据源，兼容已有的逻辑，将http所需要的数据塞进DataSource
+            dataSource = new DataSource();
+            dataSource.setSourceConfig(dynSentence);
+            dataSource.setSourceType(JdbcConstants.HTTP);
+            String body = JSONObject.parseObject(dynSentence).getString("body");
+            if (StringUtils.isNotBlank(body)) {
+                dynSentence = body;
+            }else {
+                dynSentence = "{}";
+            }
+
+        }else {
+            dataSource  = dataSourceService.selectOne("source_code", dataSetDto.getSourceCode());
+        }
+
         //3.参数替换
         //3.1参数校验
         log.debug("参数校验替换前：{}", dto.getContextData());
@@ -231,7 +252,7 @@ public class DataSetServiceImpl implements DataSetService {
         if (!verification) {
             throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR);
         }
-        String dynSentence = dataSetParamService.transform(dto.getContextData(), dataSetDto.getDynSentence());
+        dynSentence = dataSetParamService.transform(dto.getContextData(), dynSentence);
         log.debug("参数校验替换后：{}", dto.getContextData());
         //4.获取数据
         DataSourceDto dataSourceDto = new DataSourceDto();
@@ -258,10 +279,28 @@ public class DataSetServiceImpl implements DataSetService {
      */
     @Override
     public OriginalDataDto testTransform(DataSetDto dto) {
+        String dynSentence = dto.getDynSentence();
+
         OriginalDataDto originalDataDto = new OriginalDataDto();
         String sourceCode = dto.getSourceCode();
         //1.获取数据源
-        DataSource dataSource = dataSourceService.selectOne("source_code", sourceCode);
+        DataSource dataSource;
+        if (dto.getSetType().equals(SetTypeEnum.HTTP.getCodeValue())) {
+            //http不需要数据源，兼容已有的逻辑，将http所需要的数据塞进DataSource
+            dataSource = new DataSource();
+            dataSource.setSourceConfig(dynSentence);
+            dataSource.setSourceType(JdbcConstants.HTTP);
+            String body = JSONObject.parseObject(dynSentence).getString("body");
+            if (StringUtils.isNotBlank(body)) {
+                dynSentence = body;
+            }else {
+                dynSentence = "{}";
+            }
+
+        }else {
+          dataSource  = dataSourceService.selectOne("source_code", sourceCode);
+        }
+
         //3.参数替换
         //3.1参数校验
         boolean verification = dataSetParamService.verification(dto.getDataSetParamDtoList(), null);
@@ -269,7 +308,7 @@ public class DataSetServiceImpl implements DataSetService {
             throw BusinessExceptionBuilder.build(ResponseCode.RULE_FIELDS_CHECK_ERROR);
         }
 
-        String dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dto.getDynSentence());
+        dynSentence = dataSetParamService.transform(dto.getDataSetParamDtoList(), dynSentence);
         //4.获取数据
         DataSourceDto dataSourceDto = new DataSourceDto();
         BeanUtils.copyProperties(dataSource, dataSourceDto);

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

@@ -66,7 +66,7 @@ logging:
 customer:
   # 开发测试用本地文件，如果是生产，请考虑使用对象存储
   file:
-    #上传对应本地全路径
+    #上传对应本地全路径，路径必须是真实存在的
     dist-path: /app/disk/upload/
     white-list: .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi
     excelSuffix: .xlsx|.xls|.csv

report-core/src/main/resources/db/migration/V1.0.13__update_set.sql

@@ -0,0 +1,14 @@
+use
+aj_report;
+
+-- 增加字段
+ALTER TABLE `gaea_report_data_set` DROP COLUMN `set_type`;
+-- 将该字段值全更新为sql
+update gaea_report_data_set set set_type = 'sql';
+
+-- 字典
+INSERT INTO `gaea_dict`(`id`, `dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default, '数据集类型', 'SET_TYPE', '数据集类型', 'admin', '2021-11-16 14:43:12', 'admin', '2021-11-16 14:43:12', 1);
+INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'sql', 'sql', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:42', 'admin', '2021-11-16 14:43:42', 1);
+INSERT INTO `gaea_dict_item`(`id`, `dict_code`, `item_name`, `item_value`, `item_extend`, `enabled`, `locale`, `remark`, `sort`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES (default , 'SET_TYPE', 'http', 'http', NULL, 1, 'zh', NULL, NULL, 'admin', '2021-11-16 14:43:51', 'admin', '2021-11-16 14:43:51', 1);
+
+

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js

@@ -7,656 +7,662 @@
  * @LastEditTime: 2021-09-28 14:08:29
  */
 export const widgetBarchart = {
-    code: 'widget-barchart',
-    type: 'chart',
-    label: '柱形图',
-    icon: 'iconzhuzhuangtu',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-barchart',
+  type: 'chart',
+  label: '柱形图',
+  icon: 'iconzhuzhuangtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱状图',
+      },
+      {
+        type: 'el-switch',
+        label: '竖展示',
+        name: 'verticalShow',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '柱状图',
-        },
-        {
-          type: 'el-switch',
-          label: '竖展示',
-          name: 'verticalShow',
-          required: false,
-          placeholder: '',
-          value: false,
-        },
-        {
-          type: 'vue-color',
-          label: '背景颜色',
-          name: 'background',
-          required: false,
-          placeholder: '',
-          value: ''
+          name: '柱体设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '最小高度',
+              name: 'minHeight',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+          ],
         },
-        [
-          {
-            name: '柱体设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '最大宽度',
-                name: 'maxWidth',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-slider',
-                label: '圆角',
-                name: 'radius',
-                require: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '最小高度',
-                name: 'minHeight',
-                require: false,
-                placeholder: '',
-                value: 0,
-              },
-            ],
-          },
-          {
-            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-select',
-                label: '字体粗细',
-                name: 'textFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-              {
-                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-text',
-                label: '字体粗细',
-                name: 'subTextFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-            ],
-          },
-          {
-            name: 'X轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'hideX',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'xName',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'Xcolor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'textAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-input-number',
-                label: '数值间隔',
-                name: 'textInterval',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-
-              }
-            ],
-          },
-          {
-            name: 'Y轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowY',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'textNameY',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'colorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'ytextAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-switch',
-                label: '缩放',
-                name: 'scale',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'el-input-number',
-                label: '均分',
-                name: 'splitNumber',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalY',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }, {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineY',
-                require: false,
-                placeholder: '',
-                value: false,
-              }, {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-
-              }
-            ],
-          },
-          {
-            name: '数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShow',
-                required: false,
-                placeholder: '',
-                value: true
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distance',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'fontSize',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'tipFontSize',
-                required: false,
-                placeholder: '',
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '',
-              },
-            ],
-          },
-          {
-            name: '坐标轴边距设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '左边距(像素)',
-                name: 'marginLeft',
-                required: false,
-                placeholder: '',
-                value: 10,
-              }, {
-                type: 'el-slider',
-                label: '顶边距(像素)',
-                name: 'marginTop',
-                required: false,
-                placeholder: '',
-                value: 50,
-              }, {
-                type: 'el-slider',
-                label: '右边距(像素)',
-                name: 'marginRight',
-                required: false,
-                placeholder: '',
-                value: 40,
-              }, {
-                type: 'el-slider',
-                label: '底边距(像素)',
-                name: 'marginBottom',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-            ],
-          },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '图例',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: ''
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: ''
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: ''
-              },
-            ],
-          },
-          {
-            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: [
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
+            },
+            {
+              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-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              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-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'textAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+
+            }
+          ],
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'ytextAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scale',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '均分',
+              name: 'splitNumber',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }, {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            }, {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+
+            }
+          ],
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          chartType: 'widget-barchart',
-          dictKey: 'BAR_PROPERTIES',
-          value: '',
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distance',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: ''
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          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: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"axis": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-barchart',
+        dictKey: 'BAR_PROPERTIES',
+        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: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
   }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js

@@ -7,762 +7,701 @@
  * @LastEditTime: 2021-09-28 14:11:57
  */
 export const widgetBarlinechart = {
-    code: 'widget-barlinechart',
-    type: 'chart',
-    label: '柱线图',
-    icon: 'iconzhuxiantu',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-barlinechart',
+  type: 'chart',
+  label: '柱线图',
+  icon: 'iconzhuxiantu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱线图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '柱线图',
+          name: '折线设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标记点',
+              name: 'markPoint',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '点大小',
+              name: 'pointSize',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-switch',
+              label: '平滑曲线',
+              name: 'smoothCurve',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '面积堆积',
+              name: 'area',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '面积厚度',
+              name: 'areaThickness',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '线条宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 3,
+            },
+          ],
         },
         {
-          type: 'vue-color',
-          label: '背景颜色',
-          name: 'background',
-          required: false,
-          placeholder: '',
-          value: ''
+          name: '柱体设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '最小高度',
+              name: 'minHeight',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+          ],
         },
-        [
-          {
-            name: '折线设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '标记点',
-                name: 'markPoint',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '点大小',
-                name: 'pointSize',
-                required: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-switch',
-                label: '平滑曲线',
-                name: 'smoothCurve',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-switch',
-                label: '面积堆积',
-                name: 'area',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '面积厚度',
-                name: 'areaThickness',
-                required: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '线条宽度',
-                name: 'lineWidth',
-                required: false,
-                placeholder: '',
-                value: 3,
-              },
-            ],
-          },
-          {
-            name: '柱体设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '最大宽度',
-                name: 'maxWidth',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-slider',
-                label: '圆角',
-                name: 'radius',
-                require: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '最小高度',
-                name: 'minHeight',
-                require: false,
-                placeholder: '',
-                value: 0,
-              },
-            ],
-          },
-          {
-            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: '#fff'
-              },
-              {
-                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-input-number',
-                label: '字体大小',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-              {
-                type: 'el-select',
-                label: '字体位置',
-                name: 'textAlign',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'left'
-              },
-              {
-                type: 'el-input-text',
-                label: '副标题',
-                name: 'subText',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                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-input-number',
-                label: '字体大小',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-            ],
-          },
-          {
-            name: 'X轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'hideX',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'xName',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'Xcolor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'textAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-input-number',
-                label: '数值间隔',
-                name: 'textInterval',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: 'Y轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '左显示',
-                name: 'isShowYLeft',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '左坐标名',
-                name: 'textNameYLeft',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '左坐标名颜色',
-                name: 'nameColorYLeft',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '左坐标字号',
-                name: 'namefontSizeYLeft',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-input-number',
-                label: '左均分',
-                name: 'splitNumberLeft',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '右显示',
-                name: 'isShowYRight',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '右坐标名',
-                name: 'textNameYRight',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '右坐标名颜色',
-                name: 'nameColorYRight',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '右坐标字号',
-                name: 'namefontSizeYRight',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-input-number',
-                label: '右均分',
-                name: 'splitNumberRight',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'colorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalY',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-            ],
-          },
-          {
-            name: '折线数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLine',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distanceLine',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'fontSizeLine',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColorLine',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeightLine',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '柱体数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowBar',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distanceBar',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'fontSizeBar',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColorBar',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeightBar',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'tipFontSize',
-                required: false,
-                placeholder: '',
-                value: 12
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '',
-                value: '#e68b55'
-              },
-            ],
-          },
-          {
-            name: '坐标轴边距设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '左边距(像素)',
-                name: 'marginLeft',
-                required: false,
-                placeholder: '',
-                value: 10,
-              }, {
-                type: 'el-slider',
-                label: '顶边距(像素)',
-                name: 'marginTop',
-                required: false,
-                placeholder: '',
-                value: 50,
-              }, {
-                type: 'el-slider',
-                label: '右边距(像素)',
-                name: 'marginRight',
-                required: false,
-                placeholder: '',
-                value: 40,
-              }, {
-                type: 'el-slider',
-                label: '底边距(像素)',
-                name: 'marginBottom',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-            ],
-          },
-          /*{
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                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: '自定义配色',
-            list: [
-              {
-                type: 'customColor',
-                label: '',
-                name: 'customColor',
-                required: false,
-                value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
-              },
-            ],
-          },
-        ],
-      ],
-      // 数据
-      data: [
         {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          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: '#fff'
+            },
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              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-input-number',
+              label: '字体大小',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'textAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '左显示',
+              name: 'isShowYLeft',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '左坐标名',
+              name: 'textNameYLeft',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '左坐标名颜色',
+              name: 'nameColorYLeft',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '左坐标字号',
+              name: 'namefontSizeYLeft',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '左均分',
+              name: 'splitNumberLeft',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '右显示',
+              name: 'isShowYRight',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '右坐标名',
+              name: 'textNameYRight',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '右坐标名颜色',
+              name: 'nameColorYRight',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '右坐标字号',
+              name: 'namefontSizeYRight',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '右均分',
+              name: 'splitNumberRight',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          chartType: 'widget-barlinechart',
-          dictKey: 'BAR_LINE_PROPERTIES',
-          relactiveDomValue: 'dynamicData',
+          name: '折线数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowLine',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distanceLine',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSizeLine',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColorLine',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeightLine',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '柱体数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowBar',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distanceBar',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSizeBar',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColorBar',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeightBar',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#e68b55'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+            },
+          ],
         },
       ],
-    }
+    ],
+    // 数据
+    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: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"axis": "1月", "bar": 2.6, "line": 2},
+          {"axis": "2月", "bar": 5.9, "line": 2.2},
+          {"axis": "3月", "bar": 9, "line": 3.3},
+          {"axis": "4月", "bar": 26.4, "line": 4.5},
+          {"axis": "5月", "bar": 28.7, "line": 6.3},
+          {"axis": "6月", "bar": 70.7, "line": 10.2},
+          {"axis": "7月", "bar": 175.6, "line": 20.3},
+          {"axis": "8月", "bar": 182.2, "line": 23.4},
+          {"axis": "9月", "bar": 48.7, "line": 23},
+          {"axis": "10月", "bar": 18.8, "line": 16.5},
+          {"axis": "11月", "bar": 6, "line": 12},
+          {"axis": "12月", "bar": 2.3, "line": 6.2},
+        ]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-barlinechart',
+        dictKey: 'BAR_LINE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+      },
+    ],
+    // 坐标
+    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: 200,
+      },
+    ],
   }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js

@@ -0,0 +1,445 @@
+/*
+ * @Descripttion: 装饰饼图
+ * @version:
+ * @Author: foming
+ * @Date:
+ * @LastEditors:
+ * @LastEditTime:
+ */
+export const widgetDecoratePie = {
+  code: 'widgetDecoratePieChart',
+  type: 'chart',
+  label: '装饰饼图',
+  icon: 'iconicon_tubiao_bingtu',
+  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: 'isLastRingShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'vue-color',
+              label: '0%颜色',
+              name: 'lastRing0Color',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'lastRing100Color',
+              required: false,
+              placeholder: '',
+              value: '#28E8FA'
+            },
+          ]
+        },
+        {
+          name: '八分环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'eightColor',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+          ]
+        },
+        {
+          name: '虚线环设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '虚线数量',
+              name: 'dottedNum',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'dottedColor',
+              required: false,
+              placeholder: '',
+              value: '#28E8FA'
+            },
+          ]
+        },
+        {
+          name: '三分环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '一段颜色',
+              name: 'three1Color',
+              required: false,
+              placeholder: '',
+              value: '#fc8d89'
+            },
+            {
+              type: 'vue-color',
+              label: '二段颜色',
+              name: 'three2Color',
+              required: false,
+              placeholder: '',
+              value: '#46d3f3'
+            },
+            {
+              type: 'vue-color',
+              label: '三段颜色',
+              name: 'three3Color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(203,203,203,.2)'
+            },
+          ]
+        },
+        {
+          name: '外指标环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '环显示',
+              name: 'isOutRingShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '环颜色',
+              name: 'outRingColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-input-number',
+              label: '环宽度',
+              name: 'outRingWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-switch',
+              label: '指标线显示',
+              name: 'isOutSplitShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线数量',
+              name: 'outSplitNum',
+              required: false,
+              placeholder: '',
+              value: 30
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线长度',
+              name: 'outSplitLength',
+              required: false,
+              placeholder: '',
+              value: 32
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线宽度',
+              name: 'outSplitWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '指标线颜色',
+              name: 'outSplitColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线显示',
+              name: 'isOutTickShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线数量',
+              name: 'outTickNum',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线长度',
+              name: 'outTickLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线宽度',
+              name: 'outTickWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '刻度线颜色',
+              name: 'outTickColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+          ]
+        },
+        {
+          name: '里指标环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '环显示',
+              name: 'isInRingShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '环颜色',
+              name: 'inRingColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-input-number',
+              label: '环宽度',
+              name: 'inRingWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-switch',
+              label: '指标线显示',
+              name: 'isInSplitShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线数量',
+              name: 'inSplitNum',
+              required: false,
+              placeholder: '',
+              value: 30
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线长度',
+              name: 'inSplitLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线宽度',
+              name: 'inSplitWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '指标线颜色',
+              name: 'inSplitColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线显示',
+              name: 'isInTickShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线数量',
+              name: 'inTickNum',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线长度',
+              name: 'inTickLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线宽度',
+              name: 'inTickWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '刻度线颜色',
+              name: 'inTickColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+          ]
+        },
+        {
+          name: '环外环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isRingOnRingShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'ringOnRingColor',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+          ]
+        },
+        {
+          name: '中饼图设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '半径',
+              name: 'pieWidth',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'pieColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'pieBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#3D4268'
+            },
+            {
+              type: 'el-select',
+              label: '分块',
+              name: 'pieBlocks',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'four', name: '十字星'},
+                {code: 'five', name: '五角星'},
+                {code: 'six', name: '六芒星'},
+              ],
+              value: 'six'
+            },
+          ]
+        },
+      ],
+    ],
+    // 坐标
+    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: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js

@@ -1,383 +1,390 @@
 /*
  * @Descripttion: 漏斗图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:29:23
  * @LastEditors: qianlishi
  * @LastEditTime: 2021-09-28 14:12:37
  */
 export const widgetFunnel = {
-    code: 'widget-funnel',
-    type: 'chart',
-    label: '漏斗图',
-    icon: 'iconloudoutu',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-funnel',
+  type: 'chart',
+  label: '漏斗图',
+  icon: 'iconloudoutu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '漏斗图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      {
+        type: 'el-switch',
+        label: '翻转',
+        name: 'ending',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
+      [
         {
-          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: 'isShow',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'fontSize',
-                require: false,
-                placeholder: '',
-                value: 12,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'color',
-                require: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeight',
-                require: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-switch',
-                label: '反转',
-                name: 'reversal',
-                require: false,
-                placeholder: '',
-                value: 0
-              },
-            ],
-          },
-          {
-            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: ''
-              },
-              {
-                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-input-number',
-                label: '字体大小',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 12
-              },
-              {
-                type: 'el-select',
-                label: '字体位置',
-                name: 'textAlign',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'left'
-              },
-              {
-                type: 'el-input-text',
-                label: '副标题',
-                name: 'subText',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                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-input-number',
-                label: '字体大小',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'fontSize',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '网格线颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-            ],
-          },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '图例',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: ''
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: ''
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: ''
-              },
-            ],
-          },
-          {
-            name: '自定义配色',
-            list: [
-              {
-                type: 'customColor',
-                label: '',
-                name: 'customColor',
-                required: false,
-                value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
-              },
-            ],
-          },
-        ],
-      ],
-      // 数据
-      data: [
-        {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              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-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              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-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
-        },
-        {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
-        },
-        {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          chartType: 'widget-funnel',
-          relactiveDomValue: 'dynamicData',
-          dictKey: 'PIE_PROPERTIES',
-          value: '',
-        },
-      ],
-      // 坐标
-      position: [
-        {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '数值设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'color',
+              require: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              require: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              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'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
+            },
+          ],
         },
       ],
-    }
+    ],
+    // 数据
+    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: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"value": 2, "name": "访问"},
+          {"value": 5, "name": "咨询"},
+          {"value": 20, "name": "订单"},
+          {"value": 40, "name": "点击"},
+          {"value": 125, "name": "展现"}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-funnel',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'PIE_PROPERTIES',
+        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: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 500,
+      },
+    ],
   }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gauge.js

@@ -324,7 +324,9 @@ export const widgetGauge = {
         placeholder: '',
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
-        value: 50,
+        value: [
+          {"num":50}
+        ],
       },
       {
         type: 'dycustComponents',

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js

@@ -6,601 +6,607 @@
  * @LastEditors: qianlishi
  * @LastEditTime: 2021-09-28 14:14:08
  */
-export const widgetGradientBarchart =  {
-    code: 'widget-gradient-color-barchart',
-    type: 'chart',
-    label: '柱形图-渐变色',
-    icon: 'iconzhuzhuangtu',
-    options: {
-      // 配置
-      setup: [
+export const widgetGradientBarchart = {
+  code: 'widget-gradient-color-barchart',
+  type: 'chart',
+  label: '柱形图-渐变色',
+  icon: 'iconzhuzhuangtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱形图-渐变色',
+      },
+      {
+        type: 'el-switch',
+        label: '竖展示',
+        name: 'verticalShow',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '柱形图-渐变色',
-        },
-        {
-          type: 'el-switch',
-          label: '竖展示',
-          name: 'verticalShow',
-          required: false,
-          placeholder: '',
-          value: false,
-        },
-        {
-          type: 'vue-color',
-          label: '背景颜色',
-          name: 'background',
-          required: false,
-          placeholder: '',
-          value: ''
-        },
-        [
-          {
-            name: '柱体设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '最大宽度',
-                name: 'maxWidth',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-slider',
-                label: '圆角',
-                name: 'radius',
-                require: false,
-                placeholder: '',
-                value: 5,
-              },
-            ],
-          },
-          {
-            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: '#fff'
-              },
-              {
-                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-input-number',
-                label: '字体大小',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 22
-              },
-              {
-                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: '#90979c'
-              },
-              {
-                type: 'el-input-text',
-                label: '字体粗细',
-                name: 'subTextFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-            ],
-          },
-          {
-            name: 'X轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'hideX',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'xName',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'Xcolor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'textAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-input-number',
-                label: '数值间隔',
-                name: 'textInterval',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: 'Y轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowY',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'textNameY',
-                require: false,
-                placeholder: '',
-                value: ''
-              },{
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'namefontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'colorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'ytextAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-switch',
-                label: '缩放',
-                name: 'scale',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'el-input-number',
-                label: '均分',
-                name: 'splitNumber',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalY',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineY',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: '数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShow',
-                required: false,
-                placeholder: '',
-                value: true
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distance',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'fontSize',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'tipsFontSize',
-                required: false,
-                placeholder: '',
-                value: 16
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '#ff7f50',
-              },
-            ],
-          },
-          {
-            name: '坐标轴边距设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '左边距(像素)',
-                name: 'marginLeft',
-                required: false,
-                placeholder: '',
-                value: 10,
-              }, {
-                type: 'el-slider',
-                label: '顶边距(像素)',
-                name: 'marginTop',
-                required: false,
-                placeholder: '',
-                value: 50,
-              }, {
-                type: 'el-slider',
-                label: '右边距(像素)',
-                name: 'marginRight',
-                required: false,
-                placeholder: '',
-                value: 40,
-              }, {
-                type: 'el-slider',
-                label: '底边距(像素)',
-                name: 'marginBottom',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-            ],
-          },
-          {
-            name: '渐变色',
-            list: [
-              {
-                type: 'vue-color',
-                label: '0%处',
-                name: 'bar0color',
-                required: false,
-                placeholder: '',
-                value: 'rgba(0,244,255,1)'
-              },
-              {
-                type: 'vue-color',
-                label: '100%处',
-                name: 'bar100color',
-                required: false,
-                placeholder: '',
-                value: 'rgba(0,77,167,1)'
-              },
-              {
-                type: 'vue-color',
-                label: '阴影颜色',
-                name: 'shadowColor',
-                required: false,
-                placeholder: '',
-                value: 'rgba(0,160,221,1)'
-              },
-              {
-                type: 'el-input-number',
-                label: '模糊系数',
-                name: 'shadowBlur',
-                required: false,
-                placeholder: '',
-                value: 4,
-              },
-            ],
-          },
-        ],
-      ],
-      // 数据
-      data: [
-        {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          name: '柱体设置',
+          list: [
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 10,
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          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: '#fff'
+            },
+            {
+              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-input-number',
+              label: '字体大小',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 22
+            },
+            {
+              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: '#90979c'
+            },
+            {
+              type: 'el-input-text',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+          ],
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'textAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          chartType: 'widget-barchart',
-          dictKey: 'BAR_PROPERTIES',
-          value: '',
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            }, {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'ytextAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scale',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '均分',
+              name: 'splitNumber',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distance',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '#ff7f50',
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: '渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%处',
+              name: 'bar0color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,244,255,1)'
+            },
+            {
+              type: 'vue-color',
+              label: '100%处',
+              name: 'bar100color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,77,167,1)'
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'shadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,160,221,1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '模糊系数',
+              name: 'shadowBlur',
+              required: false,
+              placeholder: '',
+              value: 4,
+            },
+          ],
         },
       ],
-    }
+    ],
+    // 数据
+    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: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"axis": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-barchart',
+        dictKey: 'BAR_PROPERTIES',
+        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: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
   }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js

@@ -7,668 +7,674 @@
  * @LastEditTime: 2021-09-28 14:17:10
  */
 export const widgetLinechart = {
-    code: 'widget-linechart',
-    type: 'chart',
-    label: '折线图',
-    icon: 'icontubiaozhexiantu',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-linechart',
+  type: 'chart',
+  label: '折线图',
+  icon: 'icontubiaozhexiantu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '折线图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          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: 'markPoint',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '点大小',
+              name: 'pointSize',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-switch',
+              label: '平滑曲线',
+              name: 'smoothCurve',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '面积堆积',
+              name: 'area',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '面积厚度',
+              name: 'areaThickness',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '线条宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 4,
+            },
+          ],
         },
-        [
-          {
-            name: '折线设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '标记点',
-                name: 'markPoint',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '点大小',
-                name: 'pointSize',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-switch',
-                label: '平滑曲线',
-                name: 'smoothCurve',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-switch',
-                label: '面积堆积',
-                name: 'area',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '面积厚度',
-                name: 'areaThickness',
-                required: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '线条宽度',
-                name: 'lineWidth',
-                required: false,
-                placeholder: '',
-                value: 4,
-              },
-            ],
-          },
-          {
-            name: '标题设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '标题',
-                name: 'isNoTitle',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-text',
-                label: '标题',
-                name: 'titleText',
-                required: false,
-                placeholder: '',
-                value: '',
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'textColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                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-input-number',
-                label: '字体字号',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-              {
-                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: '#fff'
-              },
-              {
-                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-input-number',
-                label: '字体字号',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-            ],
-          },
-          {
-            name: 'X轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'hideX',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'xName',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'Xcolor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'textAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-input-number',
-                label: '数值间隔',
-                name: 'textInterval',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: 'Y轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowY',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'textNameY',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'namefontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'colorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'ytextAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-switch',
-                label: '缩放',
-                name: 'scale',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'el-input-number',
-                label: '均分',
-                name: 'splitNumber',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalY',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineY',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: '数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShow',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'fontSize',
-                required: false,
-                placeholder: '',
-                value: 12
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-text',
-                label: '字体大小',
-                name: 'fontSize',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-            ],
-          },
-          {
-            name: '坐标轴边距设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '左边距(像素)',
-                name: 'marginLeft',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-slider',
-                label: '顶边距(像素)',
-                name: 'marginTop',
-                required: false,
-                placeholder: '',
-                value: 50,
-              },
-              {
-                type: 'el-slider',
-                label: '右边距(像素)',
-                name: 'marginRight',
-                required: false,
-                placeholder: '',
-                value: 40,
-              },
-              {
-                type: 'el-slider',
-                label: '底边距(像素)',
-                name: 'marginBottom',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-            ],
-          },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '图例',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'left'
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: ''
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: ''
-              },
-            ],
-          },
-          {
-            name: '自定义配色',
-            list: [
-              {
-                type: 'customColor',
-                label: '',
-                name: 'customColor',
-                required: false,
-                value: [{color: '#1E90FF'}],
-              },
-            ],
-          },
-        ],
-      ],
-      // 数据
-      data: [
         {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: false
+            },
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              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-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              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: '#fff'
+            },
+            {
+              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-input-number',
+              label: '字体字号',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'textAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]},
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'ytextAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scale',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '均分',
+              name: 'splitNumber',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          chartType: 'widget-linechart',
-          dictKey: 'LINE_PROPERTIES',
-          relactiveDomValue: 'dynamicData',
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-text',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            },
+            {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+            {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: ''
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#1E90FF'}],
+            },
+          ],
         },
       ],
-    }
+    ],
+    // 数据
+    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: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"axis": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-linechart',
+        dictKey: 'LINE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+      },
+    ],
+    // 坐标
+    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: 200,
+      },
+    ],
   }
+}

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js

@@ -1,6 +1,6 @@
 /*
  * @Descripttion: 百分比图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:34:01
  * @LastEditors: qianlishi
@@ -113,7 +113,7 @@ export const widgetPiePercentage = {
                 name: 'lineLength',
                 required: false,
                 placeholder: '',
-                value: 15
+                value: 19
               },
               {
                 type: 'el-input-number',
@@ -121,7 +121,7 @@ export const widgetPiePercentage = {
                 name: 'lineWidth',
                 required: false,
                 placeholder: '',
-                value: 5
+                value: 2
               },
               {
                 type: 'vue-color',
@@ -201,7 +201,9 @@ export const widgetPiePercentage = {
           placeholder: '',
           relactiveDom: 'dataType',
           relactiveDomValue: 'staticData',
-          value: 60,
+          value: [
+            {"num":60}
+          ],
         },
         {
           type: 'dycustComponents',
@@ -248,7 +250,7 @@ export const widgetPiePercentage = {
           name: 'height',
           required: false,
           placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          value: 300,
         },
       ],
     }

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

@@ -7,31 +7,32 @@
  * @LastEditTime: 2021-09-28 13:33:47
  */
 
-import { widgetText } from "./echartsConfigJson/widget-text"
-import { widgetMarquee } from "./echartsConfigJson/widget-marquee"
-import { widgetHref } from "./echartsConfigJson/widget-href"
-import { widgetTime } from "./echartsConfigJson/widget-time"
-import { widgetImage } from "./echartsConfigJson/widget-image"
-import { widgetSliders } from "./echartsConfigJson/widget-slider"
-import { widgetVideo } from "./echartsConfigJson/widget-video"
-import { widgetTable } from "./echartsConfigJson/widget-table"
-import { widgetIframe } from "./echartsConfigJson/widget-iframe"
-import { widgetUniversal } from "./echartsConfigJson/widget-universal"
-import { widgetBarchart } from "./echartsConfigJson/widget-barchart"
-import { widgetGradientBarchart } from "./echartsConfigJson/widget-gradient-barchart"
-import { widgetLinechart } from "./echartsConfigJson/widget-linechart"
-import { widgetBarlinechart } from "./echartsConfigJson/widget-barlinechart"
-import { widgetPiechart } from "./echartsConfigJson/widget-piechart"
-import { widgetFunnel } from "./echartsConfigJson/widget-funnel"
-import { widgetGauge } from "./echartsConfigJson/widget-gauge"
-import { widgetMap } from "./echartsConfigJson/widget-map"
-import { WidgetPieNightingale } from "./echartsConfigJson/widget-pie-nightingale"
-import { widgetPiePercentage } from "./echartsConfigJson/widget-pie-percentage"
-import { widgetAirbubbleMap } from "./echartsConfigJson/widget-airbubble-map"
-import { widgetBarStack } from "./echartsConfigJson/widget-bar-stack"
-import { widgetLineStack } from "./echartsConfigJson/widget-line-stack"
-import { widgetBarCompare } from "./echartsConfigJson/widget-bar-compare"
-import { widgetLineCompare } from "./echartsConfigJson/widget-line-compare"
+import {widgetText} from "./echartsConfigJson/widget-text"
+import {widgetMarquee} from "./echartsConfigJson/widget-marquee"
+import {widgetHref} from "./echartsConfigJson/widget-href"
+import {widgetTime} from "./echartsConfigJson/widget-time"
+import {widgetImage} from "./echartsConfigJson/widget-image"
+import {widgetSliders} from "./echartsConfigJson/widget-slider"
+import {widgetVideo} from "./echartsConfigJson/widget-video"
+import {widgetTable} from "./echartsConfigJson/widget-table"
+import {widgetIframe} from "./echartsConfigJson/widget-iframe"
+import {widgetUniversal} from "./echartsConfigJson/widget-universal"
+import {widgetBarchart} from "./echartsConfigJson/widget-barchart"
+import {widgetGradientBarchart} from "./echartsConfigJson/widget-gradient-barchart"
+import {widgetLinechart} from "./echartsConfigJson/widget-linechart"
+import {widgetBarlinechart} from "./echartsConfigJson/widget-barlinechart"
+import {widgetPiechart} from "./echartsConfigJson/widget-piechart"
+import {widgetFunnel} from "./echartsConfigJson/widget-funnel"
+import {widgetGauge} from "./echartsConfigJson/widget-gauge"
+import {widgetMap} from "./echartsConfigJson/widget-map"
+import {WidgetPieNightingale} from "./echartsConfigJson/widget-pie-nightingale"
+import {widgetPiePercentage} from "./echartsConfigJson/widget-pie-percentage"
+import {widgetAirbubbleMap} from "./echartsConfigJson/widget-airbubble-map"
+import {widgetBarStack} from "./echartsConfigJson/widget-bar-stack"
+import {widgetLineStack} from "./echartsConfigJson/widget-line-stack"
+import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare"
+import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare"
+import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -59,5 +60,6 @@ export const widgetTool = [
   widgetBarStack,
   widgetLineStack,
   widgetBarCompare,
-  widgetLineCompare
+  widgetLineCompare,
+  widgetDecoratePie
 ]

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

@@ -256,7 +256,7 @@ export default {
       handler(val) {
         this.optionsStyle = val.position;
         this.optionsData = val.data;
-        this.optionsSetup = val.setup;
+        this.optionsCollapse = val.setup;
         this.optionsSetup = val.setup;
         this.editorOptions();
       },

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

@@ -299,32 +299,37 @@ export default {
       const optionsSetup = this.optionsSetup;
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dataType == "staticData"
-        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(
-        optionsData.dynamicData,
-        optionsData.refreshTime,
-        optionsSetup
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
         );
     },
     // 静态数据
-    staticDataFn(val, optionsSetup) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data
+      }
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
-        this.options.yAxis.data = staticData.categories;
+        this.options.yAxis.data = axis;
         this.options.xAxis.type = "value";
         this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = staticData.categories;
+        this.options.xAxis.data = axis;
         this.options.yAxis.data = [];
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      // series
-      const series = this.options.series;
       if (series[0].type == "bar") {
-        series[0].data = staticData.series[0].data;
+        series[0].data = data;
       }
     },
     // 动态数据

report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue → report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue

@@ -143,57 +143,57 @@ export default {
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.text = optionsCollapse.titleText;
-      title.show = optionsCollapse.isNoTitle;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
 
       this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const xAxis = {
         type: "category",
-        show: optionsCollapse.hideX, // 坐标轴是否显示
-        name: optionsCollapse.xName, // 坐标轴名称
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.nameColorX,
-          fontSize: optionsCollapse.nameFontSizeX
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
         },
-        nameRotate: optionsCollapse.textAngle, // 文字角度
-        inverse: optionsCollapse.reversalX, // 轴反转
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval, // 文字间隔
-          rotate: optionsCollapse.textAngle, // 文字角度
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX
+            color: optionsSetup.lineColorX
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineX,
+          show: optionsSetup.isShowSplitLineX,
           lineStyle: {
-            color: optionsCollapse.splitLineColorX
+            color: optionsSetup.splitLineColorX
           }
         }
       };
@@ -201,29 +201,29 @@ export default {
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const yAxis = [
         {
           type: "value",
-          splitNumber: optionsCollapse.splitNumberLeft,// 均分
-          show: optionsCollapse.isShowYLeft, // 坐标轴是否显示
-          name: optionsCollapse.textNameYLeft, // 坐标轴名称
+          splitNumber: optionsSetup.splitNumberLeft,// 均分
+          show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+          name: optionsSetup.textNameYLeft, // 坐标轴名称
           nameTextStyle: { // 别名
-            color: optionsCollapse.nameColorYLeft,
-            fontSize: optionsCollapse.namefontSizeYLeft
+            color: optionsSetup.nameColorYLeft,
+            fontSize: optionsSetup.namefontSizeYLeft
           },
-          inverse: optionsCollapse.reversalY, // 轴反转
+          inverse: optionsSetup.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
-              color: optionsCollapse.colorY, // y轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
             }
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: optionsCollapse.lineColorY
+              color: optionsSetup.lineColorY
             }
           },
           splitLine: {
@@ -232,25 +232,25 @@ export default {
         },
         {
           type: "value",
-          splitNumber: optionsCollapse.splitNumberRight,// 均分
-          show: optionsCollapse.isShowYRight, // 坐标轴是否显示
-          name: optionsCollapse.textNameYRight, // 坐标轴名称
+          splitNumber: optionsSetup.splitNumberRight,// 均分
+          show: optionsSetup.isShowYRight, // 坐标轴是否显示
+          name: optionsSetup.textNameYRight, // 坐标轴名称
           nameTextStyle: { // 别名
-            color: optionsCollapse.nameColorYRight,
-            fontSize: optionsCollapse.namefontSizeYRight
+            color: optionsSetup.nameColorYRight,
+            fontSize: optionsSetup.namefontSizeYRight
           },
-          inverse: optionsCollapse.reversalY, // 轴反转
+          inverse: optionsSetup.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
-              color: optionsCollapse.colorY, // y轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
             }
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: optionsCollapse.lineColorY
+              color: optionsSetup.lineColorY
             }
           },
           splitLine: {
@@ -262,16 +262,16 @@ export default {
     },
     // 折线设置 数值设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "line") {
-          series[key].showSymbol = optionsCollapse.markPoint;
-          series[key].symbolSize = optionsCollapse.pointSize;
-          series[key].smooth = optionsCollapse.smoothCurve;
-          if (optionsCollapse.area) {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
             series[key].areaStyle = {
-              opacity: optionsCollapse.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100
             };
           } else {
             series[key].areaStyle = {
@@ -279,16 +279,16 @@ export default {
             };
           }
           series[key].lineStyle = {
-            width: optionsCollapse.lineWidth
+            width: optionsSetup.lineWidth
           };
-          series[key].itemStyle.borderRadius = optionsCollapse.radius;
+          series[key].itemStyle.borderRadius = optionsSetup.radius;
           series[key].label = {
-            show: optionsCollapse.isShowLine,
+            show: optionsSetup.isShowLine,
             position: "top",
-            distance: optionsCollapse.distanceLine,
-            fontSize: optionsCollapse.fontSizeLine,
-            color: optionsCollapse.subTextColorLine,
-            fontWeight: optionsCollapse.fontWeightLine
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
           };
         }
       }
@@ -296,71 +296,54 @@ export default {
     },
     // 柱体设置 数值设置
     setOptionsBar() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "bar") {
           series[key].label = {
-            show: optionsCollapse.isShowBar,
+            show: optionsSetup.isShowBar,
             position: "top",
-            distance: optionsCollapse.distanceBar,
-            fontSize: optionsCollapse.fontSizeBar,
-            color: optionsCollapse.subTextColorBar,
-            fontWeight: optionsCollapse.fontWeightBar
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
           };
-          series[key].barWidth = optionsCollapse.maxWidth;
-          series[key].barMinHeight = optionsCollapse.minHeight;
-          series[key].itemStyle.barBorderRadius = optionsCollapse.radius;
+          series[key].barWidth = optionsSetup.maxWidth;
+          series[key].barMinHeight = optionsSetup.minHeight;
+          series[key].itemStyle.barBorderRadius = optionsSetup.radius;
         }
       }
       this.options.series = series;
     },
     // tooltip 设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.tipFontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const grid = {
-        left: optionsCollapse.marginLeft,
-        right: optionsCollapse.marginRight,
-        bottom: optionsCollapse.marginBottom,
-        top: optionsCollapse.marginTop,
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
         containLabel: true
       };
       this.options.grid = grid;
     },
-/*    // 图例操作 legend
-    setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
-      const legend = this.options.legend;
-      legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition;
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
-      legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
-      legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.lengedFontSize
-      };
-      legend.itemWidth = optionsCollapse.lengedWidth;
-      console.log(legend);
-    },*/
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
@@ -377,16 +360,23 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      const series = this.options.series;
+      let axis = [];
+      let bar = [];
+      let line = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        bar[i] = val[i].bar;
+        line[i] = val[i].line;
+      }
       // x轴
-      this.options.xAxis.data = staticData.xAxis;
+      this.options.xAxis.data = axis;
       // series
-      const series = this.options.series;
       for (const i in series) {
-        for (const j in staticData.series) {
-          if (series[i].type == staticData.series[j].type) {
-            series[i].data = staticData.series[j].data;
-          }
+        if (series[i].type == "bar") {
+          series[i].data = bar;
+        } else {
+          series[i].data = line;
         }
       }
     },

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

@@ -384,32 +384,37 @@ export default {
       const optionsSetup = this.optionsSetup;
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       optionsData.dataType == "staticData"
-        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(
-        optionsData.dynamicData,
-        optionsData.refreshTime,
-        optionsSetup
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
         );
     },
     // 静态数据
-    staticDataFn(val, optionsSetup) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data
+      }
       // x轴
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
-        this.options.yAxis.data = staticData.categories;
+        this.options.yAxis.data = axis;
         this.options.xAxis.type = "value";
         this.options.yAxis.type = "category";
       } else {
-        this.options.xAxis.data = staticData.categories;
+        this.options.xAxis.data = axis;
         this.options.yAxis.data = [];
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
-      // series
-      const series = this.options.series;
       if (series[0].type == "bar") {
-        series[0].data = staticData.series[0].data;
+        series[0].data = data;
       }
     },
     // 动态数据

report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue

@@ -0,0 +1,490 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "widgetRotatePieChart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {},
+        series: [
+          {
+            name: '最外环',
+            type: 'pie',
+            silent: true,
+            radius: ['98%', '97%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            itemStyle: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [0]
+          },
+          {
+            name: '外四环',
+            type: 'pie',
+            zlevel: 2,
+            silent: true,
+            radius: ['90%', '91%'],
+            startAngle: 50,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '里四环',
+            type: 'pie',
+            zlevel: 3,
+            silent: true,
+            radius: ['88%', '87%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '虚线环',
+            type: 'pie',
+            zlevel: 4,
+            silent: true,
+            radius: ['84%', '83%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '三分环',
+            type: 'pie',
+            zlevel: 5,
+            silent: true,
+            radius: ['80%', '78%'],
+            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
+            startAngle: 50,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            data: [50, 20, 40]
+          },
+          {
+            name: "外指标环",
+            type: 'gauge',
+            splitNumber: 30,
+            min: 0,
+            max: 100,
+            radius: '73%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            name: '里指标环',
+            type: 'gauge',
+            splitNumber: 30,
+            min: 0,
+            max: 100,
+            radius: '68%',
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: false,
+            },
+          },
+          {
+            name: '环外环',
+            type: 'pie',
+            zlevel: 20,
+            silent: true,
+            radius: ['60%', '59%'],
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+          {
+            name: '中间环形图',
+            type: 'pie',
+            radius: ['40%', '55%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                color: '#80ADD2',
+                borderColor: '#3D4268',
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+                position: 'center',
+
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              25, 25, 25, 25, 25, 25
+            ]
+          },
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    }
+  },
+  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
+      };
+    }
+  },
+  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();
+  },
+  methods: {
+    editorOptions() {
+      this.setOptionsLastRing();
+      this.setOptionsEightRing();
+      this.setOptionsDottedRing();
+      this.setOptionsThreeRing();
+      this.setOptionsOutRing();
+      this.setOptionsInRing();
+      this.setOptionsRingOnRing();
+      this.setOptionsPie();
+    },
+    // 颜色设置
+    setColor(color) {
+      const nullColor = 'rgba(0,0,0,0)'
+      if (color == "") {
+        color = nullColor
+      }
+      return color
+    },
+    // 最外外环1
+    setOptionsLastRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[0];
+      if (optionsSetup.isLastRingShow) {
+        series.data = [0]
+      } else {
+        series.data = ''
+      }
+      const normal = {
+        color: {
+          colorStops: [
+            {
+              offset: 0,
+              color: this.setColor(optionsSetup.lastRing0Color),
+            },
+            {
+              offset: 1,
+              color: this.setColor(optionsSetup.lastRing100Color),
+            },
+          ],
+        },
+      };
+      series.itemStyle['normal'] = normal;
+    },
+    setRingPie2() {
+      const optionsSetup = this.optionsSetup;
+      let dataArr = [];
+      for (let i = 0; i < 8; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: this.setColor(optionsSetup.eightColor),
+                borderWidth: 0,
+                borderColor: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        }
+      }
+      return dataArr
+    },
+    // 八分环
+    setOptionsEightRing() {
+      const series = this.options.series;
+      series[1].data = this.setRingPie2();
+      series[2].data = this.setRingPie2();
+    },
+    setRingPie3() {
+      const optionsSetup = this.optionsSetup;
+      let dataArr = [];
+      for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: this.setColor(optionsSetup.dottedColor),
+                borderWidth: 0,
+                borderColor: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0,0,0,0)',
+              }
+            }
+          })
+        }
+      }
+      return dataArr
+    },
+    // 虚线环
+    setOptionsDottedRing() {
+      const series = this.options.series;
+      series[3].data = this.setRingPie3()
+    },
+    // 三分环
+    setOptionsThreeRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[4];
+      series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
+    },
+    // 外指标环
+    setOptionsOutRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const axisLine = {
+        show: optionsSetup.isOutRingShow,
+        lineStyle: {
+          width: optionsSetup.outRingWidth,
+          shadowBlur: 0,
+          color: [
+            [1, this.setColor(optionsSetup.outRingColor)]
+          ]
+        }
+      };
+      const axisTick = {
+        show: optionsSetup.isOutTickShow,
+        lineStyle: {
+          color: this.setColor(optionsSetup.outTickColor),
+          width: optionsSetup.outTickWidth
+        },
+        length: optionsSetup.outTickLength,
+        splitNumber: optionsSetup.outTickWidth
+      };
+      series[5].splitNumber = optionsSetup.outSplitNum
+      const splitLine = {
+        show: optionsSetup.isOutSplitShow,
+        length: optionsSetup.outSplitLength,
+        lineStyle: {
+          color: this.setColor(optionsSetup.outSplitColor),
+          width: optionsSetup.outSplitWidth,
+        }
+      };
+      series[5].axisLine = axisLine
+      series[5].axisTick = axisTick
+      series[5].splitLine = splitLine
+    },
+    // 里指标环
+    setOptionsInRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const axisLine = {
+        show: optionsSetup.isInRingShow,
+        lineStyle: {
+          width: optionsSetup.inRingWidth,
+          shadowBlur: 0,
+          color: [
+            [1, this.setColor(optionsSetup.inRingColor)],
+          ],
+        },
+      };
+      const axisTick = {
+        show: optionsSetup.isInTickShow,
+        lineStyle: {
+          color: this.setColor(optionsSetup.inTickColor),
+          width: optionsSetup.inTickWidth,
+        },
+        length: optionsSetup.inTickLength,
+        splitNumber: optionsSetup.inTickNum,
+      };
+      series[6].splitNumber = optionsSetup.inSplitNum
+      const splitLine = {
+        show: optionsSetup.isInSplitShow,
+        length: optionsSetup.inSplitLength,
+        lineStyle: {
+          color: this.setColor(optionsSetup.inSplitColor),
+          width: optionsSetup.inSplitWidth
+        }
+      };
+      series[6].axisLine = axisLine
+      series[6].axisTick = axisTick
+      series[6].splitLine = splitLine
+    },
+    // 环外环设置
+    setOptionsRingOnRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[7];
+      if (optionsSetup.isRingOnRingShow) {
+        series.data = [0]
+      } else {
+        series.data = ''
+      }
+      const itemStyle = {
+        normal: {
+          color: this.setColor(optionsSetup.ringOnRingColor),
+        }
+      }
+      series.itemStyle = itemStyle
+    },
+    // 中饼图设置
+    setOptionsPie() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[8];
+      let width = optionsSetup.pieWidth
+      const pieWidth = width + "%"
+      series.radius = [pieWidth, '55%']
+
+      let pieBlocks = optionsSetup.pieBlocks
+      if (pieBlocks == "six") {
+        series.data = [25, 25, 25, 25, 25, 25]
+      } else if (pieBlocks == "five") {
+        series.data = [30, 30, 30, 30, 30]
+      } else {
+        series.data = [40, 40, 40, 40]
+      }
+      const itemStyle = {
+        normal: {
+          color: this.setColor(optionsSetup.pieColor),
+          borderColor: this.setColor(optionsSetup.pieBorderColor),
+        }
+      }
+      series.itemStyle = itemStyle
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue

@@ -252,7 +252,7 @@ export default {
       handler(val) {
         this.optionsStyle = val.position;
         this.optionsData = val.data;
-        this.optionsSetup = val.setup;
+        this.optionsCollapse = val.setup;
         this.optionsSetup = val.setup;
         this.editorOptions();
       },

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -110,56 +110,56 @@ export default {
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.text = optionsCollapse.titleText;
-      title.show = optionsCollapse.isNoTitle;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
       this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const xAxis = {
         type: "category",
-        show: optionsCollapse.hideX, // 坐标轴是否显示
-        name: optionsCollapse.xName, // 坐标轴名称
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.nameColorX,
-          fontSize: optionsCollapse.nameFontSizeX
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
         },
-        nameRotate: optionsCollapse.textAngle, // 文字角度
-        inverse: optionsCollapse.reversalX, // 轴反转
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval, // 文字间隔
-          rotate: optionsCollapse.textAngle, // 文字角度
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX
+            color: optionsSetup.lineColorX
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineX,
+          show: optionsSetup.isShowSplitLineX,
           lineStyle: {
-            color: optionsCollapse.splitLineColorX
+            color: optionsSetup.splitLineColorX
           }
         }
       };
@@ -167,36 +167,36 @@ export default {
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const yAxis = {
         type: "value",
-        scale : optionsCollapse.scale,
-        splitNumber: optionsCollapse.splitNumber,// 均分
-        show: optionsCollapse.isShowY, // 坐标轴是否显示
-        name: optionsCollapse.textNameY, // 坐标轴名称
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber,// 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: { // 别名
-          color: optionsCollapse.nameColorY,
-          fontSize: optionsCollapse.namefontSizeY
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.namefontSizeY
         },
-        inverse: optionsCollapse.reversalY, // 轴反转
+        inverse: optionsSetup.reversalY, // 轴反转
         axisLabel: {
           show: true,
-          rotate: optionsCollapse.ytextAngle, // 文字角度
+          rotate: optionsSetup.ytextAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.colorY, // y轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeY
+            color: optionsSetup.colorY, // y轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorY
+            color: optionsSetup.lineColorY
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineY,
+          show: optionsSetup.isShowSplitLineY,
           lineStyle: {
-            color: optionsCollapse.splitLineColorY
+            color: optionsSetup.splitLineColorY
           }
         }
       };
@@ -204,16 +204,16 @@ export default {
     },
     // 折线设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "line") {
-          series[key].showSymbol = optionsCollapse.markPoint;
-          series[key].symbolSize = optionsCollapse.pointSize;
-          series[key].smooth = optionsCollapse.smoothCurve;
-          if (optionsCollapse.area) {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
             series[key].areaStyle = {
-              opacity: optionsCollapse.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100
             };
           } else {
             series[key].areaStyle = {
@@ -222,15 +222,15 @@ export default {
           }
 
           series[key].lineStyle = {
-            width: optionsCollapse.lineWidth
+            width: optionsSetup.lineWidth
           };
           series[key].label = {
-            show: optionsCollapse.isShow,
+            show: optionsSetup.isShow,
             position: "top",
             distance: 10,
-            fontSize: optionsCollapse.fontSize,
-            color: optionsCollapse.subTextColor,
-            fontWeight: optionsCollapse.fontWeight
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
           };
         }
       }
@@ -238,50 +238,50 @@ export default {
     },
     // tooltip 设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const grid = {
-        left: optionsCollapse.marginLeft,
-        right: optionsCollapse.marginRight,
-        bottom: optionsCollapse.marginBottom,
-        top: optionsCollapse.marginTop,
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
         containLabel: true
       };
       this.options.grid = grid;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
-      legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.fontSize
       };
-      legend.itemWidth = optionsCollapse.lengedWidth;
+      legend.itemWidth = optionsSetup.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
@@ -298,14 +298,19 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data
+      }
       // x轴
-      this.options.xAxis.data = staticData.categories;
+      this.options.xAxis.data = axis;
       // series
-      const series = this.options.series;
       for (const i in series) {
         if (series[i].type == "line") {
-          series[i].data = staticData.series[0].data;
+          series[i].data = data;
         }
       }
     },

report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue → report-ui/src/views/report/bigscreen/designer/widget/percent/widgetGauge.vue

@@ -259,9 +259,10 @@ export default {
     staticDataFn(val) {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
+      const num = val[0]['num'];
       const data = [
         {
-          value: val
+          value: num
         }
       ]
       const detail = {

report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue → report-ui/src/views/report/bigscreen/designer/widget/percent/widgetPiePercentageChart.vue

@@ -361,20 +361,20 @@ export default {
       this.setOptionSurplusColor();
     },
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = this.options.title;
       title.x = "center";
       title.y = "center";
       const rich = {
         nums: {
-          fontSize: optionsCollapse.textNumFontSize,
-          color: optionsCollapse.textNumColor,
-          fontWeight: optionsCollapse.textNumFontWeight
+          fontSize: optionsSetup.textNumFontSize,
+          color: optionsSetup.textNumColor,
+          fontWeight: optionsSetup.textNumFontWeight
         },
         percent: {
-          fontSize: optionsCollapse.textPerFontSize,
-          color: optionsCollapse.textPerColor,
-          fontWeight: optionsCollapse.textPerFontWeight
+          fontSize: optionsSetup.textPerFontSize,
+          color: optionsSetup.textPerColor,
+          fontWeight: optionsSetup.textPerFontWeight
         }
       };
       title.textStyle['rich'] = rich;
@@ -445,9 +445,10 @@ export default {
     },
     staticDataFn(val) {
       const title = this.options.title;
-      title.text = '{nums|' + val + '}{percent|%}';
-      this.options.series[6]['data'][0]['value'] = val;
-      this.options.series[6]['data'][1]['value'] = 100 - val;
+      const num = val[0]['num'];
+      title.text = '{nums|' + num + '}{percent|%}';
+      this.options.series[6]['data'][0]['value'] = num;
+      this.options.series[6]['data'][1]['value'] = 100 - num;
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;

report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -59,7 +59,6 @@ export default {
   watch: {
     value: {
       handler(val) {
-        console.log(val);
         this.optionsStyle = val.position;
         this.optionsData = val.data;
         this.optionsCollapse = val.setup;

report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue → report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -103,86 +103,86 @@ export default {
     },
     // 标题设置
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.show = optionsCollapse.isNoTitle;
-      title.text = optionsCollapse.titleText;
-      title.left = optionsCollapse.textAlign;
+      title.show = optionsSetup.isNoTitle;
+      title.text = optionsSetup.titleText;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
       this.options.title = title;
     },
     // 数值设定
     setOptionsValue() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-      const numberValue = optionsCollapse.numberValue ? "{c}" : "";
-      const percentage = optionsCollapse.percentage ? "({d})%" : "";
+      const numberValue = optionsSetup.numberValue ? "{c}" : "";
+      const percentage = optionsSetup.percentage ? "({d})%" : "";
       const label = {
-        show: optionsCollapse.isShow,
+        show: optionsSetup.isShow,
         formatter: `{a|{b}：${numberValue} ${percentage}}`,
         rich: {
           a: {
             padding: [-30, 15, -20, 15],
-            color: optionsCollapse.subTextColor,
-            fontSize: optionsCollapse.fontSize,
-            fontWeight: optionsCollapse.fontWeight
+            color: optionsSetup.subTextColor,
+            fontSize: optionsSetup.fontSize,
+            fontWeight: optionsSetup.fontWeight
           }
         },
-        fontSize: optionsCollapse.fontSize,
+        fontSize: optionsSetup.fontSize,
 
-        fontWeight: optionsCollapse.optionsCollapse
+        fontWeight: optionsSetup.optionsSetup
       };
       for (const key in series) {
         if (series[key].type == "pie") {
           series[key].label = label;
-          series[key].labelLine = { show: optionsCollapse.isShow };
+          series[key].labelLine = {show: optionsSetup.isShow};
         }
       }
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
-      legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.fontSize
       };
-      legend.itemWidth = optionsCollapse.lengedWidth;
+      legend.itemWidth = optionsSetup.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {

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

@@ -6,7 +6,7 @@
  !-->
 <template>
   <div>
-    <component :is="type" :value="value" :ispreview="true" />
+    <component :is="type" :value="value" :ispreview="true"/>
   </div>
 </template>
 
@@ -19,22 +19,23 @@ import widgetImage from "./widgetImage.vue";
 import widgetSlider from "./widgetSlider.vue";
 import widgetVideo from "./widgetVideo.vue";
 import WidgetIframe from "./widgetIframe.vue";
-import widgetBarchart from "./widgetBarchart.vue";
-import widgetLinechart from "./widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
+import widgetBarchart from "./bar/widgetBarchart.vue";
+import widgetLinechart from "./line/widgetLinechart.vue";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
-import WidgetPiechart from "./widgetPiechart.vue";
+import WidgetPiechart from "./pie/widgetPiechart.vue";
 import WidgetFunnel from "./widgetFunnel.vue";
-import WidgetGauge from "./widgetGauge.vue";
+import WidgetGauge from "./percent/widgetGauge.vue";
 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
 import widgetTable from "./widgetTable.vue";
 import widgetMap from "./widgetMap.vue";
-import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
+import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
 import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
 import widgetBarStackChart from "./bar/widgetBarStackChart";
 import widgetLineStackChart from "./line/widgetLineStackChart";
 import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
+import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 
 export default {
   name: "WidgetTemp",
@@ -62,7 +63,8 @@ export default {
     widgetBarStackChart,
     widgetLineStackChart,
     widgetBarCompareChart,
-    widgetLineCompareChart
+    widgetLineCompareChart,
+    widgetDecoratePieChart
   },
   model: {
     prop: "value",
@@ -72,13 +74,15 @@ export default {
     type: String,
     value: {
       type: [Object],
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {}
 };
 </script>

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

@@ -17,7 +17,7 @@
     @focus="handleFocus"
     @blur="handleBlur"
   >
-    <component :is="type" :value="value" />
+    <component :is="type" :value="value"/>
   </avue-draggable>
 </template>
 
@@ -30,22 +30,23 @@ import widgetImage from "./widgetImage.vue";
 import widgetSlider from "./widgetSlider.vue";
 import widgetVideo from "./widgetVideo.vue";
 import WidgetIframe from "./widgetIframe.vue";
-import widgetBarchart from "./widgetBarchart.vue";
+import widgetBarchart from "./bar/widgetBarchart.vue";
 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
-import widgetLinechart from "./widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
-import WidgetPiechart from "./widgetPiechart.vue";
+import widgetLinechart from "./line/widgetLinechart.vue";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
+import WidgetPiechart from "./pie/widgetPiechart.vue";
 import WidgetFunnel from "./widgetFunnel.vue";
-import WidgetGauge from "./widgetGauge.vue";
+import WidgetGauge from "./percent/widgetGauge.vue";
 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
 import widgetTable from "./widgetTable.vue";
 import widgetMap from "./widgetMap.vue";
-import widgetPiePercentageChart from "./pie/widgetPiePercentageChart";
+import widgetPiePercentageChart from "./percent/widgetPiePercentageChart";
 import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
 import widgetBarStackChart from "./bar/widgetBarStackChart";
 import widgetLineStackChart from "./line/widgetLineStackChart";
 import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
+import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 
 export default {
   name: "Widget",
@@ -73,7 +74,8 @@ export default {
     widgetBarStackChart,
     widgetLineStackChart,
     widgetBarCompareChart,
-    widgetLineCompareChart
+    widgetLineCompareChart,
+    widgetDecoratePieChart
   },
   model: {
     prop: "value",
@@ -89,7 +91,8 @@ export default {
     bigscreen: Object,
     value: {
       type: [Object],
-      default: () => {}
+      default: () => {
+      }
     },
     step: Number
   },
@@ -119,11 +122,13 @@ export default {
       return this.value.position.zIndex || 1;
     }
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
-    handleFocus({ index, left, top, width, height }) {},
-    handleBlur({ index, left, top, width, height }) {
-      this.$emit("onActivated", { index, left, top, width, height });
+    handleFocus({index, left, top, width, height}) {
+    },
+    handleBlur({index, left, top, width, height}) {
+      this.$emit("onActivated", {index, left, top, width, height});
       this.$refs.draggable.setActive(true);
     }
   }
@@ -134,11 +139,13 @@ export default {
 .vue-draggalbe {
   position: absolute;
 }
+
 .widget-active {
   cursor: move;
   border: 1px dashed #09f;
   background-color: rgba(115, 170, 229, 0.5);
 }
+
 .avue-draggable {
   padding: 0 !important;
 }

report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -24,9 +24,11 @@ export default {
         },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}%"
+          formatter: "{a} <br/>{b} : {c}"
         },
         legend: {
+          x: 'center',
+          y: '92%',
           textStyle: {
             color: "#fff"
           }
@@ -35,34 +37,34 @@ export default {
           {
             name: "",
             type: "funnel",
-            left: "10%",
-            top: 60,
-            bottom: 60,
+            left: "center",
             width: "80%",
-            min: 0,
-            max: 100,
-            minSize: "0%",
-            maxSize: "100%",
+            //maxSize: '80%',
             sort: "descending",
-            gap: 2,
             label: {
-              show: true,
-              position: "inside"
-            },
-            labelLine: {
-              length: 10,
-              lineStyle: {
-                width: 1,
-                type: "solid"
+              normal: {
+                show: true,
+                position: 'inside',
+                formatter: '{c}',
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 14,
+                }
+              },
+              emphasis: {
+                position: 'inside',
+                formatter: '{b}: {c}'
               }
             },
             itemStyle: {
-              borderColor: "#fff",
-              borderWidth: 1
-            },
-            emphasis: {
-              label: {
-                fontSize: 20
+              normal: {
+                opacity: 0.8,
+                borderColor: 'rgba(12, 13, 43, .9)',
+                borderWidth: 1,
+                shadowBlur: 4,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0, 0, 0, .6)'
               }
             },
             data: []
@@ -109,6 +111,7 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
+      this.setEnding();
       this.setOptionsText();
       this.setOptionsTitle();
       this.setOptionsTooltip();
@@ -116,79 +119,86 @@ export default {
       this.setOptionsColor();
       this.setOptionsData();
     },
-    // 文字设置
-    setOptionsText() {
-      const optionsCollapse = this.optionsSetup;
+    // 翻转
+    setEnding() {
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
-
-      for (const key in series) {
-        if (series[key].type == "funnel") {
-          series[key].label.show = optionsCollapse.isShow;
-          series[key].label.fontSize = optionsCollapse.fontSize;
-          series[key].label.color = optionsCollapse.color;
-          series[key].label.fontWeight = optionsCollapse.fontWeight;
-
-          series[key].sort = optionsCollapse.reversal
-            ? "ascending"
-            : "descending";
+      if (optionsSetup.ending) {
+        series[0].sort = "ascending";
+      } else {
+        series[0].sort = "descending";
+      }
+    },
+    // 数值设置
+    setOptionsText() {
+      const optionsSetup = this.optionsSetup;
+      const normal = {
+        show: optionsSetup.isShow,
+        position: 'inside',
+        formatter: '{c}',
+        textStyle: {
+          color: optionsSetup.color,
+          fontSize: optionsSetup.fontSize,
+          fontWeight: optionsSetup.fontWeight,
         }
       }
+      this.options.series[0].label['normal'] = normal;
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.show = optionsCollapse.isNoTitle;
-      title.text = optionsCollapse.titleText;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
 
       this.options.title = title;
     },
     // 提示语设置 tooltip
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.fontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 图例操作 legend
     setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
-      legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
+        optionsSetup.longitudinalPosition;
+      legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.fontSize
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
       };
-      legend.itemWidth = optionsCollapse.lengedWidth;
+      legend.itemWidth = optionsSetup.lengedWidth;
     },
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {

report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue

@@ -143,12 +143,12 @@ export default {
       const tableData = this.optionsData;
       tableData.dataType == "staticData"
         ? this.handlerStaticData(tableData.staticData)
-        : this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
+        : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
     },
     handlerStaticData(data) {
       this.list = data;
     },
-    handlerDymaicData(data, refreshTime) {
+    handlerDynamicData(data, refreshTime) {
       if (!data) return;
       if (this.ispreview) {
         this.getEchartData(data);

report-ui/src/views/report/resultset/components/EditDataSet.vue

@@ -15,7 +15,7 @@
         label-width="130px"
       >
         <el-row :gutter="10">
-          <el-col :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
+          <el-col v-if="this.setType=='sql'" :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
             <el-form-item label="数据源" prop="sourceCode">
               <el-select
                 v-model.trim="formData.sourceCode"
@@ -53,6 +53,9 @@
             </el-form-item>
           </el-col>
 
+
+        </el-row>
+        <el-row v-if="this.setType=='sql'" :gutter="10">
           <el-col
             :xs="24"
             :sm="20"
@@ -61,7 +64,7 @@
             :xl="22"
             class="code-mirror-form"
           >
-            <el-form-item label="查询SQL或请求体">
+            <el-form-item  label="查询SQL">
               <div class="codemirror">
                 <monaco-editor
                   v-model.trim="formData.dynSentence"
@@ -72,6 +75,25 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row v-if="this.setType=='http'">
+          <el-form-item  label="请求路径">
+            <el-input placeholder="请输入请求路径..." v-model="httpForm.apiUrl" class="input-with-select">
+              <el-select v-model="httpForm.method" slot="prepend" placeholder="请选择">
+                <el-option label="GET" value="GET"></el-option>
+                <el-option label="POST" value="POST"></el-option>
+                <el-option label="PUT" value="PUT"></el-option>
+                <el-option label="DELETE" value="DELETE"></el-option>
+              </el-select>
+            </el-input>
+          </el-form-item>
+          <el-form-item  label="请求头">
+            <el-input v-model.trim="httpForm.header" size="mini" placeholder="请输入请求头..."/>
+          </el-form-item>
+          <el-form-item  label="请求体">
+            <el-input v-model.trim="httpForm.body" size="mini" placeholder="请输入请求体..."/>
+          </el-form-item>
+
+        </el-row>
         <el-row :gutter="10">
           <el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22">
             <el-form label-width="100px" class="demo-ruleForm">
@@ -508,7 +530,13 @@ export default {
         setName: "",
         setCode: ""
       },
-
+      setType: '',  //数据集类型，主要用于区分http   addSql  addHttp  edit
+      httpForm: {   //http数据源相关数据
+        apiUrl: '',
+        method: 'GET',
+        header: '{"Content-Type":"application/json;charset=UTF-8"}',
+        body: '',
+      },
       //待删除
       dictionaryOptions: [], // 数据源类型
       list: null,
@@ -541,7 +569,11 @@ export default {
   mounted() {},
   methods: {
     // 编辑数据集,获取单条数据详情
-    async addOrEditDataSet(row) {
+    async addOrEditDataSet(row, type) {
+      this.setType = type
+      if (type == 'http' && row.dynSentence) {
+        this.httpForm = JSON.parse(row.dynSentence)
+      }
       //获取数据源下拉
       const { code, data } = await queryAllDataSourceSet();
       if (code != "200") return;
@@ -636,12 +668,18 @@ export default {
 
     // 测试预览
     async handleClickTabs(tab, event) {
+      if (this.setType == 'http') {
+        //针对http数据源
+        console.log("http数据集" + this.httpForm);
+        this.formData.dynSentence = JSON.stringify(this.httpForm)
+      }
       if (tab.paneName == "third") {
         const params = {
           sourceCode: this.formData.sourceCode,
           dynSentence: this.formData.dynSentence,
           dataSetParamDtoList: this.tableData,
-          dataSetTransformDtoList: this.itemFilterList
+          dataSetTransformDtoList: this.itemFilterList,
+          setType: this.setType
         };
         const { code, data } = await testTransformSet(params);
         if (code != "200") return;
@@ -831,6 +869,12 @@ export default {
       });
     },
     async submit(formName) {
+      if (this.setType == 'http') {
+        //针对http数据源
+        console.log("http数据集" + this.httpForm);
+        this.formData.dynSentence = JSON.stringify(this.httpForm)
+      }
+      this.formData.setType = this.setType
       this.$refs[formName].validate(async (valid, obj) => {
         if (valid) {
           if (this.testMassageCode == 200) {

report-ui/src/views/report/resultset/components/util/sql-completion.js

@@ -34,7 +34,7 @@ const hints = [
     "PREPARE",
     "EXECUTE",
     "DESCRIBE",
-    "FORM",
+    "FROM",
     "ORDER BY"]
 function createCompleter(getExtraHints) {
     const createSuggestions = function (model, textUntilPosition) {
@@ -79,4 +79,4 @@ function createCompleter(getExtraHints) {
         }
     }
 }
-export default createCompleter;
+export default createCompleter;

report-ui/src/views/report/resultset/index.vue

@@ -1,13 +1,19 @@
 <template>
   <anji-crud ref="listPage" :option="crudOption">
     <template v-slot:buttonLeftOnTable>
-      <el-button
-        type="primary"
-        icon="el-icon-plus"
-        @click="operateDataset('add')"
-        v-permission="'resultsetManage:insert'"
-        >新增
-      </el-button>
+      <el-dropdown
+        placement="bottom"
+        @command="operateDataset"
+      >
+        <el-button type="primary" icon="el-icon-plus">
+          新增
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="sql">SQL</el-dropdown-item>
+          <el-dropdown-item command="http">HTTP</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </template>
 
     <template slot="edit" slot-scope="props">
@@ -15,7 +21,7 @@
         type="text"
         @click="operateDataset('edit', props)"
         v-permission="'resultsetManage:update'"
-        >编辑
+      >编辑
       </el-button>
     </template>
 
@@ -24,7 +30,7 @@
         type="text"
         @click="dataView(props)"
         v-permission="'resultsetManage:query'"
-        >数据预览
+      >数据预览
       </el-button>
     </template>
     <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
@@ -95,7 +101,15 @@ export default {
             },
             label: "数据源",
             field: "sourceCode"
-          }
+          },
+          {
+            inputType: "anji-select", //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
+            anjiSelectOption: {
+              dictCode: "SET_TYPE"
+            },
+            label: "数据集类型",
+            field: "setType"
+          },
         ],
         // 操作按钮
         buttons: {
@@ -143,7 +157,7 @@ export default {
             editField: "setCode",
             inputType: "input",
             rules: [
-              { min: 1, max: 50, message: "不超过50个字符", trigger: "blur" }
+              {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
             ],
             disabled: false
           },
@@ -154,7 +168,7 @@ export default {
             editField: "setName",
             inputType: "input",
             rules: [
-              { min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
+              {min: 1, max: 100, message: "不超过100个字符", trigger: "blur"}
             ],
             disabled: false
           },
@@ -165,7 +179,7 @@ export default {
             editField: "setDesc",
             inputType: "input",
             rules: [
-              { min: 1, max: 255, message: "不超过255个字符", trigger: "blur" }
+              {min: 1, max: 255, message: "不超过255个字符", trigger: "blur"}
             ],
             disabled: false
           },
@@ -176,7 +190,18 @@ export default {
             editField: "sourceCode",
             inputType: "input",
             rules: [
-              { min: 1, max: 50, message: "不超过50个字符", trigger: "blur" }
+              {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
+            ],
+            disabled: false
+          },
+          {
+            label: "数据集类型", //数据源编码
+            placeholder: "",
+            field: "setType",
+            editField: "setType",
+            inputType: "input",
+            rules: [
+              {min: 1, max: 50, message: "不超过50个字符", trigger: "blur"}
             ],
             disabled: false
           },
@@ -245,16 +270,19 @@ export default {
     };
   },
 
-  created() {},
+  created() {
+  },
   methods: {
     operateDataset(type, prop) {
+      debugger
       this.dialogVisibleSetDataSet = true;
-      if (prop) {
+      if (prop && prop.msg) {
         this.dataSet = prop.msg;
+        type = prop.msg.setType;
       } else {
         this.dataSet = {};
       }
-      this.$refs.EditDataSet.addOrEditDataSet(this.dataSet);
+      this.$refs.EditDataSet.addOrEditDataSet(this.dataSet, type);
     },
     refreshList() {
       this.$refs.listPage.handleQueryForm("query");