tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 代码合并

Browse Source
main
wu.jian2
parent 9dec243636 609f397cbd
commit dac734457a
25 changed files with 1219 additions and 38 deletions

8
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDigitalFlopChart.java
Unescape Escape View File

@ -61,6 +61,14 @@ public class ScreenDigitalFlopChart extends Chart {
@ApiModelProperty(notes = "高度")
private Integer height;
@ApiModelProperty(notes = "边框颜色")
private String borderColor;
@ApiModelProperty(notes = "边框宽度")
private Integer borderWidth;
}

6
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenNumbersChart.java
Unescape Escape View File

@ -38,5 +38,11 @@ public class ScreenNumbersChart extends Chart {
@ApiModelProperty(notes = "标题")
private String title;
@ApiModelProperty(notes = "文字对齐方式")
private String align;
@ApiModelProperty(notes = "文字间距")
private Integer letterSpacing;
}
}

2
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenPictureChart.java
Unescape Escape View File

@ -19,7 +19,7 @@ public class ScreenPictureChart extends Chart {
@Data
public static class Customize {
@ApiModelProperty(notes = "透明度")
private Integer opacity;
private Float opacity;
@ApiModelProperty(notes = "圆角")
private Integer radius;

6
DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTextChart.java
Unescape Escape View File

@ -37,5 +37,11 @@ public class ScreenTextChart extends Chart {
@ApiModelProperty(notes = "标题")
private String title;
@ApiModelProperty(notes = "文字对齐方式")
private String align;
@ApiModelProperty(notes = "文字间距")
private Integer letterSpacing;
}
}

7
data-room-ui/packages/BasicComponents/Numbers/index.vue
Unescape Escape View File

@ -5,7 +5,7 @@
>
<div
class="content-box"
:style="{'font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
:style="{'text-align': config.customize.align,'letter-spacing': config.customize.letterSpacing +'px','font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
>
{{ config.customize.title }}
</div>
@ -62,10 +62,11 @@ export default {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
//justify-content: center;
}
.content-box{
//text-align: center;
width: 100%;
text-align: center;
/* 将背景设为渐变 */
/*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
/* 规定背景绘制区域 */

39
data-room-ui/packages/BasicComponents/Numbers/setting.vue
Unescape Escape View File

@ -74,6 +74,16 @@
placeholder="请输入数字权重"
/>
</el-form-item>
<el-form-item
label="数字间距"
label-width="100px"
>
<el-input-number
v-model="config.customize.letterSpacing"
class="bs-el-input-number"
placeholder="请输入数字间距"
/>
</el-form-item>
<el-form-item
label="数字类型"
label-width="100px"
@ -91,6 +101,23 @@
/>
</el-select>
</el-form-item>
<el-form-item
label="数字对齐方式"
label-width="100px"
>
<el-select
v-model="config.customize.align"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="item in alignList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<TextGradient
v-model="config.customize.color"
label="数字"
@ -119,6 +146,18 @@ export default {
data () {
return {
fontFamilyList: fontList,
alignList: [{
label: '靠左',
value: 'left'
},
{
label: '居中',
value: 'center'
},
{
label: '靠右',
value: 'right'
}],
rules: {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }

6
data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
Unescape Escape View File

@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config'
export const settingConfig = {
theme: 'dark',
data:[],
data: [],
text: '文本标签占位符', // text内容
// 设置面板属性的显隐
displayOption: {
@ -58,7 +58,9 @@ const customConfig = {
fontSize: 20,
fontWeight: 700,
fontFamily: '', // 字体类型
color: 'left,#ffffff,#ffffff'
color: 'left,#ffffff,#ffffff',
align: 'center', // 文字对齐方式
letterSpacing: 1// 文字间距
}
}

5
data-room-ui/packages/BasicComponents/Texts/index.vue
Unescape Escape View File

@ -5,7 +5,7 @@
>
<div
class="content-box"
:style="{'font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
:style="{'text-align': config.customize.align,'letter-spacing': config.customize.letterSpacing +'px','font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
>
{{ config.customize.title }}
</div>
@ -73,7 +73,8 @@ export default {
justify-content: center;
}
.content-box{
//text-align: center;
width: 100%;
text-align: center;
/* 将背景设为渐变 */
/*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
/* 规定背景绘制区域 */

39
data-room-ui/packages/BasicComponents/Texts/setting.vue
Unescape Escape View File

@ -74,6 +74,16 @@
placeholder="请输入文字权重"
/>
</el-form-item>
<el-form-item
label="文字间距"
label-width="100px"
>
<el-input-number
v-model="config.customize.letterSpacing"
class="bs-el-input-number"
placeholder="请输入文字间距"
/>
</el-form-item>
<el-form-item
label="文字类型"
label-width="100px"
@ -91,6 +101,23 @@
/>
</el-select>
</el-form-item>
<el-form-item
label="文字对齐方式"
label-width="100px"
>
<el-select
v-model="config.customize.align"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="item in alignList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<TextGradient v-model="config.customize.color" />
</div>
</el-form>
@ -116,6 +143,18 @@ export default {
data () {
return {
fontFamilyList: fontList,
alignList: [{
label: '靠左',
value: 'left'
},
{
label: '居中',
value: 'center'
},
{
label: '靠右',
value: 'right'
}],
rules: {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }

6
data-room-ui/packages/BasicComponents/Texts/settingConfig.js
Unescape Escape View File

@ -8,7 +8,7 @@ import { commonConfig, displayOption } from 'data-room-ui/js/config'
export const settingConfig = {
theme: 'dark',
data:[],
data: [],
text: '文本标签占位符', // text内容
// 设置面板属性的显隐
displayOption: {
@ -58,7 +58,9 @@ const customConfig = {
fontSize: 20,
fontWeight: 700,
fontFamily: '', // 字体类型
color: 'left,#ffffff,#ffffff'
color: 'left,#ffffff,#ffffff',
align: 'center', // 文字对齐方式
letterSpacing: 1// 文字间距
}
}

6
data-room-ui/packages/BigScreenDesign/ComponentDialog/index.vue
Unescape Escape View File

@ -440,6 +440,7 @@ export default {
const settingContent = cloneDeep(this.resolveStrSetting(this.focus.settingContent))
config.setting = settingContent.setting
config.option = settingContent.option
config.optionHandler = settingContent.optionHandler
this.$emit('setRemoteComponent', config)
// config = getRemoteComponentConfig(this.focus.code, this.focus.name)
// this.$emit('setRemoteComponent', config)
@ -494,6 +495,8 @@ export default {
let title = []
// eslint-disable-next-line prefer-const, no-unused-vars
let data = []
// eslint-disable-next-line prefer-const, no-unused-vars
let optionHandler = ''
// eslint-disable-next-line prefer-const
settingContent = settingContent.replaceAll('const ', '')
// 去掉 export default及后面代码
@ -506,7 +509,8 @@ export default {
}
return {
option,
setting
setting,
optionHandler
}
},
// 获取目录的列表

8
data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue
Unescape Escape View File

@ -90,12 +90,12 @@ export default {
}
this.isSelectDown = true
// 点击在底部背景上
if (event.target.className.indexOf('mouse-select-wrap') !== -1) {
if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) {
this.startX = event.offsetX
this.endX = event.offsetX
this.startY = event.offsetY
this.endY = event.offsetY
} else if (event.target.className.indexOf('design-drag-wrap') !== -1) {
} else if (typeof event.target.className === 'string' && event.target.className.indexOf('design-drag-wrap') !== -1) {
this.startX = event.offsetX + 50
this.endX = event.offsetX + 50
this.startY = event.offsetY + 50
@ -116,10 +116,10 @@ export default {
this.isSelecting = true
}
if (this.isSelecting) {
if (event.target.className.indexOf('mouse-select-wrap') !== -1) {
if (typeof event.target.className === 'string' && event.target.className.indexOf('mouse-select-wrap') !== -1) {
this.endX = event.offsetX
this.endY = event.offsetY
} else if (event.target.className.indexOf('design-drag-wrap') !== -1) {
} else if (typeof event.target.className === 'string' && event.target.className.indexOf('design-drag-wrap') !== -1) {
this.startX = event.offsetX + 50
this.endY = event.offsetY + 50
}

5
data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue
Unescape Escape View File

@ -185,7 +185,10 @@ export default {
const str = node.value
const code = node.code
if (node.disabled) return
this.$refs.codemirrorRef.codemirror.setValue(this.currentConfig.expression + ' + ' + str)
// 判断编辑器里面是return + 0或者多个空格 还是包含其他表达式，每次添加第一个表达式时不要加‘+’,防止计算错误
const isInit = /^[\w\s]+$/.test(this.currentConfig.expression)
const newStr = isInit ? this.currentConfig.expression + str : this.currentConfig.expression + ' + ' + str
this.$refs.codemirrorRef.codemirror.setValue(newStr)
// 同时将点击的数据存在expressionCodes中
if (this.currentConfig.expressionCodes && Array.isArray(this.currentConfig.expressionCodes)) {
this.currentConfig.expressionCodes.push(code)

5
data-room-ui/packages/BizComponent/Preview.vue
Unescape Escape View File

@ -41,6 +41,8 @@ export default {
let title = ''
// eslint-disable-next-line prefer-const, no-unused-vars
let data = []
// eslint-disable-next-line prefer-const, no-unused-vars
let optionHandler = ''
const g2Plots = g2Plot
const echarts = _echarts
// eslint-disable-next-line prefer-const
@ -53,7 +55,8 @@ export default {
option,
setting,
echarts,
g2Plots
g2Plots,
optionHandler
}
},
set (val) {}

BIN
data-room-ui/packages/G2Plots/images/componentLogo/堆叠条形图.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
data-room-ui/packages/G2Plots/plotListSort.js
Unescape Escape View File

@ -20,8 +20,10 @@ export default [
'基础面积图',
'渐变色面积图',
'堆叠面积图',
'基础条形图',
'分组条形图',
'堆叠条形图',
'基础饼图',
'基础环图',

126
data-room-ui/packages/G2Plots/折线图/多折线图.js
Unescape Escape View File

@ -80,6 +80,105 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点样式',
type: 'select',
field: 'point_shape',
optionField: 'point.shape',
// 是否多选
multiple: false,
value: 'circle',
tabName: 'custom',
options: [
{
label: '无',
value: false
},
{
label: '空心圆',
value: 'hollow-circle'
},
{
label: '圆形',
value: 'circle'
},
{
label: '正方形',
value: 'square'
},
{
label: '菱形',
value: 'diamond'
},
{
label: '三角形',
value: 'triangle'
},
{
label: '六边形',
value: 'hexagon'
},
{
label: '菱形交叉',
value: 'bowtie'
},
{
label: '十字形',
value: 'cross'
},
{
label: 'I形',
value: 'tick'
},
{
label: '加号',
value: 'plus'
},
{
label: '连字号',
value: 'hyphen'
}
],
groupName: 'graph'
},
{
label: '折线点大小',
type: 'inputNumber',
field: 'point_size',
optionField: 'point.size',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点颜色',
type: 'colorPicker',
field: 'point_style_fill',
optionField: 'point.style.fill',
// 是否多选
multiple: false,
value: '#ffffff',
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签字体大小',
type: 'inputNumber',
field: 'label_style_fontSize',
optionField: 'label.style.fontSize',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签颜色',
type: 'colorPicker',
field: 'label_style_fill',
optionField: 'label.style.fill',
value: 'rgba(255,255,255,1)',
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
@ -518,11 +617,13 @@ const data = [
]
// 配置处理脚本
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\n if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' };' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
const optionHandler = `
option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false;
if (option.legendEnable) {
option.legend.itemName = option.legendItemName
}
option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value]
`
// 数据处理脚本
const dataHandler = ''
@ -549,6 +650,21 @@ const option = {
}
},
color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
point: {
size: 5,
shape: 'circle',
style: {
fill: 'white',
stroke: '#5B8FF9',
lineWidth: 0
}
},
label: {
style: {
fill: '#8C8C8C',
fontSize: 12,
}
},
xAxis: {
title: {
text: '',

698
data-room-ui/packages/G2Plots/条形图/堆叠条形图.js
Unescape Escape View File

@ -0,0 +1,698 @@
/*
* @description: 配置，参考https://g2plot.antv.antgroup.com/examples
* @Date: 2023-03-27 14:38:23
* @Author: xing.heng
*/
// 配置版本号
const version = '20231107'
// 分类
const category = 'Bar'
// 标题
const title = '堆叠条形图'
// 类别， new Line()
const chartType = 'Bar'
// 用于标识，唯一，和文件夹名称一致
const name = 'DuiDieTiaoXingTu'
// 右侧配置项
const setting = [
{
label: '维度',
// 设置组件类型
type: 'select',
// 字段
field: 'yField',
// 对应options中的字段
optionField: 'yField',
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: '指标',
// 设置组件类型， select / input / colorPicker
type: 'select',
// 字段
field: 'xField',
optionField: 'xField', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
// tab页。 data: 数据， custom: 自定义
tabName: 'data'
},
{
label: '分组',
// 设置组件类型
type: 'select',
// 字段
field: 'seriesField',
// 对应options中的字段
optionField: 'seriesField',
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
/** 样式配置 **/
// 图表 graph
// {
// label: '条形样式',
// type: 'select', // 设置组件类型
// field: 'shape', // 字段
// optionField: 'shape', // 对应options中的字段
// // 是否多选
// multiple: false,
// value: 'default',
// tabName: 'custom',
// options: [
// {
// label: '实心条形',
// value: 'default'
// },
// // {
// // label: '线性',
// // value: 'line'
// // },
// {
// label: '空心条形',
// value: 'hollow-rect'
// },
// {
// label: '钉形',
// value: 'tick'
// }
// ],
// groupName: 'graph'
// },
{
label: '数据标签',
type: 'switch', // 设置组件类型
field: 'label_style_opacity', // 字段
optionField: 'label.style.opacity', // 对应options中的字段
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签大小',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'label_style_fontSize',
// 对应options中的字段
optionField: 'label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'color',
// 对应options中的字段
optionField: 'color',
value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形最小宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'minBarWidth',
// 对应options中的字段
optionField: 'minBarWidth',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形最大宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'maxBarWidth',
// 对应options中的字段
optionField: 'maxBarWidth',
value: 100,
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switch',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
field: 'xAxis_grid_line_style_lineWidth',
optionField: 'xAxis.grid.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '颜色',
type: 'colorPicker',
field: 'xAxis_grid_line_style_stroke',
optionField: 'xAxis.grid.line.style.stroke',
value: '#d0d0d0',
tabName: 'custom',
groupName: 'grid'
},
// 图例 legend
{
label: '显示',
type: 'switch', // 设置组件类型
field: 'legendEnable', // 字段
optionField: 'legendEnable', // 对应options中的字段
value: false,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'legend'
},
{
label: '位置',
type: 'select', // 设置组件类型
field: 'legendPosition', // 字段
optionField: 'legendPosition', // 对应options中的字段
// 是否多选
multiple: false,
value: 'top',
tabName: 'custom',
options: [
{ label: '顶部', value: 'top' },
{ label: '左上角', value: 'top-left' },
{ label: '右上角', value: 'top-right' },
{ label: '左侧', value: 'left' },
// { label: '左上方', value: 'left-top' },
// { label: '左下方', value: 'left-bottom' },
{ label: '右侧', value: 'right' },
// { label: '右上方', value: 'right-top' },
// { label: '右下方', value: 'right-bottom' },
{ label: '底部', value: 'bottom' },
{ label: '左下角', value: 'bottom-left' },
{ label: '右下角', value: 'bottom-right' }
],
groupName: 'legend'
},
{
label: '字体大小',
type: 'inputNumber',
field: 'legendItemName_style_fontSize',
optionField: 'legendItemName.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体权重',
type: 'inputNumber',
step: 100,
max: 900,
field: 'legendItemName_style_fontWeight',
optionField: 'legendItemName.style.fontWeight',
value: 400,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体颜色',
type: 'colorPicker',
field: 'legendItemName_style_fill',
optionField: 'legendItemName.style.fill',
value: '#595959',
tabName: 'custom',
groupName: 'legend'
},
// X轴 xAxis
{
label: '标题',
type: 'input',
field: 'xAxis_title_text',
optionField: 'xAxis.title.text',
value: '',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题位置',
type: 'select',
field: 'xAxis_title_position',
optionField: 'xAxis.title.position',
value: 'end',
tabName: 'custom',
options: [
{
label: '左',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '右',
value: 'end'
}],
groupName: 'xAxis'
},
{
label: '标题字体大小',
type: 'inputNumber',
field: 'xAxis_title_style_fontSize',
optionField: 'xAxis.title.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'xAxis_title_style_fill',
optionField: 'xAxis.title.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'xAxis_label_style_fontSize',
optionField: 'xAxis.label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'xAxis_label_style_fill',
optionField: 'xAxis.label.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'xAxis_line_style_lineWidth',
optionField: 'xAxis.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_line_style_stroke',
optionField: 'xAxis.line.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'xAxis'
},
// Y轴 yAxis
{
label: '标题',
type: 'input',
field: 'yAxis_title_text',
optionField: 'yAxis.title.text',
value: '',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题过长时旋转',
type: 'switch',
field: 'yAxis_title_autoRotate',
optionField: 'yAxis.title.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题位置',
type: 'select',
field: 'yAxis_title_position',
optionField: 'yAxis.title.position',
value: 'end',
tabName: 'custom',
options: [
{
label: '上',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '下',
value: 'end'
}],
groupName: 'yAxis'
},
{
label: '标题字体大小',
type: 'inputNumber',
field: 'yAxis_title_style_fontSize',
optionField: 'yAxis.title.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'yAxis_title_style_fill',
optionField: 'yAxis.title.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '显示标签',
type: 'switch',
field: 'yAxis_label_style_opacity',
optionField: 'yAxis.label.style.opacity',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签字体大小',
type: 'inputNumber',
field: 'yAxis_label_style_fontSize',
optionField: 'yAxis.label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签字体颜色',
type: 'colorPicker',
field: 'yAxis_label_style_fill',
optionField: 'yAxis.label.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'yAxis_line_lineWidth',
optionField: 'yAxis.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'yAxis_line_stroke',
optionField: 'yAxis.line.style.stroke',
// 是否多选
multiple: false,
value: 'rgba(255,255,255,1)',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: 'y刻度线宽度',
type: 'inputNumber',
field: 'yAxis_tickLine_style_lineWidth',
optionField: 'yAxis.tickLine.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: 'y刻度线颜色',
type: 'colorPicker',
field: 'yAxis_tickLine_style_stroke',
optionField: 'yAxis.tickLine.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过多时旋转',
type: 'switch',
field: 'yAxis_label_autoRotate',
optionField: 'yAxis.label.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过多时隐藏',
type: 'switch',
field: 'yAxis_label_autoHide',
optionField: 'yAxis.label.autoHide',
value: true,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过长时省略',
type: 'switch',
field: 'yAxis_label_autoEllipsis',
optionField: 'yAxis.label.autoEllipsis',
value: true,
tabName: 'custom',
groupName: 'yAxis'
},
// 边距 padding
]
// 模拟数据
const data = [
{
label: 'Mon.',
type: 'series1',
value: 2800
},
{
label: 'Mon.',
type: 'series2',
value: 2260
},
{
label: 'Tues.',
type: 'series1',
value: 1800
},
{
label: 'Tues.',
type: 'series2',
value: 1300
},
{
label: 'Wed.',
type: 'series1',
value: 950
},
{
label: 'Wed.',
type: 'series2',
value: 900
},
{
label: 'Thur.',
type: 'series1',
value: 500
},
{
label: 'Thur.',
type: 'series2',
value: 390
},
{
label: 'Fri.',
type: 'series1',
value: 170
},
{
label: 'Fri.',
type: 'series2',
value: 100
}
]
// 配置处理脚本
const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0];' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
// 图表配置 new Line('domName', option)
const option = {
// 数据将要放入到哪个字段中
dataKey: 'data',
renderer: 'canvas',
data,
isStack: true,
// shape: ' ',
xField: 'value',
yField: 'label',
seriesField: 'type',
legendEnable: false,
legendLayout: 'vertical',
legendPosition: 'top',
legendItemName: {
style: {
fill: '#595959',
fontSize: 12,
fontWeight: 400
}
},
/** 自定义颜色 */
color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
legend: false,
label: {
position: 'middle',
style: {
fill: '#59F25F',
opacity: 0,
fontSize: 12
},
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
radiusNum: 0, // 设置条形图的圆角的中间值
xAxis: {
grid: {
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
}
},
title: {
text: '',
position: 'end',
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
label: {
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
},
tickLine: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
}
},
yAxis: {
title: {
text: '',
position: 'end',
autoRotate: false,
// rotation: Math.PI / 2,
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
grid: {
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0,
strokeOpacity: 0.7
}
}
},
label: {
autoRotate: false,
autoHide: true,
autoEllipsis: true,
style: {
fill: '#8C8C8C',
fontSize: 12,
opacity: 1
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
},
tickLine: {
style: {
stroke: '#d0d0d0',
lineWidth: 1
}
}
}
}
export default {
category,
version,
title,
chartType,
name,
option,
setting,
optionHandler,
dataHandler
}

1
data-room-ui/packages/G2Plots/柱状图/分组柱状图.js
Unescape Escape View File

@ -668,6 +668,7 @@ const option = {
}
},
label: {
offsetY: 20,
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'middle', 'bottom'
// 配置样式

1
data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js
Unescape Escape View File

@ -593,6 +593,7 @@ const option = {
type: ''
},
label: {
offsetY: 20,
// 可手动配置 label 数据标签位置
position: 'bottom', // 'top', 'bottom', 'middle'
// 配置样式

45
data-room-ui/packages/G2Plots/柱状图/基础柱状图.js
Unescape Escape View File

@ -105,6 +105,39 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱最小宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'minColumnWidth',
// 对应options中的字段
optionField: 'minColumnWidth',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱最大宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'maxColumnWidth',
// 对应options中的字段
optionField: 'maxColumnWidth',
value: 100,
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱背景颜色',
type: 'colorPicker',
field: 'columnBackground_style_fill',
optionField: 'columnBackground.style.fill',
value: 'rgba(255,255,255,0)',
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
@ -446,6 +479,7 @@ const option = {
fill: 'l(90) 0:#5AA6AB 1:#217AB1'
},
label: {
offsetY: 13,
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle',
// 配置样式
@ -530,12 +564,11 @@ const option = {
}
},
// 背景图设置
// columnBackground: {
// style: {
// fill: '#569EA4',
// fillOpacity: 0.1
// }
// },
columnBackground: {
style: {
fill: 'rgba(255,255,255,0)',
}
},
meta: {
type: {
alias: '类别'

98
data-room-ui/packages/G2Plots/面积图/堆叠面积图.js
Unescape Escape View File

@ -83,6 +83,94 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点样式',
type: 'select',
field: 'point_shape',
optionField: 'point.shape',
// 是否多选
multiple: false,
value: 'circle',
tabName: 'custom',
options: [
{
label: '无',
value: false
},
{
label: '空心圆',
value: 'hollow-circle'
},
{
label: '圆形',
value: 'circle'
},
{
label: '正方形',
value: 'square'
},
{
label: '菱形',
value: 'diamond'
},
{
label: '三角形',
value: 'triangle'
},
{
label: '六边形',
value: 'hexagon'
},
{
label: '菱形交叉',
value: 'bowtie'
},
{
label: '十字形',
value: 'cross'
},
{
label: 'I形',
value: 'tick'
},
{
label: '加号',
value: 'plus'
},
{
label: '连字号',
value: 'hyphen'
}
],
groupName: 'graph'
},
{
label: '折线点大小',
type: 'inputNumber',
field: 'point_size',
optionField: 'point.size',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签字体大小',
type: 'inputNumber',
field: 'label_style_fontSize',
optionField: 'label.style.fontSize',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签颜色',
type: 'colorPicker',
field: 'label_style_fill',
optionField: 'label.style.fill',
value: 'rgba(255,255,255,1)',
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
@ -622,6 +710,16 @@ const option = {
}
},
startOnZero: true,
point: {
size: 5,
shape: 'circle',
},
label: {
style: {
fill: '#8C8C8C',
fontSize: 12,
}
},
xAxis: {
title: {
text: '',

111
data-room-ui/packages/G2Plots/面积图/渐变色面积图.js
Unescape Escape View File

@ -93,7 +93,102 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点大小',
type: 'inputNumber',
field: 'point_size',
optionField: 'point.size',
value: 0,
min: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点颜色',
type: 'colorPicker', // 设置组件类型
field: 'point_color', // 字段
optionField: 'point.color', // 对应options中的字段
value: '',
tabName: 'custom',
groupName: 'graph'
},
{
label: '折线点样式',
type: 'select', // 设置组件类型
field: 'point_shape', // 字段
optionField: 'point.shape', // 对应options中的字段
value: 'hollow-circle',
tabName: 'custom',
options: [
{
label: '无',
value: false
},
{
label: '空心圆',
value: 'hollow-circle'
},
{
label: '圆形',
value: 'circle'
},
{
label: '正方形',
value: 'square'
},
{
label: '菱形',
value: 'diamond'
},
{
label: '三角形',
value: 'triangle'
},
{
label: '六边形',
value: 'hexagon'
},
{
label: '菱形交叉',
value: 'bowtie'
},
{
label: '十字形',
value: 'cross'
},
{
label: 'I形',
value: 'tick'
},
{
label: '加号',
value: 'plus'
},
{
label: '连字号',
value: 'hyphen'
}
],
groupName: 'graph'
},
{
label: '数据标签字体大小',
type: 'inputNumber',
field: 'label_style_fontSize',
optionField: 'label.style.fontSize',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签颜色',
type: 'colorPicker',
field: 'label_style_fill',
optionField: 'label.style.fill',
value: 'rgba(255,255,255,1)',
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
@ -492,6 +587,17 @@ const option = {
color: '#1890ff',
size: 1
},
point: {
color: '',
shape: 'hollow-circle',
size: 0
},
label: {
style: {
fill: 'rgba(255,255,255,1)',
fontSize: 0
}
},
xAxis: {
title: {
text: '',
@ -558,9 +664,6 @@ const option = {
}
}
}
// point: {
// color: ''
// }
}
export default {

5
data-room-ui/packages/RemoteComponents/index.vue
Unescape Escape View File

@ -126,6 +126,8 @@ export default {
let title = []
// eslint-disable-next-line prefer-const, no-unused-vars
let data = []
// eslint-disable-next-line prefer-const, no-unused-vars
let optionHandler = ''
// eslint-disable-next-line prefer-const
settingContent = settingContent.replaceAll('const ', '')
// 去掉 export default及后面代码
@ -147,7 +149,8 @@ export default {
return {
option,
setting
setting,
optionHandler
}
},
/**

22
data-room-ui/packages/js/store/mutations.js
Unescape Escape View File

@ -205,11 +205,23 @@ export default {
},
// 改变锁定状态
changeLocked (state, config) {
const index = state.pageInfo.chartList.findIndex(
item => item.code === config.code
)
Vue.set(state.pageInfo.chartList[index], 'locked', !config.locked)
saveTimeLineFunc(state, !config.locked ? `解锁${config?.title}` : `锁定${config?.title}`)
// 如果是多选，则改变框选中的所有组件的锁定状态
if (state.activeCodes && state.activeCodes.length) {
state.pageInfo.chartList = state.pageInfo.chartList?.map(chart => {
return {
...chart,
locked: state.activeCodes.includes(chart.code) ? !config.locked : config.locked
}
})
saveTimeLineFunc(state, config.locked ? '解锁选中组件' : '锁定选中组件')
} else {
// 如果不是多选，则只改变当前一个
const index = state.pageInfo.chartList.findIndex(
item => item.code === config.code
)
Vue.set(state.pageInfo.chartList[index], 'locked', !config.locked)
saveTimeLineFunc(state, !config.locked ? `解锁${config?.title}` : `锁定${config?.title}`)
}
},
// 改变网格显示状态
changeGridShow (state, isShow) {

Write Preview
Loading…
Cancel
Save