Merge pull request !11 from Raod/dev
Raod 3 years ago committed by Gitee
commit c5a43acf45

@ -51,6 +51,7 @@ module.exports = {
{title: '数据源', path: '/guide/datasource'},
{title: '数据集', path: '/guide/dataset'},
{title: '大屏设计', path: '/guide/dashboard'},
{title: '导入导出', path: '/guide/importexport'},
]
},
{

@ -73,7 +73,7 @@
### 仪表盘
数据集只能有一个字段,且字典选择“文本数字” <br>
![img14](../picture/dashboard/img_14.png) <br>
![img21](../picture/dashboard/img_21.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 中国地图
@ -81,14 +81,20 @@
气泡地图动态数据集和饼图一样对应字典值需要选择一个“Name”、“Value”且name的字段值要和echarts图表里面的值能对应上可参考静态数据 <br>
![img15](../picture/dashboard/img_15.png) <br>
### 百分百图
数据集只能有一个字段,且字典选择“文本数字” <br>
![img16](../picture/dashboard/img_16.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
### 散点图
**开发中** <br>
### 对比图
**开发中** <br>
柱状对比图: <br>
数据集需要3个字段其中一个作为对比的字段只能为2种值只有2种值作为对比的字段要选择“y轴字段”字典。因为底层的解析用的是堆叠图的解析这里的y轴字段并不是指的图表上面的y轴还请注意有强迫症可以自行修改源码的解析剩下的2个字段对应字典看图<br>
![img18](../picture/dashboard/img_18.png) <br>
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**
折线对比图: <br>
数据集需要3个字段其中一个作为对比的字段只能为2种值只有2种值作为对比的字段要选择“y轴字段”字典剩下的字典对应看图<br>
![img19](../picture/dashboard/img_19.png) <br>
**注**:如果提示语设置选择“十字形”,请注意需要选择 “X轴颜色、上Y轴颜色、下Y轴颜色”不然预览图表鼠标选择是全白色还请注意。<br>
![img20](../picture/dashboard/img_20.png)
**如有问题,请提交 [Issue](https://gitee.com/anji-plus/report/issues) <br>**

@ -0,0 +1,17 @@
**注导入导出目前是初始版本报错没有细化如果导入导出过程中页面无反应请F12**
**注:“导入成功/失败”的提示不一定对应当前真实导入导出情况,请根据实际导入导出的结果进行判断**
## 导出
![img](../picture/imexport/img.png) <br>
导出会生成zip文件包含图表、样式、图片等不会带有该大屏的名称和code。<br>
### 导出数据集
适用于同一系统内部使用
### 导出不含有数据集
导出的图表会使用默认的静态数据集,适用于跨系统,请注意,如果你的大屏图表有部分图表是在对方系统不存在的,那么目前整个大屏是不会显示出来的,后续会进行兼容,不存在的图表留空。<br>
## 导入
![img1](../picture/imexport/img_1.png) <br>
选择一个导出的zip文件导入即可。注意导入会覆盖当前大屏请新建一张空白的大屏进行导入。<br>
**注:如果你导入的大屏中含有你当前系统不存在的图表,整个大屏是不会显示的。** <br>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -348,6 +348,9 @@ public class ReportDashboardServiceImpl implements ReportDashboardService, Initi
private String replaceUrl(String imageAddress, Map<String, String> fileMap) {
if (StringUtils.isBlank(imageAddress)) {
return "";
}
String fileId = imageAddress.substring(imageAddress.trim().length() - 36);
String orDefault = fileMap.getOrDefault(fileId, null);
if (StringUtils.isBlank(orDefault)) {

@ -66,7 +66,7 @@ INSERT INTO `aj_report`.`gaea_report_data_set`(`set_code`, `set_name`, `set_desc
use
aj_report_init;
CREATE TABLE `aj_report_barstack`
CREATE TABLE if not exists `aj_report_barstack`
(
`id` int(11) NOT NULL AUTO_INCREMENT,
`time` date DEFAULT NULL,

@ -0,0 +1,21 @@
use aj_report_init;
CREATE TABLE if not exists `aj_report_comparestack` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`time` date DEFAULT NULL,
`type` varchar(255) DEFAULT NULL,
`nums` bigint(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (1, '2021-08-23', '成功', 12);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (2, '2021-08-23', '失败', 1);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (3, '2021-08-24', '成功', 24);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (4, '2021-08-24', '失败', 5);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (5, '2021-08-25', '成功', 13);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (6, '2021-08-25', '失败', 8);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (7, '2021-08-26', '成功', 19);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (8, '2021-08-26', '失败', 3);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (9, '2021-08-27', '成功', 9);
INSERT INTO `aj_report_init`.`aj_report_comparestack`(`id`, `time`, `type`, `nums`) VALUES (10, '2021-08-27', '失败', 15);
INSERT INTO `aj_report`.`gaea_report_data_set`(`set_code`, `set_name`, `set_desc`, `source_code`, `dyn_sentence`, `case_result`, `enable_flag`, `delete_flag`, `create_by`, `create_time`, `update_by`, `update_time`, `version`) VALUES ('compare_ajreport', '柱状对比图示例数据', '', 'mysql_ajreport', 'SELECT time,type,nums from aj_report_comparestack', '[{\"time\":\"2021-08-23\",\"type\":\"成功\",\"nums\":12},{\"time\":\"2021-08-23\",\"type\":\"失败\",\"nums\":1},{\"time\":\"2021-08-24\",\"type\":\"成功\",\"nums\":24},{\"time\":\"2021-08-24\",\"type\":\"失败\",\"nums\":5},{\"time\":\"2021-08-25\",\"type\":\"成功\",\"nums\":13},{\"time\":\"2021-08-25\",\"type\":\"失败\",\"nums\":8},{\"time\":\"2021-08-26\",\"type\":\"成功\",\"nums\":19},{\"time\":\"2021-08-26\",\"type\":\"失败\",\"nums\":3},{\"time\":\"2021-08-27\",\"type\":\"成功\",\"nums\":9},{\"time\":\"2021-08-27\",\"type\":\"失败\",\"nums\":15}]', 1, 0, 'admin', '2021-08-27 13:48:33', 'admin', '2021-08-27 13:48:33', 1);

@ -13,6 +13,13 @@ body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
}
ul,
li,
ol,
li {
margin: 0;
padding: 0;
}
html {
height: 100%;

@ -122,9 +122,7 @@ export default {
chartType == "widget-funnel"
) {
return this.piechartFn(params.chartProperties, data);
} else if (chartType == "widget-gauge") {
return this.gaugeFn(params.chartProperties, data);
} else if (chartType == "widget-text") {
} else if (chartType == "widget-text") {
return this.widgettext(params.chartProperties, data)
} else if (chartType == "widget-stackchart") {
return this.stackChartFn(params.chartProperties, data)
@ -210,7 +208,7 @@ export default {
}
return ananysicData;
},
gaugeFn(chartProperties, data) {
/*gaugeFn(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {
const obj = {};
@ -228,7 +226,7 @@ export default {
ananysicData.push(obj);
}
return ananysicData[0];
},
},*/
widgettext(chartProperties, data) {
const ananysicData = [];
for (let i = 0; i < data.length; i++) {

@ -13,18 +13,20 @@
<el-table-column prop="key" label="key值" width="80" />
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<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 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>
@ -161,4 +163,7 @@ export default {
/deep/.el-table::before {
height: 0;
}
.button-group .el-button {
padding: 0;
}
</style>

@ -59,7 +59,7 @@
:style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow"
>
<i class="el-icon-arrow-right"/>
<i class="el-icon-arrow-right" />
</div>
<div
@ -94,24 +94,26 @@
content="导入"
placement="bottom"
>
<el-upload class="el-upload"
ref="upload"
:action="uploadUrl"
:headers="headers"
accept=".zip"
:on-success="handleUpload"
:on-error="handleError"
:show-file-list="false"
:limit="1">
<el-upload
class="el-upload"
ref="upload"
:action="uploadUrl"
:headers="headers"
accept=".zip"
:on-success="handleUpload"
:on-error="handleError"
:show-file-list="false"
:limit="1"
>
<i class="iconfont icondaoru"></i>
</el-upload>
</el-upload>
</el-tooltip>
</span>
<span class="btn border-left">
<ul class="nav">
<li>
<i class="iconfont icondaochu"></i><i class="el-icon-arrow-down"></i>
<i class="iconfont icondaochu"></i
><i class="el-icon-arrow-down"></i>
<ul>
<li>
<el-tooltip
@ -120,9 +122,8 @@
content="适合当前系统"
placement="right"
>
<div @click="exportDashboard(1)">()</div>
<div @click="exportDashboard(1)">()</div>
</el-tooltip>
</li>
<li>
<el-tooltip
@ -131,7 +132,7 @@
content="适合跨系统"
placement="right"
>
<div @click="exportDashboard(0)">()</div>
<div @click="exportDashboard(0)">()</div>
</el-tooltip>
</li>
</ul>
@ -277,14 +278,19 @@
</template>
<script>
import {insertDashboard, detailDashboard, importDashboard, exportDashboard} from "@/api/bigscreen";
import {widgetTools, getToolByCode} from "./tools";
import {
insertDashboard,
detailDashboard,
importDashboard,
exportDashboard
} from "@/api/bigscreen";
import { widgetTools, getToolByCode } from "./tools/index";
import widget from "./widget/widget.vue";
import dynamicForm from "./form/dynamicForm.vue";
import draggable from "vuedraggable";
import VueRulerTool from "vue-ruler-tool"; //
import contentMenu from "./form/contentMenu";
import {getToken} from "@/utils/auth";
import { getToken } from "@/utils/auth";
export default {
name: "Login",
@ -297,7 +303,10 @@ export default {
},
data() {
return {
uploadUrl: process.env.BASE_API + '/reportDashboard/import/' + this.$route.query.reportCode,
uploadUrl:
process.env.BASE_API +
"/reportDashboard/import/" +
this.$route.query.reportCode,
grade: false,
layerWidget: [],
widgetTools: widgetTools, // js
@ -366,8 +375,8 @@ export default {
computed: {
headers() {
return {
Authorization: getToken(), // token
}
Authorization: getToken() // token
};
},
//
middleWidth() {
@ -441,7 +450,7 @@ export default {
},
async initEchartData() {
const reportCode = this.$route.query.reportCode;
const {code, data} = await detailDashboard(reportCode);
const { code, data } = await detailDashboard(reportCode);
if (code != 200) return;
const processData = this.handleInitEchartsData(data);
const screenData = this.handleBigScreen(data.dashboard);
@ -541,7 +550,7 @@ export default {
},
widgets: this.widgets
};
const {code, data} = await insertDashboard(screenData);
const { code, data } = await insertDashboard(screenData);
if (code == "200") {
this.$message.success("保存成功!");
}
@ -550,31 +559,31 @@ export default {
viewScreen() {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: {reportCode: this.$route.query.reportCode}
query: { reportCode: this.$route.query.reportCode }
});
window.open(routeUrl.href, "_blank");
},
//
async exportDashboard(val) {
const fileName = this.$route.query.reportCode + ".zip"
const fileName = this.$route.query.reportCode + ".zip";
const param = {
reportCode:this.$route.query.reportCode,
showDataSet:val
}
reportCode: this.$route.query.reportCode,
showDataSet: val
};
exportDashboard(param).then(res => {
const blob = new Blob([res], {type: "application/octet-stream"});
if (window.navigator.msSaveOrOpenBlob) {//msSaveOrOpenBlobbool
navigator.msSaveBlob(blob, fileName);//
const blob = new Blob([res], { type: "application/octet-stream" });
if (window.navigator.msSaveOrOpenBlob) {
//msSaveOrOpenBlobbool
navigator.msSaveBlob(blob, fileName); //
} else {
const link = document.createElement('a');//a
const link = document.createElement("a"); //a
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}
})
});
},
//
handleUpload(response, file, fileList) {
@ -583,15 +592,15 @@ export default {
//
this.initEchartData();
this.$message({
message: '导入成功!',
type: 'success',
})
message: "导入成功!",
type: "success"
});
},
handleError() {
this.$message({
message: '上传失败!',
type: 'error',
})
message: "上传失败!",
type: "error"
});
},
//
@ -1028,8 +1037,8 @@ export default {
background-image: linear-gradient(
hsla(0, 0%, 100%, 0.1) 1px,
transparent 0
),
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
),
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0);
// z-index: 2;
}
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1,382 @@
/*
* @Descripttion: 气泡地图json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:35:32
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:36:47
*/
export const widgetAirbubbleMap = {
code: 'widgetAirBubbleMap',
type: 'chart',
label: '气泡地图',
icon: 'iconzhongguoditu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '气泡地图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: '#0F1C3C'
},
[
{
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: 'fontTextSize',
required: false,
placeholder: '',
value: 15,
},
{
type: 'vue-color',
label: '文字颜色',
name: 'fontTextColor',
required: false,
placeholder: '',
value: '#D4EEFF'
},
{
type: 'el-select',
label: '文字粗细',
name: 'fontTextWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '数值大小',
name: 'fontDataSize',
required: false,
placeholder: '',
value: 15,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'fontDataColor',
required: false,
placeholder: '',
value: '#D4EEFF'
},
{
type: 'el-select',
label: '数值粗细',
name: 'fontDataWeight',
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: 'fontminSize4Pin',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-input-number',
label: '最大半径',
name: 'fontmaxSize4Pin',
required: false,
placeholder: '',
value: 100,
},
/*{
type: 'vue-color',
label: '气泡颜色',
name: 'fontPieColor',
required: false,
placeholder: '',
value: ''
},*/
],
},
{
name: '地图块颜色',
list: [
{
type: 'vue-color',
label: '0%处颜色',
name: 'font0PreColor',
required: false,
placeholder: '',
value: '#073684'
},
{
type: 'vue-color',
label: '100%颜色',
name: 'font100PreColor',
required: false,
placeholder: '',
value: '#061E3D'
},
{
type: 'vue-color',
label: '高亮渐变色',
name: 'fontHighlightColor',
required: false,
placeholder: '',
value: '#2B91B7'
},
],
},
],
],
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{"name":"南海诸岛","value":1},
{"name":"北京","value":524},
{"name":"天津","value":14},
{"name":"上海","value":150},
{"name":"重庆","value":75},
{"name":"河北","value":13},
{"name":"河南","value":83},
{"name":"云南","value":11},
{"name":"辽宁","value":19},
{"name":"黑龙江","value":15},
{"name":"湖南","value":69},
{"name":"安徽","value":260},
{"name":"山东","value":39},
{"name":"新疆","value":4},
{"name":"江苏","value":31},
{"name":"浙江","value":104},
{"name":"江西","value":36},
{"name":"湖北","value":1052},
{"name":"广西","value":33},
{"name":"甘肃","value":347},
{"name":"山西","value":8},
{"name":"内蒙古","value":157},
{"name":"陕西","value":22},
{"name":"吉林","value":4},
{"name":"福建","value":36},
{"name":"贵州","value":39},
{"name":"广东","value":996},
{"name":"青海","value":27},
{"name":"西藏","value":31},
{"name":"四川","value":46},
{"name":"宁夏","value":16},
{"name":"海南","value":22},
{"name":"台湾","value":6},
{"name":"香港","value":2},
{"name":"澳门","value":9}],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'MAP_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
}
}

@ -0,0 +1,650 @@
/*
* @Descripttion: 柱状对比图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:39:35
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:39:35
*/
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: '左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: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#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: 'px',
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,652 @@
/*
* @Descripttion: 柱状堆叠图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:37:09
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:37: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: '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: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#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: 'px',
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-26","name":"C","data":"20"},
{"axis":"2021-07-27","name":"A","data":"15"},
{"axis":"2021-07-27","name":"B","data":"30"},
{"axis":"2021-07-27","name":"C","data":"5"}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,654 @@
/*
* @Descripttion: 柱状图json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:21:45
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:21:46
*/
export const widgetBarchart = {
code: 'widget-barchart',
type: 'chart',
label: '柱形图',
icon: 'iconzhuzhuangtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱状图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-text',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
}, {
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 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: 'fontSize',
required: false,
placeholder: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-barchart',
dictKey: 'BAR_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,665 @@
/*
* @Descripttion: 主线图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:26:48
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:26:49
*/
export const widgetBarlinechart = {
code: 'widget-barlinechart',
type: 'chart',
label: '柱线图',
icon: 'iconzhuxiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 3,
},
],
},
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '左显示',
name: 'isShowYLeft',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '左坐标名',
name: 'textNameYLeft',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '左坐标名颜色',
name: 'nameColorYLeft',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '左坐标字号',
name: 'namefontSizeYLeft',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '左均分',
name: 'splitNumberLeft',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '右显示',
name: 'isShowYRight',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '右坐标名',
name: 'textNameYRight',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '右坐标名颜色',
name: 'nameColorYRight',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '右坐标字号',
name: 'namefontSizeYRight',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '右均分',
name: 'splitNumberRight',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#fff'
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
}, {
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
}, {
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
}, {
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-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: '#00F4FFFF'}, {color: '#e68b55'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-barlinechart',
dictKey: 'BAR_LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,383 @@
/*
* @Descripttion: 漏斗图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:29:23
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:29:23
*/
export const widgetFunnel = {
code: 'widget-funnel',
type: 'chart',
label: '漏斗图',
icon: 'iconloudoutu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '漏斗图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '文字设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
require: false,
placeholder: '',
value: 12,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
require: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
require: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-switch',
label: '反转',
name: 'reversal',
require: false,
placeholder: '',
value: 0
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '网格线颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: ''
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [{"value": 60,"name": "访问"},{"value": 40, "name": "咨询"},{"value": 20, "name": "订单"},{"value": 80,"name":"点击"},{"value":100,"name":"展现"}],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-funnel',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,378 @@
/*
* @Descripttion: 仪表盘 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:30:25
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:30:25
*/
export const widgetGauge = {
code: 'widget-gauge',
type: 'chart',
label: '仪表盘',
icon: 'iconyibiaopan',
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: 'ringShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '圆环宽度',
name: 'pieWeight',
require: false,
placeholder: '',
value: 10,
},
]
},
{
name: '0%~30%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color30p0',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color30p5',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color30p10',
required: false,
placeholder: '',
value: 'rgba(0, 237, 3,1)'
},
]
},
{
name: '30%~70%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color70p0',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color70p5',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color70p10',
required: false,
placeholder: '',
value: 'rgba(255, 184, 0,1)'
},
]
},
{
name: '70%~100%渐变色',
list: [
{
type: 'vue-color',
label: '0处颜色',
name: 'color100p0',
required: false,
placeholder: '',
value: 'rgba(175, 36, 74,0.1)'
},
{
type: 'vue-color',
label: '0.5处颜色',
name: 'color100p5',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,0.6)'
},
{
type: 'vue-color',
label: '1处颜色',
name: 'color100p10',
required: false,
placeholder: '',
value: 'rgba(255, 36, 74,1)'
},
]
},
{
name: "刻度线",
list: [
{
type: 'el-switch',
label: '显示',
name: 'tickShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'tickDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'tickLength',
require: false,
placeholder: '',
value: 10,
},
{
type: 'el-input-number',
label: '宽度',
name: 'tickWidth',
require: false,
placeholder: '',
value: 2,
},
]
},
{
name: "指标线",
list: [
{
type: 'el-switch',
label: '显示',
name: 'splitShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'splitDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '长度',
name: 'splitLength',
require: false,
placeholder: '',
value: 14,
},
{
type: 'el-input-number',
label: '宽度',
name: 'splitWidth',
require: false,
placeholder: '',
value: 4,
},
]
},
{
name: "指标",
list: [
{
type: 'el-switch',
label: '显示',
name: 'labelShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '距离',
name: 'labelDistance',
require: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
]
},
{
name: "数值",
list: [
{
type: 'vue-color',
label: '颜色',
name: 'labelColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字号',
name: 'labelFontSize',
require: false,
placeholder: '',
value: 14,
},
{
type: 'el-select',
label: '字体粗细',
name: 'labelFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
]
},
],
],
// 数据
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: 50,
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-text',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,606 @@
/*
* @Descripttion: 柱状图渐变色 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:23:41
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:23:42
*/
export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart',
type: 'chart',
label: '柱形图-渐变色',
icon: 'iconzhuzhuangtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱形图-渐变色',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '柱体设置',
list: [
{
type: 'el-slider',
label: '最大宽度',
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '圆角',
name: 'radius',
require: false,
placeholder: '',
value: 5,
},
/* {
type: 'el-slider',
label: '最小高度',
name: 'minHeight',
require: false,
placeholder: '',
value: 0,
},*/
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 22
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#90979c'
},
{
type: 'el-input-text',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: 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: 'vue-color',
label: '0%处',
name: 'bar0color',
required: false,
placeholder: '',
value: '#00F4FF'
},
{
type: 'vue-color',
label: '100%处',
name: 'bar100color',
required: false,
placeholder: '',
value: '#004DA7'
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'shadowColor',
required: false,
placeholder: '',
value: '#00A0DD'
},
{
type: 'el-input-number',
label: '模糊系数',
name: 'shadowBlur',
required: false,
placeholder: '',
value: 4,
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]},
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-barchart',
dictKey: 'BAR_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,157 @@
/*
* @Descripttion: 超链接文本
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:03:58
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:05:04
*/
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: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,72 @@
/*
* @Descripttion: iframe json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:17:55
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:19:02
*/
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://report.anji-plus.com/index.html',
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,
},
],
}
}

@ -0,0 +1,103 @@
/*
* @Descripttion: 图片json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:07:23
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:07:24
*/
export const widgetImage = {
code: 'widget-image',
type: 'html',
label: '图片',
icon: 'icontupian',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '图片',
},
{
type: 'el-switch',
label: '开启旋转',
name: 'startRotate',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-slider',
label: '透明度',
name: 'transparency',
required: false,
placeholder: '',
value: 100
},
{
type: 'el-input-number',
label: '圆角',
name: 'borderRadius',
required: false,
placeholder: '',
value: '0'
},
{
type: 'custom-upload',
label: '图片地址',
name: 'imageAdress',
required: false,
placeholder: '',
value: 'http://10.108.26.197:9095/file/download/fd20d563-00aa-45e2-b5db-aff951f814ec',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,
},
],
}
}

@ -0,0 +1,775 @@
/*
* @Descripttion: 折线对比图 json
* @version:
* @Author: foming
* @Date: 2021-08-29 07:39:35
* @LastEditors: foming
* @LastEditTime: 2021-08-30
*/
export const widgetLineCompare = {
code: 'widgetLineCompareChart',
type: 'chart',
label: '折线对比图',
icon: 'iconzhexian',
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: '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: 2,
},
],
},
{
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: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '数值居中',
name: 'boundaryX',
required: false,
placeholder: '',
value: true,
},
{
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: 'splitNumberX',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineX',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: 'X轴线',
name: 'lineX',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
],
},
{
name: '上y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYTop',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYTop',
require: false,
placeholder: '',
value: ''
},{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeYTop',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '缩放',
name: 'scaleYTop',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYTop',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYTop',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineYTop',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: 'y轴线',
name: 'lineYTop',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线',
name: 'splitLineYTop',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYTop',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLinefontSizeYTop',
required: false,
placeholder: '',
value: 1,
},
],
},
{
name: '下y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowYBottom',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameYBottom',
require: false,
placeholder: '',
value: ''
},{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeYBottom',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '缩放',
name: 'scaleYBottom',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '数值切分',
name: 'splitNumberYBottom',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeYBottom',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-switch',
label: '刻度线',
name: 'tickLineYBottom',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: 'y轴线',
name: 'lineYBottom',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线',
name: 'splitLineYBottom',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorYBottom',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '分割线宽度',
name: 'splitLinefontSizeYBottom',
required: false,
placeholder: '',
value: 1,
},
],
},
{
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-switch',
label: '显示',
name: 'tipShow',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-select',
label: '类型',
name: 'tipType',
required: false,
placeholder: '',
selectOptions: [
{code: 'line', name: '线形'},
{code: 'cross', name: '十字形'},
],
value: 'line'
},
{
type: 'vue-color',
label: '颜色',
name: 'tipColor',
required: false,
placeholder: '#e68b55',
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 20,
},
{
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 50,
},
{
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 40,
},
{
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 40,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#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: 'px',
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,672 @@
/*
* @Descripttion: 折线堆叠图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:38:17
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:38:18
*/
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: '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: 'el-switch',
label: '显示',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: 'top'
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: 'horizontal'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#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: 'px',
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-26","name":"C","data":"20"},
{"axis":"2021-07-27","name":"A","data":"15"},
{"axis":"2021-07-27","name":"B","data":"30"},
{"axis":"2021-07-27","name":"C","data":"5"}
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-stackchart',
dictKey: 'STACK_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,674 @@
/*
* @Descripttion: 折线图json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:24:48
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:24:49
*/
export const widgetLinechart = {
code: 'widget-linechart',
type: 'chart',
label: '折线图',
icon: 'icontubiaozhexiantu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '折线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '折线设置',
list: [
{
type: 'el-switch',
label: '标记点',
name: 'markPoint',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '点大小',
name: 'pointSize',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-switch',
label: '平滑曲线',
name: 'smoothCurve',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-switch',
label: '面积堆积',
name: 'area',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-slider',
label: '面积厚度',
name: 'areaThickness',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '线条宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 4,
},
],
},
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
],
},
{
name: 'X轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'hideX',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'xName',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'nameFontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'Xcolor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeX',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'textAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-input-number',
label: '数值间隔',
name: 'textInterval',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalX',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorX',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineX',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorX',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: 'Y轴设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowY',
require: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '坐标名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '坐标名颜色',
name: 'nameColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '坐标字号',
name: 'namefontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'vue-color',
label: '数值颜色',
name: 'colorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '数值字号',
name: 'fontSizeY',
required: false,
placeholder: '',
value: 14,
},
{
type: 'el-slider',
label: '数值角度',
name: 'ytextAngle',
required: false,
placeholder: '',
value: 0
},
{
type: 'el-switch',
label: '缩放',
name: 'scale',
require: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '均分',
name: 'splitNumber',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-switch',
label: '轴反转',
name: 'reversalY',
required: false,
placeholder: '',
value: false
},
{
type: 'vue-color',
label: '轴颜色',
name: 'lineColorY',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-switch',
label: '分割线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
],
},
{
name: '数值设定',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShow',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: 12
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'fontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-text',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: ''
},
],
},
{
name: '坐标轴边距设置',
list: [
{
type: 'el-slider',
label: '左边距(像素)',
name: 'marginLeft',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-slider',
label: '顶边距(像素)',
name: 'marginTop',
required: false,
placeholder: '',
value: 50,
},
{
type: 'el-slider',
label: '右边距(像素)',
name: 'marginRight',
required: false,
placeholder: '',
value: 40,
},
{
type: 'el-slider',
label: '底边距(像素)',
name: 'marginBottom',
required: false,
placeholder: '',
value: 10,
},
],
},
{
name: '图例操作',
list: [
{
type: 'el-switch',
label: '图例',
name: 'isShowLegend',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '字体颜色',
name: 'lengedColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体大小',
name: 'lengedFontSize',
required: false,
placeholder: '',
value: 16,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'lengedWidth',
required: false,
placeholder: '',
value: 15,
},
{
type: 'el-select',
label: '横向位置',
name: 'lateralPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'left'
},
{
type: 'el-select',
label: '纵向位置',
name: 'longitudinalPosition',
required: false,
placeholder: '',
selectOptions: [
{code: 'top', name: '顶部'},
{code: 'bottom', name: '底部'},
],
value: ''
},
{
type: 'el-select',
label: '布局前置',
name: 'layoutFront',
required: false,
placeholder: '',
selectOptions: [
{code: 'vertical', name: '竖排'},
{code: 'horizontal', name: '横排'},
],
value: ''
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{color: '#1E90FF'}],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: {"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1009,3409,2309,5409,3409]}]},
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-linechart',
dictKey: 'LINE_PROPERTIES',
relactiveDomValue: 'dynamicData',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,61 @@
/*
* @Descripttion: 中国地图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:31:21
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:31:21
*/
export const widgetMap = {
code: 'widget-map',
type: 'chart',
label: '中国地图',
icon: 'iconzhongguoditu',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '迁徙图',
},
],
data: [],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
}
}

@ -0,0 +1,176 @@
/*
* @Descripttion: 滚动文件json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:00:00
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:04:32
*/
export const widgetMarquee = {
code: 'widget-marquee',
type: 'html',
label: '滚动文本',
icon: 'iconhengxiangwenzi',
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-input-number',
label: '滚动速度',
name: 'jScrollPane',
//required: false,
placeholder: '',
value: '50',
}*/
],
// 数据
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: '文本框',
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-text',
dictKey: 'TEXT_PROPERTIES',
value: '',
}
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,403 @@
/*
* @Descripttion: 南丁格尔玫瑰图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:32:40
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:32:40
*/
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: 'px',
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: 'px',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'PIE_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,255 @@
/*
* @Descripttion: 百分比图 json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:34:01
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:34:02
*/
export const widgetPiePercentage = {
code: 'widgetPiePercentageChart',
type: 'chart',
label: '百分比图',
icon: 'iconbaifenbi',
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: 'vue-color',
label: '数值颜色',
name: 'textNumColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '数值字体',
name: 'textNumFontSize',
required: false,
placeholder: '',
value: 40
},
{
type: 'el-select',
label: '字体粗细',
name: 'textNumFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'vue-color',
label: '%号颜色',
name: 'textPerColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-input-number',
label: '%号字体',
name: 'textPerFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'textPerFontWeight',
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: 'lineNumber',
required: false,
placeholder: '',
value: 8
},
{
type: 'el-input-number',
label: '刻度长度',
name: 'lineLength',
required: false,
placeholder: '',
value: 15
},
{
type: 'el-input-number',
label: '刻度宽度',
name: 'lineWidth',
required: false,
placeholder: '',
value: 5
},
{
type: 'vue-color',
label: '刻度颜色',
name: 'lineColor',
required: false,
placeholder: '',
value: '#061740'
},
]
},
{
name: '渐变色',
list: [
{
type: 'vue-color',
label: '0%处颜色',
name: 'color0Start',
required: false,
placeholder: '',
value: '#4FADFD'
},
{
type: 'vue-color',
label: '100%颜色',
name: 'color100End',
required: false,
placeholder: '',
value: '#28E8FA'
},
{
type: 'vue-color',
label: '余处颜色',
name: 'colorsurplus',
required: false,
placeholder: '',
value: '#173164'
},
]
}
],
],
// 数据
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: 60,
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'TEXT_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,403 @@
/*
* @Descripttion: 饼图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:28:20
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:28:20
*/
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: 'px',
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: 'px',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
relactiveDomValue: 'dynamicData',
dictKey: 'PIE_PROPERTIES',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,87 @@
/*
* @Descripttion: 轮播图
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:08:53
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:08:55
*/
export const widgetSliders = {
code: 'widget-slider',
type: 'html',
label: '轮播图片',
icon: 'slider',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
},
{
type: 'el-switch',
label: '隐藏图层',
name: 'hideLayer',
required: false,
placeholder: '',
},
{
type: 'el-select',
label: '轮播方向',
name: 'tabDirection',
required: false,
placeholder: '',
},
{
type: 'el-select',
label: '选择器',
name: 'tabSelector',
required: false,
placeholder: '',
},
{
type: 'el-input-number',
label: '轮播时间',
name: 'tabTime',
required: false,
placeholder: '',
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: true,
placeholder: 'px',
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: true,
placeholder: 'px',
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: true,
placeholder: '该容器在1920px大屏中的宽度',
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: true,
placeholder: '该容器在1080px大屏中的高度',
},
],
}
}

@ -0,0 +1,268 @@
/*
* @Descripttion: 表格json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:16:10
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:17:17
*/
export const widgetTable = {
code: 'widget-table',
type: 'html',
label: '表格',
icon: 'iconbiaoge',
options: {
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '表格',
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '16'
},
{
type: 'el-switch',
label: '开启滚动',
name: 'isRoll',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '滚动时间(毫秒)',
name: 'rollTime',
required: false,
placeholder: '',
value: 1000
},
{
type: 'el-input-number',
label: '滚动个数',
name: 'rollNumber',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '线条',
name: 'isLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '边框宽度',
name: 'borderWidth',
required: false,
placeholder: '',
value: 1
},
{
type: 'vue-color',
label: '边框颜色',
name: 'borderColor',
required: false,
placeholder: '',
value: '#fff'
},
[
{
name: '表头设置',
list: [
{
type: 'el-switch',
label: '表头显隐',
name: 'isHeader',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '表头颜色',
name: 'headColor',
require: false,
placeholder: '',
value: '#fff',
},
{
type: 'vue-color',
label: '表头背景',
name: 'headBackColor',
require: false,
placeholder: '',
value: '#0a73ff',
},
],
},
{
name: '表体设置',
list: [
{
type: 'vue-color',
label: '文字颜色',
name: 'bodyColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'vue-color',
label: '表格背景',
name: 'tableBgColor',
require: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '奇行颜色',
name: 'oldColor',
require: false,
placeholder: '',
value: '#0a2732',
},
{
type: 'vue-color',
label: '偶行颜色',
name: 'eventColor',
required: false,
placeholder: '',
value: '#003b51'
}
],
},
],
{
type: 'dynamic-add-table',
label: '',
name: 'dynamicAddTable',
required: false,
placeholder: '',
value: [{name: '日期', key: 'date', width: 200}, {name: '姓名', key: 'name', width: 200}, {
name: '地址',
key: 'address',
width: '200'
}]
}
],
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-table',
dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 300,
},
]
}
}

@ -0,0 +1,182 @@
/*
* @Descripttion: 文本json文件
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 06:52:13
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:01:07
*/
export const widgetText = {
code: 'widget-text',
type: 'html',
label: '文本',
icon: 'iconziyuan',
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,.0)',
},
{
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'
},
],
// 数据
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: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: '文本框',
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-text',
dictKey: 'TEXT_PROPERTIES',
value: '',
}
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,143 @@
/*
* @Descripttion: 时间控件json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:05:52
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:05:53
*/
export const widgetTime = {
code: 'widget-time',
type: 'html',
label: '当前时间',
icon: 'iconshijian',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '当前时间',
},
{
type: 'el-select',
label: '时间格式',
name: 'timeFormat',
required: false,
placeholder: '',
selectOptions: [
{code: 'yyyy-MM-dd', name: '日期'},
{code: 'yyyy-MM-dd hh:mm', name: '日期+时分'},
{code: 'yyyy-MM-dd hh:mm:ss', name: '日期+时分秒'},
{code: 'MM-dd', name: '日期无年'},
{code: 'hh:mm', name: '时分'},
{code: 'hh:mm:ss', name: '时分秒'},
{code: 'year-week', name: '日期+星期'},
{code: 'year-h-m-week', name: '日期+时分+星期'},
{code: 'year-h-m-s-week', name: '日期+时分秒+星期'},
{code: 'week', name: '星期'}
],
value: 'yyyy-MM-dd hh:mm:ss'
},
{
type: 'el-input-number',
label: '字体间距',
name: 'letterSpacing',
required: false,
placeholder: '',
value: '0'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '26'
},
{
type: 'vue-color',
label: '字体颜色',
name: 'color',
required: false,
placeholder: '',
value: '#FAD400'
},
{
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: 'left'
},
],
// 数据
data: [],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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: 100,
},
],
}
}

@ -0,0 +1,14 @@
/*
* @Descripttion: 全能组件json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:20:11
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:26:02
*/
export const widgetUniversal = {
code: 'widget-universal',
type: 'html',
label: '全能组件',
icon: 'univresal',
}

@ -0,0 +1,72 @@
/*
* @Descripttion: 视频json
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:10:22
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:10:23
*/
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: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,
},
],
}
}

@ -0,0 +1,85 @@
/*
* @Descripttion: 主文件
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 06:43:07
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 08:00:59
*/
import { widgetTool } from "./main"
const screenConfig = {
code: 'screen',
type: 'screen',
label: '大屏设置',
icon: '',
options: {
setup: [
{
type: 'el-input-number',
label: '大屏宽度',
name: 'width',
required: false,
placeholder: 'px',
value: '1920',
},
{
type: 'el-input-number',
label: '大屏高度',
name: 'height',
required: false,
placeholder: 'px',
value: '1080',
},
{
type: 'el-input-text',
label: '标题',
name: 'title',
require: false,
placeholder: '',
value: '大屏',
},
{
type: 'el-input-textarea',
label: '大屏简介',
name: 'description',
required: false,
placeholder: '',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'backgroundColor',
required: false,
placeholder: '',
value: '#000',
},
{
type: 'custom-upload',
label: '图片地址',
name: 'backgroundImage',
required: false,
placeholder: '',
value: 'https://report.anji-plus.com/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b',
},
],
data: [],
position: [],
}
}
const widgetTools = [
...widgetTool
]
const getToolByCode = function (code) {
// 获取大屏底层设置属性
if (code == 'screen') {
return screenConfig
}
// 获取组件
var item = widgetTools.find(function (item, index, arrs) {
return item.code === code
})
return item
}
export {widgetTools, getToolByCode}

@ -0,0 +1,63 @@
/*
* @Descripttion: json 入口文件
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:46:46
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 07:54:41
*/
import { widgetText } from "./componentsJSON/widget-text"
import { widgetMarquee } from "./componentsJSON/widget-marquee"
import { widgetHref } from "./componentsJSON/widget-href"
import { widgetTime } from "./componentsJSON/widget-time"
import { widgetImage } from "./componentsJSON/widget-image"
import { widgetSliders } from "./componentsJSON/widget-slider"
import { widgetVideo } from "./componentsJSON/widget-video"
import { widgetTable } from "./componentsJSON/widget-table"
import { widgetIframe } from "./componentsJSON/widget-iframe"
import { widgetUniversal } from "./componentsJSON/widget-universal"
import { widgetBarchart } from "./componentsJSON/widget-barchart"
import { widgetGradientBarchart } from "./componentsJSON/widget-gradient-barchart"
import { widgetLinechart } from "./componentsJSON/widget-linechart"
import { widgetBarlinechart } from "./componentsJSON/widget-barlinechart"
import { widgetPiechart } from "./componentsJSON/widget-piechart"
import { widgetFunnel } from "./componentsJSON/widget-funnel"
import { widgetGauge } from "./componentsJSON/widget-gauge"
import { widgetMap } from "./componentsJSON/widget-map"
import { WidgetPieNightingale } from "./componentsJSON/widget-pie-nightingale"
import { widgetPiePercentage } from "./componentsJSON/widget-pie-percentage"
import { widgetAirbubbleMap } from "./componentsJSON/widget-airbubble-map"
import { widgetBarStack } from "./componentsJSON/widget-bar-stack"
import { widgetLineStack } from "./componentsJSON/widget-line-stack"
import { widgetBarCompare } from "./componentsJSON/widget-bar-compare"
import { widgetLineCompare } from "./componentsJSON/widget-line-compare"
export const widgetTool = [
// type=html类型的组件
widgetText,
widgetMarquee,
widgetHref,
widgetTime,
widgetImage,
// widgetSliders,
widgetVideo,
widgetTable,
widgetIframe,
// widgetUniversal,
widgetBarchart,
widgetGradientBarchart,
widgetLinechart,
widgetBarlinechart,
widgetPiechart,
widgetFunnel,
widgetGauge,
widgetMap,
WidgetPieNightingale,
widgetPiePercentage,
widgetAirbubbleMap,
widgetBarStack,
widgetLineStack,
widgetBarCompare,
widgetLineCompare
]

@ -23,9 +23,10 @@ export default {
color: '#ffffff',
},
},
//
grid: [
{
show: false,
{//
show: false,//线
left: '4%',
top: 60,
bottom: 10,
@ -36,10 +37,10 @@ export default {
show: false,
left: '50.5%',
top: 60,
bottom: 80,
bottom: 25,
width: '0%'
},
{
{//
show: false,
right: '4%',
top: 60,
@ -50,9 +51,6 @@ export default {
],
//
legend: {
data: ['success', 'fail'],
bottom: 10,
center: true,
textStyle: {
color: '#fff',
textAlign: 'center'
@ -63,9 +61,10 @@ export default {
xAxis: [
{//
splitNumber: 2,
show: true,
type: 'value',
inverse: true,
axisLine: {
axisLine: {//线
show: false,
},
axisTick: {
@ -79,7 +78,7 @@ export default {
fontSize: 12
}
},
splitLine: { // 线
splitLine: { // 线
show: true,
lineStyle: {
color: '#57617f',
@ -94,6 +93,7 @@ export default {
},
{//
gridIndex: 2,
show: true,
type: 'value',
axisLine: {
show: false,
@ -197,9 +197,9 @@ export default {
color: '#36c5e7',
barBorderRadius: [8, 0, 0, 8],
},
/*emphasis: {
emphasis: {
show: false,
},*/
},
},
data: [],
},
@ -274,7 +274,12 @@ export default {
// options
editorOptions() {
this.setOptionsTitle();
this.setOptionsXLeft();
this.setOptionsXRight();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsGrid();
this.setOptionsLegend();
this.setOptionsColor();
this.setOptionsData();
@ -293,6 +298,102 @@ export default {
};
this.options.title = title;
},
// X
setOptionsXLeft() {
const optionsSetup = this.optionsSetup;
const xAxisLeft = {
splitNumber: optionsSetup.splitNumberLeft,
type: 'value',
show : optionsSetup.hideXLeft,
inverse: true,
axisLine: {//X线
show: optionsSetup.xLineLeft,
lineStyle: {
color: optionsSetup.lineColorXLeft,
},
},
axisTick: {
show: optionsSetup.tickLineLeft,
},
position: 'bottom',
axisLabel: { // x
show: true,
textStyle: {
color: optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft
}
},
splitLine: { // 线
show: optionsSetup.SplitLineLeft,
lineStyle: {
color: optionsSetup.SplitLineColorLeft,
width: optionsSetup.SplitLinefontSizeLeft,
type: 'solid'
}
}
}
this.options.xAxis[0] = xAxisLeft;
},
// X
setOptionsXRight() {
const optionsSetup = this.optionsSetup;
const xAxisRight = {
gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight,
show : optionsSetup.hideXRight,
type: 'value',
axisLine: {//X线
show: optionsSetup.xLineRight,
lineStyle: {
color: optionsSetup.lineColorXRight,
},
},
axisTick: {
show: optionsSetup.tickLineRight,
},
position: 'bottom',
axisLabel: { // x
show: true,
textStyle: {
color: optionsSetup.XcolorRight,
fontSize: optionsSetup.fontSizeXRight
}
},
splitLine: { // 线
show: optionsSetup.SplitLineRight,
lineStyle: {
color: optionsSetup.SplitLineColorRight,
width: optionsSetup.SplitLinefontSizeRight,
type: 'solid'
}
}
}
this.options.xAxis[2] = xAxisRight;
},
// Y
setOptionsY() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.lineY,
lineStyle: {
color: optionsSetup.lineColorY
}
};
const axisTick = {
show: optionsSetup.tickLineY
};
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
};
this.options.yAxis[1]['axisLine'] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel;
},
//
setOptionsTop() {
const optionsSetup = this.optionsSetup;
@ -302,7 +403,6 @@ export default {
series[0].label = {
normal: {
show: optionsSetup.isShow,
//color: 'red',
position: 'insideLeft',
textStyle: {
fontSize: optionsSetup.fontSize,
@ -334,6 +434,49 @@ export default {
}
this.options.series = series;
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
textStyle: {
color: optionsSetup.lineColor,
fontSize: optionsSetup.fontSize
}
};
this.options.tooltip = tooltip;
},
//
setOptionsGrid() {
const optionsSetup = this.optionsSetup;
const grid = [
{//
show: optionsSetup.frameLineLeft,
left: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
width: '40%'
},
{//
show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom + 15,
width: '0%'
},
{//
show: optionsSetup.frameLineRight,
right: optionsSetup.marginLeftRight,
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom,
containLabel: true,
width: '40%'
},
]
this.options.grid = grid;
},
//
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
@ -398,13 +541,6 @@ 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);
}
//
let xAxisList = [];
let yAxisList = [];
@ -436,17 +572,6 @@ export default {
this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data
this.options.yAxis[1]['data'] = xAxisList
/*if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = xAxisList;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}*/
},
//
dynamicDataFn(val, refreshTime, optionsSetup) {
@ -467,52 +592,13 @@ export default {
});
},
renderingFn(optionsSetup, val) {
//
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = [];
this.options.yAxis.data = val.xAxis;
this.options.xAxis.type = "value";
this.options.yAxis.type = "category";
} else {
this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [];
this.options.xAxis.type = "category";
this.options.yAxis.type = "value";
}
const series = [];
for (const i in val.series) {
if (val.series[i].type == "bar") {
series.push({
name: val.series[i].name,
type: "bar",
data: val.series[i].data,
barGap: "0%",
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
},
//
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
this.options.yAxis[1]['data'] = val.xAxis
if (val.series[0].type == "bar"){
this.options.series[0]['name'] = val.series[0].name
this.options.series[0]['data'] = val.series[0].data
this.options.series[1]['name'] = val.series[1].name
this.options.series[1]['data'] = val.series[1].data
}
this.options.series = series
}
}
};

@ -210,6 +210,10 @@ export default {
type: "category",
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
nameTextStyle: {
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
axisLabel: {
@ -241,12 +245,17 @@ export default {
const optionsCollapse = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: { //
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.namefontSizeY
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
interval: optionsCollapse.ytextInterval, //
rotate: optionsCollapse.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // y

@ -0,0 +1,662 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
export default {
name: "WidgetBarCompareChart",
// https://www.makeapie.com/editor.html?c=xOjLyozu2W
components: {},
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
options: {
axisPointer: {
link: {
xAxisIndex: "all",
},
},
title: {
x: 'center',
textStyle: {
color: '#ffffff',
},
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#ffffff',
type: 'dashed',
},
},
/*axisPointer: {
type: 'cross',
lineStyle: {
color: '#ffffff',
type: 'dashed',
},
crossStyle: {
color: '#ffffff',
}
},*/
},
//
grid: [
{//
left: 30,
right: 20,
top: '60px',
containLabel: true,
bottom: '50%',
},
{ //
left: 30,
containLabel: true,
right: 20,
top: '51%',
},
],
//
legend: {
textStyle: {
color: '#fff',
textAlign: 'center'
},
//itemGap:80,
//itemWidth: 0
},
xAxis: [
{//
gridIndex: 0,
show: true,
type: 'category',
boundaryGap: true, //
axisLine: { //x线
show: true,
lineStyle: {
color: '#ffffff',
}
},
axisTick: { //
show: true,
},
axisLabel: { // X
show: true,
textStyle: {
interval: 0,
color: '#ffffff',
fontSize: 14
}
},
data: [],
},
{//
gridIndex: 1,
show: true,
type: 'category',
position: 'top',
boundaryGap: true, //
axisLine: { // x线
show: true,
lineStyle: {
color: '#ffffff',
}
},
axisTick: { //
show: true,
},
axisLabel: {
show: false,
interval: 0,
},
data: [],
},
],
yAxis: [
{
gridIndex: 0,
show: true,
scale: true, // 0,false0
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 14,
},
},
axisLine: { // 线
show: true,
lineStyle: {
color: '#ffffff',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#ffffff',
},
},
axisPointer: {
snap: true
},
},
{
gridIndex: 1,
scale: false, // 0
inverse: true, //
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
fontSize: 14,
},
},
axisLine: { // 线
show: true,
lineStyle: {
color: '#ffffff',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#ffffff',
},
},
axisPointer: {
snap: true
},
},
],
series: [
{
name: '',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
showSymbol: true,//
symbol: 'circle',
symbolSize: 5,
smooth: true, // 线线
itemStyle: {
color: '#36c5e7',
},
lineStyle: {
color: '#36c5e7',
width: 2,
},
label: { //
position: 'top',
distance: 10,
show: true,
color: '#36c5e7',
fontSize: 14,
},
data: [],
},
{
name: '',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
showSymbol: true,//
symbol: 'circle',
symbolSize: 5,
smooth: true, // 线线
itemStyle: {
color: '#e68b55',
},
lineStyle: {
color: '#e68b55',
width: 2,
},
label: {//
position: 'bottom',
distance: 10,
show: true,
color: '#e68b55',
fontSize: 16,
},
data: [],
},
]
},
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.optionsSetup = 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.setOptionsYTop();
this.setOptionsYBottom();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsGrid();
this.setOptionsLegend();
this.setOptionsColor();
this.setOptionsData();
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup;
const title = {};
title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign;
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight
};
this.options.title = title;
},
// X
setOptionsX() {
const optionsSetup = this.optionsSetup;
const xAxis0 = {
gridIndex: 0,
show: optionsSetup.isShowX,
name: optionsSetup.xName, //
nameTextStyle: {
color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX
},
type: 'category',
boundaryGap: optionsSetup.boundaryX, //
axisLine: { //x线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorX,
}
},
axisTick: { //
show: optionsSetup.tickLineX,
},
axisLabel: { // X
show: true,
interval: optionsSetup.splitNumberX,
textStyle: {
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX
}
},
}
const xAxis1 = {
gridIndex: 1,
show: optionsSetup.isShowX,
type: 'category',
position: 'top',
boundaryGap: optionsSetup.boundaryX, //
axisLine: { // x线
show: optionsSetup.lineX,
lineStyle: {
color: optionsSetup.lineColorX,
}
},
axisTick: { //
show: optionsSetup.tickLineX,
},
axisLabel: {
show: false,
interval: optionsSetup.splitNumberX,
},
}
this.options.xAxis[0] = xAxis0;
this.options.xAxis[1] = xAxis1;
},
// y
setOptionsYTop() {
const optionsSetup = this.optionsSetup;
const yAxis = {
gridIndex: 0,
splitNumber: optionsSetup.splitNumberYTop,
show: optionsSetup.isShowYTop,
scale: optionsSetup.scaleYTop, //
name: optionsSetup.textNameYTop, //
nameTextStyle: {
color: optionsSetup.nameColorYTop,
fontSize: optionsSetup.namefontSizeYTop
},
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYTop,
fontSize: optionsSetup.fontSizeYTop,
},
},
axisTick: { //
show: optionsSetup.tickLineYTop,
},
axisLine: { // 线
show: optionsSetup.lineYTop,
lineStyle: {
color: optionsSetup.lineColorYTop,
},
},
splitLine: {
show: optionsSetup.splitLineYTop,
lineStyle: {
width: optionsSetup.splitLinefontSizeYTop,
color: optionsSetup.splitLineColorYTop,
},
},
axisPointer: {
snap: true
},
}
this.options.yAxis[0] = yAxis
},
// Y
setOptionsYBottom() {
const optionsSetup = this.optionsSetup;
const yAxis = {
gridIndex: 1,
splitNumber: optionsSetup.splitNumberYBottom,
show: optionsSetup.isShowYBottom,
scale: optionsSetup.scaleYBottom, //
name: optionsSetup.textNameYBottom, //
nameTextStyle: {
color: optionsSetup.nameColorYBottom,
fontSize: optionsSetup.namefontSizeYBottom
},
inverse: true, //
axisLabel: {
show: true,
textStyle: {
color: optionsSetup.colorYBottom,
fontSize: optionsSetup.fontSizeYBottom,
},
},
axisTick: { //
show: optionsSetup.tickLineYBottom,
},
axisLine: { // 线
show: optionsSetup.lineYBottom,
lineStyle: {
color: optionsSetup.lineColorYBottom,
},
},
splitLine: {
show: optionsSetup.splitLineYBottom,
lineStyle: {
width: optionsSetup.splitLinefontSizeYBottom,
color: optionsSetup.splitLineColorYBottom,
},
},
axisPointer: {
snap: true
},
}
this.options.yAxis[1] = yAxis
},
// 线
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series
// 线
for (const key in series) {
series[key].showSymbol = optionsSetup.markPoint
series[key].symbolSize = optionsSetup.pointSize
series[key].smooth = optionsSetup.smoothCurve
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100
}
} else {
series[key].areaStyle = {
opacity: 0
}
}
}
//
if (series[0].type == 'line') {
series[0].label = {
position: 'top',
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
series[1].label = {
position: 'bottom',
distance: 10,
show: optionsSetup.isShow,
color: optionsSetup.subTextColor,
fontSize: optionsSetup.fontSize,
fontWeight: optionsSetup.fontWeight
}
}
},
// tooltip
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
let tooltip = {}
if (optionsSetup.tipType == "line") {
tooltip = {
show: optionsSetup.tipShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
lineStyle: {
color: optionsSetup.tipColor,
type: 'dashed',
},
},
}
} else {
tooltip = {
show: optionsSetup.tipShow,
trigger: 'axis',
axisPointer: {
type: optionsSetup.tipType,
lineStyle: {
color: optionsSetup.tipColor,
type: 'dashed',
},
crossStyle: {
color: optionsSetup.tipColor,
}
},
}
}
this.options.tooltip = tooltip;
},
//
setOptionsGrid() {
const optionsSetup = this.optionsSetup;
const grid = [
{//
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
top: optionsSetup.marginTop,
containLabel: true,
bottom: '50%',
},
{ //
left: optionsSetup.marginLeft,
right: optionsSetup.marginRight,
containLabel: true,
top: '51%',
bottom: optionsSetup.marginBottom,
},
]
this.options.grid = grid;
},
//
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
legend.itemWidth = optionsSetup.lengedWidth;
},
//
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
const series = this.options.series
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
if (!customColor) return;
for (const key in series) {
const itemStyle = {
color: arrColor[key],
}
const lineStyle = {
color: arrColor[key],
width: optionsSetup.lineWidth,
}
this.options.series[key].itemStyle = itemStyle
this.options.series[key].lineStyle = lineStyle
}
},
//
setOptionsData() {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData; // or
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;
},
//
staticDataFn(val) {
//
let xAxisList = [];
let yAxisList = [];
let arrayList = [];
for (const i in val) {
xAxisList[i] = val[i].axis
yAxisList[i] = val[i].name
}
xAxisList = this.setUnique(xAxisList)
yAxisList = this.setUnique(yAxisList)
for (const i in yAxisList) {
const data = new Array(yAxisList.length).fill(0)
for (const j in xAxisList) {
for (const k in val) {
if (val[k].name == yAxisList[i]) {
if (val[k].axis == xAxisList[j]) {
data[j] = val[k].data
}
}
}
}
arrayList.push({
name: yAxisList[i],
data: data
})
}
this.options.series[0]['name'] = arrayList[0].name
this.options.series[0]['data'] = arrayList[0].data
this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data
this.options.xAxis[0]['data'] = xAxisList
this.options.xAxis[1]['data'] = xAxisList
},
//
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) {
this.options.xAxis[0]['data'] = val.xAxis
this.options.xAxis[1]['data'] = val.xAxis
if (val.series[0].type == "line") {
this.options.series[0]['name'] = val.series[0].name
this.options.series[0]['data'] = val.series[0].data
this.options.series[1]['name'] = val.series[1].name
this.options.series[1]['data'] = val.series[1].data
}
}
}
};
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -319,7 +319,6 @@ export default {
symbol: 'circle',
showSymbol: optionsSetup.markPoint,
symbolSize: optionsSetup.pointSize,
symbolColor: arrColor[i],
smooth: optionsSetup.smoothCurve,
// 线
lineStyle: {

@ -34,6 +34,7 @@ import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
export default {
name: "WidgetTemp",
@ -60,7 +61,8 @@ export default {
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart
widgetBarCompareChart,
widgetLineCompareChart
},
model: {
prop: "value",

@ -44,6 +44,7 @@ import widgetAirBubbleMap from "./map/widgetAirBubbleMap";
import widgetBarStackChart from "./bar/widgetBarStackChart";
import widgetLineStackChart from "./line/widgetLineStackChart";
import widgetBarCompareChart from "./bar/widgetBarCompareChart";
import widgetLineCompareChart from "./line/widgetLineCompareChart";
export default {
name: "Widget",
@ -70,7 +71,8 @@ export default {
widgetAirBubbleMap,
widgetBarStackChart,
widgetLineStackChart,
widgetBarCompareChart
widgetBarCompareChart,
widgetLineCompareChart
},
model: {
prop: "value",

@ -165,15 +165,18 @@ export default {
const optionsCollapse = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.nameFontSizeY
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
rotate: optionsCollapse.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // x
fontSize: optionsCollapse.fontSizeY

@ -171,14 +171,14 @@ export default {
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
@ -206,46 +206,45 @@ export default {
const yAxis = [
{
type: "value",
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
splitNumber: optionsCollapse.splitNumberLeft,//
show: optionsCollapse.isShowYLeft, //
name: optionsCollapse.textNameYLeft, //
nameTextStyle: { //
color: optionsCollapse.nameColorYLeft,
fontSize: optionsCollapse.namefontSizeYLeft
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // x
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
}
},
axisLine: {
show: true,
lineStyle: {
color: "#fff"
color: optionsCollapse.lineColorY
}
},
splitLine: {
show: optionsCollapse.isShowSplitLineY,
lineStyle: {
color: optionsCollapse.splitLineColorY
}
show: false,
}
},
{
type: "value",
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
splitNumber: optionsCollapse.splitNumberRight,//
show: optionsCollapse.isShowYRight, //
name: optionsCollapse.textNameYRight, //
nameTextStyle: { //
color: optionsCollapse.nameColorYRight,
fontSize: optionsCollapse.namefontSizeYRight
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // x
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
}
},
@ -257,13 +256,9 @@ export default {
},
splitLine: {
show: false,
lineStyle: {
color: optionsCollapse.splitLineColorY
}
}
}
];
this.options.yAxis = yAxis;
},
// 线

@ -1,10 +1,12 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "WidgetGauge",
components: {},
@ -17,35 +19,108 @@ export default {
options: {
series: [
{
name: "Pressure",
type: "gauge",
detail: {
formatter: "{value}",
textStyle: {
fontSize: 12
}
},
type: 'gauge',
z: 100,
axisLine: {
lineStyle: {
width: 10,
color: [
[
0.3,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(0, 237, 3,0.1)',
},
{
offset: 0.5,
color: 'rgba(0, 237, 3,0.6)',
},
{
offset: 1,
color: 'rgba(0, 237, 3,1)',
},
]),
],
[
0.7,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(255, 184, 0,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 184, 0,0.6)',
},
{
offset: 1,
color: 'rgba(255, 184, 0,1)',
},
]),
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: 'rgba(175, 36, 74,0.1)',
},
{
offset: 0.5,
color: 'rgba(255, 36, 74,0.6)',
},
{
offset: 1,
color: 'rgba(255, 36, 74,1)',
},
]),
],
],
},
},
pointer: {
itemStyle: {
color: 'auto',
},
},
axisTick: {
show: true,
distance: 0,
length: 10,
lineStyle: {
color: 'auto',
width: 2,
},
},
splitLine: {
show: true,
distance: 0,
length: 14,
lineStyle: {
width: 10
}
color: 'auto',
width: 4,
},
},
axisLabel: {
show: true,
fontSize: 12
color: 'white',
distance: 2,
fontSize: 10,
},
axisTick: {
show: true
detail: {
valueAnimation: true,
formatter: '{value} %',
color: 'white',
fontSize: 18,
},
data: [
{
value: 50,
name: ""
}
]
}
]
value: 70,
},
],
},
],
},
optionsStyle: {}, //
optionsData: {}, //
@ -72,8 +147,7 @@ export default {
this.optionsData = val.data; //
this.optionsCollapse = val.collapse; //
this.optionsSetup = val.setup; //
this.setOptions();
this.setOptionsData();
this.editorOptions();
},
deep: true
}
@ -83,21 +157,97 @@ export default {
this.optionsData = this.value.data;
this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup;
this.setOptions();
this.setOptionsData();
this.editorOptions();
},
methods: {
editorOptions() {
this.setOptions()
this.setOptionsData()
},
setOptions() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "gauge") {
series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight;
series[key].axisLabel.show = optionsSetup.showScaleValue;
series[key].axisLabel.fontSize = optionsSetup.scaleFontSize;
series[key].axisTick.show = optionsSetup.showTickMarks;
series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize;
if (series[0].type == 'gauge') {
const axisLine = {
show: optionsSetup.ringShow,
lineStyle: {
width: optionsSetup.pieWeight,
color: [
[
0.3,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color30p0,
},
{
offset: 0.5,
color: optionsSetup.color30p5,
},
{
offset: 1,
color: optionsSetup.color30p10,
},
]),
],
[
0.7,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color70p0,
},
{
offset: 0.5,
color: optionsSetup.color70p5,
},
{
offset: 1,
color: optionsSetup.color70p10,
},
]),
],
[
1,
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: optionsSetup.color100p0,
},
{
offset: 0.5,
color: optionsSetup.color100p5,
},
{
offset: 1,
color: optionsSetup.color100p10,
},
]),
],
],
},
}
const axisTick = {
show: optionsSetup.tickShow,
distance: optionsSetup.tickDistance,
length: optionsSetup.tickLength,
lineStyle: {
color: 'auto',
width: optionsSetup.tickWidth,
},
}
const splitLine = {
show: optionsSetup.splitShow,
distance: optionsSetup.splitDistance,
length: optionsSetup.splitLength,
lineStyle: {
color: 'auto',
width: optionsSetup.splitWidth,
},
}
series[0].axisLine = axisLine
series[0].axisTick = axisTick
series[0].splitLine = splitLine
}
},
setOptionsData() {
@ -107,15 +257,22 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const staticData = typeof val == "string" ? JSON.parse(val) : val;
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
series[key].detail.formatter = `{value}${staticData.unit}`;
series[key].data[0] = {
value: staticData.value,
name: staticData.name
};
const data = [
{
value: val
}
]
const detail = {
valueAnimation: true,
formatter: '{value} %',
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
}
series[0].data = data
series[0].detail = detail
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@ -135,14 +292,22 @@ export default {
});
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
series[key].detail.formatter = `{value}${val.unit}`;
series[key].data[0] = {
value: val.value,
name: val.name || ""
};
const data = [
{
value: val[0].value
}
]
const detail = {
valueAnimation: true,
formatter: '{value} %',
color: optionsSetup.labelColor,
fontSize: optionsSetup.labelFontSize,
fontWeight: optionsSetup.labelFontWeight,
}
series[0].data = data
series[0].detail = detail
}
}
};

@ -136,14 +136,14 @@ export default {
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize
color: optionsCollapse.nameColorX,
fontSize: optionsCollapse.nameFontSizeX
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
@ -170,17 +170,20 @@ export default {
const optionsCollapse = this.optionsSetup;
const yAxis = {
type: "value",
scale : optionsCollapse.scale,
splitNumber: optionsCollapse.splitNumber,//
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY
nameTextStyle: { //
color: optionsCollapse.nameColorY,
fontSize: optionsCollapse.namefontSizeY
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
rotate: optionsCollapse.ytextAngle, //
textStyle: {
color: optionsCollapse.colorY, // x
color: optionsCollapse.colorY, // y
fontSize: optionsCollapse.fontSizeY
}
},
@ -197,7 +200,6 @@ export default {
}
}
};
this.options.yAxis = yAxis;
},
// 线
@ -275,7 +277,6 @@ export default {
fontSize: optionsCollapse.fontSize
};
legend.itemWidth = optionsCollapse.lengedWidth;
console.log(legend);
},
//
setOptionsColor() {

@ -1,6 +1,7 @@
<template>
<div :style="styleObj">
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
<!--表头-->
<div class="title">
<div
v-for="(item, index) in header"
@ -10,6 +11,7 @@
{{ item.name }}
</div>
</div>
<!--数据-->
<div class="bd">
<ul class="infoList">
<li v-for="(item, index) in list" :key="index">
@ -27,11 +29,11 @@
</div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
vue.use(VueSuperSlide);
export default {
components: {
VueSuperSlide
},
props: {
value: Object,
ispreview: Boolean
@ -44,7 +46,7 @@ export default {
mainCell: ".bd ul",
effect: "topLoop",
autoPage: true,
effect: "top",
//effect: "top",
autoPlay: true,
vis: 5
},
@ -130,7 +132,6 @@ export default {
},
handlerData() {
const tableData = this.optionsData;
console.log(tableData);
tableData.dataType == "staticData"
? this.handlerStaticData(tableData.staticData)
: this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
@ -183,31 +184,38 @@ export default {
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);
}

@ -103,7 +103,7 @@ export default {
const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
for (let i = 0; i < 7; i++) {
if (dayCycle == i) {
dayCycle = "星期" + dayCycleArray[i];
dayCycle = " 星期" + dayCycleArray[i];
}
}
if (fmt == "year-week") {

Loading…
Cancel
Save