fix:优化3d单柱组件的数据配置

main
liu.shiyi 2 years ago
parent c9e22a1d95
commit 0f98cc02a0

@ -182,24 +182,44 @@ export default {
}
return config
},
getxDataAndYData (xField, yField, data, hasSeries) {
let list = []
let xData = []
let yData = []
const uniqueData = {}
//
data.forEach((item) => {
// 使
uniqueData[item[xField]] = item
})
//
list = Object.values(uniqueData)
xData = list.map(item => item[xField])
yData = list.map(item => item[yField])
return { xData, yData }
},
// echarts
echartsOptionFormatting (config, data) {
const option = config.option
//
const xField = config.setting.find(item => item.optionField === 'xField')?.value
const yField = config.setting.find(item => item.optionField === 'yField')?.value
const xData = [...new Set(data.map(item => item[xField]))]
const yData = data.map(item => item[yField])
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
const { xData, yData } = this.getxDataAndYData(xField, yField, data, hasSeries)
// const xData = [...new Set(data.map(item => item[xField]))]
// const yData = data.map(item => item[yField])
const maxY = Math.max(...yData)
//
const shadowData = Array.from({ length: xField.length }, () => maxY)
const shadowData = Array.from({ length: xData.length }, () => maxY)
option.xAxis = option.xAxis.map(item => {
return {
...item,
data: xData
}
})
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
//
if (hasSeries) {
const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
@ -295,12 +315,105 @@ export default {
option.series.push(...seriesItem)
}
} else {
option.series = option.series.map(item => {
return {
...item,
option.series = [
{
type: 'pictorialBar', //
symbol: 'diamond',
symbolOffset: [0, '-50%'], //
symbolSize: [30, 15],
// symbolOffset: [0, -6], //
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: true,
position: 'top',
fontSize: 15,
fontWeight: 'bold',
color: '#27a7ce'
}
},
color: '#2DB1EF',
data: yData
},
{
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [30, 15],
symbolOffset: ['0%', '50%'], //
// symbolOffset: [0, 7], //
z: 12,
color: '#187dcb',
data: yData
},
{
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 //
}
},
data: yData
},
{
type: 'bar',
barWidth: 30,
xAxisIndex: 1,
itemStyle: {
normal: {
color: '#041133',
opacity: 0.8,
shadowColor: 'rgba(0, 0, 0, 0.5)', //
shadowBlur: 0 //
}
},
label: {
show: false
},
tooltip: {
show: false
},
data: shadowData
},
{
type: 'pictorialBar', //
xAxisIndex: 1,
symbol: 'diamond',
symbolOffset: [0, '-50%'], //
symbolSize: [30, 15],
// symbolOffset: [0, -6], //
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: false,
position: 'top',
fontSize: 15,
fontWeight: 'bold',
color: '#27a7ce'
}
},
color: '#142f5a',
tooltip: {
show: false
},
data: shadowData
}
})
]
}
return option
},

Loading…
Cancel
Save