效果图
要修改的就是xAxis 里面的内容 arr2.legend是标题的数组 内容是一月到十二月
xAxis: [
{
type: 'category',
data: arr2.legend,
axisLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(208, 255, 246, 0.7)'
}
}
},
{
position: 'top', // 将分组x轴位置定至顶部
offset: 0, // 偏移,使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 200, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接,默认在轴线下方
lineStyle: { color: '#D0FFF6' }, // 分组刻度线颜色
interval(index, value) {
console.log(index, 11, new Date().getMonth())
if (new Date().getMonth() != 11) {
return index === new Date().getMonth() + 1 || index === 0
}
}
},
axisLabel: {
inside: true, // 使刻度名称相对轴线在上面与原x轴相接,默认在轴线下方
interval: 0, // 强制显示全部刻度名
color: '#fff',
formatter(val, index) {
var _wid = window.innerWidth / 1200 // 1200这个数字请自行对着自己项目页面调试
var _pla = new Array(Number(_wid.toFixed(0))).fill(' ')
if (index === new Date().getMonth()) {
return _pla.join('') + new Date().getFullYear() + '年' // 今年
} else if (index === new Date().getMonth() + 1) {
const Year = new Date().getFullYear() - 1 // +是下一年 -是上一年
return _pla.join('') + Year + '年'
} else {
return ''
}
}
},
data: arr2.legend
}
],