大概是这种需求
配置
// 数值部分
const xAxisValue = ['3-26','3-28','3-29','4-3','4-8']; // x轴数值
const sleepTimeChart = {
// 顶部数值
afterAsleepArr:[51,58,53,31,32],
// 柱中百分比数值
afterAsleepPercent:[11,13,11,8,7]
}
// 配置部分
const option = {
backgroundColor: 'rgba(255, 255, 255, 1)',
grid: {
x: 30,
y: 10,
x2: 30,
y2: 35
},
xAxis: {
type: 'category',
// x轴数据
data: xAxisValue,
axisLabel: {
fontSize: 10,
color:'#333',
fontWeight:'bold',
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 10,
color:'#333',
fontWeight:'bold',
formatter: '{value}m'
},
axisLine:{
show:true,
},
},
series: [{
data: sleepTimeChart.afterAsleepArr,
type: "bar",
label: {
show: true,
formatter: (a)=>{
return sleepTimeChart.afterAsleepPercent[a.dataIndex]+'%'
},
},
itemStyle:{
color:'#1b4993'
},
markPoint: {
symbolSize: 0,
data: [{ coord: [0, sleepTimeChart.afterAsleepArr[0]] }, { coord: [1, sleepTimeChart.afterAsleepArr[1]] }, { coord: [2, sleepTimeChart.afterAsleepArr[2]] }, { coord: [3, sleepTimeChart.afterAsleepArr[3]] }, { coord: [4, sleepTimeChart.afterAsleepArr[4]] }, { coord: [5, sleepTimeChart.afterAsleepArr[5]] }, { coord: [6, sleepTimeChart.afterAsleepArr[6]] }],
label: {
fontSize:10,
fontWeight:"bold",
show: true,
position: 'top',
formatter: (a)=>{
return sleepTimeChart.afterAsleepArr[a.dataIndex]+'m'
},
}
},
}]
};