echarts柱状图上显示数值

最新推荐文章于 2025-05-30 08:59:48 发布

ZERO960303

最新推荐文章于 2025-05-30 08:59:48 发布

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_30944053/article/details/83826250

本文详细解析了ECharts图表配置的各个参数，包括x轴、y轴、系列数据的设置，以及如何通过itemStyle定制样式，如标签显示、颜色设置等。通过具体示例，展示了如何创建一个带有阴影提示的柱状图，并对坐标轴刻度进行对齐优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#800080'
}
}
}
},
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};

app.title = '坐标轴刻度与标签对齐';

option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#800080'
}
}
}
},
barWidth: '20%',
data:[10000, 20000]
}
]
};