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

Merge remote-tracking branch 'origin/master'

Browse Source
main
liu.shiyi 2 years ago
parent 613e09fae5 92d390ceae
commit c798584e2a
4 changed files with 245 additions and 64 deletions
Show Stats Download Patch File Download Diff File

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

@ -23,6 +23,39 @@ public class ScreenTimePickerChart extends Chart {
@Data
public static class Customize {
@ApiModelProperty(notes = "值")
private String value;
@ApiModelProperty(notes = "选择框背景颜色")
private String backgroundColor;
@ApiModelProperty(notes = "选择框文字颜色")
private String fontColor;
@ApiModelProperty(notes = "选择框文字大小")
private Integer fontSize;
@ApiModelProperty(notes = "下拉框背景颜色")
private String dropDownBackgroundColor;
@ApiModelProperty(notes = "下拉框字体颜色")
private String dropDownFontColor;
@ApiModelProperty(notes = "下拉项hover背景颜色")
private String dropDownHoverBackgroundColor;
@ApiModelProperty(notes = "下拉项hover字体颜色")
private String dropDownHoverFontColor;
@ApiModelProperty(notes = "下拉项激活文字颜色")
private String dropDownSelectedFontColor;
@ApiModelProperty(notes = "时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）")
private String formatType;
@ApiModelProperty(notes = "绑定值的格式")
private String valueFormat;
}

1
data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue
Unescape Escape View File

@ -34,7 +34,6 @@ export default {
endColor: '', // 终止颜色
position: '', // 渐变方向
colorsValue: ''// 拼接后的符合g2语法的颜色值
}
},
computed: {

249
data-room-ui/packages/Echarts/3D图/3D基础柱状图.js
Unescape Escape View File

@ -38,23 +38,68 @@ const setting = [
groupName: 'graph'
},
{
label: '数据标签',
type: 'switch', // 设置组件类型
field: 'label_style_opacity', // 字段
// optionField: 'series', // 对应options中的字段
value: 0,
active: 1,
inactive: 0,
label: '柱子顶部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barTopColor', // 字段
optionField: 'seriesCustom.barTopColor', // 对应options中的字段
value: '#2DB1EF',
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barColor', // 字段
optionField: 'seriesCustom.barColor', // 对应options中的字段
value: '#115ba6',
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子底部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_barBottomColor', // 字段
optionField: 'seriesCustom.barBottomColor', // 对应options中的字段
value: '#187dcb',
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子背景顶部颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_shadowTopColor', // 字段
optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
value: '#142f5a',
tabName: 'custom',
groupName: 'graph'
},
{
label: '阴影柱子颜色',
type: 'colorPicker', // 设置组件类型
field: 'seriesCustom_shadowColor', // 字段
optionField: 'seriesCustom.shadowColor', // 对应options中的字段
value: '#041133',
tabName: 'custom',
groupName: 'graph'
},
// {
// label: '数据标签',
// type: 'switch', // 设置组件类型
// field: 'label_style_opacity', // 字段
// // optionField: 'series', // 对应options中的字段
// value: 0,
// active: 1,
// inactive: 0,
// tabName: 'custom',
// groupName: 'graph'
// },
// x轴 xAxis
{
label: '显示',
type: 'switch',
field: 'xAxis_show',
optionField: 'xAxis.show',
value: 1,
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
@ -65,20 +110,20 @@ const setting = [
type: 'switch',
field: 'xAxis_axisLine_show',
optionField: 'xAxis.axisLine.show',
value: 1,
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '刻度显示',
type: 'switch',
field: 'xAxis_axisTick_show',
optionField: 'xAxis.axisTick.show',
value: 0,
active: 1,
inactive: 0,
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_axisLine_lineStyle_color',
optionField: 'xAxis.axisLine.lineStyle.color',
// 是否多选
multiple: false,
value: '#333',
tabName: 'custom',
groupName: 'xAxis'
},
@ -87,7 +132,7 @@ const setting = [
type: 'switch',
field: 'xAxis_axisLabel_show',
optionField: 'xAxis.axisLabel.show',
value: 0,
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
@ -104,6 +149,24 @@ const setting = [
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'xAxis_axisLabel_textStyle_fontSize',
optionField: 'xAxis.axisLabel.textStyle.fontSize',
value: 14,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签距离',
type: 'inputNumber',
field: 'xAxis_axisLabel_margin',
optionField: 'xAxis.axisLabel.margin',
value: 30,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题',
type: 'input',
@ -168,7 +231,69 @@ const setting = [
groupName: 'yAxis'
},
{
label: '名称',
label: '轴线显示',
type: 'switch',
field: 'yAxis_axisLine_show',
optionField: 'yAxis.axisLine.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'yAxis_axisLine_lineStyle_color',
optionField: 'yAxis.axisLine.lineStyle.color',
// 是否多选
multiple: false,
value: '#333',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签显示',
type: 'switch',
field: 'yAxis_axisLabel_show',
optionField: 'yAxis.axisLabel.show',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'yAxis_axisLabel_textStyle_color',
optionField: 'yAxis.axisLabel.textStyle.color',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'yAxis_axisLabel_textStyle_fontSize',
optionField: 'yAxis.axisLabel.textStyle.fontSize',
value: 14,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签距离',
type: 'inputNumber',
field: 'yAxis_axisLabel_margin',
optionField: 'yAxis.axisLabel.margin',
value: 10,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题',
type: 'input',
field: 'yAxis_name',
optionField: 'yAxis.name',
@ -177,7 +302,7 @@ const setting = [
groupName: 'yAxis'
},
{
label: '名称颜色',
label: '标题颜色',
type: 'colorPicker',
field: 'yAxis_nameTextStyle_color',
optionField: 'yAxis.nameTextStyle.color',
@ -188,7 +313,7 @@ const setting = [
groupName: 'yAxis'
},
{
label: '名称大小',
label: '标题大小',
type: 'inputNumber',
field: 'yAxis_nameTextStyle_fontSize',
optionField: 'yAxis.nameTextStyle.fontSize',
@ -197,7 +322,7 @@ const setting = [
groupName: 'yAxis'
},
{
label: '名称位置',
label: '标题位置',
type: 'select',
field: 'yAxis_nameLocation',
optionField: 'yAxis.nameLocation',
@ -217,17 +342,6 @@ const setting = [
value: 'end'
}],
groupName: 'yAxis'
},
{
label: '刻度颜色',
type: 'colorPicker',
field: 'yAxis_axisLabel_textStyle',
optionField: 'yAxis.axisLabel.textStyle.color',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'yAxis'
}
]
@ -256,7 +370,7 @@ const option = {
},
graphic: {
type: 'group',
bottom: '8%',
bottom: '5%',
left: '10%',
z: 100,
children: [
@ -265,7 +379,7 @@ const option = {
left: 0,
bottom: 0,
shape: {
width: 400,
width: 418 * 0.9,
height: 10
},
style: {
@ -278,7 +392,7 @@ const option = {
bottom: 10,
shape: {
// 左上、右上、右下、左下
points: [[40, -50], [360, -50], [400, 0], [0, 0]]
points: [[418 / 10, -320 / 6], [418 - 418 / 6, -320 / 6], [418 * 0.9, 0], [0, 0]]
},
style: {
fill: '#303256'
@ -297,14 +411,17 @@ const option = {
fontSize: 12
},
nameLocation: '',
// 坐标轴刻度设置:x轴数据展示
// 坐标轴刻度设置
axisTick: {
show: false,
alignWithLabel: true
},
// 是否显示坐标轴的轴线
axisLine: {
show: false
show: false,
lineStyle: {
color: '#333'
}
},
// 坐标轴刻度标签
axisLabel: {
@ -344,12 +461,15 @@ const option = {
fontSize: 12
},
nameLocation: 'end',
show: true, // y轴文本标签显示
show: true,
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'rgb(40, 129, 170)'
}
color: '#333',
fontSize: 12
},
margin: 10
},
// 分隔线
splitLine: {
@ -357,16 +477,24 @@ const option = {
},
// y轴轴线是否显示
axisLine: {
show: true
show: true,
lineStyle: {
color: '#333'
}
}
},
seriesCustom: {
barWidth: 30,
// 顶部菱形颜色
barTopColor: '#2DB1EF',
// 底部菱形颜色
barBottomColor: '#187dcb',
barColor1: '#115ba6',
barColor2: '#1db0dd',
// 柱子颜色
barColor: '#1db0dd',
// 阴影柱子颜色
shadowColor: '#041133',
// 阴影柱子顶部颜色
shadowTopColor: '#142f5a'
},
series: [
@ -416,23 +544,24 @@ const option = {
type: 'bar',
barWidth: 30,
z: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#115ba6'
},
{
offset: 1,
color: '#1db0dd'
}
]),
opacity: 0.8,
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
shadowBlur: 0 // 阴影模糊值
}
},
color: '#115ba6',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: '#115ba6'
// },
// {
// offset: 1,
// color: '#1db0dd'
// }
// ]),
// opacity: 0.8,
// shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
// shadowBlur: 0 // 阴影模糊值
// }
// },
data: yData
},
// 阴影柱子

26
data-room-ui/packages/EchartsRender/index.vue
Unescape Escape View File

@ -213,6 +213,7 @@ export default {
return config
},
dataFormatting (config, data) {
console.log('dataFormatting')
// 数据返回成功则赋值
if (data.success) {
data = data.data
@ -256,6 +257,7 @@ export default {
},
// 格式化echarts的配置
echartsOptionFormatting (config, data) {
console.log('echartsOptionFormatting');
const option = config.option
// 分组字段
const xField = config.setting.find(item => item.optionField === 'xField')?.value
@ -501,9 +503,25 @@ export default {
// 对series里面的样式进行配置
seriesStyle (config) {
const _config = CloneDeep(config)
// 如果
// const ids = Object.keys(config.option.seriesCustom)
const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
const seriesCustom = _config.option.seriesCustom
const ids = Object.keys(config.option.seriesCustom)
// const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
// 如果是基础柱状图
if (!hasSeries) {
_config.option.series.forEach(item => {
// 配置颜色
if (ids.includes(item.id)) {
item.color = seriesCustom[item.id]
}
// 配置宽度
if (item.type === 'pictorialBar') {
item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
} else if (item.type === 'bar') {
item.barWidth = seriesCustom.barWidth
}
})
}
_config.option.series.forEach((item) => {
if (ids.includes(item.id)) {
item.color = _config.option.seriesCustom[item.id]
@ -524,6 +542,7 @@ export default {
},
// 组件的样式改变，返回改变后的config
changeStyle (config, isUpdateTheme) {
console.log('changeStyle');
config = { ...this.config, ...config }
config = this.transformSettingToOption(config, 'custom')
// 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
@ -537,6 +556,7 @@ export default {
console.error(e)
}
}
// 此时，setting中的部分变量映射到了option.seriesCustom中，但未映射到series的具体配置中
config = this.seriesStyle(config)
// 只有样式改变时更新主题配置，切换主题时不需要保存
if (!isUpdateTheme) {

Write Preview
Loading…
Cancel
Save