echarts地址：http://echarts.baidu.com

 

一、解决ECharts 因X轴数据过多导致重叠显示不全的问题

https://blog.csdn.net/kebi007/article/details/68488694

https://blog.csdn.net/Zheng_xiao_xin/article/details/80882113

 

解决方法1：

文字竖排：

axisLabel: {

interval: 0,

formatter:function(value)

{

return value.split("").join("\n");

}

｝

 

方法2：

倾斜文字

axisLabel: {

interval:0,

rotate:40

｝

 

方法3：

使用grid

grid: {

left: '10%',

bottom:'35%'

｝

 

以上方法，也只是在少量条目的时候使用可以，如果条目实在太多，依然是解决不了的。就用方法4

 

方法4：

X轴 加滚动条

option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

},

yAxis: {

type: 'value'

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line'

}],

dataZoom:{

realtime:true, //拖动滚动条时是否动态的更新图表数据

height:25,//滚动条高度

start:40,//滚动条开始位置（共100等份）

end:65//结束位置（共100等份）

} };

 

 

滚动条我还没尝试，不止可否在一个页面显示多个图时使用。