echarts y轴只显示5个刻度_Echarts 双Y轴刻度不一致

项目中使用了 百度Echarts

根据项目需要，要实现双Y轴展示柱状图

最终的样子是这样的

最终效果

实现过程中遇到的问题

一开始是这个样子的(因为没有设置max min，天真的以为只要有数据，就会系统均分，万万没想到，出现左右刻度不重合现象，what ~~)

类似官网这个例子

闲言碎语不要讲，开始正文，开发中问题总结

①x轴 文字太长 展示不全

解决方法：(大致思路就是让文字倾斜)

grid: {

y2: 140

},

xAxis: {

data: [],

axisLabel: {

interval: 0,//横轴信息全部显示

rotate: -30,//-30度角倾斜显示

}

},

②对于动态数据，如何定义右侧Y轴的刻度

解决方法： 翻来覆去，终于在github 的issue上看到，貌似echart3.0需要自己去定义 max，min，interval。系统不再自动计算适配。

既然这样，那就计算呗，根据项目需要，在这一块

yAxis:[

{......},

{

type: 'value',

name: '销售额(元)',

min: 0,

max: max, // 计算最大值

interval: Math.ceil(max / 5), // 平均分为5份

axisLabel: {

formatter: '{value}'

}

]

小插曲：由于两侧都是动态数据，测试时候发现，左侧Y轴有时候会变为6份或者更多份。妹的，那就乱套了，左右Y轴不对应。那就固定起来，将左侧也固定为 5份。具体方法同上(计算max min interval)

基本就能解决了

that's all

番外篇：

控制图表与外部容器之间的间距

image.png

options : {

//...

grid : {

left: 40, //距离容器左边界40像素

right: 30 //距离容器右边界30像素

}

}

实现图表的宽度随着屏幕宽度的改变而改变

在setoption之后添加这段代码：

window.onresize = myChart.resize;