!146 update 1.2.0

Merge pull request !146 from Foming/dev
V1.2.0
Foming 1 year ago committed by Gitee
commit f16fc9f7c1
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

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

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

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

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

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

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

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -291,6 +291,27 @@ export const widgetAirbubbleMap = {
}, },
], ],
}, },
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
], ],
], ],
data: [ data: [

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

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

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

@ -45,12 +45,15 @@ import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertic
import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal" import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal"
import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart"; import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart";
import {widgetBorder} from "./configure/styleWidget/widget-border"; import {widgetBorder} from "./configure/styleWidget/widget-border";
import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
import {widgetDecoration} from "./configure/styleWidget/widget-decoration"; import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
import {widgetBarMap} from "./configure/mapCharts/widget-bar-map";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
widgetMarquee, widgetMarquee,
widgetHref, widgetHref,
@ -88,4 +91,5 @@ export const widgetTool = [
// widgetInput, // widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxis, widgetBarDoubleYaxis,
widgetBarMap
] ]

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -185,18 +185,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -219,6 +207,7 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = [ const yAxis = [
{ {
max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
type: "value", type: "value",
// //
splitNumber: optionsSetup.splitNumberLeft, splitNumber: optionsSetup.splitNumberLeft,
@ -261,6 +250,7 @@ export default {
}, },
}, },
{ {
max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
type: "value", type: "value",
// //
splitNumber: optionsSetup.splitNumberRight, splitNumber: optionsSetup.splitNumberRight,
@ -322,6 +312,17 @@ export default {
series[key].barWidth = optionsSetup.maxWidth; series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight; series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius; series[key].itemStyle.barBorderRadius = optionsSetup.radius;
//
series[key].showBackground = optionsSetup.isShowBackground;
series[key].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
} }
} }
this.options.series = series; this.options.series = series;
@ -421,6 +422,7 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let bar1 = []; let bar1 = [];
@ -439,6 +441,30 @@ export default {
const legendName = []; const legendName = [];
legendName.push("bar1"); legendName.push("bar1");
legendName.push("bar2"); legendName.push("bar2");
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -460,18 +486,44 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = []; const legendName = [];
let k = 0; let k = 0;
for (const i in val.series){ for (const i in val.series) {
if (val.series[i].type == "bar") { if (val.series[i].type == "bar") {
series[k]['data'] = val.series[i].data; series[k]['data'] = val.series[i].data;
k++ k++
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -144,18 +144,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -177,6 +165,7 @@ export default {
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// //
@ -302,10 +291,10 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
// //
setUnique(arr) { setUnique(arr) {
@ -369,6 +358,7 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}, },
// //
itemStyle: { itemStyle: {
@ -377,6 +367,17 @@ export default {
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
}, },
}, },
//
showBackground: optionsSetup.isShowBackground,
backgroundStyle: {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
}); });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
@ -392,6 +393,30 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -450,6 +475,7 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}, },
// //
itemStyle: { itemStyle: {
@ -458,10 +484,46 @@ export default {
barBorderRadius: optionsSetup.radius, barBorderRadius: optionsSetup.radius,
}, },
}, },
//
showBackground: optionsSetup.isShowBackground,
backgroundStyle: {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
}); });
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic, originWidgetLinkageLogic,
targetWidgetLinkageLogic, targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic"; } from "@/views/bigscreenDesigner/designer/linkageLogic";
export default { export default {
name: "WidgetBarchart", name: "WidgetBarchart",
components: {}, components: {},
@ -108,10 +109,9 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsLegend();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
}, },
// //
@ -151,18 +151,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -184,6 +172,7 @@ export default {
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// //
@ -225,36 +214,6 @@ export default {
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// or
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
if (series[0].type == "bar") {
if (optionsSetup.verticalShow) {
series[0].label = {
show: optionsSetup.isShow,
position: "right",
distance: optionsSetup.distance,
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
};
} else {
series[0].label = {
show: optionsSetup.isShow,
position: "top",
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
}
}
series[0].barWidth = optionsSetup.maxWidth;
series[0].barMinHeight = optionsSetup.minHeight;
},
// tooltip // tooltip
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -280,33 +239,62 @@ export default {
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
// //
setOptionsColor() { setOptionsLegend() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor; const legend = this.options.legend;
if (!customColor) return; legend.show = optionsSetup.isShowLegend;
const arrColor = []; legend.left = optionsSetup.lateralPosition;
for (let i = 0; i < customColor.length; i++) { legend.top = optionsSetup.longitudinalPosition;
arrColor.push(customColor[i].color); legend.bottom = optionsSetup.longitudinalPosition;
} legend.orient = optionsSetup.layoutFront;
const itemStyle = { legend.textStyle = {
normal: { color: optionsSetup.legendColor,
color: (params) => { fontSize: optionsSetup.legendFontSize,
return arrColor[params.dataIndex];
},
barBorderRadius: optionsSetup.radius,
},
}; };
for (const key in this.options.series) { legend.itemWidth = optionsSetup.legendWidth;
if (this.options.series[key].type == "bar") { },
this.options.series[key].itemStyle = itemStyle; //
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
//
if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
} }
this.options.legend["data"] = name;
} else {
const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
this.options.legend["data"] = arr;
}
},
//
getStackStyle() {
const optionsSetup = this.optionsSetup;
let style = "";
if (optionsSetup.stackStyle == "upDown") {
style = "total";
} }
this.options = Object.assign({}, this.options); return style;
},
//
getOptionsPosition() {
const optionsSetup = this.optionsSetup;
let position = "";
if (optionsSetup.verticalShow) {
position = "right";
} else {
position = "top";
}
return position;
}, },
// //
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or const optionsData = this.optionsData; // or
// //
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
@ -332,6 +320,12 @@ export default {
// //
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let data = []; let data = [];
@ -339,6 +333,8 @@ export default {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data; data[i] = val[i].data;
} }
const legendName = [];
legendName.push("bar");
// x // x
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
@ -351,9 +347,79 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
if (series[0].type == "bar") { for (const i in series) {
series[0].data = data; if (series[i].type == "bar") {
series[i].type = "bar";
series[i].barGap = "0%";
series[i].barWidth = optionsSetup.maxWidth;
series[i].barMinHeight = optionsSetup.minHeight;
series[i].label = {
show: optionsSetup.isShow,
position: this.getOptionsPosition(),
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
//
if (optionsSetup.colorStyle == 'same') {
series[i].itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
},
};
} else {
series[i].itemStyle = {
normal: {
color: (params) => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsSetup.radius,
},
};
}
//
series[i].showBackground = optionsSetup.isShowBackground;
series[i].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
series[i].data = data;
}
}
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX)
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
} }
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
// //
dynamicDataFn(refreshTime) { dynamicDataFn(refreshTime) {
@ -377,6 +443,14 @@ export default {
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = [];
const legendName = [];
// x // x
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
@ -389,13 +463,85 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series for (const i in val.series) {
const series = this.options.series; legendName.push(val.series[i].name);
for (const i in series) { const obj = {};
if (series[i].type == "bar") { if (val.series[i].type == "bar") {
series[i].data = val.series[i].data; obj.type = "bar";
obj.barGap = "0%";
obj.stack = this.getStackStyle();
obj.barWidth = optionsSetup.maxWidth;
obj.barMinHeight = optionsSetup.minHeight;
obj.label = {
show: optionsSetup.isShow,
position: this.getOptionsPosition(),
distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
//
if (optionsSetup.colorStyle == 'same') {
obj.itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
},
};
} else {
obj.itemStyle = {
normal: {
color: (params) => {
return arrColor[params.dataIndex];
},
barBorderRadius: optionsSetup.radius,
},
};
}
//
obj.showBackground = optionsSetup.isShowBackground;
obj.backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
obj.data = val.series[i].data;
series.push(obj);
}
}
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
} }
} }
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
}, },
}; };

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -10,13 +10,13 @@ import {
targetWidgetLinkageLogic, targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic"; } from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts"; import echarts from "echarts";
export default { export default {
name: "WidgetGradientColorBarchart", //https://www.makeapie.com/editor.html?c=x0oZWoncE name: "WidgetGradientColorBarchart", //https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
widgetIndex: { widgetIndex: {
type: Number, type: Number,
default: 0, default: 0,
@ -227,18 +227,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -260,6 +248,7 @@ export default {
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// //
@ -314,6 +303,7 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}; };
} else { } else {
series[0].label = { series[0].label = {
@ -323,9 +313,21 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}; };
} }
series[0].barWidth = optionsSetup.maxWidth; series[0].barWidth = optionsSetup.maxWidth;
//
series[0].showBackground = optionsSetup.isShowBackground;
series[0].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
} }
}, },
// tooltip // tooltip
@ -360,7 +362,7 @@ export default {
let normal = {}; let normal = {};
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
normal = { normal = {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ {
offset: 0, offset: 0,
color: optionsSetup.bar0color, // 0% color: optionsSetup.bar0color, // 0%
@ -376,7 +378,7 @@ export default {
}; };
} else { } else {
normal = { normal = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
offset: 0, offset: 0,
color: optionsSetup.bar0color, // 0% color: optionsSetup.bar0color, // 0%
@ -395,7 +397,6 @@ export default {
}, },
// //
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or const optionsData = this.optionsData; // or
// //
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
@ -443,6 +444,30 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
}, },
// //
dynamicDataFn(refreshTime) { dynamicDataFn(refreshTime) {
@ -478,14 +503,35 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// series
const series = this.options.series; const series = this.options.series;
for (const i in series) { if (series[0].type == "bar") {
if (series[i].type == "bar") { series[0].data = val.series[0].data;
series[i].data = val.series[i].data; }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
} }
} }
this.options.xAxis.axisLabel = axisLabel;
}, },
}, },
}; };

