option = {
color: ['#00da9c', '#005193', '#deb434', '#5fb878', '#ffb980', '#d87a80', '#23c6c8'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
//控制整体布局
left: '10%',
right: '10%',
bottom: '15%',
top: '5%',
containLabel: true,
},
legend: {
data: ['前年', '去年', '今年', '平均'],
align: 'right',
right: 10,
textStyle: {
color: '#999999',
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35,
},
xAxis: {
type: 'category',
data: ['10月', '11月', '12月', '1月'],
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#DFE3E9', // x轴颜色
width: 1, // 粗细
},
},
axisLabel: {
color: '#999999', // x轴刻度名称颜色
interval: 0, //代表显示所有x轴标签显示
rotate: 45, //代表逆时针旋转45度
},
splitArea: {
show: true,
interval: 0,
areaStyle: {
color: ['#f3f2f2', '#eceaea'],
},
},
},
yAxis: [
{
type: 'value',
axisLabel: {
color: '#999999', // y轴刻度名称颜色
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
axisTick: {
//y轴刻度线
show: false,
},
axisLine: {
//y轴
show: false,
},
},
],
series: [
{
name: '前年',
type: 'bar',
barGap: 0,
// barWidth : 30,//柱图宽度
barMaxWidth:30,//最大宽度
data: [230, 180, 80, 130],
},
{
name: '去年',
type: 'bar',
barGap: 0,
data: [220, 154, 90, 150],
},
{
name: '今年',
type: 'bar',
barGap: 0,
data: [220, 130, 90, 180],
},
],
};
echarts 多柱状图 不同背景色设置 柱图间隔为空(柱子的宽度)
于 2021-04-26 14:10:55 首次发布