配置项如下
let data = {
title: ['蒸发量111', '降水量'],
dataX: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dataY: [
[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 11, 22],
[12.0, 14.9, 17.0, 23.2, 235.6, 176.7, 15.6, 12.2, 12.6, 50.0, 22, 11],
]
}
//计算最大值
const calMax = (arr) => {
let max = 0;
arr.forEach((el) => {
if (max < el) {
max = el;
}
})
let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度
let maxval = maxint * 10; //让显示的刻度是整数
return maxval;
}
let type = 'line' //bar
let maxArray = []
let list = data.dataY.map((item, index) => {
maxArray.push(calMax(data.dataY[index]))
let mod = {
name: data.title[index],
type: type,
data: data.dataY[index],
markPoint: {
// data: [
// // { type: 'max', name: '最大值' },
// // { type: 'min', name: '最小值' }
// ]
},
markLine: {
// data: [
// // { type: 'average', name: '平均值' }
// ]
}
}
return mod
})
option = {
tooltip: {
trigger: 'axis'
},
color: ['#4C84FF', '#9A47FF', '#FF884C', '#13C2C2', '#F04864', '#FACC14', '#2FC25B', '#66B5FF'],
legend: {
orient: 'horizontal',
data: data.title,
bottom: 0,
},
grid: {
x: 60,
y: 44,
x2: 60,
y2: 64,
},
calculable: true,
xAxis: [{
type: 'category',
data: data.dataX,
lineStyle: {
color: '#145617',
width: 1
},
padding: 50,
// 横坐标间隔
axisLabel: {
interval: 0,
}
}, ],
yAxis: [{
type: 'value',
// 解决出现小数问题
max: calMax(maxArray),
interval: calMax(maxArray) / 5,
min: 0
}],
series: list
};