一、如何设置echarts柱状图的宽度
在echarts中，可以通过设置series中的itemStyle.normal.barWidth属性来调整柱状图的宽度。该属性的值可以是一个数值，也可以是一个百分数。如果设置为某个数值，则所有柱子的宽度都将被设置为该值；如果设置为一个百分数，则柱子的宽度将按照屏幕宽度进行缩放。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
barWidth: 30 // 设置柱子宽度为30
}
}
}]
};
二、如何设置echarts柱状图的边框
设置柱状图的边框可以在itemStyle.normal中设置borderColor和borderWidth属性，分别代表边框颜色和边框宽度。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
borderColor: 'red', // 设置边框颜色为红色
borderWidth: 2 // 设置边框宽度为2
}
}
}]
};
三、如何让echarts柱状图倾斜
可以通过设置label.normal.rotate属性，将柱状图倾斜。该属性的值为一个角度值，如果值为正数则代表逆时针旋转，否则代表顺时针旋转。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
normal: {
rotate: -30 // 将标签旋转30度
}
}
}]
};
四、如何调整echarts柱状图的宽度和间距
可以通过系列间距和柱间距来控制柱状图的宽度和间距。系列间距可以在grid中设置，柱间距可以在xAxis中设置。它们的值都是一个百分数。
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: -30 // 将标签旋转30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 设置柱间距为系列宽度的30%
barCategoryGap: '20%' // 设置系列间距为柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 设置柱宽为系列宽度的50%
itemStyle: {
normal: {
color: '#54C0B0'
}
}
}]
};
五、如何更好的呈现echarts柱状图的数据格式
可以通过给柱状图添加标签，来更好地呈现数据格式。既可以在xAxis中设置axisLabel.show属性为false，然后在series中设置label.normal.show属性为true，也可以在xAxis中设置axisLabel.show属性为true，然后在series中设置label.normal.position属性来控制标签的位置。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
show: false // 不显示标签
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 设置柱间距为系列宽度的30%
barCategoryGap: '20%' // 设置系列间距为柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 设置柱宽为系列宽度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠标悬停时的颜色
},
label: {
normal: {
show: true, // 显示标签
position: 'top' // 标签位置设置为顶部
}
}
}]
};
六、如何设置echarts横向柱状图的间距
横向柱状图的间距设置和竖向柱状图类似，不同的只是xAxis和yAxis的设置。其中，xAxis代表y轴，yAxis代表x轴。
option = {
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: -30 // 将标签旋转30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 设置柱间距为系列宽度的30%
barCategoryGap: '20%' // 设置系列间距为柱的20%
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 设置柱宽为系列宽度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠标悬停时的颜色
},
label: {
normal: {
show: true, // 显示标签
position: 'right' // 标签位置设置为右侧
}
}
}]
};
七、如何选取echarts柱状图数据过多的情况下的数据
在数据过多的情况下，可以通过xAxis中的axisLabel.interval属性来设置显示步长。如果数据比较密集，可以适当调小步长，如果数据比较稀疏，可以适当调大步长。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: -30 // 将标签旋转30度
},
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#999999'
}
},
boundaryGap: true, // 首尾柱子是否留白
barGap: '30%', // 设置柱间距为系列宽度的30%
barCategoryGap: '20%' // 设置系列间距为柱的20%
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
splitLine: {
lineStyle: {
color: '#D9D9D9'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '50%', // 设置柱宽为系列宽度的50%
itemStyle: {
normal: {
color: '#54C0B0'
},
emphasis: {
color: '#76D7C4'
} // 鼠标悬停时的颜色
},
label: {
normal: {
show: true, // 显示标签
position: 'top' // 标签位置设置为顶部
}
}
}]
};
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188738.html
微信扫一扫 
支付宝扫一扫 