1. Echarts version
"echarts": "^5.3.3",
2. Coordinate axis setting reference: Echarts rectangular coordinate system x-axis y-axis property settings
3. Simple histogram
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
},
]
};
4. Each data item uses a different color, set colorBy: 'data'
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
colorBy: 'data', // 默认值为series，表示同一系列中的所有数据都是用相同的颜色；取值'data'，表示每个数据项都使用不同的颜色。
},
]
5. Column background setting
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
showBackground: true, // 是否显示柱条的背景色，默认不显示
},
{
type: 'bar',
data: [200, 300, 160, 100, 80, 180, 160],
showBackground: true, // 是否显示柱条的背景色，默认不显示
// 柱条的背景样式设置
backgroundStyle: {
color: 'rgba(333, 333, 0, 0.2)', // 柱条的颜色
borderColor: 'red', // 柱条的描边颜色
borderWidth: 1, // 柱条的描边宽度，默认不描边
borderType: 'dashed', // 柱条的描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
},
}
]
6. Label label setting
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 图形上的文本标签设置
label: {
show: true, // 是否显示标签。
position: 'top', // 标签位置
}
},
{
type: 'bar',
data: [200, 300, 160, 100, 80, 180, 160],
// 图形上的文本标签设置
label: {
show: true, // 是否显示标签。
rotate: 90, // 标签旋转。从 -90 度到 90 度。正值是逆时针。
color: '#FF00FF', // 文字颜色
fontStyle: 'italic', // 文字字体风格。可选：'normal', 'italic', 'oblique'
fontWeight: 'bold', // 文字字体粗细
fontSize: 14, // 文字字体大小
}
}
]
7. Graphic style
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 图形样式
itemStyle: {
color: '#00AAAA', // 柱条颜色
borderColor: '#FF00FF', // 柱条描边颜色
borderWidth: 2, // 柱条描边宽度，默认不描边
borderType: 'dashed', // 柱条描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
opacity: 0.5, // 透明度
}
},
]
8. Highlight graphic style and label style
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
// 高亮的图形样式和标签样式
emphasis: {
focus: 'series', // 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。默认值'none'不淡出其它图形，series' 聚焦当前高亮的数据所在的系列的所有图形，'self' 只聚焦（不淡出）当前高亮的数据的图形
label: {
show: true,
}
},
},
{
type: 'bar',
data: [200, 300, 160, 100, 80, 180, 160],
// 高亮的图形样式和标签样式
emphasis: {
focus: 'self', // 'self' 只聚焦（不淡出）当前高亮的数据的图形
label: {
show: true,
}
},
}
]
9. Stacked histogram
var option = {
legend: { // 图例
show: true,
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据1', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: '数据2',
type: 'bar',
stack: 'test1', // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。
data: [50, 60, 35, 40, 45, 55, 70],
},
{
name: '数据3',
type: 'bar',
stack: 'test1',
data: [40, 50, 80, 40, 60, 30, 55],
},
{
name: '数据4',
type: 'bar',
stack: 'test1',
data: [35, 55, 45, 60, 50, 40, 25],
},
{
name: '数据5',
type: 'bar',
stack: 'test2',
data: [80, 110, 120, 80, 50, 70, 110],
},
{
name: '数据6',
type: 'bar',
stack: 'test2',
data: [60, 80, 70, 100, 150, 120, 80],
}
]
}; 
10. Title and Legend Settings
var option = {
title: {
text: '柱状图属性设置大全', // 主标题
subtext: '模拟数据', // 副标题
// 主标题文本样式设置
textStyle: {
color: '#666',
fontWeight: 'bold',
fontSize: '20px',
},
// 副标题文本样式设置
subtextStyle: {
color: '#aaa',
fontWeight: 'normal',
fontSize: '14px',
},
// itemGap设置主副标题之间的纵向间距，单位px，默认为10
itemGap: 4,
// top指title组件离容器上侧的距离，取值可为具体像素如20, 也可为百分比如'20%', 也可以是'top', 'middle', 'bottom'
top: 4,
// left指title组件离容器左侧的距离，取值可为具体像素如20, 也可为百分比如'20%', 也可以是'left', 'center', 'right'
left: '50%',
// textAlign指主副标题水平对齐方式，默认左对齐，可选值：'auto'、'left'、'right'、'center'
textAlign: 'center',
},
legend: { // 图例
show: true,
bottom: 16,
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据1',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
},
{
name: '数据2',
type: 'bar',
data: [140, 300, 160, 100, 80, 120, 190],
},
],
};