PHP
echarts折线图解决横坐标过多产生折叠,同时保留拐点显示
echarts折线图解决横坐标过多产生折叠,同时保留拐点显示
博主今天在实现一个功能的时候,用到了echarts折线图来实现,由于博主公司的打点间隔比较密,每10分钟一次,所以一天下来,数据也是很多,从而导致了横坐标数据太多,所以博主就想横坐标间隔显示,但是这样又发现了一个问题,那就是折线图的拐点一些却没显示,所以博主也是百度谷歌搜索一翻,都没有,最后在文档中发现了一个配置,最终搞定,所以下面跟大家分享如何配置。
首先如果横坐标太长被隐藏,可以通过在option配置数组配置如下:
grid: { left: '10%', bottom:'40%' },
横坐标太多,我们可以通过倾斜,并且设置间隔来放更多,在xAxis配置数组下配置如下:
axisLabel:{ show:true, interval:2, rotate:60 , }
我们想配置拐点,并且显示全部拐点,可以在series配置如下配置:
itemStyle : { normal: {label : {show: true}}}, showAllSymbol:true
这样我们就成功的解决了这个难题,以下是博主的最终效果图:
小伙伴们可以尝试博主的方法~
0条评论