!98 update V0.9.9

Merge pull request !98 from Foming/dev
V0.9.9
Foming 2 years ago committed by Gitee
commit 294768dd0a
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

@ -185,11 +185,11 @@ sql文件的目录在report-core --> src --> main --> resources -- > db.migra
## 版本问题
已知以下版本存在兼容性问题
已知以下版本存在兼容性问题,请不要使用
- Node.js V16
- Node.js V16及以上
- openJdk
- Jdk 11
- Jdk 1.7及以下/11及以上
- Mysql 8.08.0.23/26版本没有问题8.0.21版本存在问题)
**[常见问题](https://ajreport.beliefteam.cn/report-doc/guide/question.html)**

@ -230,3 +230,26 @@
![img23](../picture/charts/img_23.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
## 雷达图
基本操作和表格是一致通过配置栏的新增按钮和操作按钮对雷达顶点数量进行修改可生成5边雷达6边雷达等等key值和雷达顶点保持一致从最上端顶点逆时针规划其他顶点。<br>
![img26](../picture/charts/img_26.png) <br>
### 数据格式
数据格式和柱线、多柱线都是类似的注意实际作为name的字段比如时间字段有且只能有1个数据集选择时选择名称其余是顶点字段不明白可以看静态数据格式。<br>
![img27](../picture/charts/img_27.png) <br>
![img28](../picture/charts/img_28.png) <br>
## 柱线堆叠图
图表的基本操作和柱状堆叠图、折线堆叠并无大区别需要在意的是数据格式的区别绑定动态数据的时候需要你数据集有4个字段其中俩个字段作为xy区分字段另外俩个作为数值字段。<br>
![img29](../picture/charts/img_29.png) <br>
![img30](../picture/charts/img_30.png) <br>
### 数据格式
和另外俩个堆叠图相比,多了查询的一列数据,比如 "select a,b,sum(c),sum(d) from aa group by a,b"
![img31](../picture/charts/img_31.png) <br>

@ -1,3 +1,5 @@
## 介绍
![img5](../picture/dateset/img_5.png) <br>
[数据源数据集用法总结](https://my.oschina.net/u/4517014/blog/5270828) <br>
@ -20,6 +22,11 @@
![kudu.png](../picture/dateset/img_2.png) <br>
## HTTP数据集
即原有Http数据源的功能请注意Http接口返回类型必须是Json、不能是texttext无法解析 <br>
![http.png](../picture/dateset/img_7.png) <br>
## 功能栏
**可以看在线环境,有示例参考** <br>
@ -38,11 +45,13 @@
![img4](../picture/dateset/img_4.png) <br>
入参是data返回值也必须是data中间是JS的处理过程注意入参返回都是List<JSONObject>,记得保存。 <br>
#### java脚本
通过Groovy来进行实现的 <br>
[Groovy用法参考](https://my.oschina.net/u/4517014/blog/5526324) <br>
#### 字典项
![img6.png](../picture/dateset/img_6.png) <br>
记得保存
## HTTP数据集
即原有http数据源的功能原有http数据源不动

@ -18,6 +18,8 @@
表aj_report.gaea_dict_item, item_extend字段是下拉选择后动态表单渲染的json数据
```
**注:** Http数据源功能已经移动到Http数据集中原功能不变有Http接口数据请直接使用Http数据集请注意Http接口数据返回格式必须是Json
## 操作
- 只有测试通过的数据源才可以保存
@ -27,25 +29,42 @@
### JDBC驱动类数据源添加
##### 发行版
```text
1、将jar包上传到 "aj-report.xxx/lib"目录下
2、启动项目(重启项目)
3、前端页面数据源类型选择"jdbc",填上对应的驱动类、连接串、用户名密码
```
![img4](../picture/datasource/img_4.png) <br>
![img5](../picture/datasource/img_5.png) <br>
##### 源码
源码推荐使用第二种方式。<br>
- 第一种在report-core/lib目录下添加 <br>
按照同样的层级将驱动包放置使用build.sh脚本进行打包前端页面选择jdbc数据源填上对应的驱动类即可使用。<br>
按照同样的层级将驱动包放置使用build.sh脚本进行打包前端页面数据源类型选择"jdbc"
,填上对应的驱动类、连接串、用户名密码。<br>
**注意:** 此方式添加的jar包只能使用build.sh进行编译后才会生效。<br>
<br>
- 第二种在pom.xml中添加 <br>
使用build.sh脚本编译或者maven package编译都可以前端页面选择jdbc数据源填上对应驱动。<br>
使用build.sh脚本编译或者maven package编译都可以前端页面数据源类型选择"jdbc"
,填上对应的驱动类、连接串、用户名密码。<br>
**注意:** 底层只实现了mysql的解析如果你的数据库和mysql差异较大比如一些函数、关键字和mysql是不同的用法、含义那就需要重写底层解析代码(datasource) <br>
<br>
### 非JDBC驱动类数据源添加
例如原生ES、Redis之类。<br>
1、在源码中编写解析代码(datasource) <br>
2、使用页面生成数据字典 <br>
3、添加对应驱动包<br>
```text
1、在源码中编写解析代码(datasource)
2、生成数据字典可在数据字典页面找到"数据源类型",在"操作"栏中选择"编辑字典项"
3、添加对应驱动包
```

@ -12,7 +12,9 @@
<br>
## 版本问题:[开发环境参考](https://ajreport.beliefteam.cn/report-doc/guide/quicklyDevelop.html)
## 版本问题
[开发环境参考](https://ajreport.beliefteam.cn/report-doc/guide/quicklyDevelop.html)
- 底层数据库为Mysql8.0+时flyway执行SQL报错<br>
- Node.js是V16版本时 npm install失败 <br>
@ -38,25 +40,32 @@
- 页面提示“404” <br>
1、确保访问地址无误根据部署方式的不同 9095/9528 端口皆可以进入项目,如果一个不行试另一个端口 <br>
2、确定前端是否启动 <br>
3、确定后端是否启动 <br>
2、确定前端(端口号9528)是否启动 <br>
3、确定后端(端口号9095)是否启动 <br>
4、如果你是前后端分离部署看看你前端config配置文件中的BASE_API有没有改成你后端的IP端口 <br>
5、使用nginx转发遇到问题也是同上 <br>
<br>
## 前端npm install失败
1、使用node -v检查你的node.js版本不要使用Node.js16及以上版本。<br>
2、使用npm get registry查看npm镜像源将npm镜像设置为淘宝镜像源(百度查具体步骤)。<br>
3、使用cnpm install命令替换npm install命令进行编译。<br>
如果以上3步皆无法解决npm编译问题请直接使用**发行版**。<br>
## 执行源码编译脚本build.sh报错
- 提示:“*** report-ui/dist/* *** No such file or directory” <br>
前端编译失败。<br>
大部分原因是Node.js版本过高高于V14导致前端编译失败。 <br>
大部分原因是Node.js版本过高高于V14导致前端编译失败(npm install失败),可参考***前端npm install失败*进行解决<br>
另一部分是Nodejs在编译执行初始化时会去下载一些依赖如果依赖下载不下来也会导致失败。<br>
<br>
- 提示“report-core/target/aj-report-*.zip *** No such file or directory” <br>
后端编译失败。<br>
可能原因有Maven版本过低/过高,导致后端编译失败 <br>
可能原因有Maven版本过低/过高,导致后端编译失败。可尝试重新执行编译脚本 <br>
<br>
@ -80,34 +89,49 @@
<br>
- flyway执行报错1.0.10sql失败 <br>
错误提示Caused by: org.flywaydb.core.api.FlywayException: Validate failed: Detected failed <br>
migration to version 1.0.10 (create report share) <br>
请参考此 [Issue](https://gitee.com/anji-plus/report/issues/I47JNE) 解决此问题 <br>
- flyway执行sql相关错误 <br>
错误提示:**Error creating bean with name 'flywayInitializer' defined in class XXX migration to version V1.0.XXX.sql
failed** <br>
解析flyway在执行某个版本里面包含的sql时报错了 <br>
- 可能原因:<br>
1、mysql版本问题在不同版本的mysql中部分语法可能存在异同 <br>
2、mysql配置问题 <br>
解决方案:
一、禁用flyway手动执行已有的各版本sql文件 <br>
1、在bootstrap.yml配置文件中找到flyway配置项如图示 <br>
![img6.png](../picture/qusetion/img_6.png) <br>
2、将report-core/src/main/resources/db.migration目录下所有的sql文件都执行一次遇到报错手动修改sql文件。<br>
3、sql文件中只有** aj_report **数据库相关的sql是必须的依赖在确保和aj_report数据库相关sql都执行后在启动服务。<br>
二、保持flyway开启状态手动执行报错的那个版本sql文件 <br>
1、在report-core/src/main/resources/db.migration目录下找到报错的那个版本sql <br>
2、根据报错提示找到sql文件中具体报错的那一段sql或者和数据库已有的数据对比找到没有执行成功的那部分sql <br>
3、手动执行flyway没执行成功的那部分根据提示对sql进行修改调整 <br>
4、执行完毕后在aj_report数据库下flyway_schema_history表中找到报错对应的sql文件版本将对应的success改完1 <br>
![img7.png](../picture/qusetion/img_7.png) <br>
<br>
## 数据集相关
- 系统异常,后台日志显示“** Data too long for colum **<br>
查询到的数据太多了,无法入库,这里查询入库的数据只作为在使用动态数据时做解析用 <br>
1、建议不要使用 "select *" <br>
2、一张图表能承载的数据量是有限的太多则图表展示不出来、页面卡死等 <br>
3、必须使用 "select *" ,或者展示很多数据。解决方法,将测试预览的值删掉只剩一条,注意数据的结构 [{}] <br>
## 大屏图表组件相关
- 访问白屏 <br>
- 访问大屏,浏览器白屏 <br>
设计完大屏,保存后进行预览,发现背景全白 <br>
1、回到编辑页面查看大屏背景颜色是否设置 <br>
2、查看大屏的宽高如果宽高都是0大屏宽高在设计时有概率性变成0不知原因大屏背景图片颜色皆无法显示 <br>
2、查看大屏的宽高如果宽高都是0大屏背景图片颜色皆无法显示 <br>
3、大屏宽高改成 1920 1080 <br>
<br>
- 文本框颜色无法改变 <br>
使用文本框,改变颜色,无法改变。已知有概率性的出现无法修改文本框颜色的情况。解决方法有以下 <br>
1、保存退出大屏重新进入大屏修改文本框颜色 <br>
2、删掉文本框重新拖动一个 <br>

@ -37,7 +37,12 @@
- [Node.js] 14.16.0
- [Windows 10]
已知 **Mysql8.0****Jdk11** (部分小版本)会出现兼容性问题,后续有解决方法将会在下方 **其他** 大类进行补充
已知 **Mysql8.0** 部分小版本会出现兼容性问题,后续有解决方法将会在下方 **其他** 大类进行补充
## 不支持的版本
- [JDK] 1.7及以下/11及以上
- [Node.js] V16及以上
## SQL初始化

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

@ -101,15 +101,17 @@ public class TokenFilter implements Filter {
filterChain.doFilter(request, response);
return;
}
//获取token
String token = request.getHeader("Authorization");
//针对大屏分享,优先处理
String shareToken = request.getHeader("Share-Token");
if (StringUtils.isNotBlank(shareToken)) {
//两个接口需要处理
if (StringUtils.isNotBlank(shareToken) && StringUtils.isBlank(token)) {
//需要处理
// /reportDashboard/getData
// /reportDashboard/{reportCode}
String reportCode = JwtUtil.getReportCode(shareToken);
if (!uri.endsWith("/getData") && !uri.contains(reportCode)) {
// /reportExcel/preview
List<String> reportCodeList = JwtUtil.getReportCodeList(shareToken);
if (!uri.endsWith("/reportDashboard/getData") && !uri.endsWith("/reportExcel/preview") && reportCodeList.stream().noneMatch(uri::contains)) {
ResponseBean responseBean = ResponseBean.builder().code("50014")
.message("分享链接已过期").build();
response.getWriter().print(JSONObject.toJSONString(responseBean));
@ -120,8 +122,7 @@ public class TokenFilter implements Filter {
}
//获取token
String token = request.getHeader("Authorization");
if (StringUtils.isBlank(token)) {
error(response);
return;

@ -1,5 +1,6 @@
package com.anjiplus.template.gaea.business.util;
import com.anji.plus.gaea.constant.GaeaConstant;
import com.anji.plus.gaea.exception.BusinessExceptionBuilder;
import com.anjiplus.template.gaea.business.code.ResponseCode;
import com.auth0.jwt.JWT;
@ -9,8 +10,11 @@ import com.auth0.jwt.interfaces.Claim;
import com.auth0.jwt.interfaces.DecodedJWT;
import org.apache.commons.lang3.StringUtils;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
/**
* Created by raodeming on 2021/8/18.
@ -53,6 +57,15 @@ public class JwtUtil {
return claim.asString();
}
/**
* token
* @param tokenList
* @return
*/
public static List<String> getReportCodeList(String tokenList) {
return Arrays.stream(tokenList.split(GaeaConstant.SPLIT)).filter(StringUtils::isNotBlank).map(JwtUtil::getReportCode).distinct().collect(Collectors.toList());
}
public static String getShareCode(String token) {
Claim claim = getClaim(token).get("shareCode");
if (null == claim) {

@ -0,0 +1,6 @@
-- 新增雷达图字典
INSERT INTO `aj_report`.`gaea_dict`(`dict_name`, `dict_code`, `remark`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('雷达属性', 'RADAR_PROPERTIES', '雷达属性', 'admin', NOW(), 'admin', NOW(), 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 ('RADAR_PROPERTIES', '名称', 'name', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 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 ('RADAR_PROPERTIES', '雷达顶点', 'radar', NULL, 1, 'zh', NULL, NULL, 'admin', NOW(), 'admin', NOW(), 1);

@ -1,4 +1,5 @@
import request from '@/utils/request'
import {getShareToken, getToken} from "@/utils/auth";
// 设计报表
export function design(data) {
@ -14,6 +15,7 @@ export function preview(data) {
return request({
url: 'reportExcel/preview',
method: 'post',
headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
data,
})
}

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">雷达图2</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe683;</span>
<div class="name">热力图</div>
@ -810,9 +816,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1650520683161') format('woff2'),
url('iconfont.woff?t=1650520683161') format('woff'),
url('iconfont.ttf?t=1650520683161') format('truetype');
src: url('iconfont.woff2?t=1666946350865') format('woff2'),
url('iconfont.woff?t=1666946350865') format('woff'),
url('iconfont.ttf?t=1666946350865') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -838,6 +844,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconleidatu"></span>
<div class="name">
雷达图2
</div>
<div class="code-name">.iconleidatu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconrelitu"></span>
<div class="name">
@ -1972,6 +1987,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconleidatu"></use>
</svg>
<div class="name">雷达图2</div>
<div class="code-name">#iconleidatu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconrelitu"></use>

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1650520683161') format('woff2'),
url('iconfont.woff?t=1650520683161') format('woff'),
url('iconfont.ttf?t=1650520683161') format('truetype');
src: url('iconfont.woff2?t=1666946350865') format('woff2'),
url('iconfont.woff?t=1666946350865') format('woff'),
url('iconfont.ttf?t=1666946350865') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.iconleidatu:before {
content: "\e640";
}
.iconrelitu:before {
content: "\e683";
}

File diff suppressed because one or more lines are too long

@ -5,6 +5,13 @@
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "9013588",
"name": "雷达图2",
"font_class": "leidatu",
"unicode": "e640",
"unicode_decimal": 58944
},
{
"icon_id": "19004935",
"name": "热力图",

@ -111,6 +111,7 @@ export default {
// widget-stackchart 堆叠图
// widget-heatmap 热力图
// widget-mapline 中国地图-路线图
// widget-radar 雷达图
const chartType = params.chartType
if (
chartType == "widget-barchart" ||
@ -131,6 +132,8 @@ export default {
return this.coordChartFn(params.chartProperties, data)
} else if (chartType == "widget-linemap") {
return this.linemapChartFn(params.chartProperties, data)
} else if (chartType == "widget-radar") {
return this.radarChartFn(params.chartProperties, data)
} else {
return data
}
@ -269,6 +272,25 @@ export default {
}
return ananysicData;
},
radarChartFn(chartProperties, data) {
const ananysicData = {};
// 字段名
const radarField = [];
let nameField;
for(const key in chartProperties) {
if (chartProperties[key] == 'radar') {
radarField.push(key)
}
if (chartProperties[key] == 'name') {
nameField = key;
}
}
// 拿到数值
ananysicData["name"] = nameField;
ananysicData["keys"] = radarField;
ananysicData["value"] = data;
return ananysicData;
},
setUnique(arr) {
let newArr = [];
arr.forEach(item => {

@ -3,7 +3,7 @@ import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken, getAccessUser } from "@/utils/auth";
export default router
const whiteList = ['/login', '/aj/**', '/bigscreen/viewer']
const whiteList = ['/login', '/aj/**', '/el/**', '/bigscreen/viewer', '/excelreport/viewer']
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {

@ -11,9 +11,13 @@ export function getShareToken() {
return getStorageItem(ShareTokenKey) == null ? '' : getStorageItem(ShareTokenKey);
}
export function setToken(token) {
return setStorageItem(TokenKey, token)
return setStorageItem(TokenKey, token);
}
export function setShareToken(shareToken) {
const originalShareToken = getShareToken();
if ((originalShareToken != null || originalShareToken != '') && originalShareToken.indexOf(shareToken) == -1) {
shareToken = originalShareToken + ',' + shareToken
}
return setStorageItem(ShareTokenKey, shareToken)
}
export function delToken() {

@ -0,0 +1,178 @@
<template>
<div>
<el-button
type="primary"
size="small"
icon="el-icon-plus"
plain
@click="handleAddClick"
>新增</el-button
>
<el-table :data="formData" style="width: 100%">
<el-table-column prop="name" label="名称" width="100" />
<el-table-column prop="key" label="key值" width="100" />
<el-table-column prop="max" label="最大值" width="100" />
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<div class="button-group">
<el-button
@click="handleEditorClick(scope.$index, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="handleDeleteClick(scope.$index, scope.row)"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form :model="rowFormData" label-width="60px">
<el-form-item label="名称:">
<el-input
v-model.trim="rowFormData['name']"
placeholder="请输入名称"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="key值:">
<el-input
v-model.trim="rowFormData['key']"
placeholder="请输入key值"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="最大值:">
<el-input
v-model.trim="rowFormData['max']"
placeholder="请输入最大值"
size="mini"
>
</el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
model: {
prop: "formData",
event: "input"
},
props: {
formData: Array
},
data() {
return {
dialogVisible: false,
rowFormData: {
name: "",
key: "",
max: ""
},
flag: true, // true false
indexEditor: -1, //
tableData: []
};
},
methods: {
//
handleAddClick() {
this.rowFormData = {};
this.flag = true;
this.dialogVisible = true;
},
//
handleEditorClick(index, row) {
this.flag = false;
this.rowFormData = this.deepClone(row);
this.indexEditor = index;
this.dialogVisible = true;
},
//
handleClose() {
this.dialogVisible = false;
},
//
handleSaveClick() {
if (this.flag) {
//
this.formData.push(this.rowFormData);
this.dialogVisible = false;
} else {
//
this.formData[this.indexEditor] = this.rowFormData;
this.$set(this.formData, this.indexEditor, this.rowFormData);
this.dialogVisible = false;
}
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
//
handleDeleteClick(index) {
this.formData.splice(index, 1);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
}
}
};
</script>
<style lang="scss" scoped>
/deep/::-webkit-scrollbar-track-piece {
background-color: transparent;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 0; //
height: 8px; //
}
//
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(144, 146, 152, 0.3);
}
/deep/.el-table,
/deep/.el-table__expanded-cell,
/deep/.el-table th,
/deep/.el-table tr {
background-color: transparent !important;
color: #859094 !important;
font-size: 12px !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
border-bottom: none;
line-height: 26px;
}
/deep/.el-table tbody tr:hover {
background-color: #263445 !important;
}
/deep/.el-table tbody tr:hover > td {
background-color: #263445 !important;
}
/deep/.el-table::before {
height: 0;
}
.button-group .el-button {
padding: 0;
}
</style>

@ -145,6 +145,11 @@
:chart-type="item.chartType"
@change="changed($event, item.name)"
/>
<dynamic-add-radar
v-if="item.type == 'dynamic-add-radar' && inputShow[item.name]"
v-model="formData[item.name]"
:chart-type="item.chartType"
@change="changed($event, item.name)"/>
</div>
<div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
<el-collapse accordion>
@ -276,6 +281,7 @@ import dynamicComponents from "./dynamicComponents.vue";
import customColorComponents from "./customColorComponents";
import dynamicAddTable from "./dynamicAddTable.vue";
import customUpload from "./customUpload.vue";
import dynamicAddRadar from "./dynamicAddRadar";
export default {
name: "DynamicForm",
components: {
@ -284,7 +290,8 @@ export default {
dynamicComponents,
customColorComponents,
dynamicAddTable,
customUpload
customUpload,
dynamicAddRadar
},
model: {
prop: "value",

@ -12,25 +12,35 @@
class="layout-left"
:style="{ width: widthLeftForTools + 'px' }"
>
<el-tabs type="border-card" :stretch="true">
<el-tabs class="layout-left" type="border-card" :stretch="true">
<!-- 左侧组件栏-->
<el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>-->
<span slot="label"><i class="el-icon-date icon"></i>工具栏</span>
<div class="chart-type">
<el-tabs class="type-left" tab-position="left">
<el-tab-pane
v-for="(item, index) in widgetTools"
:key="index"
:label="item.name"
>
<li
v-for="widget in widgetTools"
:key="widget.code"
v-for="(it, idx) in item.list"
:key="idx"
draggable="true"
@dragstart="dragStart(widget.code)"
@dragstart="dragStart(it.code)"
@dragend="dragEnd()"
>
<div class="tools-item">
<span class="tools-item-icon">
<i class="iconfont" :class="widget.icon"></i>
<i class="iconfont" :class="it.icon"></i>
</span>
<span class="tools-item-text">{{ widget.label }}</span>
<span class="tools-item-text">{{ it.label }}</span>
</div>
</li>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<!-- 左侧图层-->
<el-tab-pane label="图层">
<draggable
@ -170,7 +180,7 @@
class="workbench-container"
:style="{
width: bigscreenWidthInWorkbench + 'px',
height: bigscreenHeightInWorkbench + 'px'
height: bigscreenHeightInWorkbench + 'px',
}"
@mousedown="handleMouseDown"
>
@ -197,7 +207,7 @@
'background-repeat': 'initial',
'background-attachment': 'initial',
'background-origin': 'initial',
'background-clip': 'initial'
'background-clip': 'initial',
}"
@click.self="setOptionsOnClickScreen"
@drop="widgetOnDragged($event)"
@ -235,7 +245,7 @@
<dynamicForm
ref="formData"
:options="widgetOptions.setup"
@onChanged="val => widgetValueChanged('setup', val)"
@onChanged="(val) => widgetValueChanged('setup', val)"
/>
</el-tab-pane>
<el-tab-pane
@ -246,7 +256,7 @@
<dynamicForm
ref="formData"
:options="widgetOptions.data"
@onChanged="val => widgetValueChanged('data', val)"
@onChanged="(val) => widgetValueChanged('data', val)"
/>
</el-tab-pane>
<el-tab-pane
@ -257,7 +267,7 @@
<dynamicForm
ref="formData"
:options="widgetOptions.position"
@onChanged="val => widgetValueChanged('position', val)"
@onChanged="(val) => widgetValueChanged('position', val)"
/>
</el-tab-pane>
</el-tabs>
@ -281,7 +291,7 @@ import {
insertDashboard,
detailDashboard,
importDashboard,
exportDashboard
exportDashboard,
} from "@/api/bigscreen";
import { widgetTools, getToolByCode } from "./tools/index";
import widget from "./widget/widget.vue";
@ -299,7 +309,7 @@ export default {
VueRulerTool,
widget,
dynamicForm,
contentMenu
contentMenu,
},
data() {
return {
@ -330,7 +340,7 @@ export default {
backgroundImage: "", //
refreshSeconds: null, //
presetLine: [], // 线
presetLineVisible: true // 线
presetLineVisible: true, // 线
},
//
screenCode: "",
@ -348,12 +358,12 @@ export default {
height: 100,
left: 0,
top: 0,
zIndex: 0
}
zIndex: 0,
},
},
// optionstools
options: []
}
options: [],
},
], //
//
@ -362,16 +372,16 @@ export default {
widgetOptions: {
setup: [], //
data: [], //
position: [] //
position: [], //
},
flagWidgetClickStopPropagation: false, // click
styleObj: {
left: 0,
top: 0
top: 0,
},
visibleContentMenu: false,
rightClickIndex: -1,
activeName: "first"
activeName: "first",
};
},
computed: {
@ -380,7 +390,7 @@ export default {
},
headers() {
return {
Authorization: getToken() // token
Authorization: getToken(), // token
};
},
//
@ -407,9 +417,7 @@ export default {
return Math.min(widthScale, heightScale);
},
workbenchTransform() {
return `scale(${this.bigscreenScaleInWorkbench}, ${
this.bigscreenScaleInWorkbench
})`;
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`;
},
//
bigscreenWidthInWorkbench() {
@ -419,7 +427,7 @@ export default {
return (
this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools
);
}
},
},
watch: {
widgets: {
@ -430,8 +438,8 @@ export default {
this.revoke.push(this.widgets);
});
},
deep: true
}
deep: true,
},
},
created() {
/* 以下是记录历史的 */
@ -476,7 +484,7 @@ export default {
const obj = {};
obj.icon = getToolByCode(val[i].type).icon;
const options = val[i].options["setup"];
options.forEach(el => {
options.forEach((el) => {
if (el.name == "layerName") {
obj.label = el.value;
}
@ -512,7 +520,7 @@ export default {
backgroundImage: (data && data.backgroundImage) || "",
height: (data && data.height) || "1080",
title: (data && data.title) || "",
width: (data && data.width) || "1920"
width: (data && data.width) || "1920",
};
},
handleInitEchartsData(data) {
@ -524,7 +532,7 @@ export default {
obj.value = {
setup: widgets[i].value.setup,
data: widgets[i].value.data,
position: widgets[i].value.position
position: widgets[i].value.position,
};
const tool = this.deepClone(getToolByCode(widgets[i].type));
const option = tool.options;
@ -545,7 +553,7 @@ export default {
} else if (Object.prototype.toString.call(item) == "[object Array]") {
for (let j = 0; j < item.length; j++) {
const list = item[j].list;
list.forEach(el => {
list.forEach((el) => {
if (key == el.name) {
el.value = data.setup[key];
}
@ -585,9 +593,9 @@ export default {
width: this.dashboard.width,
height: this.dashboard.height,
backgroundColor: this.dashboard.backgroundColor,
backgroundImage: this.dashboard.backgroundImage
backgroundImage: this.dashboard.backgroundImage,
},
widgets: this.widgets
widgets: this.widgets,
};
const { code, data } = await insertDashboard(screenData);
if (code == "200") {
@ -598,7 +606,7 @@ export default {
viewScreen() {
let routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: this.$route.query.reportCode }
query: { reportCode: this.$route.query.reportCode },
});
window.open(routeUrl.href, "_blank");
},
@ -608,9 +616,9 @@ export default {
const param = {
reportCode: this.$route.query.reportCode,
showDataSet: val
showDataSet: val,
};
exportDashboard(param).then(res => {
exportDashboard(param).then((res) => {
const that = this;
const type = res.type;
if (type == "application/json") {
@ -645,19 +653,19 @@ export default {
if (response.code == "200") {
this.$message({
message: "导入成功!",
type: "success"
type: "success",
});
} else {
this.$message({
message: response.message,
type: "error"
type: "error",
});
}
},
handleError(err) {
this.$message({
message: "上传失败!",
type: "error"
type: "error",
});
},
@ -704,10 +712,10 @@ export default {
height: 0,
left: 0,
top: 0,
zIndex: 0
}
zIndex: 0,
},
},
options: tool.options
options: tool.options,
};
//
const widgetJsonValue = this.handleDefaultValue(widgetJson);
@ -739,7 +747,7 @@ export default {
) {
for (let j = 0; j < item.length; j++) {
const list = item[j].list;
list.forEach(el => {
list.forEach((el) => {
widgetJson.value.setup[el.name] = el.value;
});
}
@ -789,7 +797,7 @@ export default {
}
this.widgetIndex = obj.index;
this.widgets[obj.index].value.position = obj;
this.widgets[obj.index].options.position.forEach(el => {
this.widgets[obj.index].options.position.forEach((el) => {
for (const key in obj) {
if (el.name == key) {
el.value = obj[key];
@ -835,7 +843,7 @@ export default {
if (this.bigscreenHeight != this.dashboard.height) {
this.bigscreenHeight = this.dashboard.height;
}
this.widgetOptions.setup.forEach(el => {
this.widgetOptions.setup.forEach((el) => {
if (el.name == "width") {
el.value = this.bigscreenWidth;
} else if (el.name == "height") {
@ -864,7 +872,7 @@ export default {
this.styleObj = {
left: left + "px",
top: top + "px",
display: "block"
display: "block",
};
}
this.visibleContentMenu = true;
@ -948,8 +956,8 @@ export default {
} else {
this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]);
}
}
}
},
},
};
</script>
@ -1353,4 +1361,92 @@ li {
/deep/ .vue-ruler-v {
opacity: 0.3;
}
.layout-left {
width: 200px;
background: #242a30;
overflow-x: hidden;
overflow-y: auto;
.chart-type {
display: flex;
flex-direction: row;
overflow: hidden;
.type-left {
width: 100%;
height: calc(100vh - 80px);
text-align: center;
/deep/.el-tabs__header {
width: 30%;
margin-right: 0;
.el-tabs__nav-wrap {
&::after {
background: transparent;
}
.el-tabs__item {
text-align: center;
width: 100% !important;
color: #fff;
padding: 0;
font-size: 12px !important;
}
}
}
/deep/.el-tabs__content {
width: 70%;
}
}
}
//
.tools-item {
display: flex;
position: relative;
width: 100%;
height: 48px;
align-items: center;
-webkit-box-align: center;
padding: 0 6px;
cursor: pointer;
font-size: 12px;
margin-bottom: 1px;
.tools-item-icon {
color: #409eff;
margin-right: 10px;
width: 53px;
height: 30px;
line-height: 30px;
text-align: center;
display: block;
border: 1px solid #3a4659;
background: #282a30;
}
.tools-item-text {
font-size: 12px !important;
}
}
/deep/.el-tabs__content {
padding: 0;
}
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 0;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
}
</style>

@ -0,0 +1,780 @@
/*
* @Descripttion: 柱状对比图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:39:35
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:09:58
*/
export const widgetBarCompare = {
code: 'widgetBarCompareChart',
type: 'barChart',
tabName: '柱状图',
label: '柱状对比图',
icon: 'iconduibitupu',
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-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题名',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#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: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '顶部' },
{ code: 'bottom', name: '底部' },
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{ code: 'vertical', name: '竖排' },
{ code: 'horizontal', name: '横排' },
],
value: 'horizontal'
},
],
},
{
name: '左X轴设置',
list: [
{
type: 'el-switch',
label: '数值显示',
name: 'hideXLeft',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorXLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '数值位置',
name: 'positionXLeft',
required: false,
placeholder: '',
selectOptions: [
{ code: 'bottom', name: '底部' },
{ code: 'top', name: '顶部' },
],
value: 'bottom'
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineXLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorXLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线显示',
name: 'frameLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '边框线颜色',
name: 'borderColorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '边框线宽度',
name: 'borderWidthLeft',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '右X轴设置',
list: [
{
type: 'el-switch',
label: '数值显示',
name: 'hideXRight',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorXRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '数值位置',
name: 'positionXRight',
required: false,
placeholder: '',
selectOptions: [
{ code: 'bottom', name: '底部' },
{ code: 'top', name: '顶部' },
],
value: 'bottom'
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineXRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorXRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线显示',
name: 'frameLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '边框线颜色',
name: 'borderColorRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '边框线宽度',
name: 'borderWidthRight',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '数值显示',
name: 'hideY',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '数值位置',
name: 'textAlignY',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '右对齐' },
{ code: 'right', name: '左对齐' },
],
value: 'center'
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左右边距(像素)',
name: 'marginLeftRight',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 40,
},
{
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{ color: '#36c5e7' }, { color: '#e68b55' }],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{ "axis": "07-25", "name": "success", "data": "2" },
{ "axis": "07-25", "name": "fail", "data": "10" },
{ "axis": "07-26", "name": "success", "data": "5" },
{ "axis": "07-26", "name": "fail", "data": "20" },
{ "axis": "07-27", "name": "success", "data": "15" },
{ "axis": "07-27", "name": "fail", "data": "30" },
{ "axis": "07-28", "name": "success", "data": "10" },
{ "axis": "07-28", "name": "fail", "data": "12" },
{ "axis": "07-29", "name": "success", "data": "9" },
{ "axis": "07-29", "name": "fail", "data": "16" },
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -1,16 +1,17 @@
/*
* @Descripttion: 多柱线
* @Descripttion: 柱状堆叠
* @version:
* @Author: foming
* @Date:
* @LastEditors:
* @LastEditTime:
* @Author: qianlishi
* @Date: 2021-08-29 07:37:09
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:11:09
*/
export const widgetMoreBarLine = {
code: 'widgetMoreBarLineChart',
type: 'chart',
label: '多柱线图',
icon: 'iconzhuxiantu',
export const widgetBarStack = {
code: 'widgetBarStackChart',
type: 'barChart',
tabName: '柱状图',
label: '柱状堆叠图',
icon: 'iconbianzu23',
options: {
// 配置
setup: [
@ -20,70 +21,37 @@ export const widgetMoreBarLine = {
name: 'layerName',
required: false,
placeholder: '',
value: '多柱线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 3,
value: '柱状堆叠图',
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: 5,
value: ''
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
type: 'el-select',
label: '堆叠样式',
name: 'stackStyle',
required: false,
placeholder: '',
value: 3,
},
selectOptions: [
{code: 'leftRight', name: '左右堆叠'},
{code: 'upDown', name: '上下堆叠'},
],
value: 'leftRight'
},
[
{
name: '柱体设置',
list: [
@ -93,7 +61,7 @@ export const widgetMoreBarLine = {
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
value: 20,
},
{
type: 'el-slider',
@ -110,19 +78,19 @@ export const widgetMoreBarLine = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
value: '',
},
{
type: 'vue-color',
@ -130,7 +98,15 @@ export const widgetMoreBarLine = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -147,12 +123,17 @@ export const widgetMoreBarLine = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
{
type: 'el-select',
@ -165,11 +146,11 @@ export const widgetMoreBarLine = {
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -181,7 +162,15 @@ export const widgetMoreBarLine = {
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -198,12 +187,17 @@ export const widgetMoreBarLine = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
@ -229,7 +223,7 @@ export const widgetMoreBarLine = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
@ -237,7 +231,7 @@ export const widgetMoreBarLine = {
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
@ -245,7 +239,7 @@ export const widgetMoreBarLine = {
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
@ -303,7 +297,7 @@ export const widgetMoreBarLine = {
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
name: 'nameX',
required: false,
placeholder: '',
value: ''
@ -314,20 +308,20 @@ export const widgetMoreBarLine = {
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -340,14 +334,6 @@ export const widgetMoreBarLine = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
@ -356,9 +342,17 @@ export const widgetMoreBarLine = {
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
@ -366,12 +360,20 @@ export const widgetMoreBarLine = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -387,7 +389,15 @@ export const widgetMoreBarLine = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -395,168 +405,141 @@ export const widgetMoreBarLine = {
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYLeft',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeYLeft',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '右显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '右坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '右坐标名颜色',
name: 'nameColorYRight',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '右坐标字号',
name: 'nameFontSizeYRight',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: '#fff',
value: false,
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
label: '均分',
name: 'splitNumberY',
required: false,
placeholder: '',
value: 14,
value: ''
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
type: 'el-slider',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: '#fff',
},
],
value: 0
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
label: '坐标轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: 5
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
label: '坐标轴宽度',
name: 'lineWidthY',
required: false,
placeholder: '',
value: 14
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff'
value: '#fff',
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthY',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
value: 1,
},
],
},
{
name: '柱体数值设定',
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
@ -564,7 +547,7 @@ export const widgetMoreBarLine = {
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
@ -572,7 +555,7 @@ export const widgetMoreBarLine = {
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
@ -590,19 +573,19 @@ export const widgetMoreBarLine = {
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipFontSize',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 12
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#e68b55'
value: '#00FEFF'
},
],
},
@ -648,11 +631,7 @@ export const widgetMoreBarLine = {
label: '',
name: 'customColor',
required: false,
value: [
{color: '#4bdfff'},
{color: '#55f49c'},
{color: '#ffa43a'},
],
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
@ -696,15 +675,12 @@ export const widgetMoreBarLine = {
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"date": "2014", "unsales": 400, "manus": 300, "sales": 4.2,},
{"date": "2015", "unsales": 400, "manus": 500, "sales": 3.6,},
{"date": "2016", "unsales": 300, "manus": 500, "sales": 5.8,},
{"date": "2017", "unsales": 300, "manus": 500, "sales": 3.4,},
{"date": "2018", "unsales": 400, "manus": 400, "sales": 2.5,},
{"date": "2019", "unsales": 400, "manus": 500, "sales": 5.8,},
{"date": "2020", "unsales": 300, "manus": 400, "sales": 7.6,},
{"date": "2021", "unsales": 300, "manus": 600, "sales": 3.4,},
]
{"axis": "2021-07-25", "name": "A", "data": "12"},
{"axis": "2021-07-25", "name": "B", "data": "20"},
{"axis": "2021-07-26", "name": "B", "data": "5"},
{"axis": "2021-07-27", "name": "A", "data": "15"},
{"axis": "2021-07-27", "name": "B", "data": "30"},
],
},
{
type: 'dycustComponents',
@ -713,9 +689,10 @@ export const widgetMoreBarLine = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
@ -750,7 +727,7 @@ export const widgetMoreBarLine = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
value: 250,
},
],
}

@ -8,7 +8,8 @@
*/
export const widgetBarchart = {
code: 'widget-barchart',
type: 'chart',
type: 'barChart',
tabName: '柱状图',
label: '柱状图',
icon: 'iconzhuzhuangtu',
options: {
@ -73,7 +74,7 @@ export const widgetBarchart = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
@ -81,7 +82,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
@ -95,6 +96,14 @@ export const widgetBarchart = {
placeholder: '',
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
@ -110,12 +119,17 @@ export const widgetBarchart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
{
type: 'el-select',
@ -132,7 +146,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -146,6 +160,14 @@ export const widgetBarchart = {
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
@ -161,12 +183,17 @@ export const widgetBarchart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
@ -184,7 +211,7 @@ export const widgetBarchart = {
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
name: 'nameX',
required: false,
placeholder: '',
value: ''
@ -199,7 +226,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
@ -208,7 +235,7 @@ export const widgetBarchart = {
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -221,14 +248,6 @@ export const widgetBarchart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
@ -237,9 +256,17 @@ export const widgetBarchart = {
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
@ -247,12 +274,20 @@ export const widgetBarchart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -268,8 +303,15 @@ export const widgetBarchart = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -301,7 +343,7 @@ export const widgetBarchart = {
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
@ -323,14 +365,6 @@ export const widgetBarchart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
@ -342,14 +376,22 @@ export const widgetBarchart = {
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
name: 'splitNumberY',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalY',
required: false,
placeholder: '',
@ -357,27 +399,44 @@ export const widgetBarchart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}, {
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthY',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthY',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -445,9 +504,10 @@ export const widgetBarchart = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},

@ -8,7 +8,8 @@
*/
export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart',
type: 'chart',
type: 'barChart',
tabName: '柱状图',
label: '柱状图-渐变色',
icon: 'iconzhuzhuangtu',
options: {
@ -65,7 +66,7 @@ export const widgetGradientBarchart = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
@ -73,7 +74,7 @@ export const widgetGradientBarchart = {
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
@ -85,7 +86,15 @@ export const widgetGradientBarchart = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -102,12 +111,17 @@ export const widgetGradientBarchart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 22
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -124,7 +138,7 @@ export const widgetGradientBarchart = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -136,10 +150,18 @@ export const widgetGradientBarchart = {
name: 'subTextColor',
required: false,
placeholder: '',
value: '#90979c'
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-text',
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
@ -153,12 +175,17 @@ export const widgetGradientBarchart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
@ -176,7 +203,7 @@ export const widgetGradientBarchart = {
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
name: 'nameX',
required: false,
placeholder: '',
value: ''
@ -187,20 +214,20 @@ export const widgetGradientBarchart = {
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -213,14 +240,6 @@ export const widgetGradientBarchart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
@ -229,9 +248,17 @@ export const widgetGradientBarchart = {
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
@ -239,12 +266,20 @@ export const widgetGradientBarchart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -260,7 +295,15 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -281,7 +324,8 @@ export const widgetGradientBarchart = {
require: false,
placeholder: '',
value: ''
}, {
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorY',
@ -291,8 +335,8 @@ export const widgetGradientBarchart = {
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeY',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
@ -313,14 +357,6 @@ export const widgetGradientBarchart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
@ -332,11 +368,19 @@ export const widgetGradientBarchart = {
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
name: 'splitNumberY',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
@ -368,7 +412,7 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
value: '#fff',
}
},
],
},
{
@ -392,7 +436,7 @@ export const widgetGradientBarchart = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
@ -427,7 +471,7 @@ export const widgetGradientBarchart = {
list: [
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
@ -436,9 +480,10 @@ export const widgetGradientBarchart = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '#ff7f50',
placeholder: '',
value: '#00FEFF'
},
],
},

@ -0,0 +1,947 @@
/*
* @Descripttion: 柱线堆叠图
* @Author: foming
*/
export const widgetBarLineStack = {
code: 'widgetBarLineStackChart',
type: 'barlineCharts',
tabName: '柱线图',
label: '柱线堆叠图',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱线堆叠图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 3,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
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: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'nameX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '左Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYLeft',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '右Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYRight',
required: false,
placeholder: '',
value: 14,
}, {
type: 'vue-color',
label: '数值颜色',
name: 'colorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYRight',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYRight',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 10
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 10
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "2021-07", "name": "A", "bar": "12", "line": "20"},
{"axis": "2021-07", "name": "B", "bar": "20", "line": "12"},
{"axis": "2021-08", "name": "A", "bar": "0", "line": "8"},
{"axis": "2021-08", "name": "B", "bar": "5", "line": "3"},
{"axis": "2021-09", "name": "A", "bar": "15", "line": "9"},
{"axis": "2021-09", "name": "B", "bar": "30", "line": "19"},
{"axis": "2021-10", "name": "A", "bar": "10", "line": "27"},
{"axis": "2021-10", "name": "B", "bar": "24", "line": "6"},
{"axis": "2021-11", "name": "A", "bar": "23", "line": "29"},
{"axis": "2021-11", "name": "B", "bar": "8", "line": "9"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -0,0 +1,976 @@
/*
* @Descripttion: 柱线图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:26:48
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:39:29
*/
export const widgetBarlinechart = {
code: 'widget-barlinechart',
type: 'barlineCharts',
tabName: '柱线图',
label: '柱线图',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
],
},
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-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: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'nameX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '左Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYLeft',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '右Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYRight',
required: false,
placeholder: '',
value: 14,
}, {
type: 'vue-color',
label: '数值颜色',
name: 'colorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYRight',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYRight',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "1月", "bar": 2.6, "line": 2},
{"axis": "2月", "bar": 5.9, "line": 2.2},
{"axis": "3月", "bar": 9, "line": 3.3},
{"axis": "4月", "bar": 26.4, "line": 4.5},
{"axis": "5月", "bar": 28.7, "line": 6.3},
{"axis": "6月", "bar": 70.7, "line": 10.2},
{"axis": "7月", "bar": 175.6, "line": 20.3},
{"axis": "8月", "bar": 182.2, "line": 23.4},
{"axis": "9月", "bar": 48.7, "line": 23},
{"axis": "10月", "bar": 18.8, "line": 16.5},
{"axis": "11月", "bar": 6, "line": 12},
{"axis": "12月", "bar": 2.3, "line": 6.2},
]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -0,0 +1,964 @@
/*
* @Descripttion: 多柱线图
* @version:
* @Author: foming
* @Date:
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:39:52
*/
export const widgetMoreBarLine = {
code: 'widgetMoreBarLineChart',
type: 'barlineCharts',
tabName: '柱线图',
label: '多柱线图',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '多柱线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 3,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-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: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'nameX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '左Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYLeft',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYLeft',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '右Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeYRight',
required: false,
placeholder: '',
value: 14,
}, {
type: 'vue-color',
label: '数值颜色',
name: 'colorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleYRight',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '刻度线显示',
name: 'tickLineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'lineYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthYRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineYRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineFontWidthYRight',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '柱体数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"date": "2014", "unsales": 400, "manus": 300, "sales": 4.2,},
{"date": "2015", "unsales": 400, "manus": 500, "sales": 3.6,},
{"date": "2016", "unsales": 300, "manus": 500, "sales": 5.8,},
{"date": "2017", "unsales": 300, "manus": 500, "sales": 3.4,},
{"date": "2018", "unsales": 400, "manus": 400, "sales": 2.5,},
{"date": "2019", "unsales": 400, "manus": 500, "sales": 5.8,},
{"date": "2020", "unsales": 300, "manus": 400, "sales": 7.6,},
{"date": "2021", "unsales": 300, "manus": 600, "sales": 3.4,},
]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

@ -3,12 +3,13 @@
* @version:
* @Author: foming
* @Date:
* @LastEditors:
* @LastEditTime:
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:40:07
*/
export const widgetDecoratePie = {
code: 'widgetDecoratePieChart',
type: 'chart',
type: 'decorate',
tabName: '装饰图',
label: '装饰饼图',
icon: 'iconicon_tubiao_bingtu',
options: {

@ -3,12 +3,13 @@
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:29:23
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:12:37
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:40:21
*/
export const widgetFunnel = {
code: 'widget-funnel',
type: 'chart',
type: 'funnel',
tabName: '漏斗图',
label: '漏斗图',
icon: 'iconloudoutu',
options: {
@ -44,15 +45,15 @@ export const widgetFunnel = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: false,
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
@ -66,6 +67,14 @@ export const widgetFunnel = {
placeholder: '',
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
@ -81,12 +90,17 @@ export const widgetFunnel = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -103,7 +117,7 @@ export const widgetFunnel = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -117,6 +131,14 @@ export const widgetFunnel = {
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
@ -132,12 +154,17 @@ export const widgetFunnel = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 16
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
@ -198,7 +225,7 @@ export const widgetFunnel = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
@ -206,7 +233,7 @@ export const widgetFunnel = {
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 16,
@ -214,7 +241,7 @@ export const widgetFunnel = {
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
name: 'legendWidth',
required: false,
placeholder: '',
value: 15,
@ -264,18 +291,18 @@ export const widgetFunnel = {
{
type: 'el-input-number',
label: '字体字号',
name: 'tipFontSize',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 14
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: ''
value: '#00FEFF'
},
],
},

@ -3,12 +3,13 @@
* @version:
* @Author: whw
* @Date: 2021-11-3
* @LastEditors: whw
* @LastEditTime: 2021-11-3
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:40:35
*/
export const widgetHeatmap = {
code: 'widget-heatmap',
type: 'chart',
type: 'heatmap',
tabName: '热力图',
label: '热力图',
icon: 'iconrelitu',
options: {
@ -36,19 +37,19 @@ export const widgetHeatmap = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
value: '',
},
{
type: 'vue-color',
@ -56,7 +57,15 @@ export const widgetHeatmap = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -73,12 +82,17 @@ export const widgetHeatmap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 16
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -95,7 +109,7 @@ export const widgetHeatmap = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -107,7 +121,15 @@ export const widgetHeatmap = {
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -124,12 +146,17 @@ export const widgetHeatmap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 16
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
@ -146,76 +173,84 @@ export const widgetHeatmap = {
},
{
type: 'el-input-text',
label: 'X轴别名',
name: 'xName',
label: '坐标名',
name: 'nameX',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '名颜色',
name: 'xNameColor',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '名字号',
name: 'xNameFontSize',
label: '坐标名字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
type: 'vue-color',
label: '数值颜色',
name: 'colorX',
required: false,
placeholder: '',
value: false
value: '#fff',
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 0
value: 14,
},
{
type: 'el-input-number',
label: '文字间隔',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'Xcolor',
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: '#fff',
value: 0
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: 14,
value: false
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -231,7 +266,7 @@ export const widgetHeatmap = {
},
{
type: 'el-input-text',
label: 'Y轴别名',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
@ -239,59 +274,83 @@ export const widgetHeatmap = {
},
{
type: 'vue-color',
label: '别名颜色',
name: 'NameColorY',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标名字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '别名字号',
name: 'NameFontSizeY',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumberY',
required: false,
placeholder: '',
value: false
value: ''
},
{
type: 'el-slider',
label: '文字角度',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorY',
type: 'el-switch',
label: '坐标轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: '#fff',
value: false
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeY',
type: 'vue-color',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: 14,
value: '#fff',
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthY',
required: false,
placeholder: '',
value: '#fff',
value: 1,
},
],
},
@ -352,9 +411,10 @@ export const widgetHeatmap = {
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsLineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
@ -422,7 +482,7 @@ export const widgetHeatmap = {
{
type: 'vue-color',
label: '数值颜色',
name: 'lengedColor',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
@ -430,7 +490,7 @@ export const widgetHeatmap = {
{
type: 'el-input-number',
label: '图例大小',
name: 'lengedFontSize',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
@ -438,7 +498,7 @@ export const widgetHeatmap = {
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
@ -488,7 +548,7 @@ export const widgetHeatmap = {
{
type: 'customColor',
label: '',
name: 'lengedColorList',
name: 'legendColorList',
required: false,
value: [{ color: '#abd9e9' }, { color: '#74add1' }, { color: '#4575b4' }, { color: '#313695' }],
},

@ -3,12 +3,13 @@
* @version:
* @Author: foming
* @Date: 2021-08-29 07:39:35
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:15:42
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:40:44
*/
export const widgetLineCompare = {
code: 'widgetLineCompareChart',
type: 'chart',
type: 'lineChart',
tabName: '折线图',
label: '折线对比图',
icon: 'iconzhexian',
options: {
@ -48,7 +49,19 @@ export const widgetLineCompare = {
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
value: 10,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
@ -80,7 +93,7 @@ export const widgetLineCompare = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 2,
value: 10,
},
],
},
@ -89,7 +102,7 @@ export const widgetLineCompare = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
@ -97,7 +110,7 @@ export const widgetLineCompare = {
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
@ -111,6 +124,14 @@ export const widgetLineCompare = {
placeholder: '',
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
@ -126,12 +147,17 @@ export const widgetLineCompare = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -146,6 +172,57 @@ export const widgetLineCompare = {
],
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'
},
],
},
{
@ -170,7 +247,7 @@ export const widgetLineCompare = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
@ -178,7 +255,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
@ -186,7 +263,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
@ -259,7 +336,7 @@ export const widgetLineCompare = {
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
@ -299,7 +376,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: '刻度线',
label: '刻度线显示',
name: 'tickLineX',
require: false,
placeholder: '',
@ -307,7 +384,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: 'X轴线',
label: '坐标轴显示',
name: 'lineX',
require: false,
placeholder: '',
@ -315,7 +392,7 @@ export const widgetLineCompare = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
@ -351,47 +428,47 @@ export const widgetLineCompare = {
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeYTop',
label: '坐标字号',
name: 'nameFontSizeYTop',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '缩放',
name: 'scaleYTop',
type: 'vue-color',
label: '数值颜色',
name: 'colorYTop',
required: false,
placeholder: '',
value: false,
value: '#fff',
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYTop',
label: '数值字号',
name: 'fontSizeYTop',
required: false,
placeholder: '',
value: ''
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYTop',
type: 'el-switch',
label: '缩放',
name: 'scaleYTop',
required: false,
placeholder: '',
value: '#fff',
value: false,
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYTop',
label: '均分',
name: 'splitNumberYTop',
required: false,
placeholder: '',
value: 14,
value: ''
},
{
type: 'el-switch',
label: '刻度线',
label: '刻度线显示',
name: 'tickLineYTop',
require: false,
placeholder: '',
@ -399,7 +476,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: 'y轴线',
label: '坐标轴显示',
name: 'lineYTop',
require: false,
placeholder: '',
@ -407,7 +484,7 @@ export const widgetLineCompare = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorYTop',
required: false,
placeholder: '',
@ -415,7 +492,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: '分割线',
label: '分割线显示',
name: 'splitLineYTop',
require: false,
placeholder: '',
@ -432,7 +509,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLinefontSizeYTop',
name: 'splitLineFontWidthYTop',
required: false,
placeholder: '',
value: 1,
@ -467,47 +544,47 @@ export const widgetLineCompare = {
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeYBottom',
label: '坐标字号',
name: 'nameFontSizeYBottom',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '缩放',
name: 'scaleYBottom',
type: 'vue-color',
label: '数值颜色',
name: 'colorYBottom',
required: false,
placeholder: '',
value: false,
value: '#fff',
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYBottom',
label: '数值字号',
name: 'fontSizeYBottom',
required: false,
placeholder: '',
value: ''
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYBottom',
type: 'el-switch',
label: '缩放',
name: 'scaleYBottom',
required: false,
placeholder: '',
value: '#fff',
value: false,
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYBottom',
label: '均分',
name: 'splitNumberYBottom',
required: false,
placeholder: '',
value: 14,
value: ''
},
{
type: 'el-switch',
label: '刻度线',
label: '刻度线显示',
name: 'tickLineYBottom',
require: false,
placeholder: '',
@ -515,7 +592,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: 'y轴线',
label: '坐标轴显示',
name: 'lineYBottom',
require: false,
placeholder: '',
@ -523,7 +600,7 @@ export const widgetLineCompare = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorYBottom',
required: false,
placeholder: '',
@ -531,7 +608,7 @@ export const widgetLineCompare = {
},
{
type: 'el-switch',
label: '分割线',
label: '分割线显示',
name: 'splitLineYBottom',
require: false,
placeholder: '',
@ -548,7 +625,7 @@ export const widgetLineCompare = {
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLinefontSizeYBottom',
name: 'splitLineFontWidthYBottom',
required: false,
placeholder: '',
value: 1,
@ -568,7 +645,7 @@ export const widgetLineCompare = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
@ -604,7 +681,7 @@ export const widgetLineCompare = {
{
type: 'el-switch',
label: '显示',
name: 'tipShow',
name: 'tipsShow',
required: false,
placeholder: '',
value: true,
@ -612,7 +689,7 @@ export const widgetLineCompare = {
{
type: 'el-select',
label: '类型',
name: 'tipType',
name: 'tipsType',
required: false,
placeholder: '',
selectOptions: [
@ -624,9 +701,10 @@ export const widgetLineCompare = {
{
type: 'vue-color',
label: '颜色',
name: 'tipColor',
name: 'tipsColor',
required: false,
placeholder: '#e68b55',
placeholder: '',
value: '#00FEFF'
},
],
},
@ -768,7 +846,7 @@ export const widgetLineCompare = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
value: 500,
},
{
type: 'el-input-number',
@ -776,7 +854,7 @@ export const widgetLineCompare = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 250,
},
],
}

@ -1,16 +1,17 @@
/*
* @Descripttion: 柱线图
* @Descripttion: 折线堆叠图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:26:48
* @Date: 2021-08-29 07:38:17
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:11:57
* @LastEditTime: 2021-09-28 14:16:28
*/
export const widgetBarlinechart = {
code: 'widget-barlinechart',
type: 'chart',
label: '柱线图',
icon: 'iconzhuxiantu',
export const widgetLineStack = {
code: 'widgetLineStackChart',
type: 'lineChart',
tabName: '折线图',
label: '折线堆叠图',
icon: 'iconduidietu',
options: {
// 配置
setup: [
@ -20,7 +21,15 @@ export const widgetBarlinechart = {
name: 'layerName',
required: false,
placeholder: '',
value: '柱线图',
value: '折线堆叠图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
@ -50,6 +59,18 @@ export const widgetBarlinechart = {
placeholder: '',
value: 5,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
@ -80,36 +101,7 @@ export const widgetBarlinechart = {
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
value: 4,
},
],
},
@ -118,19 +110,19 @@ export const widgetBarlinechart = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
value: '',
},
{
type: 'vue-color',
@ -138,7 +130,15 @@ export const widgetBarlinechart = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -155,12 +155,17 @@ export const widgetBarlinechart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -173,11 +178,11 @@ export const widgetBarlinechart = {
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'left'
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -189,7 +194,15 @@ export const widgetBarlinechart = {
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -206,12 +219,17 @@ export const widgetBarlinechart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
@ -231,13 +249,13 @@ export const widgetBarlinechart = {
label: '图例名称',
name: 'legendName',
required: false,
placeholder: '',
placeholder: '多值以' | '隔开',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
@ -245,7 +263,7 @@ export const widgetBarlinechart = {
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
@ -253,7 +271,7 @@ export const widgetBarlinechart = {
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
name: 'legendWidth',
required: false,
placeholder: '',
value: 12,
@ -311,7 +329,7 @@ export const widgetBarlinechart = {
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
name: 'nameX',
required: false,
placeholder: '',
value: ''
@ -322,20 +340,20 @@ export const widgetBarlinechart = {
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -348,14 +366,6 @@ export const widgetBarlinechart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
@ -364,9 +374,17 @@ export const widgetBarlinechart = {
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
@ -374,12 +392,20 @@ export const widgetBarlinechart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -395,7 +421,15 @@ export const widgetBarlinechart = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -403,103 +437,79 @@ export const widgetBarlinechart = {
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYLeft',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYLeft',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYLeft',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeYLeft',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '左均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '右显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '右坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '右坐标名颜色',
name: 'nameColorYRight',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '右坐标字号',
name: 'namefontSizeYRight',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '右均分',
name: 'splitNumberRight',
required: false,
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: ''
value: false,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
type: 'el-input-number',
label: '均分',
name: 'splitNumberY',
required: false,
placeholder: '',
value: '#fff',
value: ''
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
type: 'el-slider',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 14,
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalY',
required: false,
placeholder: '',
@ -507,88 +517,61 @@ export const widgetBarlinechart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '折线数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
label: '坐标轴宽度',
name: 'lineWidthY',
required: false,
placeholder: '',
value: 5
value: 1,
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeLine',
required: false,
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: 14
value: false,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorLine',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff'
value: '#fff',
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightLine',
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthY',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
value: 1,
},
],
},
{
name: '柱体数值设定',
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowBar',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSizeBar',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
@ -596,7 +579,7 @@ export const widgetBarlinechart = {
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColorBar',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
@ -604,7 +587,7 @@ export const widgetBarlinechart = {
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeightBar',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
@ -622,19 +605,19 @@ export const widgetBarlinechart = {
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipFontSize',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 12
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#e68b55'
value: '#00FEFF'
},
],
},
@ -680,7 +663,7 @@ export const widgetBarlinechart = {
label: '',
name: 'customColor',
required: false,
value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
},
],
},
@ -724,19 +707,12 @@ export const widgetBarlinechart = {
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis": "1月", "bar": 2.6, "line": 2},
{"axis": "2月", "bar": 5.9, "line": 2.2},
{"axis": "3月", "bar": 9, "line": 3.3},
{"axis": "4月", "bar": 26.4, "line": 4.5},
{"axis": "5月", "bar": 28.7, "line": 6.3},
{"axis": "6月", "bar": 70.7, "line": 10.2},
{"axis": "7月", "bar": 175.6, "line": 20.3},
{"axis": "8月", "bar": 182.2, "line": 23.4},
{"axis": "9月", "bar": 48.7, "line": 23},
{"axis": "10月", "bar": 18.8, "line": 16.5},
{"axis": "11月", "bar": 6, "line": 12},
{"axis": "12月", "bar": 2.3, "line": 6.2},
]
{ "axis": "2021-07-25", "name": "A", "data": "12" },
{ "axis": "2021-07-25", "name": "B", "data": "20" },
{ "axis": "2021-07-26", "name": "B", "data": "5" },
{ "axis": "2021-07-27", "name": "A", "data": "15" },
{ "axis": "2021-07-27", "name": "B", "data": "30" },
],
},
{
type: 'dycustComponents',
@ -745,9 +721,10 @@ export const widgetBarlinechart = {
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标

@ -8,7 +8,8 @@
*/
export const widgetLinechart = {
code: 'widget-linechart',
type: 'chart',
type: 'lineChart',
tabName: '折线图',
label: '折线图',
icon: 'icontubiaozhexiantu',
options: {
@ -50,6 +51,18 @@ export const widgetLinechart = {
placeholder: '',
value: 10,
},
{
type: 'el-select',
label: '点样式',
name: 'symbol',
required: false,
placeholder: '',
selectOptions: [
{code: 'circle', name: '实心点'},
{code: 'emptyCircle', name: '空心点'},
],
value: 'circle'
},
{
type: 'el-switch',
label: '平滑曲线',
@ -89,15 +102,15 @@ export const widgetLinechart = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: false
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
@ -109,7 +122,15 @@ export const widgetLinechart = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -126,12 +147,17 @@ export const widgetLinechart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
{
type: 'el-select',
@ -148,7 +174,7 @@ export const widgetLinechart = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -160,7 +186,15 @@ export const widgetLinechart = {
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -177,12 +211,17 @@ export const widgetLinechart = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
@ -200,7 +239,7 @@ export const widgetLinechart = {
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
name: 'nameX',
required: false,
placeholder: '',
value: ''
@ -211,20 +250,20 @@ export const widgetLinechart = {
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标字号',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
value: 14
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
name: 'colorX',
required: false,
placeholder: '',
value: '#fff',
@ -237,14 +276,6 @@ export const widgetLinechart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
@ -253,9 +284,17 @@ export const widgetLinechart = {
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalX',
required: false,
placeholder: '',
@ -263,12 +302,20 @@ export const widgetLinechart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthX',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -284,7 +331,15 @@ export const widgetLinechart = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthX',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -316,8 +371,8 @@ export const widgetLinechart = {
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeY',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
@ -338,14 +393,6 @@ export const widgetLinechart = {
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
@ -357,14 +404,22 @@ export const widgetLinechart = {
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
name: 'splitNumberY',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '轴反转',
label: '坐标轴反转',
name: 'reversalY',
required: false,
placeholder: '',
@ -372,12 +427,20 @@ export const widgetLinechart = {
},
{
type: 'vue-color',
label: '轴颜色',
label: '坐标轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标轴宽度',
name: 'lineWidthY',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '分割线显示',
@ -393,7 +456,15 @@ export const widgetLinechart = {
required: false,
placeholder: '',
value: '#fff',
}
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLineWidthY',
required: false,
placeholder: '',
value: 1,
},
],
},
{
@ -409,7 +480,7 @@ export const widgetLinechart = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
@ -444,7 +515,7 @@ export const widgetLinechart = {
list: [
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
@ -453,10 +524,10 @@ export const widgetLinechart = {
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
name: 'tipsColor',
required: false,
placeholder: '',
value: ''
value: '#00FEFF'
},
],
},

@ -3,12 +3,13 @@
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:35:32
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:10:01
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:41:02
*/
export const widgetAirbubbleMap = {
code: 'widgetAirBubbleMap',
type: 'chart',
type: 'mapChart',
tabName: '中国地图',
label: '气泡地图',
icon: 'iconzhongguoditu',
options: {
@ -36,19 +37,19 @@ export const widgetAirbubbleMap = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
value: '',
},
{
type: 'vue-color',
@ -56,7 +57,15 @@ export const widgetAirbubbleMap = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -73,12 +82,17 @@ export const widgetAirbubbleMap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -91,11 +105,11 @@ export const widgetAirbubbleMap = {
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'left'
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -107,7 +121,15 @@ export const widgetAirbubbleMap = {
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -124,12 +146,17 @@ export const widgetAirbubbleMap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 12
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},

@ -8,7 +8,8 @@
*/
export const widgetLineMap = {
code: 'widgetLineMap',
type: 'chart',
type: 'mapChart',
tabName: '中国地图',
label: '路线地图',
icon: 'iconzhongguoditu',
options: {
@ -35,19 +36,19 @@ export const widgetLineMap = {
list: [
{
type: 'el-switch',
label: '标题',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
value: true,
},
{
type: 'el-input-text',
label: '标题',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
value: '',
},
{
type: 'vue-color',
@ -55,7 +56,15 @@ export const widgetLineMap = {
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -72,12 +81,17 @@ export const widgetLineMap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
value: 20
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-select',
@ -94,7 +108,7 @@ export const widgetLineMap = {
},
{
type: 'el-input-text',
label: '副标题',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
@ -106,7 +120,15 @@ export const widgetLineMap = {
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
@ -123,12 +145,17 @@ export const widgetLineMap = {
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
value: 12
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
@ -161,7 +188,7 @@ export const widgetLineMap = {
},
{
type: 'el-input-number',
label: '文字大小',
label: '文字字号',
name: 'sourceFontTextSize',
required: false,
placeholder: '',

@ -8,7 +8,8 @@
*/
export const widgetGauge = {
code: 'widget-gauge',
type: 'chart',
type: 'percent',
tabName: '百分比',
label: '仪表盘',
icon: 'iconyibiaopan',
options: {

@ -8,7 +8,8 @@
*/
export const widgetPiePercentage = {
code: 'widgetPiePercentageChart',
type: 'chart',
type: 'percent',
tabName: '百分比',
label: '百分比图',
icon: 'iconbaifenbi',
options: {

@ -0,0 +1,431 @@
/*
* @Descripttion: 南丁格尔玫瑰图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:32:40
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:41:37
*/
export const widgetPieNightingale = {
code: 'WidgetPieNightingaleRoseArea',
type: 'pieChart',
tabName: '饼图',
label: '南丁格尔玫瑰图',
icon: 'iconnandinggeermeiguitu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '南丁格尔玫瑰图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '饼图模式',
name: 'nightingleRosetype',
required: false,
placeholder: '',
selectOptions: [
{ code: 'area', name: '面积模式' },
{ code: 'radius', name: '半径模式' },
],
value: 'area'
},
[
{
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: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '顶部' },
{ code: 'bottom', name: '底部' },
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{ code: 'vertical', name: '竖排' },
{ code: 'horizontal', name: '横排' },
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{ color: '#FF801C' }, { color: '#F5FF46' }, { color: '#00FE65' }, { color: '#00FEFF' }, { color: '#ffa800' }]
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{ "value": 1048, "name": "搜索引擎" }, { "value": 735, "name": "直接访问" }, { "value": 580, "name": "邮件营销" }, { "value": 484, "name": "联盟广告" }, { "value": 300, "name": "视频广告" }],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_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: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -0,0 +1,431 @@
/*
* @Descripttion: 饼图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:28:20
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:19:19
*/
export const widgetPiechart = {
code: 'widget-piechart',
type: 'pieChart',
tabName: '饼图',
label: '饼图',
icon: 'iconicon_tubiao_bingtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '饼图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '饼图样式',
name: 'piechartStyle',
required: false,
placeholder: '',
selectOptions: [
{ code: 'shixin', name: '实心饼图' },
{ code: 'kongxin', name: '空心饼图' },
],
value: 'shixin'
},
[
{
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: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-text',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '顶部' },
{ code: 'bottom', name: '底部' },
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{ code: 'vertical', name: '竖排' },
{ code: 'horizontal', name: '横排' },
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{ "value": 1048, "name": "搜索引擎" }, { "value": 735, "name": "直接访问" }, { "value": 580, "name": "邮件营销" }, { "value": 484, "name": "联盟广告" }, { "value": 300, "name": "视频广告" }]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -0,0 +1,578 @@
/**
* @Author: foming
*/
export const widgetRadar = {
code: 'widget-radar',
type: 'radarCharts',
tabName: '雷达图',
label: '雷达图',
icon: 'iconleidatu',
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-select',
label: '雷达样式',
name: 'radarShape',
required: false,
placeholder: '',
selectOptions: [
{code: 'line', name: '线型'},
{code: 'circle', name: '圆型'},
],
value: 'line'
},
{
type: 'el-input-number',
label: '均分数量',
name: 'splitNumber',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-switch',
label: '坐标轴显示',
name: 'axisLineShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '坐标轴颜色',
name: 'axisLineColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-slider',
label: '坐标轴透明度',
name: 'axisLineOpacity',
required: false,
placeholder: '',
value: 50
},
{
type: 'el-switch',
label: '分割线显示',
name: 'splitLineShow',
required: false,
placeholder: '',
value: true
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-slider',
label: '分割线透明度',
name: 'splitLineOpacity',
required: false,
placeholder: '',
value: 50
},
],
},
{
name: '顶点设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'axisNameShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '名称大小',
name: 'axisNameFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'axisNameColor',
required: false,
placeholder: '',
value: '#87cefa',
},
{
type: 'el-select',
label: '字体粗细',
name: 'axisNamFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'axisNamFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
{
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: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
value: 10
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '点大小',
name: 'symbolSize',
required: false,
placeholder: '',
value: 5
},
{
type: 'el-select',
label: '线型效果',
name: 'lineType',
required: false,
placeholder: '',
selectOptions: [
{code: 'solid', name: '实线'},
{code: 'dashed', name: '线型虚线'},
{code: 'dotted', name: '点型虚线'},
],
value: 'solid'
},
{
type: 'el-slider',
label: '透明度',
name: 'opacity',
required: false,
placeholder: '',
value: 50
},
],
},
{
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'}],
},
],
},
],
{
type: 'dynamic-add-radar',
label: '',
name: 'dynamicAddRadar',
required: false,
placeholder: '',
value: [
{name: 'SA', key: 'Sales', max: 6500},
{name: 'Admin', key: 'Admin', max: 16000},
{name: 'Information', key: 'Information', max: 30000},
{name: 'Customer', key: 'Customer', max: 38000},
{name: 'Develop', key: 'Develop', max: 52000},
]
}
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{name: '2016', Sales: 4200, Admin: 3000, Information: 20000, Customer: 35000, Develop: 50000},
{name: '2017', Sales: 5000, Admin: 14000, Information: 28000, Customer: 26000, Develop: 42000},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-radar',
dictKey: 'RADAR_PROPERTIES',
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
]
}
}

@ -0,0 +1,158 @@
/*
* @Descripttion: 超链接文本
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:03:58
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:14:21
*/
export const widgetHref = {
code: 'widget-href',
type: 'text',
tabName: '文本栏',
label: '超链接',
icon: 'iconchaolianjie',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '超链接',
},
{
type: 'el-input-text',
label: '文本内容',
name: 'text',
required: false,
placeholder: '',
value: '超链接',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
value: '26',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
required: false,
placeholder: '',
value: '#FAD400',
},
{
type: 'el-input-number',
label: '字体间距',
name: 'letterSpacing',
required: false,
placeholder: '',
value: '0',
},
{
type: 'vue-color',
label: '字体背景',
name: 'background',
required: false,
placeholder: '',
value: 'rgba(115,170,229,.5)',
},
{
type: 'el-select',
label: '文字粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
],
value: 'normal'
},
{
type: 'el-select',
label: '对齐方式',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-radio-group',
label: '跳转方式',
name: 'jumpMode',
required: false,
placeholder: '',
selectOptions: [
{
code: 'self',
name: '本窗口',
},
{
code: 'other',
name: '新窗口',
},
],
value: 'self',
},
{
type: 'el-input-text',
label: '超链地址',
name: 'linkAdress',
required: false,
placeholder: '',
value: 'http://www.baidu.com',
},
],
// 数据
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: 100,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 40,
},
],
}
}

@ -0,0 +1,73 @@
/*
* @Descripttion: iframe json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:17:55
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:14:39
*/
export const widgetIframe = {
code: 'widget-iframe',
type: 'text',
tabName: '文本栏',
label: '内联框架',
icon: 'iconkuangjia',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: 'iframe',
},
{
type: 'el-input-text',
label: '地址',
name: 'iframeAdress',
required: false,
placeholder: '',
value: 'https://ajreport.beliefteam.cn/index.html',
},
],
// 数据
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: 300,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -8,7 +8,8 @@
*/
export const widgetImage = {
code: 'widget-image',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '图片',
icon: 'icontupian',
options: {

@ -8,7 +8,8 @@
*/
export const widgetMarquee = {
code: 'widget-marquee',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '滚动文本',
icon: 'iconhengxiangwenzi',
options: {
@ -32,7 +33,7 @@ export const widgetMarquee = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',

@ -8,7 +8,8 @@
*/
export const widgetSliders = {
code: 'widget-slider',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '轮播图片',
icon: 'slider',
options: {

@ -8,7 +8,8 @@
*/
export const widgetTable = {
code: 'widget-table',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '表格',
icon: 'iconbiaoge',
options: {
@ -36,7 +37,7 @@ export const widgetTable = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',
@ -262,7 +263,7 @@ export const widgetTable = {
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
dictKey: 'TEXT_PROPERTIES',
value: '',
},
],

@ -8,7 +8,8 @@
*/
export const widgetText = {
code: 'widget-text',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '文本',
icon: 'iconziyuan',
options: {
@ -32,7 +33,7 @@ export const widgetText = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',

@ -8,7 +8,8 @@
*/
export const widgetTime = {
code: 'widget-time',
type: 'html',
type: 'text',
tabName: '文本栏',
label: '当前时间',
icon: 'iconshijian',
options: {
@ -52,7 +53,7 @@ export const widgetTime = {
},
{
type: 'el-input-number',
label: '字体大小',
label: '字体字号',
name: 'fontSize',
required: false,
placeholder: '',

@ -0,0 +1,73 @@
/*
* @Descripttion: 视频json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:10:22
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:42:46
*/
export const widgetVideo = {
code: 'widget-video',
type: 'text',
tabName: '文本栏',
label: '视频',
icon: 'iconshipin',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: 'video',
},
{
type: 'el-input-text',
label: '地址',
name: 'videoAdress',
required: false,
placeholder: '',
value: 'https://www.w3school.com.cn//i/movie.ogg',
},
],
// 数据
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: 300,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -1,658 +0,0 @@
/*
* @Descripttion: 柱状对比图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:39:35
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:09:58
*/
export const widgetBarCompare = {
code: 'widgetBarCompareChart',
type: 'chart',
label: '柱状对比图',
icon: 'iconduibitupu',
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-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
],
},
{
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: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '左X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideXLeft',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'XcolorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: 'X轴线',
name: 'xLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorXLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '竖分割线',
name: 'SplitLineLeft',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'SplitLineColorLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeLeft',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线',
name: 'frameLineLeft',
require: false,
placeholder: '',
value: false,
},
],
},
{
name: '右X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideXRight',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'XcolorRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeXRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: 'X轴线',
name: 'xLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorXRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '竖分割线',
name: 'SplitLineRight',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'SplitLineColorRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'SplitLinefontSizeRight',
required: false,
placeholder: '',
value: 1,
},
{
type: 'el-switch',
label: '边框线',
name: 'frameLineRight',
require: false,
placeholder: '',
value: false,
},
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideY',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '数值对齐',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: 'Y轴线',
name: 'lineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左右边距(像素)',
name: 'marginLeftRight',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 40,
},
{
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#36c5e7'}, {color: '#e68b55'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis":"07-25","name":"success","data":"2"},
{"axis":"07-25","name":"fail","data":"10"},
{"axis":"07-26","name":"success","data":"5"},
{"axis":"07-26","name":"fail","data":"20"},
{"axis":"07-27","name":"success","data":"15"},
{"axis":"07-27","name":"fail","data":"30"},
{"axis":"07-28","name":"success","data":"10"},
{"axis":"07-28","name":"fail","data":"12"},
{"axis":"07-29","name":"success","data":"9"},
{"axis":"07-29","name":"fail","data":"16"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -1,658 +0,0 @@
/*
* @Descripttion: 柱状堆叠图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:37:09
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:11:09
*/
export const widgetBarStack = {
code: 'widgetBarStackChart',
type: 'chart',
label: '柱状堆叠图',
icon: 'iconbianzu23',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱状堆叠图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '堆叠样式',
name: 'stackStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'leftRight', name: '左右堆叠'},
{code: 'upDown', name: '上下堆叠'},
],
value: 'leftRight'
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
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: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'X轴别名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '别名字号',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'Y轴别名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'NameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '别名字号',
name: 'NameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis":"2021-07-25","name":"A","data":"12"},
{"axis":"2021-07-25","name":"B","data":"20"},
{"axis":"2021-07-26","name":"B","data":"5"},
{"axis":"2021-07-27","name":"A","data":"15"},
{"axis":"2021-07-27","name":"B","data":"30"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -1,157 +0,0 @@
/*
* @Descripttion: 超链接文本
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:03:58
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:14:21
*/
export const widgetHref = {
code: 'widget-href',
type: 'html',
label: '超链接',
icon: 'iconchaolianjie',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '超链接',
},
{
type: 'el-input-text',
label: '文本内容',
name: 'text',
required: false,
placeholder: '',
value: '超链接',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '26',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
required: false,
placeholder: '',
value: '#FAD400',
},
{
type: 'el-input-number',
label: '字体间距',
name: 'letterSpacing',
required: false,
placeholder: '',
value: '0',
},
{
type: 'vue-color',
label: '字体背景',
name: 'background',
required: false,
placeholder: '',
value: 'rgba(115,170,229,.5)',
},
{
type: 'el-select',
label: '文字粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '对齐方式',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-radio-group',
label: '跳转方式',
name: 'jumpMode',
required: false,
placeholder: '',
selectOptions: [
{
code: 'self',
name: '本窗口',
},
{
code: 'other',
name: '新窗口',
},
],
value: 'self',
},
{
type: 'el-input-text',
label: '超链地址',
name: 'linkAdress',
required: false,
placeholder: '',
value: 'http://www.baidu.com',
},
],
// 数据
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: 100,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 40,
},
],
}
}

@ -1,72 +0,0 @@
/*
* @Descripttion: iframe json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:17:55
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:14:39
*/
export const widgetIframe = {
code: 'widget-iframe',
type: 'html',
label: '内联框架',
icon: 'iconkuangjia',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: 'iframe',
},
{
type: 'el-input-text',
label: '地址',
name: 'iframeAdress',
required: false,
placeholder: '',
value: 'https://ajreport.beliefteam.cn/index.html',
},
],
// 数据
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: 300,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -1,678 +0,0 @@
/*
* @Descripttion: 折线堆叠图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:38:17
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:16:28
*/
export const widgetLineStack = {
code: 'widgetLineStackChart',
type: 'chart',
label: '折线堆叠图',
icon: 'iconduidietu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '折线堆叠图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: '图例操作',
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: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'X轴别名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'xNameColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '别名字号',
name: 'xNameFontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleX',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '文字间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '文字颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: 'Y轴别名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '别名颜色',
name: 'NameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '别名字号',
name: 'NameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleY',
required: false,
placeholder: '',
value: 0
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '文字字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}, {
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"axis":"2021-07-25","name":"A","data":"12"},
{"axis":"2021-07-25","name":"B","data":"20"},
{"axis":"2021-07-26","name":"B","data":"5"},
{"axis":"2021-07-27","name":"A","data":"15"},
{"axis":"2021-07-27","name":"B","data":"30"},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 250,
},
],
}
}

@ -1,403 +0,0 @@
/*
* @Descripttion: 南丁格尔玫瑰图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:32:40
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:18:05
*/
export const widgetPieNightingale = {
code: 'WidgetPieNightingaleRoseArea',
type: 'chart',
label: '南丁格尔玫瑰图',
icon: 'iconnandinggeermeiguitu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '南丁格尔玫瑰图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '饼图模式',
name: 'nightingleRosetype',
required: false,
placeholder: '',
selectOptions: [
{code: 'area', name: '面积模式'},
{code: 'radius', name: '半径模式'},
],
value: 'area'
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#FF801C'}, {color: '#F5FF46'}, {color: '#00FE65'}, {color: '#00FEFF'}, {color: '#ffa800'}]
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_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: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -1,403 +0,0 @@
/*
* @Descripttion: 饼图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:28:20
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:19:19
*/
export const widgetPiechart = {
code: 'widget-piechart',
type: 'chart',
label: '饼图',
icon: 'iconicon_tubiao_bingtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '饼图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '饼图样式',
name: 'piechartStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'shixin', name: '实心饼图'},
{code: 'kongxin', name: '空心饼图'},
],
value: 'shixin'
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '数值',
name: 'numberValue',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '百分比',
name: 'percentage',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-text',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -1,72 +0,0 @@
/*
* @Descripttion: 视频json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:10:22
* @LastEditors: qianlishi
* @LastEditTime: 2021-09-28 14:20:47
*/
export const widgetVideo = {
code: 'widget-video',
type: 'html',
label: '视频',
icon: 'iconshipin',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: 'video',
},
{
type: 'el-input-text',
label: '地址',
name: 'videoAdress',
required: false,
placeholder: '',
value: 'https://www.w3school.com.cn//i/movie.ogg',
},
],
// 数据
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: 300,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
},
],
}
}

@ -1,416 +0,0 @@
export const widgetWordCloud = {
code: 'widgetWordCloud',
type: 'chart',
label: '词云图',
icon: 'iconciyuntu',
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: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
{
name: '词云范围',
list: [
{
type: 'el-input-number',
label: '最大范围',
name: 'maxRangeSize',
required: false,
placeholder: '',
value: 25
},
{
type: 'el-input-number',
label: '最小范围',
name: 'minRangeSize',
required: false,
placeholder: '',
value: 2
},
],
},
{
name: '词云角度',
list: [
{
type: 'el-input-number',
label: '最大角度',
name: 'maxRotationRange',
required: false,
placeholder: '',
value: 90
},
{
type: 'el-input-number',
label: '最小角度',
name: 'minRotationRange',
required: false,
placeholder: '',
value: -45
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
],
],
// 数据
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: 60000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{name: "占道", value: 284},
{name: "水质", value: 71},
{name: "无水", value: 71},
{name: "停供", value: 21},
{name: "停气", value: 11},
{name: "占道", value: 11},
{name: "Nancy", value: 520},
{name: "Jayfee", value: 666},
{name: "生活资源", value: 999},
{name: "供热管理", value: 888},
{name: "供气质量", value: 777},
{name: "社会保障", value: 407},
{name: "交通运输", value: 516},
{name: "城市交通", value: 515},
{name: "环境保护", value: 483},
{name: "城乡建设", value: 449},
{name: "公共安全", value: 406},
{name: "供热管理", value: 375},
{name: "市容环卫", value: 355},
{name: "粉尘污染", value: 335},
{name: "噪声污染", value: 324},
{name: "医疗卫生", value: 284},
{name: "供热发展", value: 254},
{name: "房地产管理", value: 462},
{name: "生活噪音", value: 253},
{name: "城市供电", value: 223},
{name: "大气污染", value: 223},
{name: "房屋安全", value: 223},
{name: "文化活动", value: 223},
{name: "拆迁管理", value: 223},
{name: "公共设施", value: 223},
{name: "供气质量", value: 223},
{name: "供电管理", value: 223},
{name: "燃气管理", value: 152},
{name: "教育管理", value: 152},
{name: "医疗纠纷", value: 152},
{name: "执法监督", value: 152},
{name: "设备安全", value: 152},
{name: "政务建设", value: 152},
{name: "宏观经济", value: 152},
{name: "教育管理", value: 112},
{name: "社会保障", value: 112},
{name: "分类列表", value: 112},
{name: "农业生产", value: 112},
{name: "物业服务", value: 92},
{name: "物业管理", value: 92},
{name: "低保管理", value: 92},
{name: "执法争议", value: 72},
{name: "占道堆放", value: 71},
{name: "地上设施", value: 71},
{name: "主网原因", value: 71},
{name: "集中供热", value: 71},
{name: "客运管理", value: 71},
{name: "治安案件", value: 71},
{name: "群众健身", value: 41},
{name: "市场收费", value: 41},
{name: "生产资金", value: 41},
{name: "生产噪声", value: 41},
{name: "农村低保", value: 41},
{name: "劳动争议", value: 41},
{name: "医疗事故", value: 21},
{name: "基础教育", value: 21},
{name: "职业教育", value: 21},
{name: "拆迁补偿", value: 21},
{name: "设施维护", value: 21},
{name: "市场外溢", value: 11},
{name: "占道经营", value: 11},
{name: "树木管理", value: 11},
{name: "供气质量", value: 11},
{name: "燃气管理", value: 11},
{name: "市容环卫", value: 11},
{name: "新闻传媒", value: 11},
{name: "人才招聘", value: 11},
{name: "市场环境", value: 11},
{name: "城市交通", value: 11},
{name: "物业服务", value: 11},
{name: "物业管理", value: 11},
{name: "园林绿化", value: 11},
{name: "有线电视", value: 11},
{name: "社会治安", value: 11},
{name: "林业资源", value: 11},
{name: "体育活动", value: 11},
{name: "低保管理", value: 11},
{name: "劳动争议", value: 11},
{name: "粉煤灰污染", value: 284},
{name: "人行道管理", value: 71},
{name: "身份证管理", value: 71},
{name: "房地产开发", value: 11},
{name: "经营性收费", value: 11},
{name: "一次供水问题", value: 11},
{name: "工业粉尘污染", value: 71},
{name: "工业排放污染", value: 41},
{name: "破坏森林资源", value: 41},
{name: "生活用水管理", value: 688},
{name: "一次供水问题", value: 588},
{name: "公交运输管理", value: 386},
{name: "自然资源管理", value: 355},
{name: "土地资源管理", value: 304},
{name: "生活用水管理", value: 112},
{name: "供热单位影响", value: 253},
{name: "二次供水问题", value: 112},
{name: "城市公共设施", value: 92},
{name: "拆迁政策咨询", value: 92},
{name: "县区、开发区", value: 152},
{name: "文娱市场管理", value: 72},
{name: "商业烟尘污染", value: 72},
{name: "供热单位影响", value: 71},
{name: "压力容器安全", value: 71},
{name: "劳动合同争议", value: 41},
{name: "物业资质管理", value: 21},
{name: "农村基础设施", value: 11},
{name: "行政事业收费", value: 11},
{name: "房屋配套问题", value: 11},
{name: "公交运输管理", value: 11},
{name: "社会福利及事务", value: 11},
{name: "食品安全与卫生", value: 11},
{name: "物业服务与管理", value: 112},
{name: "文体与教育管理", value: 406},
{name: "社会保障与福利", value: 429},
{name: "出租车运营管理", value: 385},
{name: "物业服务与管理", value: 304},
{name: "房屋质量与安全", value: 223},
{name: "劳动报酬与福利", value: 41},
{name: "食品安全与卫生", value: 11},
{name: "房屋与图纸不符", value: 11},
{name: "其他行政事业收费", value: 11},
{name: "农村土地规划管理", value: 254},
{name: "社会保障保险管理", value: 92},
{name: "城市交通秩序管理", value: 72},
{name: "户籍管理及身份证", value: 11},
{name: "公路(水路)交通", value: 11},
{name: "国有公交(大巴)管理", value: 71},
{name: "有线电视安装及调试维护", value: 11},
{name: "市政府工作部门(含部门管理机构、直属单位)", value: 11},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_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: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

@ -0,0 +1,443 @@
export const widgetWordCloud = {
code: 'widgetWordCloud',
type: 'wordCloud',
tabName: '词云图',
label: '词云图',
icon: 'iconciyuntu',
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-input-number',
label: '最大范围',
name: 'maxRangeSize',
required: false,
placeholder: '',
value: 25
},
{
type: 'el-input-number',
label: '最小范围',
name: 'minRangeSize',
required: false,
placeholder: '',
value: 2
},
],
},
{
name: '词云角度',
list: [
{
type: 'el-input-number',
label: '最大角度',
name: 'maxRotationRange',
required: false,
placeholder: '',
value: 90
},
{
type: 'el-input-number',
label: '最小角度',
name: 'minRotationRange',
required: false,
placeholder: '',
value: -45
},
],
},
{
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: [
{
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: 60000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{ name: "占道", value: 284 },
{ name: "水质", value: 71 },
{ name: "无水", value: 71 },
{ name: "停供", value: 21 },
{ name: "停气", value: 11 },
{ name: "占道", value: 11 },
{ name: "Nancy", value: 520 },
{ name: "Jayfee", value: 666 },
{ name: "生活资源", value: 999 },
{ name: "供热管理", value: 888 },
{ name: "供气质量", value: 777 },
{ name: "社会保障", value: 407 },
{ name: "交通运输", value: 516 },
{ name: "城市交通", value: 515 },
{ name: "环境保护", value: 483 },
{ name: "城乡建设", value: 449 },
{ name: "公共安全", value: 406 },
{ name: "供热管理", value: 375 },
{ name: "市容环卫", value: 355 },
{ name: "粉尘污染", value: 335 },
{ name: "噪声污染", value: 324 },
{ name: "医疗卫生", value: 284 },
{ name: "供热发展", value: 254 },
{ name: "房地产管理", value: 462 },
{ name: "生活噪音", value: 253 },
{ name: "城市供电", value: 223 },
{ name: "大气污染", value: 223 },
{ name: "房屋安全", value: 223 },
{ name: "文化活动", value: 223 },
{ name: "拆迁管理", value: 223 },
{ name: "公共设施", value: 223 },
{ name: "供气质量", value: 223 },
{ name: "供电管理", value: 223 },
{ name: "燃气管理", value: 152 },
{ name: "教育管理", value: 152 },
{ name: "医疗纠纷", value: 152 },
{ name: "执法监督", value: 152 },
{ name: "设备安全", value: 152 },
{ name: "政务建设", value: 152 },
{ name: "宏观经济", value: 152 },
{ name: "教育管理", value: 112 },
{ name: "社会保障", value: 112 },
{ name: "分类列表", value: 112 },
{ name: "农业生产", value: 112 },
{ name: "物业服务", value: 92 },
{ name: "物业管理", value: 92 },
{ name: "低保管理", value: 92 },
{ name: "执法争议", value: 72 },
{ name: "占道堆放", value: 71 },
{ name: "地上设施", value: 71 },
{ name: "主网原因", value: 71 },
{ name: "集中供热", value: 71 },
{ name: "客运管理", value: 71 },
{ name: "治安案件", value: 71 },
{ name: "群众健身", value: 41 },
{ name: "市场收费", value: 41 },
{ name: "生产资金", value: 41 },
{ name: "生产噪声", value: 41 },
{ name: "农村低保", value: 41 },
{ name: "劳动争议", value: 41 },
{ name: "医疗事故", value: 21 },
{ name: "基础教育", value: 21 },
{ name: "职业教育", value: 21 },
{ name: "拆迁补偿", value: 21 },
{ name: "设施维护", value: 21 },
{ name: "市场外溢", value: 11 },
{ name: "占道经营", value: 11 },
{ name: "树木管理", value: 11 },
{ name: "供气质量", value: 11 },
{ name: "燃气管理", value: 11 },
{ name: "市容环卫", value: 11 },
{ name: "新闻传媒", value: 11 },
{ name: "人才招聘", value: 11 },
{ name: "市场环境", value: 11 },
{ name: "城市交通", value: 11 },
{ name: "物业服务", value: 11 },
{ name: "物业管理", value: 11 },
{ name: "园林绿化", value: 11 },
{ name: "有线电视", value: 11 },
{ name: "社会治安", value: 11 },
{ name: "林业资源", value: 11 },
{ name: "体育活动", value: 11 },
{ name: "低保管理", value: 11 },
{ name: "劳动争议", value: 11 },
{ name: "粉煤灰污染", value: 284 },
{ name: "人行道管理", value: 71 },
{ name: "身份证管理", value: 71 },
{ name: "房地产开发", value: 11 },
{ name: "经营性收费", value: 11 },
{ name: "一次供水问题", value: 11 },
{ name: "工业粉尘污染", value: 71 },
{ name: "工业排放污染", value: 41 },
{ name: "破坏森林资源", value: 41 },
{ name: "生活用水管理", value: 688 },
{ name: "一次供水问题", value: 588 },
{ name: "公交运输管理", value: 386 },
{ name: "自然资源管理", value: 355 },
{ name: "土地资源管理", value: 304 },
{ name: "生活用水管理", value: 112 },
{ name: "供热单位影响", value: 253 },
{ name: "二次供水问题", value: 112 },
{ name: "城市公共设施", value: 92 },
{ name: "拆迁政策咨询", value: 92 },
{ name: "县区、开发区", value: 152 },
{ name: "文娱市场管理", value: 72 },
{ name: "商业烟尘污染", value: 72 },
{ name: "供热单位影响", value: 71 },
{ name: "压力容器安全", value: 71 },
{ name: "劳动合同争议", value: 41 },
{ name: "物业资质管理", value: 21 },
{ name: "农村基础设施", value: 11 },
{ name: "行政事业收费", value: 11 },
{ name: "房屋配套问题", value: 11 },
{ name: "公交运输管理", value: 11 },
{ name: "社会福利及事务", value: 11 },
{ name: "食品安全与卫生", value: 11 },
{ name: "物业服务与管理", value: 112 },
{ name: "文体与教育管理", value: 406 },
{ name: "社会保障与福利", value: 429 },
{ name: "出租车运营管理", value: 385 },
{ name: "物业服务与管理", value: 304 },
{ name: "房屋质量与安全", value: 223 },
{ name: "劳动报酬与福利", value: 41 },
{ name: "食品安全与卫生", value: 11 },
{ name: "房屋与图纸不符", value: 11 },
{ name: "其他行政事业收费", value: 11 },
{ name: "农村土地规划管理", value: 254 },
{ name: "社会保障保险管理", value: 92 },
{ name: "城市交通秩序管理", value: 72 },
{ name: "户籍管理及身份证", value: 11 },
{ name: "公路(水路)交通", value: 11 },
{ name: "国有公交(大巴)管理", value: 71 },
{ name: "有线电视安装及调试维护", value: 11 },
{ name: "市政府工作部门(含部门管理机构、直属单位)", value: 11 },
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_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: 500,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
],
}
}

@ -3,8 +3,8 @@
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 06:43:07
* @LastEditors: qianlishi
* @LastEditTime: 2022-03-11 10:35:35
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:35:42
*/
import { widgetTool } from "./main"
const screenConfig = {
@ -44,6 +44,7 @@ const screenConfig = {
name: 'description',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
@ -51,7 +52,7 @@ const screenConfig = {
name: 'backgroundColor',
required: false,
placeholder: '',
value: '#000',
value: 'rgba(45, 86, 126, 1)',
},
{
type: 'custom-upload',
@ -59,16 +60,37 @@ const screenConfig = {
name: 'backgroundImage',
required: false,
placeholder: '',
value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b',
value: '',
},
],
data: [],
position: [],
}
}
const widgetTools = [
...widgetTool
]
export const converArr = (data) => {
let tempArr = [], newArr = []
for (let i = 0; i < data.length; i++) {
const item = data[i]
if (tempArr.indexOf(item.type) === -1) {
newArr.push({
name: item.tabName,
type: item.type,
list: [item]
})
tempArr.push(item.type);
} else {
for (let j = 0; j < newArr.length; j++) {
if (newArr[j].type == item.type) {
newArr[j].list.push(item)
}
}
}
}
return newArr
}
const widgetTools = converArr([...widgetTool])
const getToolByCode = function (code) {
// 获取大屏底层设置属性
@ -76,10 +98,8 @@ const getToolByCode = function (code) {
return screenConfig
}
// 获取组件
let item = widgetTools.find(function (item, index, arrs) {
return item.code === code
return [...widgetTool].find((item) => {
return item.code == code
})
return item
}
console.log(widgetTools)
export { widgetTools, getToolByCode }

@ -3,39 +3,41 @@
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:46:46
* @LastEditors: qianlishi
* @LastEditTime: 2021-12-13 14:23:59
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2022-11-07 15:34:02
*/
import {widgetText} from "./configure/widget-text"
import {widgetMarquee} from "./configure/widget-marquee"
import {widgetHref} from "./configure/widget-href"
import {widgetTime} from "./configure/widget-time"
import {widgetImage} from "./configure/widget-image"
import {widgetSliders} from "./configure/widget-slider"
import {widgetVideo} from "./configure/widget-video"
import {widgetTable} from "./configure/widget-table"
import {widgetIframe} from "./configure/widget-iframe"
import { widgetText } from "./configure/texts/widget-text"
import { widgetMarquee } from "./configure/texts/widget-marquee"
import { widgetHref } from "./configure/texts/widget-href"
import { widgetTime } from "./configure/texts/widget-time"
import { widgetImage } from "./configure/texts/widget-image"
import { widgetSliders } from "./configure/texts/widget-slider"
import { widgetVideo } from "./configure/texts/widget-video"
import { widgetTable } from "./configure/texts/widget-table"
import { widgetIframe } from "./configure/texts/widget-iframe"
import { widgetUniversal } from "./configure/widget-universal"
import {widgetBarchart} from "./configure/widget-barchart"
import {widgetGradientBarchart} from "./configure/widget-gradient-barchart"
import {widgetLinechart} from "./configure/widget-linechart"
import {widgetBarlinechart} from "./configure/widget-barlinechart"
import {widgetPiechart} from "./configure/widget-piechart"
import {widgetFunnel} from "./configure/widget-funnel"
import {widgetGauge} from "./configure/widget-gauge"
import {widgetLineMap} from "./configure/widget-line-map"
import {widgetPieNightingale} from "./configure/widget-pie-nightingale"
import {widgetPiePercentage} from "./configure/widget-pie-percentage"
import {widgetAirbubbleMap} from "./configure/widget-airbubble-map"
import {widgetBarStack} from "./configure/widget-bar-stack"
import {widgetLineStack} from "./configure/widget-line-stack"
import {widgetBarCompare} from "./configure/widget-bar-compare"
import {widgetLineCompare} from "./configure/widget-line-compare"
import {widgetDecoratePie} from "./configure/widget-decorate-pie";
import {widgetMoreBarLine} from "./configure/widget-more-bar-line";
import {widgetWordCloud} from "./configure/widget-word-cloud";
import {widgetHeatmap} from "./configure/widget-heatmap";
import { widgetBarchart } from "./configure/barCharts/widget-barchart"
import { widgetGradientBarchart } from "./configure/barCharts/widget-gradient-barchart"
import { widgetLinechart } from "./configure/lineCharts/widget-linechart"
import { widgetBarlinechart } from "./configure/barlineCharts/widget-barlinechart"
import { widgetPiechart } from "./configure/pieCharts/widget-piechart"
import { widgetFunnel } from "./configure/funnelCharts/widget-funnel"
import { widgetGauge } from "./configure/percentCharts/widget-gauge"
import { widgetLineMap } from "./configure/mapCharts/widget-line-map"
import { widgetPieNightingale } from "./configure/pieCharts/widget-pie-nightingale"
import { widgetPiePercentage } from "./configure/percentCharts/widget-pie-percentage"
import { widgetAirbubbleMap } from "./configure/mapCharts/widget-airbubble-map"
import { widgetBarStack } from "./configure/barCharts/widget-bar-stack"
import { widgetLineStack } from "./configure/lineCharts/widget-line-stack"
import { widgetBarCompare } from "./configure/barCharts/widget-bar-compare"
import { widgetLineCompare } from "./configure/lineCharts/widget-line-compare"
import { widgetDecoratePie } from "./configure/decorateCharts/widget-decorate-pie";
import { widgetMoreBarLine } from "./configure/barlineCharts/widget-more-bar-line";
import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
import { widgetRadar } from "./configure/radarCharts/widget-radar";
import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
export const widgetTool = [
// type=html类型的组件
@ -67,5 +69,7 @@ export const widgetTool = [
widgetDecoratePie,
widgetMoreBarLine,
widgetWordCloud,
widgetHeatmap
widgetHeatmap,
widgetRadar,
widgetBarLineStack
]

@ -286,15 +286,23 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
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;
},
@ -306,8 +314,9 @@ export default {
type: 'value',
show : optionsSetup.hideXLeft,
inverse: true,
axisLine: {//X线
show: optionsSetup.xLineLeft,
//X线
axisLine: {
show: optionsSetup.lineXLeft,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
@ -315,19 +324,19 @@ export default {
axisTick: {
show: optionsSetup.tickLineLeft,
},
position: 'bottom',
position: optionsSetup.positionXLeft,
axisLabel: { // x
show: true,
textStyle: {
color: optionsSetup.XcolorLeft,
color: optionsSetup.colorXLeft,
fontSize: optionsSetup.fontSizeXLeft
}
},
splitLine: { // 线
show: optionsSetup.SplitLineLeft,
show: optionsSetup.isShowSplitLineLeft,
lineStyle: {
color: optionsSetup.SplitLineColorLeft,
width: optionsSetup.SplitLinefontSizeLeft,
color: optionsSetup.splitLineColorLeft,
width: optionsSetup.splitLineFontWidthLeft,
type: 'solid'
}
}
@ -343,7 +352,7 @@ export default {
show : optionsSetup.hideXRight,
type: 'value',
axisLine: {//X线
show: optionsSetup.xLineRight,
show: optionsSetup.lineXRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
},
@ -351,19 +360,19 @@ export default {
axisTick: {
show: optionsSetup.tickLineRight,
},
position: 'bottom',
position: optionsSetup.positionXRight,
axisLabel: { // x
show: true,
textStyle: {
color: optionsSetup.XcolorRight,
color: optionsSetup.colorXRight,
fontSize: optionsSetup.fontSizeXRight
}
},
splitLine: { // 线
show: optionsSetup.SplitLineRight,
show: optionsSetup.isShowSplitLineRight,
lineStyle: {
color: optionsSetup.SplitLineColorRight,
width: optionsSetup.SplitLinefontSizeRight,
color: optionsSetup.splitLineColorRight,
width: optionsSetup.splitLineFontWidthRight,
type: 'solid'
}
}
@ -385,7 +394,7 @@ export default {
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
align: optionsSetup.textAlignY,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
@ -441,8 +450,8 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
@ -453,6 +462,8 @@ export default {
const grid = [
{//
show: optionsSetup.frameLineLeft,
borderColor: optionsSetup.borderColorLeft,
borderWidth: optionsSetup.borderWidthLeft,
left: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
@ -468,6 +479,8 @@ export default {
},
{//
show: optionsSetup.frameLineRight,
borderColor: optionsSetup.borderColorRight,
borderWidth: optionsSetup.borderWidthRight,
right: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
@ -488,10 +501,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name){

@ -111,13 +111,15 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -129,10 +131,10 @@ export default {
//
show: optionsSetup.hideX,
//
name: optionsSetup.xName,
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
//
inverse: optionsSetup.reversalX,
@ -144,20 +146,22 @@ export default {
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.Xcolor,
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -168,15 +172,18 @@ export default {
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale: optionsSetup.scale,
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.NameColorY,
fontSize: optionsSetup.NameFontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY
},
// y
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
@ -191,13 +198,15 @@ export default {
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
}
}
};
@ -210,7 +219,7 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
@ -239,10 +248,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name){

@ -111,15 +111,16 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// X
@ -127,33 +128,40 @@ export default {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
color: optionsSetup.Xcolor, // x
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -165,36 +173,43 @@ export default {
const yAxis = {
type: "value",
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY
},
inverse: optionsSetup.reversalY, //
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
rotate: optionsSetup.ytextAngle, //
//
rotate: optionsSetup.textAngleY,
textStyle: {
color: optionsSetup.colorY, // x
//
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
}
}
};
this.options.yAxis = yAxis;
},
// or
@ -234,7 +249,7 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};

@ -181,15 +181,16 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// X
@ -197,33 +198,40 @@ export default {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
color: optionsSetup.Xcolor, // x
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -235,32 +243,40 @@ export default {
const yAxis = {
type: "value",
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
nameTextStyle: { //
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
fontSize: optionsSetup.namefontSizeY
fontSize: optionsSetup.nameFontSizeY
},
inverse: optionsSetup.reversalY, //
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
rotate: optionsSetup.ytextAngle, //
//
rotate: optionsSetup.textAngleY,
textStyle: {
color: optionsSetup.colorY, // y
//
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
}
}
};
@ -300,7 +316,7 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};

@ -0,0 +1,585 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "widgetBarLineStackChart",
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
grid: {},
legend: {
textStyle: {
color: "#fff"
}
},
xAxis: {
type: "category",
data: [],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
}
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#666666'
}
},
},
{
type: 'value',
nameTextStyle: {
color: '#666666'
},
axisLine: {
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#666666'
}
}
}
],
series: [
{
data: [],
name: '',
type: "bar",
barGap: "0%",
itemStyle: {
barBorderRadius: null
}
},
{
data: [],
name: '',
type: "line",
itemStyle: {}
}
]
},
optionsStyle: {}, //
optionsData: {}, //
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
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
},
methods: {
// options
editorOptions() {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsLegend();
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;
},
// X
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
this.options.xAxis = xAxis;
},
// Y
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: "value",
//
splitNumber: optionsSetup.splitNumberLeft,
//
show: optionsSetup.isShowYLeft,
//
name: optionsSetup.textNameYLeft,
//
nameTextStyle: {
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft
},
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYLeft,
textStyle: {
//
color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft
}
},
axisTick: { //
show: optionsSetup.tickLineYLeft,
},
axisLine: {
show: optionsSetup.lineYLeft,
lineStyle: {
color: optionsSetup.lineColorYLeft,
width: optionsSetup.lineWidthYLeft,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
}
}
},
{
type: "value",
//
splitNumber: optionsSetup.splitNumberRight,
//
show: optionsSetup.isShowYRight,
//
name: optionsSetup.textNameYRight,
//
nameTextStyle: {
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight
},
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYRight,
textStyle: {
//
color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight
}
},
axisTick: { //
show: optionsSetup.tickLineYRight,
},
axisLine: {
show: optionsSetup.lineYRight,
lineStyle: {
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
}
}
}
];
this.options.yAxis = yAxis;
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// legend
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legendName = optionsSetup.legendName;
//
if (null == legendName || legendName == '') {
for (let i = 0; i < name.length; i++) {
series[i].name = name[i];
}
this.options.legend['data'] = name;
} else {
const arr = legendName.split('|');
for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i];
}
this.options.legend['data'] = arr
}
},
//
setOptionsData() {
const optionsSetup = this.optionsSetup;
// or
const optionsData = this.optionsData;
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
getStaticSeriesData(xAxisList, yAxis, data, type) {
const typeData = new Array(xAxisList.length).fill(0);
for (const i in xAxisList) {
for (const j in data) {
if (data[j].name == yAxis && data[j].axis == xAxisList[i]) {
typeData[i] = data[j][type];
}
}
}
return typeData;
},
//
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 = [];
let xAxisList = [];
let yAxisList = [];
for (const i in val) {
xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].name;
}
xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList);
const legendName = yAxisList;
for (let i = 0; i < yAxisList.length; i++) {
const bar = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "bar");
series.push({
name: yAxisList[i],
type: 'bar',
data: bar,
barGap: '0%',
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: 'top',
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
},
//
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
for (let i = 0; i < yAxisList.length; i++) {
const line = this.getStaticSeriesData(xAxisList, yAxisList[i], val, "line");
series.push({
name: yAxisList[i],
type: 'line',
data: line,
yAxisIndex: 1,
symbol: optionsSetup.symbol,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
smooth: optionsSetup.smoothCurve,
itemStyle: {
normal: {
color: arrColor[i],
}
},
// 线
lineStyle: {
color: arrColor[i],
width: optionsSetup.lineWidth,
},
label: {
show: optionsSetup.isShowLine,
position: 'top',
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
})
}
this.options.series = series;
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
//
dynamicDataFn(val, refreshTime, optionsSetup) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val, optionsSetup);
this.flagInter = setInterval(() => {
this.getEchartData(val, optionsSetup);
}, refreshTime);
} else {
this.getEchartData(val, optionsSetup);
}
},
getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(optionsSetup, res);
});
},
renderingFn(optionsSetup, val) {
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
const series = [];
let legendName = [];
for (const i in val.series) {
legendName.push(val.series[i].name);
}
legendName = this.setUnique(legendName);
for (let i = 0; i < legendName.length; i++) {
const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar");
series.push({
name: legendName[i],
type: 'bar',
data: bar,
barGap: '0%',
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: 'top',
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
},
//
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
for (let i = 0; i < legendName.length; i++) {
const line = this.getDynamicSeriesData(legendName[i], val.series, "line");
series.push({
name: legendName[i],
type: "line",
data: line,
yAxisIndex: 1,
symbol: optionsSetup.symbol,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
smooth: optionsSetup.smoothCurve,
itemStyle: {
normal: {
color: arrColor[i],
}
},
// 线
lineStyle: {
color: arrColor[i],
width: optionsSetup.lineWidth,
},
label: {
show: optionsSetup.isShowLine,
position: 'top',
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine,
},
})
}
this.options.series = series;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
getDynamicSeriesData(legend, series, type) {
let data = [];
for (const i in series) {
if (series[i].name == legend && series[i].type == type) {
data = series[i].data;
}
}
return data
},
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -152,15 +152,16 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// X
@ -168,33 +169,40 @@ export default {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
color: optionsSetup.Xcolor, // x
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -206,56 +214,84 @@ export default {
const yAxis = [
{
type: "value",
splitNumber: optionsSetup.splitNumberLeft,//
show: optionsSetup.isShowYLeft, //
name: optionsSetup.textNameYLeft, //
nameTextStyle: { //
//
splitNumber: optionsSetup.splitNumberLeft,
//
show: optionsSetup.isShowYLeft,
//
name: optionsSetup.textNameYLeft,
//
nameTextStyle: {
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.namefontSizeYLeft
fontSize: optionsSetup.nameFontSizeYLeft
},
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYLeft,
textStyle: {
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
//
color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft
}
},
axisTick: { //
show: optionsSetup.tickLineYLeft,
},
axisLine: {
show: true,
show: optionsSetup.lineYLeft,
lineStyle: {
color: optionsSetup.lineColorY
width: optionsSetup.lineWidthYLeft,
color: optionsSetup.lineColorYLeft,
}
},
splitLine: {
show: false,
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
}
}
},
{
type: "value",
splitNumber: optionsSetup.splitNumberRight,//
show: optionsSetup.isShowYRight, //
name: optionsSetup.textNameYRight, //
nameTextStyle: { //
//
splitNumber: optionsSetup.splitNumberRight,
//
show: optionsSetup.isShowYRight,
//
name: optionsSetup.textNameYRight,
//
nameTextStyle: {
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.namefontSizeYRight
fontSize: optionsSetup.nameFontSizeYRight
},
inverse: optionsSetup.reversalY, //
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYRight,
textStyle: {
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
//
color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight
}
},
axisTick: { //
show: optionsSetup.tickLineYRight,
},
axisLine: {
show: true,
show: optionsSetup.lineYRight,
lineStyle: {
color: optionsSetup.lineColorY
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
}
},
splitLine: {
show: false,
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
}
}
}
];
@ -267,6 +303,7 @@ export default {
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;
@ -323,8 +360,8 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
@ -351,10 +388,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name){

@ -31,17 +31,7 @@ export default {
top: '16%',
containLabel: true
},
legend: {
data: ['调解成功', '调解失败', '调解终止', '调解成功率'],
left: '7%',
top: '5%',
textStyle: {
color: '#666666'
},
itemWidth: 15,
itemHeight: 10,
itemGap: 25
},
legend: {},
xAxis: {
type: 'category',
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
@ -132,23 +122,6 @@ export default {
},
data: []
},
{
name: '调解终止',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#01c871'
}, {
offset: 1,
color: '#55f49c'
}]),
barBorderRadius: 6,
}
},
data: []
},
{
name: '调解成功率',
type: 'line',
@ -156,14 +129,13 @@ export default {
smooth: false, //线
symbol: 'circle', //
symbolSize: 8, //
itemStyle: {
/*itemStyle: {
normal: {
color: '#ffa43a',
borderColor: 'rgba(255, 234, 0, 0.5)', //
borderWidth: 5
},
},
},*/
lineStyle: {
color: '#ffa43a'
},
@ -213,7 +185,6 @@ export default {
this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData();
},
//
@ -226,49 +197,57 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: 'category',
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
type: "category",
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
color: optionsSetup.Xcolor, // x
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -279,53 +258,85 @@ export default {
const optionsSetup = this.optionsSetup;
const yAxis = [
{
type: 'value',
show: optionsSetup.isShowYLeft, //
name: optionsSetup.textNameYLeft, //
nameTextStyle: { //
type: "value",
//
splitNumber: optionsSetup.splitNumberLeft,
//
show: optionsSetup.isShowYLeft,
//
name: optionsSetup.textNameYLeft,
//
nameTextStyle: {
color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft
},
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYLeft,
textStyle: {
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
//
color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft
}
},
axisTick: { //
show: optionsSetup.tickLineYLeft,
},
axisLine: {
show: true,
show: optionsSetup.lineYLeft,
lineStyle: {
color: optionsSetup.lineColorY
width: optionsSetup.lineWidthYLeft,
color: optionsSetup.lineColorYLeft
}
},
splitLine: {
show: false,
show: optionsSetup.isShowSplitLineYLeft,
lineStyle: {
color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft,
}
}
},
{
type: 'value',
show: optionsSetup.isShowYRight, //
name: optionsSetup.textNameYRight, //
nameTextStyle: { //
type: "value",
//
splitNumber: optionsSetup.splitNumberRight,
//
show: optionsSetup.isShowYRight,
//
name: optionsSetup.textNameYRight,
//
nameTextStyle: {
color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight
},
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleYRight,
textStyle: {
color: optionsSetup.colorY, // y
fontSize: optionsSetup.fontSizeY
//
color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight
}
},
axisTick: { //
show: optionsSetup.tickLineYRight,
},
axisLine: {
show: true,
show: optionsSetup.lineYRight,
lineStyle: {
color: optionsSetup.lineColorY
width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight,
}
},
splitLine: {
show: false,
show: optionsSetup.isShowSplitLineYRight,
lineStyle: {
color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight,
}
}
}
];
@ -338,8 +349,8 @@ export default {
trigger: 'item',
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
@ -366,10 +377,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name) {
@ -390,24 +401,6 @@ export default {
this.options.legend['data'] = arr
}
},
//
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
const series = this.options.series;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
for (const i in series) {
if (series[i].type == 'bar') {
series[i].itemStyle.normal['color'] = arrColor[i];
} else {
series[i].lineStyle['color'] = arrColor[i];
}
}
},
//
setOptionsData() {
const optionsData = this.optionsData; // or
@ -417,6 +410,12 @@ export default {
},
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series;
let axis = [];
let bar1 = [];
@ -428,11 +427,17 @@ export default {
bar2[i] = val[i].manus;
line[i] = val[i].sales;
}
const legendName = [];
legendName.push('调解成功');
legendName.push('调解失败');
legendName.push('调解成功率');
// x
this.options.xAxis.data = axis;
// series
for (const i in series) {
if (series[i].type == 'bar') {
series[i].name = legendName[i];
series[i].type = 'bar';
series[i].label = {
show: optionsSetup.isShowBar,
position: 'top',
@ -443,8 +448,12 @@ export default {
};
series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
series[i].itemStyle.normal['color'] = arrColor[i];
} else if (series[i].type == 'line') {
series[i].name = legendName[i];
series[i].type = 'line';
series[i].yAxisIndex = 1;
series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint;
series[i].symbolSize = optionsSetup.pointSize;
series[i].smooth = optionsSetup.smoothCurve;
@ -457,7 +466,13 @@ export default {
opacity: 0
};
}
series[i].itemStyle = {
normal: {
color: arrColor[i],
}
};
series[i].lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth
};
series[i].label = {
@ -472,11 +487,7 @@ export default {
}
series[0].data = bar1;
series[1].data = bar2;
series[3].data = line;
const legendName = [];
legendName.push('调解成功');
legendName.push('调解失败');
legendName.push('调解成功率');
series[2].data = line;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
@ -499,10 +510,17 @@ export default {
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
this.options.xAxis.data = val.xAxis;
const series = [];
const legendName = [];
for (const i in val.series) {
legendName.push(val.series[i].name);
const obj = {};
if (val.series[i].type == 'bar') {
obj.name = val.series[i].name;
@ -518,6 +536,7 @@ export default {
obj.barWidth = optionsSetup.maxWidth;
obj.itemStyle = {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
};
@ -527,6 +546,7 @@ export default {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
obj.yAxisIndex = 1;
obj.symbol = optionsSetup.symbol;
obj.showSymbol = optionsSetup.markPoint;
obj.symbolSize = optionsSetup.pointSize;
obj.smooth = optionsSetup.smoothCurve;
@ -537,9 +557,15 @@ export default {
} else {
obj.areaStyle = {
opacity: 0
};
}
}
obj.itemStyle = {
normal: {
color: arrColor[i],
}
};
obj.lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth
};
obj.label = {
@ -553,7 +579,6 @@ export default {
obj.data = val.series[i].data;
series.push(obj);
}
legendName.push(val.series[i].name);
}
this.options.series = series;
this.options.legend['data'] = legendName;

@ -154,15 +154,16 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// tooltip
@ -172,8 +173,8 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipFontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
@ -190,10 +191,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsColor() {

@ -150,21 +150,22 @@ export default {
//
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {
text: optionsSetup.titleText,
show: optionsSetup.isNoTitle,
left: optionsSetup.textAlign,
textStyle: {
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
},
subtext: optionsSetup.subText,
subtextStyle: {
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
},
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -176,10 +177,10 @@ export default {
//
show: optionsSetup.hideX,
//
name: optionsSetup.xName,
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
//
inverse: optionsSetup.reversalX,
@ -191,19 +192,17 @@ export default {
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.Xcolor,
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitArea: {
show: false,
},
};
this.options.xAxis = xAxis;
},
@ -211,16 +210,19 @@ export default {
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "category",
type: "value",
scale: optionsSetup.scale,
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.NameColorY,
fontSize: optionsSetup.NameFontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY
},
// y
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
@ -235,12 +237,10 @@ export default {
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitArea: {
show: false,
},
};
this.options.yAxis = yAxis;
},
@ -277,8 +277,8 @@ export default {
position: "top",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.tipsLineColor
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
}
};
this.options.tooltip = tooltip;
@ -291,17 +291,17 @@ export default {
visualMap.min = optionsSetup.dataMin;
visualMap.max = optionsSetup.dataMax;
visualMap.textStyle = {
fontSize : optionsSetup.lengedFontSize,
color : optionsSetup.lengedColor
fontSize : optionsSetup.legendFontSize,
color : optionsSetup.legendColor
};
visualMap.inRange.color = optionsSetup.lengedColorList.map((x) => {
visualMap.inRange.color = optionsSetup.legendColorList.map((x) => {
return x.color;
});
visualMap.left = optionsSetup.lateralPosition;
visualMap.top = optionsSetup.longitudinalPosition;
visualMap.bottom = optionsSetup.longitudinalPosition;
visualMap.orient = optionsSetup.layoutFront;
visualMap.itemWidth = optionsSetup.lengedWidth;
visualMap.itemWidth = optionsSetup.legendWidth;
},
setOptionsData() {
const optionsData = this.optionsData; // or

@ -282,15 +282,23 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
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;
},
@ -359,7 +367,7 @@ export default {
name: optionsSetup.textNameYTop, //
nameTextStyle: {
color: optionsSetup.nameColorYTop,
fontSize: optionsSetup.namefontSizeYTop
fontSize: optionsSetup.nameFontSizeYTop
},
axisLabel: {
show: true,
@ -380,7 +388,7 @@ export default {
splitLine: {
show: optionsSetup.splitLineYTop,
lineStyle: {
width: optionsSetup.splitLinefontSizeYTop,
width: optionsSetup.splitLineFontWidthYTop,
color: optionsSetup.splitLineColorYTop,
},
},
@ -401,7 +409,7 @@ export default {
name: optionsSetup.textNameYBottom, //
nameTextStyle: {
color: optionsSetup.nameColorYBottom,
fontSize: optionsSetup.namefontSizeYBottom
fontSize: optionsSetup.nameFontSizeYBottom
},
inverse: true, //
axisLabel: {
@ -423,7 +431,7 @@ export default {
splitLine: {
show: optionsSetup.splitLineYBottom,
lineStyle: {
width: optionsSetup.splitLinefontSizeYBottom,
width: optionsSetup.splitLineFontWidthYBottom,
color: optionsSetup.splitLineColorYBottom,
},
},
@ -439,6 +447,7 @@ export default {
const series = this.options.series
// 线
for (const key in series) {
series[key].symbol = optionsSetup.symbol
series[key].showSymbol = optionsSetup.markPoint
series[key].symbolSize = optionsSetup.pointSize
series[key].smooth = optionsSetup.smoothCurve
@ -476,30 +485,30 @@ export default {
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let tooltip = {}
if (optionsSetup.tipType == "line") {
if (optionsSetup.tipsType == "line") {
tooltip = {
show: optionsSetup.tipShow,
show: optionsSetup.tipsShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
type: optionsSetup.tipsType,
lineStyle: {
color: optionsSetup.tipColor,
color: optionsSetup.tipsColor,
type: 'dashed',
},
},
}
} else {
tooltip = {
show: optionsSetup.tipShow,
show: optionsSetup.tipsShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
type: optionsSetup.tipsType,
lineStyle: {
color: optionsSetup.tipColor,
color: optionsSetup.tipsColor,
type: 'dashed',
},
crossStyle: {
color: optionsSetup.tipColor,
color: optionsSetup.tipsColor,
}
},
}
@ -538,10 +547,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name){

@ -111,13 +111,15 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -129,10 +131,10 @@ export default {
//
show: optionsSetup.hideX,
//
name: optionsSetup.xName,
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.xNameColor,
fontSize: optionsSetup.xNameFontSize
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
//
inverse: optionsSetup.reversalX,
@ -144,20 +146,22 @@ export default {
rotate: optionsSetup.textAngleX,
textStyle: {
//
color: optionsSetup.Xcolor,
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -168,22 +172,25 @@ export default {
const optionsSetup = this.optionsSetup;
const yAxis = {
type: "value",
scale: optionsSetup.scale,
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.NameColorY,
fontSize: optionsSetup.NameFontSizeY
color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY
},
// y
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
//
rotate: optionsSetup.textAngleY,
textStyle: {
// y
//
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY
}
@ -191,13 +198,15 @@ export default {
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
}
}
};
@ -225,7 +234,7 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
@ -254,10 +263,10 @@ export default {
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsLegendName(name) {
@ -347,7 +356,7 @@ export default {
type: "line",
data: data,
width: optionsSetup.lineWidth,
symbol: 'circle',
symbol: optionsSetup.symbol,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
smooth: optionsSetup.smoothCurve,
@ -434,7 +443,7 @@ export default {
type: "line",
data: val.series[i].data,
width: optionsSetup.lineWidth,
symbol: 'circle',
symbol: optionsSetup.symbol,
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
symbolColor: arrColor[i],

@ -117,13 +117,15 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -132,33 +134,40 @@ export default {
const optionsSetup = this.optionsSetup;
const xAxis = {
type: "category",
show: optionsSetup.hideX, //
name: optionsSetup.xName, //
//
show: optionsSetup.hideX,
//
name: optionsSetup.nameX,
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
nameRotate: optionsSetup.textAngle, //
inverse: optionsSetup.reversalX, //
//
inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval, //
rotate: optionsSetup.textAngle, //
//
interval: optionsSetup.textInterval,
//
rotate: optionsSetup.textAngleX,
textStyle: {
color: optionsSetup.Xcolor, // x
//
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorX
color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineX,
lineStyle: {
color: optionsSetup.splitLineColorX
color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX,
}
}
};
@ -170,32 +179,40 @@ export default {
const yAxis = {
type: "value",
scale: optionsSetup.scale,
splitNumber: optionsSetup.splitNumber,//
show: optionsSetup.isShowY, //
name: optionsSetup.textNameY, //
nameTextStyle: { //
//
splitNumber: optionsSetup.splitNumberY,
//
show: optionsSetup.isShowY,
//
name: optionsSetup.textNameY,
nameTextStyle: {
color: optionsSetup.nameColorY,
fontSize: optionsSetup.namefontSizeY
fontSize: optionsSetup.nameFontSizeY
},
inverse: optionsSetup.reversalY, //
//
inverse: optionsSetup.reversalY,
axisLabel: {
show: true,
rotate: optionsSetup.ytextAngle, //
//
rotate: optionsSetup.textAngleY,
textStyle: {
color: optionsSetup.colorY, // y
//
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: optionsSetup.lineColorY
color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY,
}
},
splitLine: {
show: optionsSetup.isShowSplitLineY,
lineStyle: {
color: optionsSetup.splitLineColorY
color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY,
}
}
};
@ -207,6 +224,7 @@ export default {
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;
@ -219,7 +237,6 @@ export default {
opacity: 0
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth
};
@ -242,7 +259,7 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};

@ -437,21 +437,23 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsCollapse.isNoTitle;
title.text = optionsCollapse.titleText;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},

@ -350,19 +350,21 @@ export default {
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsSetup.isNoTitle;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},

@ -92,98 +92,100 @@ export default {
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsCollapse.subText;
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
//
setOptionsValue() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
const numberValue = optionsCollapse.numberValue ? "{c}" : "";
const percentage = optionsCollapse.percentage ? "({d})%" : "";
const numberValue = optionsSetup.numberValue ? "{c}" : "";
const percentage = optionsSetup.percentage ? "({d})%" : "";
const label = {
show: optionsCollapse.isShow,
show: optionsSetup.isShow,
formatter: `{a|{b}${numberValue} ${percentage}}`,
rich: {
a: {
padding: [-30, 15, -20, 15],
color: optionsCollapse.subTextColor,
fontSize: optionsCollapse.fontSize,
fontWeight: optionsCollapse.fontWeight
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
},
fontSize: optionsCollapse.fontSize,
fontSize: optionsSetup.fontSize,
fontWeight: optionsCollapse.optionsCollapse
fontWeight: optionsSetup.optionsSetup
};
for (const key in series) {
if (series[key].type == "pie") {
series[key].label = label;
series[key].labelLine = { show: optionsCollapse.isShow };
series[key].labelLine = { show: optionsSetup.isShow };
}
}
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop,
containLabel: true
};
this.options.grid = grid;
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup;
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor;
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {

@ -105,19 +105,21 @@ export default {
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsSetup.isNoTitle;
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -157,7 +159,7 @@ export default {
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
fontSize: optionsSetup.tipFontSize
}
};
this.options.tooltip = tooltip;
@ -174,10 +176,10 @@ export default {
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.fontSize
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
legend.itemWidth = optionsSetup.legendWidth;
},
//
setOptionsColor() {

@ -0,0 +1,393 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
vue.use(VueSuperSlide);
export default {
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
hackReset: true,
options: {
title: {},
legend: {},
radar: {
indicator: []
},
series: []
},
optionsSetup: {},
optionsPosition: {},
optionsData: {}
};
},
computed: {
styleObj() {
const allStyle = this.optionsPosition;
return {
position: this.ispreview ? "absolute" : "static",
width: allStyle.width + "px",
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px",
background: this.optionsSetup.background
};
},
},
watch: {
value: {
handler(val) {
this.optionsSetup = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.editorOptions();
},
deep: true
}
},
mounted() {
this.optionsSetup = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.editorOptions();
},
methods: {
editorOptions() {
this.setOptionsTitle();
this.setOptionIndicator();
this.setOptionsRadar();
this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsMargin();
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;
},
//
setOptionIndicator() {
const optionsSetup = this.optionsSetup;
const indicator = optionsSetup.dynamicAddRadar;
this.options.radar.indicator = indicator;
},
//
setOptionsRadar() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.axisLineShow,
lineStyle: {
color: optionsSetup.axisLineColor,
opacity: optionsSetup.axisLineOpacity / 100,
}
};
const axisName = {
show: optionsSetup.axisNameShow,
color: optionsSetup.axisNameColor,
fontSize: optionsSetup.axisNameFontSize,
fontStyle: optionsSetup.axisNamFontStyle,
fontWeight: optionsSetup.axisNamFontWeight,
}
const splitLine = {
show: optionsSetup.splitLineShow,
lineStyle: {
color: optionsSetup.splitLineColor,
opacity: optionsSetup.splitLineOpacity / 100,
}
}
this.options.radar.axisLine = axisLine;
// echarts5.XnameaxisName
this.options.radar.name = axisName;
this.options.radar.splitLine = splitLine;
this.options.radar.shape = optionsSetup.radarShape;
this.options.radar.splitNumber = optionsSetup.splitNumber;
},
//
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = {
show: optionsSetup.isShowLegend,
left: optionsSetup.lateralPosition,
top: optionsSetup.longitudinalPosition,
bottom: optionsSetup.longitudinalPosition,
orient: optionsSetup.layoutFront,
textStyle: {
color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize,
},
itemWidth: optionsSetup.legendWidth,
}
this.options.legend = legend;
},
//
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[0].data[i].name = name[i];
}
this.options.legend['data'] = name;
} else {
const arr = legendName.split('|');
for (let i = 0; i < arr.length; i++) {
series[0].data[i].name = arr[i];
}
this.options.legend['data'] = arr;
}
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
}
};
this.options.tooltip = tooltip;
},
//
setOptionsMargin() {
this.options.radar.radius = '70%';
},
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
//
setUnique(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
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);
}
this.options.color = arrColor;
const indicator = optionsSetup.dynamicAddRadar;
// key
const radarKeys = [];
for (const i in indicator) {
radarKeys[i] = indicator[i].key;
}
const name = [];
const data = [];
const legendName = [];
for (const i in val) {
name[i] = val[i].name;
}
for (const i in name) {
const values = new Array(radarKeys.length).fill(0);
for (const j in radarKeys) {
for (const k in val) {
if (val[k].name == name[i]) {
values[j] = val[k][radarKeys[j]];
}
}
}
data.push({
name: name[i],
value: values,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
lineStyle: {
normal: {
type: optionsSetup.lineType,
color: arrColor[i],
},
},
});
legendName.push(name[i]);
}
this.options.series[0] = {
type: 'radar',
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
}
},
};
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(data, refreshTime) {
if (!data) return;
if (this.ispreview) {
this.getEchartData(data);
this.flagInter = setInterval(() => {
this.getEchartData(data);
}, refreshTime);
} else {
this.getEchartData(data);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
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);
}
this.options.color = arrColor;
const indicator = optionsSetup.dynamicAddRadar;
// key
const radarKeys = [];
for (const i in indicator) {
radarKeys[i] = indicator[i].key;
}
const name = [];
const data = [];
const legendName = [];
for (const i in val.value) {
name.push(val.value[i][val.name]);
}
for (const i in name) {
const values = new Array(radarKeys.length).fill(0);
for (const j in radarKeys) {
for (const k in val.value) {
if (val.value[k][val.name] == name[i]) {
values[j] = val.value[k][radarKeys[j]];
}
}
}
data.push({
name: name[i],
value: values,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight,
},
lineStyle: {
normal: {
type: optionsSetup.lineType,
color: arrColor[i],
},
},
});
legendName.push(name[i]);
}
this.options.series[0] = {
type: 'radar',
data: data,
symbolSize: optionsSetup.symbolSize,
areaStyle: {
normal: {
opacity: optionsSetup.opacity / 100,
}
},
};
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}
}
};
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 本例子css */
.txtScroll-top {
overflow: hidden;
position: relative;
}
.title {
display: flex;
flex-direction: row;
width: 100%;
}
.title > div {
height: 50px;
line-height: 50px;
width: 100%;
}
.txtScroll-top .bd {
width: 100%;
}
.txtScroll-top .infoList li {
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
}
.txtScroll-top .infoList li > div {
width: 100%;
}
/*.txtScroll-top .infoList li:nth-child(n) {
background: rgb(0, 59, 81);
}
.txtScroll-top .infoList li:nth-child(2n) {
background: rgb(10, 39, 50);
}*/
</style>

@ -21,10 +21,10 @@ import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetBarlinechart from "./barline/widgetBarlinechart";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetFunnel from "./funnel/widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
@ -36,9 +36,11 @@ import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
export default {
name: "WidgetTemp",
@ -70,7 +72,9 @@ export default {
widgetDecoratePieChart,
widgetMoreBarLineChart,
widgetWordCloud,
widgetHeatmap
widgetHeatmap,
widgetRadar,
widgetBarLineStackChart
},
model: {
prop: "value",

@ -33,9 +33,9 @@ import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from "./bar/widgetBarchart.vue";
import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from "./line/widgetLinechart.vue";
import widgetBarlinechart from "./bar/widgetBarlinechart";
import widgetBarlinechart from "./barline/widgetBarlinechart";
import WidgetPiechart from "./pie/widgetPiechart.vue";
import WidgetFunnel from "./widgetFunnel.vue";
import WidgetFunnel from "./funnel/widgetFunnel.vue";
import WidgetGauge from "./percent/widgetGauge.vue";
import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
import widgetTable from "./widgetTable.vue";
@ -47,9 +47,11 @@ import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
import widgetMoreBarLineChart from "./bar/widgetMoreBarLineChart";
import widgetMoreBarLineChart from "./barline/widgetMoreBarLineChart";
import widgetWordCloud from "./wordcloud/widgetWordCloud";
import widgetHeatmap from "./heatmap/widgetHeatmap";
import widgetRadar from "./radar/widgetRadar";
import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
export default {
name: "Widget",
@ -81,7 +83,9 @@ export default {
widgetDecoratePieChart,
widgetMoreBarLineChart,
widgetWordCloud,
widgetHeatmap
widgetHeatmap,
widgetRadar,
widgetBarLineStackChart
},
model: {
prop: "value",
@ -106,7 +110,9 @@ export default {
data: {
setup: {},
data: {},
position: {}
position: {},
/* leftMargin: null,
topMargin: null*/
}
};
},
@ -118,10 +124,10 @@ export default {
return this.value.position.height;
},
widgetsLeft() {
return this.value.position.left;
return this.value.position.left// >= this.leftMargin ? this.leftMargin : this.value.position.left;
},
widgetsTop() {
return this.value.position.top;
return this.value.position.top// >= this.topMargin ? this.topMargin : this.value.position.top;
},
widgetsZIndex() {
return this.value.position.zIndex || 1;
@ -133,6 +139,28 @@ export default {
handleBlur({ index, left, top, width, height }) {
this.$emit("onActivated", { index, left, top, width, height });
this.$refs.draggable.setActive(true);
// widgetworkbench
//this.handleBoundary({ index, left, top, width, height })
},
handleBoundary({ index, left, top, width, height }) {
// workbenchX
// + > = ( - ) = 0
const { bigscreenWidth, bigscreenHeight } = this.bigscreen;
const xBoundaryValue = (left + width) > bigscreenWidth ? bigscreenWidth - width : left < 0 ? 0 : left;
// X
this.leftMargin = left;
// Y
const yBoundaryValue = (top + height) > bigscreenHeight ? bigscreenHeight - height : top < 0 ? 0 : top;
// Y
this.topMargin = top;
//
if (this.leftMargin != xBoundaryValue || this.topMargin != yBoundaryValue) {
this.$nextTick(() => {
this.leftMargin = xBoundaryValue;
this.topMargin = yBoundaryValue;
this.$emit("onActivated", { index, left: xBoundaryValue, top: yBoundaryValue, width, height });
})
}
}
}
};

@ -103,13 +103,15 @@ export default {
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
@ -130,8 +132,8 @@ export default {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize
}
};
this.options.tooltip = tooltip;

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

Loading…
Cancel
Save