显示效果
关键代码
xAxis: {
axisLabel: {
show: true,
rotate: 35,//35度角倾斜显示
},
},
完全代码
var optSaleType = {
title: {
text: '',
textStyle: {
color: '#000',
fontSize: 14
}
},
tooltip: {},
grid: {
left: '0',
right: '0',
bottom: '0',
containLabel: true,
},
xAxis: {
axisLabel: {
show: true,
interval: 0,//横轴信息全部显示
rotate: 35,//-30度角倾斜显示
textStyle: {
rich: {}
}
},
data: data.names,
axisLine: {
lineStyle: {
color: '#cccccc'
}
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#cccccc'
}
},
splitLine: {
lineStyle: {
type: 'solid' ,
color: '#cccccc' , //左边线的颜色
width: '1' //坐标线的宽度
}
},
},
series: [{
type: 'bar',
data: data.counts,
barMaxWidth: 25,
color: '#f3795b',
itemStyle: {
normal: {
barBorderRadius:[5, 5 , 0, 0],
color: function (params) {
var colorList = [
['#90bfe5','#4178e5'],
['#7bf1b6','#3dc886'],
];
if (level_saletype > 1) {
colorList = [
['#fab2ff','#9f7ef4'],
['#ffeb90','#ffe25c'],
['#fe6f88','#ffd3a5'],
];
}
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 1,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
}
},
},
}]
};
chartSaleType.setOption(optSaleType);
完全代码整体展示只作参考作用,只用关心核心代码即可