效果图如下:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
itemHeight: 10,
itemWidth: 10,
icon: 'rect', // 修改形状
color: '#595959',
x: 'right', //可设定图例在左、右、居中
y: 'top',
right: 20,
top: 10,
},
grid: {
left: 10, // 图标距离左侧的位置
right: 10,// 图标距离右侧的位置
bottom: 10,// 图标距离底部的位置
containLabel: true, // 文字自适应显示不被遮挡
},
xAxis: {
type: 'value',
// 坐标 轴线
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#ddd',
},
},
//坐标轴样式
axisLabel: {
show: true,
textStyle: {
color: '#595959',
fontSize: 12,
// fontWeight: 'bold',
},
},
},
yAxis: {
name: '单位:节',
nameTextStyle: {
color: '#595959',
// fontSize:16,
// padding:10
},
type: 'category',
data: ['语文', '数学', '英语', '体育'],
// 坐标刻度线
axisTick: {
show: false,
lineStyle: {
type: 'solid', //y轴分割线类型
color: '#eee',//y轴分割线颜色
width: 1,//y轴分割线宽度
},
},
// 坐标 轴线
axisLine: {
show: true,
lineStyle: {
type: 'solid',//y轴轴线类型
color: '#ddd',//y轴轴线颜色
},
},
//坐标轴样式
axisLabel: {
show: true,
textStyle: {
color: '#595959',//y轴label字体颜色
fontSize: 12,//y轴label字体大小
},
},
},
series: [
{
name: '1',
type: 'bar',
stack: 'total',
barWidth: '20',// 柱子高度
label: {
show: true,
position: 'inside',
// 柱子label显示位置
// 外部:top(外部正上方)、bottom(外部正下方)、left(外部左边)、right (外部右边)
// 内部:inside(内部中央)、insideTop(内部靠顶部)、insideBottom(内部靠下方)、insideRight(内部靠右边)、insideLeft(内部靠左边)
textStyle: {
color: '#fff',// 柱子label字体颜色
},
},
color: '#3BDAFF', // 柱子颜色
data: [10, 12, 19, 34],
},
{
name: '2',
type: 'bar',
stack: 'total',
barWidth: '10',
label: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
},
},
color: '#009EFF',
data: [82, 83, 90, 93],
},
{
name: '3',
type: 'bar',
stack: 'total',
barWidth: '10',
label: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
},
},
color: '#0073FF',
data: [80, 82, 91, 94],
},
{
name: '4',
type: 'bar',
stack: 'total',
barWidth: '10',
label: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
},
},
color: '#2218FF',
data: [82, 82, 61, 34],
},
],
}