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

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

@ -182,24 +182,44 @@ export default {
} }
return config 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 // echarts
echartsOptionFormatting (config, data) { echartsOptionFormatting (config, data) {
const option = config.option const option = config.option
// //
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 xData = [...new Set(data.map(item => item[xField]))] const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
const yData = data.map(item => item[yField]) 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 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 => { option.xAxis = option.xAxis.map(item => {
return { return {
...item, ...item,
data: xData data: xData
} }
}) })
const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
// //
if (hasSeries) { if (hasSeries) {
const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
@ -295,12 +315,105 @@ export default {
option.series.push(...seriesItem) option.series.push(...seriesItem)
} }
} else { } else {
option.series = option.series.map(item => { option.series = [
return { {
...item, 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 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 return option
}, },

Loading…
Cancel
Save