@ -13,7 +13,6 @@ export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
}, },
data() { data() {
return { return {
@ -180,18 +179,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -359,6 +346,15 @@ export default {
this.options.legend["data"] = arr; this.options.legend["data"] = arr;
} }
}, },
//
getStackStyle() {
const optionsSetup = this.optionsSetup;
let style = "";
if (optionsSetup.stackStyle == "upDown") {
style = "total";
}
return style;
},
// //
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -440,6 +436,7 @@ export default {
type: "bar", type: "bar",
data: bar, data: bar,
barGap: "0%", barGap: "0%",
stack : this.getStackStyle(),
barWidth: optionsSetup.maxWidth, barWidth: optionsSetup.maxWidth,
label: { label: {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
@ -448,6 +445,7 @@ export default {
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar, fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
}, },
// //
itemStyle: { itemStyle: {
@ -491,9 +489,34 @@ export default {
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
}, },
}); });
} }
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.xAxis.data = xAxisList; this.options.xAxis.data = xAxisList;
this.options.yAxis.data = []; this.options.yAxis.data = [];
@ -544,6 +567,7 @@ export default {
type: "bar", type: "bar",
data: bar, data: bar,
barGap: "0%", barGap: "0%",
stack : this.getStackStyle(),
barWidth: optionsSetup.maxWidth, barWidth: optionsSetup.maxWidth,
label: { label: {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
@ -552,6 +576,7 @@ export default {
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar, fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
}, },
// //
itemStyle: { itemStyle: {
@ -594,9 +619,35 @@ export default {
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
}, },
}); });
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -13,7 +13,6 @@ export default {
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
}, },
data() { data() {
return { return {
@ -187,18 +186,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -337,6 +324,7 @@ export default {
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
}; };
} }
} }
@ -355,6 +343,7 @@ export default {
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar, fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
}; };
series[key].barWidth = optionsSetup.maxWidth; series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight; series[key].barMinHeight = optionsSetup.minHeight;
@ -480,6 +469,31 @@ export default {
const legendName = []; const legendName = [];
legendName.push("bar"); legendName.push("bar");
legendName.push("line"); legendName.push("line");
const optionsSetup = this.optionsSetup;
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -513,6 +527,32 @@ export default {
} }
} }
} }
const optionsSetup = this.optionsSetup;
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -8,13 +8,13 @@
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic"; import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts"; import echarts from "echarts";
export default { export default {
name: "widgetMoreBarLineChart", name: "widgetMoreBarLineChart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean,
flagInter: null,
}, },
data() { data() {
return { return {
@ -246,18 +246,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -424,6 +412,15 @@ export default {
this.options.legend["data"] = arr; this.options.legend["data"] = arr;
} }
}, },
//
getStackStyle() {
const optionsSetup = this.optionsSetup;
let style = "";
if (optionsSetup.stackStyle == "upDown") {
style = "total";
}
return style;
},
// //
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // or const optionsData = this.optionsData; // or
@ -478,6 +475,7 @@ export default {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].name = legendName[i]; series[i].name = legendName[i];
series[i].type = "bar"; series[i].type = "bar";
series[i].stack = this.getStackStyle();
series[i].label = { series[i].label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: "top", position: "top",
@ -485,6 +483,7 @@ export default {
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar, fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
}; };
series[i].barWidth = optionsSetup.maxWidth; series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius; series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
@ -522,12 +521,37 @@ export default {
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
}; };
} }
} }
series[0].data = bar1; series[0].data = bar1;
series[1].data = bar2; series[1].data = bar2;
series[2].data = line; series[2].data = line;
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -565,6 +589,7 @@ export default {
if (val.series[i].type == "bar") { if (val.series[i].type == "bar") {
obj.name = val.series[i].name; obj.name = val.series[i].name;
obj.type = val.series[i].type; obj.type = val.series[i].type;
obj.stack = this.getStackStyle();
obj.label = { obj.label = {
show: optionsSetup.isShowBar, show: optionsSetup.isShowBar,
position: "top", position: "top",
@ -572,6 +597,7 @@ export default {
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar, fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
}; };
obj.barWidth = optionsSetup.maxWidth; obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = { obj.itemStyle = {
@ -615,11 +641,37 @@ export default {
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine, fontWeight: optionsSetup.fontWeightLine,
formatter: !!optionsSetup.percentSignLine ? '{c}%' : '{c}'
}; };
obj.data = val.series[i].data; obj.data = val.series[i].data;
series.push(obj); series.push(obj);
} }
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -144,18 +144,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -329,10 +317,10 @@ export default {
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup) ? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn( : this.dynamicDataFn(
optionsData.dynamicData, optionsData.dynamicData,
optionsData.refreshTime, optionsData.refreshTime,
optionsSetup optionsSetup
); );
}, },
// //
setUnique(arr) { setUnique(arr) {
@ -400,6 +388,7 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}, },
}); });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
@ -416,6 +405,30 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -488,11 +501,37 @@ export default {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor, color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight, fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
}, },
}); });
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic, originWidgetLinkageLogic,
targetWidgetLinkageLogic, targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic"; } from "@/views/bigscreenDesigner/designer/linkageLogic";
export default { export default {
name: "WidgetLinechart", name: "WidgetLinechart",
components: {}, components: {},
@ -115,11 +116,10 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsLegend();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData(); this.setOptionsData();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor();
}, },
// //
setOptionsTitle() { setOptionsTitle() {
@ -158,18 +158,6 @@ export default {
}, },
// //
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -232,40 +220,6 @@ export default {
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 线
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].symbol = optionsSetup.symbol;
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
series[key].areaStyle = {
opacity: 0,
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth,
};
series[key].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
}
}
this.options.series = series;
},
// tooltip // tooltip
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -291,23 +245,42 @@ export default {
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
// //
setOptionsColor() { setOptionsLegend() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor; const legend = this.options.legend;
if (!customColor) return; legend.show = optionsSetup.isShowLegend;
const arrColor = []; legend.left = optionsSetup.lateralPosition;
for (let i = 0; i < customColor.length; i++) { legend.top = optionsSetup.longitudinalPosition;
arrColor.push(customColor[i].color); legend.bottom = optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
//
if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
this.options.legend["data"] = name;
} else {
const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
this.options.legend["data"] = arr;
} }
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
}, },
// //
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {
console.log("ces", e);
console.log("ces", paramsConfig);
const optionsData = this.optionsData; // or const optionsData = this.optionsData; // or
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
const myDynamicData = optionsData.dynamicData; const myDynamicData = optionsData.dynamicData;
@ -324,12 +297,18 @@ export default {
} }
}); });
} }
console.log(myDynamicData);
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series; const series = this.options.series;
let axis = []; let axis = [];
let data = []; let data = [];
@ -337,14 +316,73 @@ export default {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data; data[i] = val[i].data;
} }
const legendName = [];
legendName.push("line");
// x // x
this.options.xAxis.data = axis; this.options.xAxis.data = axis;
// series // series
for (const i in series) { for (const i in series) {
if (series[i].type == "line") { if (series[i].type == "line") {
series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint;
series[i].symbolSize = optionsSetup.pointSize;
series[i].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[i].areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
series[i].areaStyle = {
opacity: 0,
};
}
series[i].itemStyle = {
normal: {
color: arrColor[i],
},
};
series[i].lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth,
};
series[i].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
series[i].data = data; series[i].data = data;
} }
} }
// xXlabel
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -364,15 +402,85 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
// x // x
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series const series = [];
const series = this.options.series; const legendName = [];
for (const i in series) { for (const i in val.series) {
if (series[i].type == "line") { legendName.push(val.series[i].name);
series[i].data = val.series[i].data; const obj = {};
if (val.series[i].type == 'line') {
obj.type = 'line';
obj.symbol = optionsSetup.symbol;
obj.showSymbol = optionsSetup.markPoint;
obj.symbolSize = optionsSetup.pointSize;
obj.smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
obj.areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
obj.areaStyle = {
opacity: 0,
};
}
obj.itemStyle = {
normal: {
color: arrColor[i],
},
};
obj.lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth,
};
obj.label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
};
obj.data = val.series[i].data;
series.push(obj);
} }
} }
// xXlabel
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
const axisLabel = {
show: true,
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
//
formatter: function (value, index) {
const strs = value.split('');
let str = ''
for (let i = 0, s; s = strs[i++];) {
str += s;
if (!(i % rowsNum)) str += '\n';
}
return str
}
}
this.options.xAxis.axisLabel = axisLabel;
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}, },
}, },
}; };

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

