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

Merge branch 'master' of github.com:gcpaas/DataRoom

Browse Source
main
liu.shiyi 2 years ago
parent 53734d8c29 f763af90fc
commit a66b803ea4
5 changed files with 183 additions and 178 deletions
Show Stats Download Patch File Download Diff File

2
data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue
Unescape Escape View File

@ -73,7 +73,7 @@
</el-select> </el-select>
<template v-else-if="setting.type === 'colorSelect'"> <template v-else-if="setting.type === 'colorSelect'">
<color-select <color-select
v-model="colorScheme" v-model="setting.value"
@update="updateColorScheme" @update="updateColorScheme"
/> />
<div <div

7
data-room-ui/packages/BorderComponents/GcBorder1/index.vue
Unescape Escape View File

@ -49,8 +49,8 @@ export default {
return this.config.border.borderMainColor || return this.config.border.borderMainColor ||
this.config.border.borderSecondaryColor this.config.border.borderSecondaryColor
? [ ? [
this.config.border.borderMainColor, this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
this.config.border.borderSecondaryColor this.config.border.borderSecondaryColor||this.config.border.borderMainColor
] ]
: null : null
}, },
@ -68,7 +68,7 @@ export default {
}, },
deep: true deep: true
}, },
'config.border.gradientColor':{ 'config.border.gradientColor':{
handler (val) { handler (val) {
this.changeColor() this.changeColor()
},immediate: true },immediate: true
@ -149,6 +149,7 @@ export default {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
// padding: 0 16px;
background-color: transparent; background-color: transparent;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

4
data-room-ui/packages/BorderComponents/GcBorder9/index.vue
Unescape Escape View File

@ -49,8 +49,8 @@ export default {
return this.config.border.borderMainColor || return this.config.border.borderMainColor ||
this.config.border.borderSecondaryColor this.config.border.borderSecondaryColor
? [ ? [
this.config.border.borderMainColor, this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
this.config.border.borderSecondaryColor this.config.border.borderSecondaryColor||this.config.border.borderMainColor
] ]
: null : null
}, },

214
data-room-ui/packages/Echarts/3D图/3D分组柱状图.js
Unescape Escape View File

@ -1,4 +1,3 @@
import * as echarts from 'echarts'
// 配置版本号 // 配置版本号
const version = '2023091901' const version = '2023091901'
// 标题 // 标题
@ -47,60 +46,66 @@ const setting = [
tabName: 'custom', tabName: 'custom',
groupName: 'graph' groupName: 'graph'
}, },
// { {
// label: '柱子顶部颜色', label: '柱子顶部颜色',
// type: 'colorPicker', // 设置组件类型 // 设置组件类型
// field: 'seriesCustom_barTopColor', // 字段 type: 'colorSelect',
// optionField: 'seriesCustom.barTopColor', // 对应options中的字段 // 字段
// value: '#2DB1EF', field: 'seriesCustom_barTopColor',
// tabName: 'custom', // 对应options中的字段
// groupName: 'graph' optionField: 'seriesCustom.barTopColor',
// }, value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
// { tabName: 'custom',
// label: '柱子颜色1', groupName: 'graph'
// type: 'colorPicker', // 设置组件类型 },
// field: 'seriesCustom_barColor1', // 字段 {
// optionField: 'seriesCustom.barColor1', // 对应options中的字段 label: '柱子颜色',
// value: '#115ba6', // 设置组件类型
// tabName: 'custom', type: 'colorSelect',
// groupName: 'graph' // 字段
// }, field: 'seriesCustom_barColor',
// { // 对应options中的字段
// label: '柱子颜色2', optionField: 'seriesCustom.barColor',
// type: 'colorPicker', // 设置组件类型 value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
// field: 'seriesCustom_barColor2', // 字段 tabName: 'custom',
// optionField: 'seriesCustom.barColor2', // 对应options中的字段 groupName: 'graph'
// value: '#1db0dd', },
// tabName: 'custom', {
// groupName: 'graph' label: '柱子底部颜色',
// }, // 设置组件类型
// { type: 'colorSelect',
// label: '柱子底部颜色', // 字段
// type: 'colorPicker', // 设置组件类型 field: 'seriesCustom_barBottomColor',
// field: 'seriesCustom_barBottomColor', // 字段 // 对应options中的字段
// optionField: 'seriesCustom.barBottomColor', // 对应options中的字段 optionField: 'seriesCustom.barBottomColor',
// value: '#187dcb', value: ['#0998d9', '#2ec6ad', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3', '#5B8FF9', '#61DDAA'],
// tabName: 'custom', tabName: 'custom',
// groupName: 'graph' groupName: 'graph'
// }, },
// { {
// label: '柱子背景顶部颜色', label: '阴影柱子颜色',
// type: 'colorPicker', // 设置组件类型 // 设置组件类型
// field: 'seriesCustom_shadowTopColor', // 字段 type: 'colorSelect',
// optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段 // 字段
// value: '#142f5a', field: 'seriesCustom_shadowColor',
// tabName: 'custom', // 对应options中的字段
// groupName: 'graph' optionField: 'seriesCustom.shadowColor',
// }, value: ['#082442', '#0e2e3c', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
// { tabName: 'custom',
// label: '柱子背景颜色', groupName: 'graph'
// type: 'colorPicker', // 设置组件类型 },
// field: 'seriesCustom_shadowColor', // 字段 {
// optionField: 'seriesCustom.shadowColor', // 对应options中的字段 label: '阴影柱子顶部颜色',
// value: '#041133', // 设置组件类型
// tabName: 'custom', type: 'colorSelect',
// groupName: 'graph' // 字段
// }, field: 'seriesCustom_shadowTopColor',
// 对应options中的字段
optionField: 'seriesCustom.shadowTopColor',
value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
tabName: 'custom',
groupName: 'graph'
},
{ {
label: '数据标签', label: '数据标签',
type: 'switch', // 设置组件类型 type: 'switch', // 设置组件类型
@ -627,15 +632,20 @@ const option = {
seriesCustom: { seriesCustom: {
barWidth: 30, barWidth: 30,
// 顶部菱形颜色 // 顶部菱形颜色
barTopColor: ['#2DB1EF'], barTopColor: ['#2DB1EF', '#2DB1EF'],
// barTopColor: '#2DB1EF',
// 底部菱形颜色 // 底部菱形颜色
barBottomColor: ['#187dcb'], barBottomColor: ['#187dcb', '#187dcb'],
// barBottomColor: '#187dcb',
// 柱子颜色 // 柱子颜色
barColor: ['#1db0dd'], barColor: ['#1db0dd', '#1db0dd'],
// barColor: '#1db0dd',
// 阴影柱子颜色 // 阴影柱子颜色
shadowColor: ['#041133'], shadowColor: ['#041133', '#041133'],
// shadowColor: '#041133',
// 阴影柱子顶部颜色 // 阴影柱子顶部颜色
shadowTopColor: ['#142f5a'] shadowTopColor: ['#142f5a', '#142f5a']
// shadowTopColor: '#142f5a'
}, },
series: [ series: [
{ {
@ -669,23 +679,24 @@ const option = {
type: 'bar', type: 'bar',
barGap: '20%', barGap: '20%',
barWidth: 30, barWidth: 30,
itemStyle: { color: '#115ba6',
normal: { // itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // normal: {
{ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, // {
color: '#115ba6' // offset: 0,
}, // color: '#115ba6'
{ // },
offset: 1, // {
color: '#1db0dd' // offset: 1,
} // color: '#1db0dd'
]), // }
opacity: 0.8, // ]),
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 // opacity: 0.8,
shadowBlur: 0 // 阴影模糊值 // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
} // shadowBlur: 0 // 阴影模糊值
}, // }
// },
label: { label: {
show: true, show: true,
position: 'inside', position: 'inside',
@ -700,23 +711,24 @@ const option = {
type: 'bar', type: 'bar',
// barGap: '60%', // barGap: '60%',
barWidth: 30, barWidth: 30,
itemStyle: { color: '#73eccd',
normal: { // itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // normal: {
{ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, // {
color: '#73eccd' // offset: 0,
}, // color: '#73eccd'
{ // },
offset: 1, // {
color: '#4dd9e5' // offset: 1,
} // color: '#4dd9e5'
]), // }
opacity: 0.8, // ]),
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 // opacity: 0.8,
shadowBlur: 0 // 阴影模糊值 // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
} // shadowBlur: 0 // 阴影模糊值
}, // }
// },
label: { label: {
show: true, show: true,
position: 'inside', position: 'inside',
@ -747,7 +759,7 @@ const option = {
symbolOffset: ['60%', 5], symbolOffset: ['60%', 5],
zlevel: 2, zlevel: 2,
z: 15, z: 15,
color: 'rgba(45, 206, 177,0.9)', color: 'S',
data: yData2 data: yData2
}, },
{ {
@ -759,11 +771,7 @@ const option = {
data: maxData1, data: maxData1,
zlevel: 1, zlevel: 1,
barWidth: 30, barWidth: 30,
itemStyle: { color: 'rgba(9, 44, 76,.8)'
normal: {
color: 'rgba(9, 44, 76,.8)'
}
}
}, },
{ {
id: 'shadowColor2', id: 'shadowColor2',
@ -774,11 +782,7 @@ const option = {
data: maxData2, data: maxData2,
zlevel: 1, zlevel: 1,
barWidth: 30, barWidth: 30,
itemStyle: { color: 'rgba(16, 56, 70,.8)'
normal: {
color: 'rgba(16, 56, 70,.8)'
}
}
}, },
{ {
id: 'shadowTopColor1', id: 'shadowTopColor1',

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

@ -71,25 +71,10 @@ export default {
this.changeStyle(this.config, true) this.changeStyle(this.config, true)
} }
} }
},
'config.w': {
handler (val) {
if (val) {
const chartDom = document.getElementById(this.chatId)
this.observeChart(chartDom, this.chart, this.config.option)
}
}
},
'config.h': {
handler (val) {
if (val) {
const chartDom = document.getElementById(this.chatId)
this.observeChart(chartDom, this.chart, this.config.option)
}
}
} }
}, },
mounted () { mounted () {
}, },
beforeDestroy () { beforeDestroy () {
if (this.chart) { if (this.chart) {
@ -133,6 +118,7 @@ export default {
const chartDom = document.getElementById(this.chatId) const chartDom = document.getElementById(this.chatId)
this.chart = echarts.init(chartDom) this.chart = echarts.init(chartDom)
config.option && this.chart.setOption(config.option) config.option && this.chart.setOption(config.option)
this.observeChart(chartDom, this.chart, config.option)
}, },
/** /**
* 控制底部阴影大小 * 控制底部阴影大小
@ -266,9 +252,10 @@ export default {
// 数据返回失败则赋前端的模拟数据 // 数据返回失败则赋前端的模拟数据
// config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data // config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data || config?.option?.data
} }
config = this.seriesStyle(config)
return config return config
}, },
getxDataAndYData (xField, yField, data, hasSeries) { getxDataAndYData (xField, yField, data) {
let list = [] let list = []
let xData = [] let xData = []
let yData = [] let yData = []
@ -280,7 +267,6 @@ export default {
// 使用城市名称作为键，覆盖旧数据，始终保留最后一条数据 // 使用城市名称作为键，覆盖旧数据，始终保留最后一条数据
uniqueData[item[xField]] = item uniqueData[item[xField]] = item
}) })
// 将唯一数据对象的值（即去重后的数据）转换回数组 // 将唯一数据对象的值（即去重后的数据）转换回数组
list = Object.values(uniqueData) list = Object.values(uniqueData)
xData = list.map(item => item[xField]) xData = list.map(item => item[xField])
@ -293,8 +279,9 @@ export default {
// 分组字段 // 分组字段
const xField = config.setting.find(item => item.optionField === 'xField')?.value const xField = config.setting.find(item => item.optionField === 'xField')?.value
const yField = config.setting.find(item => item.optionField === 'yField')?.value const yField = config.setting.find(item => item.optionField === 'yField')?.value
// 判断是否存在分组
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '') const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
const { xData, yData } = this.getxDataAndYData(xField, yField, data, hasSeries) const { xData, yData } = this.getxDataAndYData(xField, yField, data)
const maxY = Math.max(...yData) + Math.max(...yData) * 0.2 const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
// 生成阴影柱子的值 // 生成阴影柱子的值
const shadowData = Array.from({ length: xData.length }, () => maxY) const shadowData = Array.from({ length: xData.length }, () => maxY)
@ -304,14 +291,15 @@ export default {
data: xData data: xData
} }
}) })
// 判断是否存在分组字段 // 存在分组字段
if (hasSeries) { if (hasSeries) {
const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
const seriesFieldList = [...new Set(data.map(item => item[seriesField]))] const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
option.series = [] option.series = []
const barWidth = option.seriesCustom.barWidth
// 偏移量数组
const offsetArr = [] const offsetArr = []
let index = 0 let index = 0
let barWidth = 10
if (seriesFieldList.length % 2 === 0) { if (seriesFieldList.length % 2 === 0) {
const length = seriesFieldList.length / 2 const length = seriesFieldList.length / 2
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
@ -335,7 +323,7 @@ export default {
const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField]) const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
const seriesItem = [ const seriesItem = [
{ {
name: seriesFieldItem + '柱子顶部', id: 'barTopColor' + seriesFieldItem,
type: 'pictorialBar', type: 'pictorialBar',
tooltip: { show: false }, tooltip: { show: false },
symbol: 'diamond', symbol: 'diamond',
@ -348,27 +336,28 @@ export default {
data: seriesData data: seriesData
}, },
{ {
name: seriesFieldItem, id: 'barColor' + seriesFieldItem,
type: 'bar', type: 'bar',
barGap: '20%', barGap: '20%',
barWidth: barWidth, barWidth: barWidth,
itemStyle: { color: '#115ba6',
normal: { // itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // normal: {
{ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, // {
color: '#115ba6' // offset: 0,
}, // color: '#115ba6'
{ // },
offset: 1, // {
color: '#1db0dd' // offset: 1,
} // color: '#1db0dd'
]), // }
opacity: 0.8, // ]),
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色 // opacity: 0.8,
shadowBlur: 0 // 阴影模糊值 // shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
} // shadowBlur: 0 // 阴影模糊值
}, // }
// },
label: { label: {
show: false show: false
@ -378,7 +367,7 @@ export default {
data: seriesData data: seriesData
}, },
{ {
name: seriesFieldItem + '柱子底部', id: 'barBottomColor' + seriesFieldItem,
type: 'pictorialBar', type: 'pictorialBar',
tooltip: { show: false }, tooltip: { show: false },
symbol: 'diamond', symbol: 'diamond',
@ -390,7 +379,7 @@ export default {
data: seriesData data: seriesData
}, },
{ {
name: seriesFieldItem + '背景柱子', id: 'shadowColor' + seriesFieldItem,
type: 'bar', type: 'bar',
tooltip: { show: false }, tooltip: { show: false },
xAxisIndex: 1, xAxisIndex: 1,
@ -405,7 +394,7 @@ export default {
} }
}, },
{ {
name: seriesFieldItem + '背景柱子顶部', id: 'shadowTopColor' + seriesFieldItem,
type: 'pictorialBar', type: 'pictorialBar',
tooltip: { show: false }, tooltip: { show: false },
symbol: 'diamond', symbol: 'diamond',
@ -437,40 +426,51 @@ export default {
seriesStyle (config) { seriesStyle (config) {
const _config = CloneDeep(config) const _config = CloneDeep(config)
const seriesCustom = _config.option.seriesCustom const seriesCustom = _config.option.seriesCustom
// const ids = ['barTopColor', 'barColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
const ids = Object.keys(config.option.seriesCustom) const ids = Object.keys(config.option.seriesCustom)
// const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor'] const isGroup = _config.option.series.length !== 5
const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '') // 宽度配置
_config.option.series.forEach(item => {
if (item.type === 'pictorialBar') {
item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2]
} else if (item.type === 'bar') {
item.barWidth = seriesCustom.barWidth
}
})
// 颜色配置
// ids.forEach(id => {
// if (id !== 'barWidth') {
// let index = 0
// _config.option.series.forEach(item => {
// if (item.id.includes(id)) {
// item.color = _config.option.seriesCustom[id][index]
// index++
// }
// })
// }
// })
// 如果是基础柱状图 // 如果是基础柱状图
if (!hasSeries) { if (!isGroup) {
_config.option.series.forEach(item => { _config.option.series.forEach(item => {
// 配置颜色 // 配置颜色
if (ids.includes(item.id)) { if (ids.includes(item.id)) {
item.color = seriesCustom[item.id] item.color = seriesCustom[item.id]
} }
// 配置宽度 })
if (item.type === 'pictorialBar') { } else {
item.symbolSize = [seriesCustom.barWidth, seriesCustom.barWidth / 2] // 如果是分组柱状图
} else if (item.type === 'bar') { ids.forEach(id => {
item.barWidth = seriesCustom.barWidth if (id !== 'barWidth') {
let index = 0
_config.option.series.forEach(item => {
if (item.id.includes(id)) {
item.color = _config.option.seriesCustom[id][index]
index++
}
})
} }
}) })
} }
_config.option.series.forEach((item) => {
if (ids.includes(item.id)) {
item.color = _config.option.seriesCustom[item.id]
} else {
// item.itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: _config.option.seriesCustom.barColor1
// },
// {
// offset: 1,
// color: _config.option.seriesCustom.barColor2
// }
// ])
}
})
return _config return _config
}, },
// 组件的样式改变，返回改变后的config // 组件的样式改变，返回改变后的config

Write Preview
Loading…
Cancel
Save