效果如下:
主要代码:
option = {
grid: {
left: "5%", //左边距
right: "5%", //走边距
top: "5%", //上边距
bottom: "5%", //下边距
containLabel: true,
},
xAxis: {
type: "category",
// splitLine:{ // 去除网格线
// show: false
// },
axisTick: {
show: true,
boundaryGap: true,
alignWithLabel: true,
},
axisLabel: {
interval: 0,
rotate: 45, //文字逆时针旋转45°
textStyle: {
//文字样式
color: "#1099CD",
},
formatter: function (value) {
// debugger
var ret = ""; // 拼接加\n返回的类目项
var maxLength = 2; // 每项显示文字个数
var valLength = value.length; // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
if (rowN > 1) {
// 如果类目项的文字大于3,
for (var i = 0; i < rowN; i++) {
var temp = ""; // 每次截取的字符串
var start = i * maxLength; // 开始截取的位置
var end = start + maxLength; // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; // 凭借最终的字符串
}
return ret;
} else {
return value;
}
},
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#1099CD',
width: '1'
}
},
data: [
"如皋",
"如东",
"启动",
"海安",
"苏锡通",
"通州湾",
"海门",
"中创",
"开发",
"通州",
"崇川",
],
},
yAxis: {
type: "value",
splitLine: {
// 去除网格线
show: false,
},
axisTick: {
show: true,
},
axisLabel: {
color: "#1099CD",
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#1099CD',
width: '1'
}
}
},
series: [
{
data: [90, 88, 85, 75, 70, 65, 60, 55, 50, 40, 30],
barWidth: 15, // 柱状粗细
label: {
show: true,
position: "top",
color: "#1099CD",
},
type: "bar",
markLine: {
/*以下设置一行后,平均线就没有开始和结束标记了(即看不见箭头了)*/
symbol: "none",
data: [
{
name: "平均线",
// 支持 'average', 'min', 'max'
// type: "average",
yAxis: 40,
lineStyle: {
normal: {
color: "#5AAEF4",
width: 2,
type: "dashed",
},
},
},
],
},
itemStyle: { // 柱状颜色
normal: {
color: function (params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = [
"#0274F8",
"#5AAEF4",
"#61D9AC",
"#5B6E96",
"#A8DFFB",
"#FFDC4C",
"#FF974D",
"#E55A55",
"#6D62E4",
"#4A6FE2",
"#FF974S",
"#6C9AE6",
];
var index;
//给大于颜色数量的柱体添加循环颜色的判断
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
return colorList[index];
}
return colorList[params.dataIndex % colorList.length];
},
},
},
},
],
};