@ -0,0 +1,734 @@
<template>
<div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize/>
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import "../../../../../../node_modules/echarts/map/js/china.js";
import {conversionProvince} from "@/utils/china";
import echarts from "echarts";
let geoCoordMap = conversionProvince;
export default {
name: "widgetBarMap",
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {
title: {
show: true,
},
//backgroundColor: '#131C38',
tooltip: {
trigger: 'item',
show: true,
enterable: true,
textStyle: {
fontSize: 20,
color: '#fff'
},
backgroundColor: 'rgba(0,2,89,0.8)',
formatter: function (params, ticket, callback) {
if (params.seriesType == "scatter") {
return params.data.name + "" + params.data.value[2];
} else {
return params.name;
}
},
},
geo: [
{
map: "china",
show: true,
roam: false,
layoutSize: "80%",
label: {
emphasis: {
show: false,
color: "white",
},
},
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00F6FF",
},
{
offset: 1,
color: "#53D9FF",
},
],
false
),
borderWidth: 3,
shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0,
shadowBlur: 60,
},
},
}
],
series: [
{
aspectScale: 0.75,
type: 'map',
map: 'china',
//roam: true,
effect: {
show: false,
period: 6,
trailLength: 0.7,
color: "#fff",
symbolSize: 3,
},
label: {
normal: {
//
position: "right",
//
show: false,
color: "#53D9FF",
fontSize: 20,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
//
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0%
},
{
offset: 1,
color: "#061E3D", // 100%
},
],
},
borderColor: "#215495",
borderWidth: 1,
},
//
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0%
},
{
offset: 1,
color: "#2B91B7", // 100%
},
],
},
},
},
data: []
},
//
{
type: 'lines',
zlevel: 1,
effect: {
show: false,
symbolSize: 5 //
},
lineStyle: {
width: 20, // 线
color: 'rgb(22,255,255, .6)',
opacity: 1, // 线
curveness: 0 // 线
},
silent: true,
data: []
},
//
{
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
zlevel: 1,
rippleEffect: {
brushType: "stroke",
},
label: {
show: true,
formatter: function (params) {
return "{cnNum|" + params.data[2] + "}";
},
rich: {
cnNum: {
//
fontSize: 13,
color: "#D4EEFF",
},
},
position: "top"
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
color: 'rgb(22,255,255, 1)',
opacity: 1
},
silent: true,
data: []
},
//
{
type: 'scatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: "stroke",
},
//geoIndex: 0,
zlevel: 1,
label: {
//
formatter: '{b}',
position: 'bottom',
color: '#fff',
fontSize: 12,
distance: 10,
show: true
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
// color: '#F7AF21',
color: 'rgb(22,255,255, 1)',
opacity: 1
},
silent: true,
data: []
},
//
{
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
rippleEffect: {
brushType: "stroke",
},
zlevel: 1,
label: {
show: false
},
symbol: 'circle',
symbolSize: [40, 20],
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'rgb(22,255,255, 0)' // 0%
},
{
offset: .75, color: 'rgb(22,255,255, 0)' // 100%
},
{
offset: .751, color: 'rgb(22,255,255, 1)' // 100%
},
{
offset: 1, color: 'rgb(22,255,255, 1)' // 100%
}
],
global: false // false
},
opacity: 1
},
silent: true,
data: []
}
]
},
optionsStyle: {}, //
optionsData: {}, //
optionsCollapse: {}, //
optionsSetup: {},
flagInter: null,
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true,
},
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // -
},
methods: {
// options
editorOptions() {
this.setOptionsTitle();
this.setOptionsTooltip();
this.setOptionsMap();
this.setOptionsData();
},
//
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
enterable: true,
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
},
formatter: function (params) {
if (params.seriesType == 'scatter') {
return params.data.name + "" + params.data.value[2];
} else {
return params.name;
}
},
};
this.options.tooltip = tooltip;
},
//
setOptionsMap() {
const optionsSetup = this.optionsSetup;
const label = {
normal: {
//
position: "right",
//
show: optionsSetup.isShowMap,
color: optionsSetup.colorMap,
fontSize: optionsSetup.fontSizeMap,
},
emphasis: {
show: false,
},
}
const itemStyle = {
normal: {
//
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: optionsSetup.font0PreColor, // 0%
},
{
offset: 1,
color: optionsSetup.font100PreColor, // 100%
},
],
},
borderColor: optionsSetup.borderColor,
borderWidth: 1,
},
//
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0%
},
{
offset: 1,
color: optionsSetup.fontHighlightColor, // 100%
},
],
},
},
}
this.options.series[0]['label'] = label;
this.options.series[0]['itemStyle'] = itemStyle;
},
//
calMaxHeight(val, heightRate) {
const maxValue = Math.max.apply(null, val.map(item => item.value))
return heightRate / maxValue;
},
//
calScatterTrunk(val, heightRate) {
return val.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate)]]
}
})
},
//
calScatterTop(val, heightRate) {
return val.map((item) => {
return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate), item.value]
})
},
//
calScatterBottom(val) {
return val.map((item) => {
return {
name: item.name,
value: geoCoordMap[item.name]
}
})
},
//
getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate) {
const barTrunk = {
type: 'lines',
zlevel: 1,
effect: {
show: false,
symbolSize: 5 //
},
lineStyle: {
width: optionsSetup.barWidth, // 线
color: (params) => {
return arrColor[params.dataIndex];
},
opacity: 1, // 线
curveness: 0 // 线
},
silent: true,
data: this.calScatterTrunk(allData, heightRate),
};
return barTrunk;
},
//
getOptionsBarTop(optionsSetup, arrColor, allData, heightRate) {
const barTop = {
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
zlevel: 1,
rippleEffect: {
brushType: "stroke",
},
label: {
show: optionsSetup.isShowFontData,
formatter: function (params) {
return "{cnNum|" + params.data[2] + "}";
},
rich: {
cnNum: {
//
fontSize: optionsSetup.fontDataSize,
color: (params) => {
return arrColor[params.dataIndex];
},
fontWeight: optionsSetup.fontDataWeight,
fontStyle: optionsSetup.fontDataStyle,
},
},
position: "top"
},
symbol: 'circle',
symbolSize: [optionsSetup.barWidth, 10],
itemStyle: {
color: (params) => {
return arrColor[params.dataIndex];
},
opacity: 1
},
silent: true,
data: this.calScatterTop(allData, heightRate)
}
return barTop;
},
//
getOptionsBarBottom(optionsSetup, arrColor, allData) {
const batBottom = {
type: 'scatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: "stroke",
},
//geoIndex: 0,
zlevel: 1,
label: {
//
show: optionsSetup.isShowFontText,
formatter: '{b}',
position: 'bottom',
fontSize: optionsSetup.fontTextSize,
color: (params) => {
return arrColor[params.dataIndex];
},
fontWeight: optionsSetup.fontTextWeight,
fontStyle: optionsSetup.fontTextStyle,
distance: 10,
},
symbol: 'circle',
symbolSize: [optionsSetup.barWidth, 10],
itemStyle: {
color: (params) => {
return arrColor[params.dataIndex];
},
opacity: 1,
},
silent: true,
data: this.calScatterBottom(allData),
}
return batBottom;
},
//
getOptionsBarBottomOut(optionsSetup, arrColor, allData) {
const barBottomOut = {
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
rippleEffect: {
brushType: "stroke",
},
zlevel: 1,
label: {
show: false
},
symbol: 'circle',
symbolSize: [optionsSetup.barBottomOutSymbolSize, 10],
//
itemStyle: {
color: (params) => {
return {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'rgba(22,255,255, 0)' // 0%
},
{
offset: .75, color: 'rgba(22,255,255, 0)' // 100%
},
{
offset: .751, color: arrColor[params.dataIndex] // 100%
},
{
offset: 1, color: arrColor[params.dataIndex] // 100%
}
],
global: false // false
}
},
opacity: 1,
},
silent: true,
data: this.calScatterBottom(allData),
}
return barBottomOut;
},
//
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // or
//
optionsData.dynamicData = optionsData.dynamicData || {}; // dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); //
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
//
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
let name = [];
let latitude = [];
let longitude = [];
let value = [];
for (const i in val) {
name[i] = val[i].name;
latitude[i] = val[i].latitude;
longitude[i] = val[i].longitude;
value[i] = val[i].value;
}
let allData = [];
for (const i in name) {
geoCoordMap[name[i]] = [latitude[i], longitude[i]]
const obj = {
name: name[i],
value: value[i]
}
allData.push(obj)
}
const optionsSetup = this.optionsSetup;
const heightRate = optionsSetup.heightRate;
//
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (const i in val) {
arrColor.push(customColor[i % customColor.length].color)
}
this.options.series[1] = this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate);
this.options.series[2] = this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate);
this.options.series[3] = this.getOptionsBarBottom(optionsSetup, arrColor, allData);
this.options.series[4] = this.getOptionsBarBottomOut(optionsSetup, arrColor, allData);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then((res) => {
this.renderingFn(res);
});
},
renderingFn(val) {
let name = [];
let latitude = [];
let longitude = [];
let value = [];
for (const i in val) {
name[i] = val[i].name;
latitude[i] = val[i].latitude;
longitude[i] = val[i].longitude;
value[i] = val[i].value;
}
for (const i in val) {
name[i] = val[i].name;
latitude[i] = val[i].latitude;
longitude[i] = val[i].longitude;
value[i] = val[i].value;
}
let allData = [];
for (const i in name) {
geoCoordMap[name[i]] = [latitude[i], longitude[i]]
const obj = {
name: name[i],
value: value[i]
}
allData.push(obj)
}
const optionsSetup = this.optionsSetup;
const heightRate = optionsSetup.heightRate;
//
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (const i in val) {
arrColor.push(customColor[i % customColor.length].color)
}
this.$set(this.options.series,1,this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate))
this.$set(this.options.series,2,this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate))
this.$set(this.options.series,3,this.getOptionsBarBottom(optionsSetup, arrColor, allData))
this.$set(this.options.series,4,this.getOptionsBarBottomOut(optionsSetup, arrColor, allData))
},
},
};
</script>
<style lang="scss" scoped>
.echartMap {
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -111,7 +111,11 @@ export default {
}, },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
formatter: "{value} %", formatter: function(value) {
const max = series[0].max; //
const formattedValue = (value / max * 100).toFixed(0); //
return formattedValue + ' %'; //
},
color: "white", color: "white",
fontSize: 18, fontSize: 18,
}, },
@ -263,7 +267,11 @@ export default {
}; };
const detail = { const detail = {
valueAnimation: true, valueAnimation: true,
formatter: "{value} %", formatter: function(value) {
const max = series[0].max; //
const formattedValue = (value / max * 100).toFixed(0); //
return formattedValue + ' %'; //
},
color: optionsSetup.detailColor, color: optionsSetup.detailColor,
fontSize: optionsSetup.detailFontSize, fontSize: optionsSetup.detailFontSize,
fontWeight: optionsSetup.detailFontWeight, fontWeight: optionsSetup.detailFontWeight,
@ -274,6 +282,7 @@ export default {
series[0].splitLine = splitLine; series[0].splitLine = splitLine;
series[0].axisLabel = axisLabel; series[0].axisLabel = axisLabel;
series[0].detail = detail; series[0].detail = detail;
series[0].max = optionsSetup.maxValue;
} }
}, },
setOptionsData(e, paramsConfig) { setOptionsData(e, paramsConfig) {

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

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

@ -0,0 +1,153 @@
<template>
<div :style="styleObj">
<div :style="containerStyle" class="container">
<div :style="progressBarStyle" class="progress-bar">
<div :style="flowingLightStyle" class="flowing-light"></div>
</div>
</div>
</div>
</template>
<script>
export default ({
name: "widgetFlowLine",
components: {},
data() {
return {
optionsStyle: {}, //
optionsCollapse: {}, //
optionsSetup: {},
direction: 'left', // : 'left' 'right'
background: 'red', //
containerWidth: '400px',
containerHeight: '4px',
rotationAngle: 0, //
flowingLightColor: null,
flowingLightSpeed: 'medium',
flowingLightRotationCenter: 'center',
}
},
props: {
value: Object,
ispreview: Boolean,
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true,
},
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
};
},
containerStyle() {
return {
width: this.containerWidth + "px",
}
},
progressBarStyle() {
return {
background: this.background,
width: '100%',
height: this.containerHeight + "px",
position: 'relative',
overflow: 'hidden',
flexDirection: this.direction === 'left' ? 'row-reverse' : 'row', //
transform: `rotate(${this.rotationAngle}deg)`, //
transformOrigin: this.flowingLightRotationCenter, //
}
},
flowingLightStyle() {
let duration = 0; //
if (this.flowingLightSpeed === 'low') {
duration = 8; //
} else if (this.flowingLightSpeed === 'medium') {
duration = 4; //
} else if (this.flowingLightSpeed === 'high') {
duration = 2; //
}
return {
height: '4px',
width: '80px',
background: 'linear-gradient(to right, transparent,' + this.flowingLightColor + ')',
position: 'absolute',
animation: this.direction === 'right' ? `right_to_left ${duration}s 0s infinite` : `left_to_right ${duration}s 0s infinite` //
}
},
},
methods: {
editorOptions() {
const optionsSetup = this.optionsSetup;
const optionsStyle = this.optionsStyle;
this.background = optionsSetup.background;
this.direction = optionsSetup.flowDirection;
this.rotationAngle = optionsSetup.rotationAngle;
this.containerWidth = optionsStyle.width;
this.containerHeight = optionsStyle.height;
this.flowingLightColor = optionsSetup.lightColor;
this.flowingLightSpeed = optionsSetup.flowingLightSpeed;
this.flowingLightRotationCenter = optionsSetup.flowingLightRotationCenter;
},
}
})
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
}
.progress-bar {
width: 100%;
height: 100%;
}
.flowling-light {
height: 4px;
width: 80px;
background: linear-gradient(to right, transparent, #fff);
position: absolute;
}
@keyframes left_to_right {
0% {
left: -80px;
}
100% {
left: calc(100% + 80px);
}
}
@keyframes right_to_left {
0% {
right: -80px;
}
100% {
right: calc(100% + 80px);
}
}
</style>

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

@ -46,8 +46,10 @@ import widgetFormTime from "./form/widgetFormTime.vue";
import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
import widgetBarMap from "./map/widgetBarMap.vue";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -55,6 +57,7 @@ export default {
widgetHref, widgetHref,
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
WidgetMarquee, WidgetMarquee,
widgetTime, widgetTime,
@ -90,6 +93,7 @@ export default {
//widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart, widgetBarDoubleYaxisChart,
widgetBarMap
}, },
model: { model: {
prop: "value", prop: "value",

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

@ -54,7 +54,9 @@ import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
import widgetBarMap from "./map/widgetBarMap.vue";
export default { export default {
name: "Widget", name: "Widget",
@ -62,6 +64,7 @@ export default {
widgetHref, widgetHref,
widgetText, widgetText,
widgetBorder, widgetBorder,
widgetDecorateFlowLine,
widgetDecoration, widgetDecoration,
WidgetMarquee, WidgetMarquee,
widgetTime, widgetTime,
@ -97,6 +100,7 @@ export default {
//widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart, widgetBarDoubleYaxisChart,
widgetBarMap
}, },
model: { model: {
prop: "value", prop: "value",

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

Loading…
Cancel
Save