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')中需要传指数值。