echarts的X轴的标题字多遮挡拥挤密集的解决办法又三种
让x轴字体倾斜
设置dataZoom滚动条
可以控制坐标轴分割间隔
让x轴字体倾斜，这个简单 ，可以查一下文档
2.设置dataZoom滚动条 参考实例 https://echarts.apache.org/examples/zh/editor.html?c=area-time-axis
var base = +new Date(1988, 9, 3);
var oneDay = 24 * 3600 * 1000;
var data = [[base, Math.random() * 300]];
for (var i = 1; i < 20000; i++) {
var now = new Date(base += oneDay);
data.push([
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
]);
}
option = {
title: {
left: 'center',
text: '大数据量面积图',
},
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
dataZoom: [{
type: 'inside',
start: 0,
end: 20
}, {
start: 0,
end: 20
}],
series: [
{
name: '模拟数据',
type: 'line',
symbol: 'none',
data: data
}
]
};3. 控制x轴间隔
xAxis.interval number
强制设置坐标轴分割间隔。
因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。
无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。