话不多说,先上图表:
实现该图表的核心代码:
let option = {
title: {
text: '高三各班级人数表',
x: 'center'
},
legend: {
y: 'bottom',
x: 'center',
width: 300,
height: 400,
itemGap: 20,
align: 'left'
},
tooltip: {},
xAxis: [
{
type: 'category',
data: ['高三']
}
],
yAxis: [
{
type: 'value',
}
],
grid: {
left: '6%',
right: '4%',
bottom: '29%',
},
color: ['rgb(237,125,49)', 'rgb(165,165,165)', 'rgb(255,192,0)', 'rgb(68,115,197)', 'rgb(112,173,70)', 'rgb(37,95,145)', 'rgb(158,72,13)', 'rgb(99,99,99)', 'rgb(152,115,0)', 'rgb(38,68,120)'],
series: [
{
type: 'bar',
name: '一班',
emphasis: {
focus: 'series'
},
data: [75]
},
{
type: 'bar',
name: '二班',
emphasis: {
focus: 'series'
},
data: [70]
},
{
type: 'bar',
name: '三班',
emphasis: {
focus: 'series'
},
data: [70]
},
{
type: 'bar',
name: '四班',
emphasis: {
focus: 'series'
},
data: [65]
},
{
type: 'bar',
name: '五班',
emphasis: {
focus: 'series'
},
data: [60]
},
{
type: 'bar',
name: '六班',
emphasis: {
focus: 'series'
},
data: [60]
},
{
type: 'bar',
name: '七班',
emphasis: {
focus: 'series'
},
data: [58]
},
{
type: 'bar',
name: '八班',
emphasis: {
focus: 'series'
},
data: [55]
},
{
type: 'bar',
name: '九班',
emphasis: {
focus: 'series'
},
data: [50]
}, {
type: 'bar',
name: '十班',
emphasis: {
focus: 'series'
},
data: [54]
}]
};
option && myChart.setOption(option);
注意点:如果图例的个数比较少,x轴文字与图例之间的空白有点大,可以根据自己的图例个数进行调整:grid下的bottom