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

feat:修复3D柱状图拖拽卡顿问题、3D分组柱状图颜色配置问题

Browse Source
main
zhu.yawen 2 years ago
parent 08fdd4ecb9
commit 6165797939
3 changed files with 177 additions and 173 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>
<template v-else-if="setting.type === 'colorSelect'">
<color-select
v-model="colorScheme"
v-model="setting.value"
@update="updateColorScheme"
/>
<div

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'
// 标题
@ -47,60 +46,66 @@ const setting = [
tabName: 'custom',
groupName: 'graph'
},
// {
// label: '柱子顶部颜色',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barTopColor', // 字段
// optionField: 'seriesCustom.barTopColor', // 对应options中的字段
// value: '#2DB1EF',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子颜色1',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barColor1', // 字段
// optionField: 'seriesCustom.barColor1', // 对应options中的字段
// value: '#115ba6',
// tabName: 'custom',
// groupName: 'graph'
// },
// {
// label: '柱子颜色2',
// type: 'colorPicker', // 设置组件类型
// field: 'seriesCustom_barColor2', // 字段
// optionField: 'seriesCustom.barColor2', // 对应options中的字段
// value: '#1db0dd',
// 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: 'colorSelect',
// 字段
field: 'seriesCustom_barTopColor',
// 对应options中的字段
optionField: 'seriesCustom.barTopColor',
value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'seriesCustom_barColor',
// 对应options中的字段
optionField: 'seriesCustom.barColor',
value: ['#1370a7', '#4ebebe', '#3864ab', '#9c9c46', '#a6404b', '#ac582c', '#719c33', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子底部颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'seriesCustom_barBottomColor',
// 对应options中的字段
optionField: 'seriesCustom.barBottomColor',
value: ['#0998d9', '#2ec6ad', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3', '#5B8FF9', '#61DDAA'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '阴影柱子颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'seriesCustom_shadowColor',
// 对应options中的字段
optionField: 'seriesCustom.shadowColor',
value: ['#082442', '#0e2e3c', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '阴影柱子顶部颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'seriesCustom_shadowTopColor',
// 对应options中的字段
optionField: 'seriesCustom.shadowTopColor',
value: ['#0e4481', '#1e637b', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签',
type: 'switch', // 设置组件类型
@ -627,15 +632,20 @@ const option = {
seriesCustom: {
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: [
{
@ -669,23 +679,24 @@ const option = {
type: 'bar',
barGap: '20%',
barWidth: 30,
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 // 阴影模糊值
// }
// },
label: {
show: true,
position: 'inside',
@ -700,23 +711,24 @@ const option = {
type: 'bar',
// barGap: '60%',
barWidth: 30,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#73eccd'
},
{
offset: 1,
color: '#4dd9e5'
}
]),
opacity: 0.8,
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
shadowBlur: 0 // 阴影模糊值
}
},
color: '#73eccd',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: '#73eccd'
// },
// {
// offset: 1,
// color: '#4dd9e5'
// }
// ]),
// opacity: 0.8,
// shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
// shadowBlur: 0 // 阴影模糊值
// }
// },
label: {
show: true,
position: 'inside',
@ -747,7 +759,7 @@ const option = {
symbolOffset: ['60%', 5],
zlevel: 2,
z: 15,
color: 'rgba(45, 206, 177,0.9)',
color: 'S',
data: yData2
},
{
@ -759,11 +771,7 @@ const option = {
data: maxData1,
zlevel: 1,
barWidth: 30,
itemStyle: {
normal: {
color: 'rgba(9, 44, 76,.8)'
}
}
color: 'rgba(9, 44, 76,.8)'
},
{
id: 'shadowColor2',
@ -774,11 +782,7 @@ const option = {
data: maxData2,
zlevel: 1,
barWidth: 30,
itemStyle: {
normal: {
color: 'rgba(16, 56, 70,.8)'
}
}
color: 'rgba(16, 56, 70,.8)'
},
{
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)
}
}
},
'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 () {
},
beforeDestroy () {
if (this.chart) {
@ -133,6 +118,7 @@ export default {
const chartDom = document.getElementById(this.chatId)
this.chart = echarts.init(chartDom)
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 = this.seriesStyle(config)
return config
},
getxDataAndYData (xField, yField, data, hasSeries) {
getxDataAndYData (xField, yField, data) {
let list = []
let xData = []
let yData = []
@ -280,7 +267,6 @@ export default {
// 使用城市名称作为键，覆盖旧数据，始终保留最后一条数据
uniqueData[item[xField]] = item
})
// 将唯一数据对象的值（即去重后的数据）转换回数组
list = Object.values(uniqueData)
xData = list.map(item => item[xField])
@ -293,8 +279,9 @@ export default {
// 分组字段
const xField = config.setting.find(item => item.optionField === 'xField')?.value
const yField = config.setting.find(item => item.optionField === 'yField')?.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 shadowData = Array.from({ length: xData.length }, () => maxY)
@ -304,14 +291,15 @@ export default {
data: xData
}
})
// 判断是否存在分组字段
// 存在分组字段
if (hasSeries) {
const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
option.series = []
const barWidth = option.seriesCustom.barWidth
// 偏移量数组
const offsetArr = []
let index = 0
let barWidth = 10
if (seriesFieldList.length % 2 === 0) {
const length = seriesFieldList.length / 2
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 seriesItem = [
{
name: seriesFieldItem + '柱子顶部',
id: 'barTopColor' + seriesFieldItem,
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -348,27 +336,28 @@ export default {
data: seriesData
},
{
name: seriesFieldItem,
id: 'barColor' + seriesFieldItem,
type: 'bar',
barGap: '20%',
barWidth: barWidth,
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 // 阴影模糊值
// }
// },
label: {
show: false
@ -378,7 +367,7 @@ export default {
data: seriesData
},
{
name: seriesFieldItem + '柱子底部',
id: 'barBottomColor' + seriesFieldItem,
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -390,7 +379,7 @@ export default {
data: seriesData
},
{
name: seriesFieldItem + '背景柱子',
id: 'shadowColor' + seriesFieldItem,
type: 'bar',
tooltip: { show: false },
xAxisIndex: 1,
@ -405,7 +394,7 @@ export default {
}
},
{
name: seriesFieldItem + '背景柱子顶部',
id: 'shadowTopColor' + seriesFieldItem,
type: 'pictorialBar',
tooltip: { show: false },
symbol: 'diamond',
@ -437,40 +426,51 @@ export default {
seriesStyle (config) {
const _config = CloneDeep(config)
const seriesCustom = _config.option.seriesCustom
// const ids = ['barTopColor', 'barColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
const ids = Object.keys(config.option.seriesCustom)
// const ids = ['barTopColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
const hasSeries = _config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
const isGroup = _config.option.series.length !== 5
// 宽度配置
_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 => {
// 配置颜色
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
})
} else {
// 如果是分组柱状图
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++
}
})
}
})
}
_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
},
// 组件的样式改变，返回改变后的config

Write Preview
Loading…
Cancel
Save