diff --git a/README.md b/README.md index 1915e59fad41c98961051cb18be4f3e341d48070..8375b85a9d5520d4716d1ff1555d0b398c40559b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ ## 简介     AJ-Report是全开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
-    多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。
+    多数据源支持，内置mysql、elasticsearch、kudu驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
    三步轻松完成大屏设计：配置数据源---->写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 +
-- [Node.js] v14.16.0+
-- [Jdk] 1.8+ +- [Apache Maven] 3.5
+- [Node.js] v14.16.0
+- [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 ``` +**开发环境参考文档：**
+https://report.anji-plus.com/report-doc/guide/quicklyDevelop.html
**源码编译部署参考文档：**
https://report.anji-plus.com/report-doc/guide/quicklySource.html
**发行版部署参考文档：**
@@ -150,6 +152,7 @@ sql文件的目录在：report-core --> src --> main --> resources -- > db.migra - http数据源调整 - 大屏工具栏使用二级菜单显示 - Execl报表功能增加与bug修复 +- 使用vue3 + ts ## 已知问题 @@ -190,6 +193,5 @@ AJ-Report使用[Apache2.0开源协议](http://www.apache.org/licenses/LICENSE-2. 个人企业微信：
- #### 开源不易，劳烦各位star ☺ diff --git a/doc/docs/guide/README.md b/doc/docs/guide/README.md index ec76fde629f6e137bebebd91037e88409727ec19..a439081fc2ff4ff00ba15865d119da30098c6a2f 100644 --- a/doc/docs/guide/README.md +++ b/doc/docs/guide/README.md @@ -1,31 +1,41 @@ -    AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
-    多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，支持17+种大屏组件，不会开发，照着设计稿也可以制作大屏。
-    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 +    AJ-Report是一个完全开源的BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。
+    多数据源支持，内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发，目前已支持20种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
+    三步轻松完成大屏设计：配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。 ## 系统特性 + 1. 最新最稳定的技术栈； 2. 支持多数据源配置 3. 丰富的大屏组件。拖拽配置实现动态大屏 ## 在线体验 -####   电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  体验账号：guest 密码：guest -####   在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")
-####   在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
+ +####   电脑在线体验: [https://report.anji-plus.com/index.html](https://report.anji-plus.com/index.html "链接")  体验账号：guest 密码：guest + +####   在线文档: [https://report.anji-plus.com/report-doc/](https://report.anji-plus.com/report-doc/ "doc")
+ +####   在线提问: [https://gitee.com/anji-plus/report/issues](https://gitee.com/anji-plus/report/issues "issue")
## 发行版本 -####   下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")
+ +####   下载链接：[https://gitee.com/anji-plus/report/releases](https://gitee.com/anji-plus/report/releases "下载链接")
## 功能概述 -####   组件介绍 -   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 -内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
+ +####   组件介绍 + +   大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。 内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
**在线案例还在努力创造中，敬请期待！！！** ![操作](../picture/shipin.gif) +![更多案例](https://report.anji-plus.com/report-doc/static/Rhea.mp4)
+ ## 数据流程图 + ![流程.png](../picture/liucheng.png) ## 打包目录 + ``` ├── bin 启动命令脚本 │ ├── restart.sh @@ -40,6 +50,7 @@ ``` ## 系统目录 + ``` ├── doc 文档源码 │ ├── docs diff --git a/doc/docs/guide/dataset.md b/doc/docs/guide/dataset.md index 8e9cba2ee9393334137039f68b688d747012221a..e43f8044ab326a21d76eda3fc1928fe03110d702 100644 --- a/doc/docs/guide/dataset.md +++ b/doc/docs/guide/dataset.md @@ -1,11 +1,37 @@ -## Mysql数据集 -在数据源处添加了mysql的数据源后，即可使用。 -![img_1.png](../picture/dateset/img_1.png) -**注**：目前，查询参数和数据转化功能待补全中，建议等完善了再使用。 +## 常见数据集 -## ES数据集 -**注**：es是通过调用xpack-sql，注意写法 -![es.png](../picture/dateset/img.png) +### Mysql数据集 -## Kudu数据集 -![kudu.png](../picture/dateset/img_2.png) \ No newline at end of file +在数据源处添加了mysql的数据源后，即可使用。
+![img_1.png](../picture/dateset/img_1.png)
+ +### ES数据集 + +**注**：es是通过调用xpack-sql，注意写法
+![es.png](../picture/dateset/img.png)
+ +### Kudu数据集 + +![kudu.png](../picture/dateset/img_2.png)
+ +## 功能栏 + +**可以看在线环境，有示例参考**
+ +### 查询参数 + +![img3](../picture/dateset/img_3.png)
+注意参数名要和sql(请求体)中变量名保持一致，sql(请求体)中的变量用 ${} 表示
+高级规则是用js进行数据装换。 + +### 数据转换 + +#### js脚本 + +**注**：这里的JS是java的scriptengine执行的，很多es6的语法不支持
+![img4](../picture/dateset/img_4.png)
+入参是data，返回值也必须是data，中间是JS的处理过程，注意入参返回都是List，记得保存。
+ +#### 字典项 + +场景有限，待补充。 diff --git a/doc/docs/guide/quicklySeparate.md b/doc/docs/guide/quicklySeparate.md index cd12fa79f8e0a9fcd0061753e604a4c4caf81479..5a8d85be88ae2b031e57fe31b057311165559b6d 100644 --- a/doc/docs/guide/quicklySeparate.md +++ b/doc/docs/guide/quicklySeparate.md @@ -20,11 +20,11 @@ npm run build ### 编译环境 -- [Apache Maven] 3.5 +
-- [Node.js] v14.16.0+
+- [Apache Maven] 3.5
+- [Node.js] v14.16.0
- [Jdk] 1.8
请在你的Windows上先准备好maven、node.js、jdk
- **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类
+ **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
### 克隆源码 diff --git a/doc/docs/guide/quicklySource.md b/doc/docs/guide/quicklySource.md index 8a0da0cfcdc9d754f89f0bbd9e23cd902a6cb744..3fe07052589a9947106134800a07ec7d0f8923e4 100644 --- a/doc/docs/guide/quicklySource.md +++ b/doc/docs/guide/quicklySource.md @@ -17,10 +17,10 @@ http://serverip:9095 请在Linux上先准备好maven、node.js、jdk -- [Apache Maven] 3.5 +
-- [Node.js] v14.16.0 +
+- [Apache Maven] 3.5
+- [Node.js] v14.16.0
- [Jdk] 1.8
- **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看**常见问题**大类
+ **注**：已知**Jdk11**存在兼容性问题，请不要使用openJdk，环境问题请看 **常见问题** 大类
## 克隆源码 diff --git a/doc/docs/picture/dateset/img_3.png b/doc/docs/picture/dateset/img_3.png new file mode 100644 index 0000000000000000000000000000000000000000..ebced469400e42ac78f4e9bb419fd5dfc55d11d6 Binary files /dev/null and b/doc/docs/picture/dateset/img_3.png differ diff --git a/doc/docs/picture/dateset/img_4.png b/doc/docs/picture/dateset/img_4.png new file mode 100644 index 0000000000000000000000000000000000000000..e00b2cb5a722dcfab4139bc8611b8281e0c44576 Binary files /dev/null and b/doc/docs/picture/dateset/img_4.png differ diff --git a/report-core/pom.xml b/report-core/pom.xml index 69abc8c3f8ca95fa3c0d4aa6aa1d63a0b728c005..c54d40ac2752fad9f18103533989701d62114fdd 100644 --- a/report-core/pom.xml +++ b/report-core/pom.xml @@ -79,7 +79,7 @@ com.alibaba druid - 1.2.6 + 1.2.0 org.flywaydb diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js index b324631b797ccb0dbdfca5b18c233067e0205749..076423ea95bb807846c918a2b029156f7e5120ad 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barchart.js +++ b/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, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js index b2f5a9225a432ba441628fd7c4f6142790299e12..d6b030e06d50806a7cbd4d264d7a85b7f56be479 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js +++ b/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, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js new file mode 100644 index 0000000000000000000000000000000000000000..bff9ed9115ceec402aacbcbca9b67884b85ae8b7 --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js @@ -0,0 +1,382 @@ +/* + * @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: '#28E8FA' + }, + { + 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: '#28E8FA' + }, + { + 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: '#28E8FA' + }, + ] + }, + { + name: '里指标环设置', + list: [ + { + type: 'el-switch', + label: '环显示', + name: 'isInRingShow', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '环颜色', + name: 'inRingColor', + required: false, + placeholder: '', + value: '#28E8FA' + }, + { + 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: '#28E8FA' + }, + { + 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: '#28E8FA' + }, + ] + }, + ], + ], + // 坐标 + 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, + }, + ], + } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js index e554263b049bee09d72ebc11f780d0fef68dbb11..f1c9ab6c49a8332de411e6e6b38e2a1cb1cd6dcb 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js +++ b/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, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js index 7d1c1d1675f32f70426d637f060fc0346c5ca7f1..7a6c7696448e5413630b57262f9fce8c6d5b44a7 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-gradient-barchart.js +++ b/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, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js index c4dfb0db796fa8f7ce7a169d5eaf2a5995091174..3614ded3193f2e2266d8200cfce89be8f5bcc768 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-linechart.js +++ b/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, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js index 32dcdf3398419d2c84b3559dc1ee1290fab2abc8..34c22e4068b0c9b76ab60edb62e9231cd85d0762 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js +++ b/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', @@ -248,7 +248,7 @@ export const widgetPiePercentage = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 300, }, ], } diff --git a/report-ui/src/views/report/bigscreen/designer/tools/main.js b/report-ui/src/views/report/bigscreen/designer/tools/main.js index 2bce8560563b42432f7858f22d0dfd48a9b7af20..d0e81f0f4df92ed762da7095ea65bd0b94029d70 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/main.js +++ b/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 ] diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index 18142593e77ec0e5138edbeeff8a78133c993685..b757c8d3cb38070ab88e217bd38ab86e76e267c6 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/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(); }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarchart.vue similarity index 95% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarchart.vue index e02437fe5a570ffe6146b82967e86786da019fbb..ed8a08bdd40d74835a48b2079d9e82155a590b82 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue +++ b/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; } }, // 动态数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue similarity index 59% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue index 2102e0baa5b4efbe9d47207dc26d7c1879f2e8b8..1a937a0942d65e0d236fa274aee641479437bd54 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/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; } } }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue index eed79f712c59b9e571063b028a2df03a9cee686a..9daadfc5a54c5c67aa38efd007f0bec4b2121c42 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/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; } }, // 动态数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue new file mode 100644 index 0000000000000000000000000000000000000000..3699d77067fdf41400f0867fd7761ba8cccdb02a --- /dev/null +++ b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue @@ -0,0 +1,500 @@ + + + + + diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue index 3d157b6ad876a2089ededfe8a6e72b79265d52a9..b7c057e61ca9d5bb2ae51774935d1a523e221968 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue +++ b/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(); }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue similarity index 61% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue index 615d97c32995e452129016c84544c0e54432bfbe..87ad9b28a9e0a4b4c5fe00b0939789973d32f53a 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLinechart.vue @@ -1,6 +1,6 @@ @@ -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; } } }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue index fabaa6f48e753ffe0ee46e1588adba4e884ae321..fccb7274cd0178ece74986fbe76dc249fb9a605d 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/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; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue index fe819189b5be58270755f223cbae20e13ad681cb..51df152c46c20ab467148469354b7d3cbf2a9706 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/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; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue similarity index 72% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue index de26b6f1fee00fb3521486cf21a3de4211c5583b..1124a94c4dc44f17eae4d9a86377215ebe437def 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetPiechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiechart.vue @@ -1,6 +1,6 @@ @@ -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++) { diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index f0b126d4c2d353e785c1c77fab9fcf1d5d75476a..3029be83142648dde504afcc6903c5f9873e29dc 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -6,7 +6,7 @@ !--> @@ -19,11 +19,11 @@ 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 WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; @@ -35,6 +35,7 @@ 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: {} }; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index ba4b3552d91d26a15c8947196f27328302bb887b..94e73be47f509dc7d819ca330576a6faaa0198d9 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -17,7 +17,7 @@ @focus="handleFocus" @blur="handleBlur" > - + @@ -30,11 +30,11 @@ 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 WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; @@ -46,6 +46,7 @@ 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; } diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue index f9ef6a5516b6bdc8bdb6581b6419e52fcf90389f..9ef5f5f3fa976e7b8503ec6056f4135c68a8cedf 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetFunnel.vue @@ -1,6 +1,6 @@ @@ -24,9 +24,11 @@ export default { }, tooltip: { trigger: "item", - formatter: "{a}
{b} : {c}%" + formatter: "{a}
{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++) { diff --git a/report-ui/src/views/report/resultset/components/util/sql-completion.js b/report-ui/src/views/report/resultset/components/util/sql-completion.js index 537057bea6ce0db01732b8258a16db1383dce566..9ebcc029164c8ad79a33cb8a8caac679d000225a 100644 --- a/report-ui/src/views/report/resultset/components/util/sql-completion.js +++ b/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; \ No newline at end of file +export default createCompleter;